{
 "version": "0.4",
 "meta": {
  "title": "AnimJS website hero: Describe it. Watch it move.",
  "size": [
   1440,
   720
  ],
  "fps": 30,
  "loop": true,
  "theme": {
   "bg": "#070b1a",
   "font": "sans",
   "colors": {
    "text": "#f4f6ff",
    "muted": "#9aa6c7",
    "accent": "#4fd1c5",
    "pop": "#ff8a3d",
    "violet": "#7c5cff",
    "panel": "#1a2244"
   }
  }
 },
 "entities": [
  {
   "id": "glow-a",
   "kind": "node",
   "about": "soft violet background glow",
   "shape": "orb",
   "size": 280,
   "color": "violet",
   "opacity": 0.28,
   "blur": 60,
   "fx": {
    "float": 14
   },
   "place": {
    "at": [
     "18%",
     "25%"
    ]
   },
   "within": "none"
  },
  {
   "id": "glow-b",
   "kind": "node",
   "about": "soft teal background glow",
   "shape": "orb",
   "size": 340,
   "color": "accent",
   "opacity": 0.18,
   "blur": 80,
   "fx": {
    "float": 18
   },
   "place": {
    "at": [
     "86%",
     "82%"
    ]
   },
   "within": "none"
  },
  {
   "id": "sparks",
   "kind": "node",
   "about": "scattered background sparkles (deterministic, seeded)",
   "shape": "orb",
   "size": 3,
   "color": "accent",
   "opacity": 0.55,
   "within": "none",
   "fx": {
    "float": 6
   },
   "repeat": {
    "n": 24,
    "cols": 8,
    "spacing": [
     170,
     140
    ],
    "jitter": {
     "amount": 46,
     "seed": 7
    }
   },
   "place": {
    "at": [
     "50%",
     "50%"
    ]
   }
  },
  {
   "id": "headline",
   "kind": "text",
   "about": "main hero headline",
   "text": "Describe it.\nWatch it move.",
   "size": 72,
   "weight": "bold",
   "color": "text",
   "place": {
    "at": [
     "50%",
     "30%"
    ]
   }
  },
  {
   "id": "sub",
   "kind": "text",
   "about": "supporting line under the headline",
   "text": "AnimJS turns a sentence into an animated explainer\nor a website hero, ready to embed.",
   "size": 28,
   "color": "muted",
   "place": {
    "rel": {
     "to": "headline",
     "side": "below",
     "gap": 28
    }
   }
  },
  {
   "id": "cta",
   "kind": "node",
   "about": "primary call-to-action button",
   "shape": "pill",
   "label": "Try it free",
   "size": 30,
   "color": "accent",
   "fx": {
    "breathe": 0.03
   },
   "place": {
    "rel": {
     "to": "sub",
     "side": "below",
     "gap": 36
    }
   }
  },
  {
   "id": "steps",
   "kind": "group",
   "about": "three-step how-it-works strip",
   "arrange": {
    "type": "row",
    "gap": 90
   },
   "place": {
    "at": [
     "50%",
     "86%"
    ]
   }
  },
  {
   "id": "step-1",
   "kind": "node",
   "parent": "steps",
   "shape": "pill",
   "label": "Describe",
   "size": 24,
   "color": "panel"
  },
  {
   "id": "step-2",
   "kind": "node",
   "parent": "steps",
   "shape": "pill",
   "label": "Animate",
   "size": 24,
   "color": "panel"
  },
  {
   "id": "step-3",
   "kind": "node",
   "parent": "steps",
   "shape": "pill",
   "label": "Export",
   "size": 24,
   "color": "panel"
  }
 ],
 "relations": [
  {
   "id": "r-1-2",
   "type": "flows-to",
   "from": "step-1",
   "to": "step-2",
   "color": "muted"
  },
  {
   "id": "r-2-3",
   "type": "flows-to",
   "from": "step-2",
   "to": "step-3",
   "color": "muted"
  }
 ],
 "beats": [
  {
   "id": "b-headline",
   "dur": 1.6,
   "do": [
    {
     "id": "a-headline",
     "do": "show",
     "t": "headline",
     "how": "rise",
     "dur": 0.9
    }
   ]
  },
  {
   "id": "b-sub",
   "dur": 1.2,
   "do": [
    {
     "id": "a-sub",
     "do": "show",
     "t": "sub",
     "how": "fade",
     "dur": 0.8
    }
   ]
  },
  {
   "id": "b-cta",
   "dur": 1.2,
   "do": [
    {
     "id": "a-cta",
     "do": "show",
     "t": "cta",
     "how": "pop",
     "dur": 0.6
    }
   ]
  },
  {
   "id": "b-steps",
   "dur": 2.6,
   "do": [
    {
     "id": "a-steps",
     "do": "show",
     "t": [
      "step-1",
      "step-2",
      "step-3"
     ],
     "how": "pop",
     "dur": 0.5,
     "stagger": 0.5
    }
   ]
  },
  {
   "id": "b-hold",
   "dur": 2.4
  }
 ]
}