appostle-installer 0.0.86 → 0.0.87

package/dist/schema-templates/prose/animations.md

@@ -1,3833 +0,0 @@
----
-description: Animation library — per-prompt toggles drawn from the bundled animations-library. Each enabled entry becomes a candidate the animator role may implement on the site, subject to brand motion tokens and the site context.
-variables:
-  - key: animations.sticky_card_stacks.enabled
-    type: text
-    label: "Sticky Card Stacks — enable category"
-    value: ""
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.1
-    type: text
-    label: "[stack] Pin the section so it stays in place while the user scrolls — each card in the stack slides up from below and lands on top of the previous one, slightly offset, as if being dealt onto a table one by one."
-    value: "Pin the section so it stays in place while the user scrolls — each card in the stack slides up from below and lands on top of the previous one, slightly offset, as if being dealt onto a table one by one."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.2
-    type: text
-    label: "[depth] As each new card arrives on scroll, push the card underneath it back in 3D space — scaling it down and darkening it slightly — so the stack feels like it has real physical depth, with the freshest card always closest to the viewer."
-    value: "As each new card arrives on scroll, push the card underneath it back in 3D space — scaling it down and darkening it slightly — so the stack feels like it has real physical depth, with the freshest card always closest to the viewer."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.3
-    type: text
-    label: "[reveal] Stack three feature cards on top of each other at the start."
-    value: "Stack three feature cards on top of each other at the start. As the user scrolls through the pinned section, each card peels away from the bottom of the stack and slides off to the left, revealing the one beneath it."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.4
-    type: text
-    label: "[exit] Each card in the stack has its own scroll range — once you've scrolled past a card's content window, it shrinks and slides upward off the top of the stack, collapsing the pile progressively as you move through the section."
-    value: "Each card in the stack has its own scroll range — once you've scrolled past a card's content window, it shrinks and slides upward off the top of the stack, collapsing the pile progressively as you move through the section."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.5
-    type: text
-    label: "[text] The section stays pinned and a headline text changes for each card — as one card scrolls under the next, the outgoing headline splits into characters that scatter upward while the incoming headline assembles from below, letter by letter."
-    value: "The section stays pinned and a headline text changes for each card — as one card scrolls under the next, the outgoing headline splits into characters that scatter upward while the incoming headline assembles from below, letter by letter."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.6
-    type: text
-    label: "[stack] Make a pricing tier section where all three plan cards are stacked directly on top of each other."
-    value: "Make a pricing tier section where all three plan cards are stacked directly on top of each other. Scrolling fans them out into a side-by-side layout, each card sliding to its final position with a staggered delay and a gentle spring overshoot."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.7
-    type: text
-    label: "[layer] Pin a section with five layered cards, each a different background color."
-    value: "Pin a section with five layered cards, each a different background color. As the user scrolls, each card slides away to reveal the next, and the background color of the entire section crossfades to match the incoming card's palette."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.8
-    type: text
-    label: "[depth] Stack cards with a perspective tilt — cards further back in the pile are rotated slightly on the X axis so the stack looks like it's leaning away from you."
-    value: "Stack cards with a perspective tilt — cards further back in the pile are rotated slightly on the X axis so the stack looks like it's leaning away from you. As each card exits the top, the rest tilt forward one step to close the gap."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.9
-    type: text
-    label: "[reveal] Cards are stacked and pinned."
-    value: "Cards are stacked and pinned. Scrolling causes the top card to split apart — left half slides left, right half slides right — revealing the card below dramatically, like opening a set of double doors."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.10
-    type: text
-    label: "[stack] A testimonial section pins itself and cycles through quote cards."
-    value: "A testimonial section pins itself and cycles through quote cards. Each incoming card starts below, scaled up slightly and transparent, and settles into place while the outgoing card shrinks and fades into the stack behind it."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.11
-    type: text
-    label: "[exit] As the user scrolls past each card in the pinned stack, the card crumples — scaling down on both axes rapidly — and drops behind the stack with a slight rotation, like being crushed and discarded."
-    value: "As the user scrolls past each card in the pinned stack, the card crumples — scaling down on both axes rapidly — and drops behind the stack with a slight rotation, like being crushed and discarded."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.12
-    type: text
-    label: "[layer] Each card in the pinned stack has a foreground illustration and a background scene."
-    value: "Each card in the pinned stack has a foreground illustration and a background scene. As cards transition, the background scenes crossfade at a slower speed than the foreground layers, creating a parallax depth shift between each card change."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.13
-    type: text
-    label: "[text] Pin the section and keep a single card frame fixed on screen."
-    value: "Pin the section and keep a single card frame fixed on screen. As the user scrolls, only the card's content changes — the title clips upward out of view while the new title clips in from below, and the illustration crossfades at half speed."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.14
-    type: text
-    label: "[reveal] Stack cards horizontally so they fan out like a hand of playing cards."
-    value: "Stack cards horizontally so they fan out like a hand of playing cards. As the pinned section scrolls, each card in the fan slides into center stage while the others compress back into the deck on either side."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.15
-    type: text
-    label: "[stack] A process steps section stacks all step cards in one spot."
-    value: "A process steps section stacks all step cards in one spot. Each scroll increment lifts the top card upward with a slight arc path and fades it out, while the next card rises to take its place from below with a spring settle."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.16
-    type: text
-    label: "[depth] Give the card stack a real shadow layer — as each new card arrives on top, a shadow rect beneath the stack grows slightly larger and more diffuse, then contracts again as cards exit, making the pile feel heavier or lighter dynamically."
-    value: "Give the card stack a real shadow layer — as each new card arrives on top, a shadow rect beneath the stack grows slightly larger and more diffuse, then contracts again as cards exit, making the pile feel heavier or lighter dynamically."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.17
-    type: text
-    label: "[exit] Once the user has scrolled through all cards in the pinned stack, the whole pile collapses — all remaining cards simultaneously slide to a single point at the center of the screen and disappear, unpin the section and allow scrolling to continue."
-    value: "Once the user has scrolled through all cards in the pinned stack, the whole pile collapses — all remaining cards simultaneously slide to a single point at the center of the screen and disappear, unpin the section and allow scrolling to continue."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.18
-    type: text
-    label: "[layer] Each card sits in a pinned stack with a progress bar along its bottom edge."
-    value: "Each card sits in a pinned stack with a progress bar along its bottom edge. As the user scrolls through that card's range, the bar fills from left to right — reaching full just as the next card begins its entrance from below."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.19
-    type: text
-    label: "[reveal] Cards in the stack have a frosted-glass look."
-    value: "Cards in the stack have a frosted-glass look. As a new card slides in on scroll, the card behind it blurs progressively until the new one fully covers it — and sharpens back to clear if the user scrolls back up."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.sticky_card_stacks.20
-    type: text
-    label: "[stack] Pin a section with a deck of case study cards stacked at a slight rotational offset from each other, like a shuffled deck."
-    value: "Pin a section with a deck of case study cards stacked at a slight rotational offset from each other, like a shuffled deck. As the user scrolls, the top card straightens, comes to the front, expands to fill the frame, then snaps back into the stack as the next one takes over."
-    section: sticky_card_stacks
-    enabled: false
-  - key: animations.horizontal_scroll_panels.enabled
-    type: text
-    label: "Horizontal Scroll Panels — enable category"
-    value: ""
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.1
-    type: text
-    label: "[entry] Pin the section so vertical scrolling drives a horizontal journey — each panel slides in from the right as the previous one exits to the left, creating a seamless side-scrolling narrative that feels like flipping through a book."
-    value: "Pin the section so vertical scrolling drives a horizontal journey — each panel slides in from the right as the previous one exits to the left, creating a seamless side-scrolling narrative that feels like flipping through a book."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.2
-    type: text
-    label: "[parallax] As the horizontal panels scroll into view, the background image inside each panel moves at half the speed of the panel itself, creating a parallax depth effect that makes the scene feel wide and cinematic."
-    value: "As the horizontal panels scroll into view, the background image inside each panel moves at half the speed of the panel itself, creating a parallax depth effect that makes the scene feel wide and cinematic."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.3
-    type: text
-    label: "[progress] A thin progress bar runs along the bottom of the horizontal scroll section — it fills from left to right in sync with how far the user has scrolled through the panels, snapping to each panel marker with a small pulse."
-    value: "A thin progress bar runs along the bottom of the horizontal scroll section — it fills from left to right in sync with how far the user has scrolled through the panels, snapping to each panel marker with a small pulse."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.4
-    type: text
-    label: "[entry] Each horizontal panel starts scaled down to 90% and slightly blurred."
-    value: "Each horizontal panel starts scaled down to 90% and slightly blurred. As it scrolls into the center of the viewport it scales up to full size and sharpens, then scales back down as it exits to the left."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.5
-    type: text
-    label: "[text] The headline text inside each panel is pinned to the left edge as the panel scrolls in — it appears to slide in last, slightly delayed behind the panel itself, as if the words are catching up to their container."
-    value: "The headline text inside each panel is pinned to the left edge as the panel scrolls in — it appears to slide in last, slightly delayed behind the panel itself, as if the words are catching up to their container."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.6
-    type: text
-    label: "[parallax] Stack three horizontal layers inside each panel — a background scene, a midground illustration, and foreground text — each moving at a different speed as the panel scrolls, building a deep parallax diorama effect."
-    value: "Stack three horizontal layers inside each panel — a background scene, a midground illustration, and foreground text — each moving at a different speed as the panel scrolls, building a deep parallax diorama effect."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.7
-    type: text
-    label: "[nav] Small dot navigation sits below the horizontal scroll track — as each panel scrolls into view the corresponding dot scales up and fills in, and clicking a dot smoothly tweens the scroll position to that panel."
-    value: "Small dot navigation sits below the horizontal scroll track — as each panel scrolls into view the corresponding dot scales up and fills in, and clicking a dot smoothly tweens the scroll position to that panel."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.8
-    type: text
-    label: "[entry] Panels enter from the right with a slight rotational tilt — arriving at 5 degrees and settling to 0 as they center — then tilting to minus 5 degrees as they exit left, like pages being turned by hand."
-    value: "Panels enter from the right with a slight rotational tilt — arriving at 5 degrees and settling to 0 as they center — then tilting to minus 5 degrees as they exit left, like pages being turned by hand."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.9
-    type: text
-    label: "[text] Inside each horizontal panel, the body text is split into lines that animate in one by one from below as the panel reaches center stage, staggered by 80ms each, and reverse out upward as the panel begins to exit."
-    value: "Inside each horizontal panel, the body text is split into lines that animate in one by one from below as the panel reaches center stage, staggered by 80ms each, and reverse out upward as the panel begins to exit."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.10
-    type: text
-    label: "[color] The background color of the entire section shifts smoothly between a unique hue for each panel as they scroll — the transition begins when the incoming panel is halfway into view and completes as it fully centers."
-    value: "The background color of the entire section shifts smoothly between a unique hue for each panel as they scroll — the transition begins when the incoming panel is halfway into view and completes as it fully centers."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.11
-    type: text
-    label: "[entry] Each panel has a full-bleed image that starts clipped — a rectangular mask that opens from the center outward as the panel scrolls into place, revealing the image like a camera iris opening."
-    value: "Each panel has a full-bleed image that starts clipped — a rectangular mask that opens from the center outward as the panel scrolls into place, revealing the image like a camera iris opening."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.12
-    type: text
-    label: "[parallax] The panel images extend beyond the visible area and scroll at 60% of the panel speed, so as you move through the horizontal track you see different portions of each wide image — like panning a camera across a landscape."
-    value: "The panel images extend beyond the visible area and scroll at 60% of the panel speed, so as you move through the horizontal track you see different portions of each wide image — like panning a camera across a landscape."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.13
-    type: text
-    label: "[nav] An arrow button on the right edge of the section pulses gently to invite interaction."
-    value: "An arrow button on the right edge of the section pulses gently to invite interaction. Clicking it triggers a smooth GSAP tween to the next panel. It fades out on the last panel and an 'end of story' label fades in its place."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.14
-    type: text
-    label: "[color] Each panel has a colored accent line along its top edge."
-    value: "Each panel has a colored accent line along its top edge. As the panel scrolls to center, that line expands from a dot at the left edge to full width, then collapses back to a dot at the right edge as the panel exits."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.15
-    type: text
-    label: "[entry] Panels are separated by a thin vertical divider line."
-    value: "Panels are separated by a thin vertical divider line. As each panel transitions, the divider stretches vertically from 0 to full height with a springy overshoot, holds for a beat, then collapses again as the next panel centers."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.16
-    type: text
-    label: "[text] A large chapter number sits behind each panel's content, oversized and low opacity."
-    value: "A large chapter number sits behind each panel's content, oversized and low opacity. As the panel scrolls in it moves at 80% speed relative to the panel — arriving slightly late — giving a ghost-like depth to the typography."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.17
-    type: text
-    label: "[parallax] Each horizontal panel contains a floating 3D object."
-    value: "Each horizontal panel contains a floating 3D object. As the panel scrolls into view the object rotates from a side angle to face-forward, completing its rotation exactly as the panel centers, then rotating away as it exits."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.18
-    type: text
-    label: "[nav] The section title is pinned to the top left during the entire horizontal scroll."
-    value: "The section title is pinned to the top left during the entire horizontal scroll. As each panel changes, the subtitle below it cross-fades to the current panel's title with a quick clip wipe from left to right."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.19
-    type: text
-    label: "[entry] All horizontal panels start stacked at the right side."
-    value: "All horizontal panels start stacked at the right side. As the user scrolls, they fan out into the horizontal track one by one with a staggered delay — like a deck of cards being spread across a table from right to left."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.horizontal_scroll_panels.20
-    type: text
-    label: "[color] The cursor changes shape and color to match the active panel as the user scrolls horizontally — growing into a large circle tinted with the panel's accent color, and shrinking back as it transitions between panels."
-    value: "The cursor changes shape and color to match the active panel as the user scrolls horizontally — growing into a large circle tinted with the panel's accent color, and shrinking back as it transitions between panels."
-    section: horizontal_scroll_panels
-    enabled: false
-  - key: animations.parallax_depth_layers.enabled
-    type: text
-    label: "Parallax Depth Layers — enable category"
-    value: ""
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.1
-    type: text
-    label: "[depth] Split the hero section into five layers — sky, distant mountains, midground trees, foreground rocks, and floating text — each moving at a progressively faster rate as the user scrolls down, creating a lush sense of physical depth."
-    value: "Split the hero section into five layers — sky, distant mountains, midground trees, foreground rocks, and floating text — each moving at a progressively faster rate as the user scrolls down, creating a lush sense of physical depth."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.2
-    type: text
-    label: "[scale] As the user scrolls past a product image, it scales up slowly from 100% to 115% while the background behind it moves at half the speed — the product feels like it's floating forward out of the scene."
-    value: "As the user scrolls past a product image, it scales up slowly from 100% to 115% while the background behind it moves at half the speed — the product feels like it's floating forward out of the scene."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.3
-    type: text
-    label: "[depth] A cityscape section has four building layers at different opacities and speeds."
-    value: "A cityscape section has four building layers at different opacities and speeds. The furthest buildings barely move, the closest ones scroll quickly, and a fog overlay between layers thickens as the user scrolls deeper into the scene."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.4
-    type: text
-    label: "[rotation] Floating decorative shapes in the background rotate slowly as the user scrolls — circles spin clockwise, triangles counter-clockwise — each at a slightly different rate so the composition feels alive and never repeating."
-    value: "Floating decorative shapes in the background rotate slowly as the user scrolls — circles spin clockwise, triangles counter-clockwise — each at a slightly different rate so the composition feels alive and never repeating."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.5
-    type: text
-    label: "[scale] The section background image scrolls at 40% of the page speed while the foreground content scrolls at 100%, so by the time the section exits the viewport the background has barely moved — making the space feel vast."
-    value: "The section background image scrolls at 40% of the page speed while the foreground content scrolls at 100%, so by the time the section exits the viewport the background has barely moved — making the space feel vast."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.6
-    type: text
-    label: "[depth] A portrait photo sits between two parallax layers — a blurred background pattern moves slowly upward as you scroll, while a foreground color wash moves quickly downward, sandwiching the portrait in a layered composition."
-    value: "A portrait photo sits between two parallax layers — a blurred background pattern moves slowly upward as you scroll, while a foreground color wash moves quickly downward, sandwiching the portrait in a layered composition."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.7
-    type: text
-    label: "[opacity] Each depth layer has a subtle opacity shift tied to scroll position — far layers fade slightly as you scroll down, near layers become more opaque, simulating the atmospheric haze of real distance."
-    value: "Each depth layer has a subtle opacity shift tied to scroll position — far layers fade slightly as you scroll down, near layers become more opaque, simulating the atmospheric haze of real distance."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.8
-    type: text
-    label: "[rotation] Scattered leaf or petal shapes float across the scene at different depths — some large and fast near the viewer, some tiny and slow in the distance — each following a slightly curved path as the page scrolls."
-    value: "Scattered leaf or petal shapes float across the scene at different depths — some large and fast near the viewer, some tiny and slow in the distance — each following a slightly curved path as the page scrolls."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.9
-    type: text
-    label: "[depth] A data dashboard section uses parallax to separate chart layers — the axis and grid lines move at base speed, the bar fills move slightly faster, and the data point labels move fastest — giving the chart a layered, tangible quality."
-    value: "A data dashboard section uses parallax to separate chart layers — the axis and grid lines move at base speed, the bar fills move slightly faster, and the data point labels move fastest — giving the chart a layered, tangible quality."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.10
-    type: text
-    label: "[scale] On scroll, the hero text scales up very slowly from 98% to 105% while the background photo scales in the opposite direction from 105% down to 98% — the text advances toward you as the background retreats."
-    value: "On scroll, the hero text scales up very slowly from 98% to 105% while the background photo scales in the opposite direction from 105% down to 98% — the text advances toward you as the background retreats."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.11
-    type: text
-    label: "[opacity] Three overlapping photo layers sit in a staggered grid."
-    value: "Three overlapping photo layers sit in a staggered grid. As the user scrolls, each row moves at a different vertical speed, so the photos gradually separate and overlap in new combinations — a living collage that rearranges itself."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.12
-    type: text
-    label: "[depth] A technology section has circuit-board line graphics at three depth levels."
-    value: "A technology section has circuit-board line graphics at three depth levels. The deepest layer moves at 20% scroll speed in a warm tint, the middle at 50% in neutral gray, and the closest at 90% in bright white — receding into the distance."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.13
-    type: text
-    label: "[rotation] The section background has a large, very slowly rotating radial pattern — one full rotation over the entire scroll distance of the section — while foreground content scrolls at normal speed over it, creating a hypnotic depth."
-    value: "The section background has a large, very slowly rotating radial pattern — one full rotation over the entire scroll distance of the section — while foreground content scrolls at normal speed over it, creating a hypnotic depth."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.14
-    type: text
-    label: "[scale] A team photo grid uses micro-parallax on hover — when the cursor moves over a photo, the image inside its frame shifts slightly in the opposite direction of the mouse, as if looking through a window at a scene behind the glass."
-    value: "A team photo grid uses micro-parallax on hover — when the cursor moves over a photo, the image inside its frame shifts slightly in the opposite direction of the mouse, as if looking through a window at a scene behind the glass."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.15
-    type: text
-    label: "[opacity] Foreground text paragraphs have a ghost version of themselves slightly offset and scrolling at 95% speed behind them — barely visible at 8% opacity — giving the typography a subtle dimensional shadow as the page moves."
-    value: "Foreground text paragraphs have a ghost version of themselves slightly offset and scrolling at 95% speed behind them — barely visible at 8% opacity — giving the typography a subtle dimensional shadow as the page moves."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.16
-    type: text
-    label: "[depth] Split a landscape illustration into seven SVG layers exported separately."
-    value: "Split a landscape illustration into seven SVG layers exported separately. Animate each layer at scroll speeds ranging from 10% to 100%, with the nearest layer being the section's interactive content and the furthest being the horizon sky."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.17
-    type: text
-    label: "[scale] Product cards in a grid each have a background blob shape that moves on a unique parallax offset — some drifting up, some drifting sideways — so as you scroll the page the blobs shift into new positions behind each card."
-    value: "Product cards in a grid each have a background blob shape that moves on a unique parallax offset — some drifting up, some drifting sideways — so as you scroll the page the blobs shift into new positions behind each card."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.18
-    type: text
-    label: "[rotation] Large typographic characters in the background — oversized initials or a pull quote — drift across the section at 30% scroll speed while rotating 15 degrees over the full scroll distance, anchoring the composition with slow-moving depth."
-    value: "Large typographic characters in the background — oversized initials or a pull quote — drift across the section at 30% scroll speed while rotating 15 degrees over the full scroll distance, anchoring the composition with slow-moving depth."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.19
-    type: text
-    label: "[opacity] A testimonial section uses parallax opacity — the outgoing quote fades to 0 as you scroll while the incoming quote fades from 0 to full, each at a different scroll rate so there's a moment where both are semi-visible and overlapping."
-    value: "A testimonial section uses parallax opacity — the outgoing quote fades to 0 as you scroll while the incoming quote fades from 0 to full, each at a different scroll rate so there's a moment where both are semi-visible and overlapping."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.parallax_depth_layers.20
-    type: text
-    label: "[depth] The footer entry uses five layered wave SVG shapes."
-    value: "The footer entry uses five layered wave SVG shapes. As the footer scrolls into view from the bottom, each wave rises at a different speed — the deepest wave arriving first, the topmost wave last — building the composition layer by layer like a tide coming in."
-    section: parallax_depth_layers
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.enabled
-    type: text
-    label: "Scroll Driven Video Scrub — enable category"
-    value: ""
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.1
-    type: text
-    label: "[scrub] Pin the section and tie the video currentTime directly to the scroll position — scrolling down advances the video frame by frame, scrolling up rewinds it, so the user is in complete control of the playback like a film editor."
-    value: "Pin the section and tie the video currentTime directly to the scroll position — scrolling down advances the video frame by frame, scrolling up rewinds it, so the user is in complete control of the playback like a film editor."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.2
-    type: text
-    label: "[overlay] As the user scrubs through the video, caption text overlays fade in and out at specific timestamp thresholds — each caption slides up from below, holds while that scene is active, and fades upward as the scrub moves past it."
-    value: "As the user scrubs through the video, caption text overlays fade in and out at specific timestamp thresholds — each caption slides up from below, holds while that scene is active, and fades upward as the scrub moves past it."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.3
-    type: text
-    label: "[scrub] A product assembly video is tied to scroll — as the user scrolls through the pinned section, the product assembles itself piece by piece in the video, and a label for each component fades in on the right side in sync with when that part appears."
-    value: "A product assembly video is tied to scroll — as the user scrolls through the pinned section, the product assembles itself piece by piece in the video, and a label for each component fades in on the right side in sync with when that part appears."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.4
-    type: text
-    label: "[progress] A timeline scrubber UI sits below the pinned video — a playhead marker moves along a track in sync with scroll position, and chapter markers on the track pulse when the scrub reaches them, showing which section of the story you're in."
-    value: "A timeline scrubber UI sits below the pinned video — a playhead marker moves along a track in sync with scroll position, and chapter markers on the track pulse when the scrub reaches them, showing which section of the story you're in."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.5
-    type: text
-    label: "[scrub] An aerial flyover video is scrubbed by scroll."
-    value: "An aerial flyover video is scrubbed by scroll. At three specific frames, the video pauses and an annotation pin drops onto a location on screen with a spring bounce — the user must scroll further to release the pause and continue the flyover."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.6
-    type: text
-    label: "[overlay] The video scrub section has a split layout — the left half shows the video scrubbing, and the right half shows a matching text description that crossfades to the relevant paragraph as each scene in the video is reached by the scroll."
-    value: "The video scrub section has a split layout — the left half shows the video scrubbing, and the right half shows a matching text description that crossfades to the relevant paragraph as each scene in the video is reached by the scroll."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.7
-    type: text
-    label: "[scrub] A before-and-after transformation video is split down the middle with a draggable divider."
-    value: "A before-and-after transformation video is split down the middle with a draggable divider. The scroll position scrubs the video while the left half shows the before state and the right half shows the after — both halves in sync from the same video source."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.8
-    type: text
-    label: "[transition] When the user scrolls out of the video scrub section, the last frame of the video freezes and crossfades into a static hero image of the same scene — a seamless handoff from motion to still as the section transitions out."
-    value: "When the user scrolls out of the video scrub section, the last frame of the video freezes and crossfades into a static hero image of the same scene — a seamless handoff from motion to still as the section transitions out."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.9
-    type: text
-    label: "[scrub] A cooking recipe video scrubs with scroll."
-    value: "A cooking recipe video scrubs with scroll. Each major step in the recipe is a chapter — when the scrub hits a chapter boundary, the background color of the section changes to a new color associated with that step, and an ingredient list animates in on the side."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.10
-    type: text
-    label: "[progress] The scroll progress through the video section is mirrored by a circular countdown ring in the corner — it fills clockwise as the video advances and empties counterclockwise on scroll-up, always showing how far through the video story you are."
-    value: "The scroll progress through the video section is mirrored by a circular countdown ring in the corner — it fills clockwise as the video advances and empties counterclockwise on scroll-up, always showing how far through the video story you are."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.11
-    type: text
-    label: "[overlay] Hotspot markers appear on the video at specific scrub points — small pulsing rings that expand outward from a product detail."
-    value: "Hotspot markers appear on the video at specific scrub points — small pulsing rings that expand outward from a product detail. Hovering a hotspot pauses the scrub and expands a tooltip card with more information, resuming on mouse-out."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.12
-    type: text
-    label: "[scrub] An architectural walkthrough video scrubs with scroll — as the virtual camera moves through the building, room labels animate in from the sides of the screen in sync with when each room is entered in the footage."
-    value: "An architectural walkthrough video scrubs with scroll — as the virtual camera moves through the building, room labels animate in from the sides of the screen in sync with when each room is entered in the footage."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.13
-    type: text
-    label: "[transition] The video scrub section begins with the video at 0% opacity, scaled up to 110%."
-    value: "The video scrub section begins with the video at 0% opacity, scaled up to 110%. As the user starts scrolling, it fades in and scales down to 100% over the first 20% of the scroll range, then begins scrubbing — an intro that pulls you into the footage."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.14
-    type: text
-    label: "[scrub] A scientific visualization video shows a cell dividing."
-    value: "A scientific visualization video shows a cell dividing. As the scroll scrubs through the video, a data counter on screen updates in sync — displaying the simulated time elapsed, the number of cells, and the division rate — all driven by the same scroll position."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.15
-    type: text
-    label: "[overlay] Chapter title cards animate in at the start of each video chapter during scrubbing — the title clips in from the left, holds for a defined scroll range, then clips back out to the right, replaced by the next chapter's title."
-    value: "Chapter title cards animate in at the start of each video chapter during scrubbing — the title clips in from the left, holds for a defined scroll range, then clips back out to the right, replaced by the next chapter's title."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.16
-    type: text
-    label: "[scrub] A fashion lookbook video scrubs with scroll."
-    value: "A fashion lookbook video scrubs with scroll. The video is full-bleed and the scroll is slow — 600vh for a 30-second clip. Product detail chips float in from the edges when the camera lingers on a garment, each with a springy entrance."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.17
-    type: text
-    label: "[transition] When the user reaches the end of the video scrub and keeps scrolling, the video shrinks into the corner of the screen with a smooth layout animation while the rest of the page content scrolls in beneath it — the video becomes a persistent pip player."
-    value: "When the user reaches the end of the video scrub and keeps scrolling, the video shrinks into the corner of the screen with a smooth layout animation while the rest of the page content scrolls in beneath it — the video becomes a persistent pip player."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.18
-    type: text
-    label: "[progress] A waveform visualizer runs below the pinned video — it's a static representation of the video's audio amplitude."
-    value: "A waveform visualizer runs below the pinned video — it's a static representation of the video's audio amplitude. As the scrub advances, a playhead moves across the waveform and the passed portion fills in with the section's accent color."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.19
-    type: text
-    label: "[scrub] A space launch video is pinned and scrubbed."
-    value: "A space launch video is pinned and scrubbed. At the liftoff moment in the footage, the page background shifts from dark to a warm orange glow, the section shakes with a brief GSAP shake tween, and exhaust plume SVGs animate outward from the bottom of the video frame."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.scroll_driven_video_scrub.20
-    type: text
-    label: "[overlay] The video scrub section uses a masked reveal — the video sits behind a large text mask, so only the letterforms of a word are visible, showing the video through the typography."
-    value: "The video scrub section uses a masked reveal — the video sits behind a large text mask, so only the letterforms of a word are visible, showing the video through the typography. As the scrub advances the word changes, cutting to a new mask shape."
-    section: scroll_driven_video_scrub
-    enabled: false
-  - key: animations.text_reveal_on_scroll.enabled
-    type: text
-    label: "Text Reveal On Scroll — enable category"
-    value: ""
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.1
-    type: text
-    label: "[line] Split every paragraph into individual lines and wrap each in a clip container."
-    value: "Split every paragraph into individual lines and wrap each in a clip container. As the section scrolls into view, each line slides up from below its clip boundary with a staggered delay of 60ms per line — clean, editorial, and satisfying."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.2
-    type: text
-    label: "[word] Every word in the hero headline animates in individually as the user scrolls — starting at 0% opacity and translateY 20px, staggered by 40ms per word, so the sentence assembles itself left to right as the section enters the viewport."
-    value: "Every word in the hero headline animates in individually as the user scrolls — starting at 0% opacity and translateY 20px, staggered by 40ms per word, so the sentence assembles itself left to right as the section enters the viewport."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.3
-    type: text
-    label: "[char] A large pull quote has its characters animated in one by one on scroll, each starting rotated 90 degrees and transparent, snapping to upright and opaque with a springy ease — the text materializes like a typeface being stamped into existence."
-    value: "A large pull quote has its characters animated in one by one on scroll, each starting rotated 90 degrees and transparent, snapping to upright and opaque with a springy ease — the text materializes like a typeface being stamped into existence."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.4
-    type: text
-    label: "[line] Body text paragraphs reveal line by line as the user scrolls past them — not on section entry, but progressively as each line reaches a trigger point 80% from the top of the viewport, so reading pace matches reveal pace."
-    value: "Body text paragraphs reveal line by line as the user scrolls past them — not on section entry, but progressively as each line reaches a trigger point 80% from the top of the viewport, so reading pace matches reveal pace."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.5
-    type: text
-    label: "[mask] Large section titles are hidden behind a rectangular mask."
-    value: "Large section titles are hidden behind a rectangular mask. As the section scrolls into view, the mask slides away to the right, uncovering the text from left to right in a clean wipe reveal with a smooth cubic ease."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.6
-    type: text
-    label: "[word] A statistics section has large numbers and their labels revealed word by word on scroll — the numbers count up from zero simultaneously as their label words stagger in beside them, all timed to complete together as the section centers."
-    value: "A statistics section has large numbers and their labels revealed word by word on scroll — the numbers count up from zero simultaneously as their label words stagger in beside them, all timed to complete together as the section centers."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.7
-    type: text
-    label: "[char] A brand tagline uses a character scramble reveal on scroll — each character starts as a random symbol and resolves to the correct letter over 400ms, staggered left to right, as if the correct letters are being found one by one."
-    value: "A brand tagline uses a character scramble reveal on scroll — each character starts as a random symbol and resolves to the correct letter over 400ms, staggered left to right, as if the correct letters are being found one by one."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.8
-    type: text
-    label: "[line] Long-form article text uses a subtle line reveal — each line starts at 60% opacity and full position, and fades to 100% opacity as it scrolls past the 70% viewport threshold."
-    value: "Long-form article text uses a subtle line reveal — each line starts at 60% opacity and full position, and fades to 100% opacity as it scrolls past the 70% viewport threshold. Barely noticeable individually but gives the whole article a breathing quality."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.9
-    type: text
-    label: "[mask] Section subtitles are revealed with a vertical mask wipe — the text sits inside a container that clips from top to bottom, and as the section enters the viewport the clip opens downward, pulling the text into existence from the top."
-    value: "Section subtitles are revealed with a vertical mask wipe — the text sits inside a container that clips from top to bottom, and as the section enters the viewport the clip opens downward, pulling the text into existence from the top."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.10
-    type: text
-    label: "[word] A features list has each item revealed word by word with a cascading wave — the first word of each bullet arrives first, followed by the remaining words, then the next bullet starts — creating a reading flow that guides the eye naturally."
-    value: "A features list has each item revealed word by word with a cascading wave — the first word of each bullet arrives first, followed by the remaining words, then the next bullet starts — creating a reading flow that guides the eye naturally."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.11
-    type: text
-    label: "[char] An oversized background text element — a single huge word behind the section content — has its characters reveal one at a time from center outward, alternating left and right of center, so the word builds from its middle out."
-    value: "An oversized background text element — a single huge word behind the section content — has its characters reveal one at a time from center outward, alternating left and right of center, so the word builds from its middle out."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.12
-    type: text
-    label: "[line] A timeline section reveals each date and description as separate line pairs."
-    value: "A timeline section reveals each date and description as separate line pairs. The date line slides in from the left and the description line slides in from the right simultaneously, meeting at the center as the scroll trigger fires."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.13
-    type: text
-    label: "[mask] The hero headline uses a dual-layer mask reveal — the text is duplicated, one copy offset 4px below."
-    value: "The hero headline uses a dual-layer mask reveal — the text is duplicated, one copy offset 4px below. The masks open at slightly different speeds so there's a brief moment of double-exposure depth before both settle into alignment."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.14
-    type: text
-    label: "[word] A testimonial quote reveals word by word but tied directly to scroll progress — no autoplay, just a 1:1 mapping between scroll distance and how many words are visible."
-    value: "A testimonial quote reveals word by word but tied directly to scroll progress — no autoplay, just a 1:1 mapping between scroll distance and how many words are visible. The user literally reads at the pace they scroll."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.15
-    type: text
-    label: "[char] Section numbers or chapter markers animate in character by character with a vertical flip — each digit starts face-down (rotateX 90deg) and flips to face-forward with a staggered delay, like a split-flap departure board."
-    value: "Section numbers or chapter markers animate in character by character with a vertical flip — each digit starts face-down (rotateX 90deg) and flips to face-forward with a staggered delay, like a split-flap departure board."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.16
-    type: text
-    label: "[line] A multi-column text layout reveals column by column — the leftmost column's lines animate in first, then the center column, then the right — so the reveal sweeps across the layout from left to right in a staged wave."
-    value: "A multi-column text layout reveals column by column — the leftmost column's lines animate in first, then the center column, then the right — so the reveal sweeps across the layout from left to right in a staged wave."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.17
-    type: text
-    label: "[mask] Running body text uses a gradient mask reveal — instead of a hard clip edge, a soft gradient mask sits over the text and scrolls upward as the user reads, so text at the top is fully visible and text near the bottom fades out, revealing progressively."
-    value: "Running body text uses a gradient mask reveal — instead of a hard clip edge, a soft gradient mask sits over the text and scrolls upward as the user reads, so text at the top is fully visible and text near the bottom fades out, revealing progressively."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.18
-    type: text
-    label: "[word] A call-to-action headline reveals its words with a scale entrance — each word starts at 120% size and transparent, snapping to 100% and opaque with a staggered delay, so the sentence punches into existence with energy."
-    value: "A call-to-action headline reveals its words with a scale entrance — each word starts at 120% size and transparent, snapping to 100% and opaque with a staggered delay, so the sentence punches into existence with energy."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.19
-    type: text
-    label: "[char] A footer tagline has its characters animate in with a random vertical scatter — each character starts at a random y offset between minus 30 and plus 30 pixels, and simultaneously snaps to baseline on scroll trigger, like pieces falling into place."
-    value: "A footer tagline has its characters animate in with a random vertical scatter — each character starts at a random y offset between minus 30 and plus 30 pixels, and simultaneously snaps to baseline on scroll trigger, like pieces falling into place."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.text_reveal_on_scroll.20
-    type: text
-    label: "[line] A process description section reveals each step as a full line — but steps are on alternating sides."
-    value: "A process description section reveals each step as a full line — but steps are on alternating sides. Odd steps slide in from the left, even steps from the right, creating a zigzag reveal pattern down the page as the user scrolls."
-    section: text_reveal_on_scroll
-    enabled: false
-  - key: animations.split_text_entrance.enabled
-    type: text
-    label: "Split Text Entrance — enable category"
-    value: ""
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.1
-    type: text
-    label: "[chars] Split the hero headline into individual characters and animate each one in from a random position — some from the top, some from the sides, some from below — all converging on their correct position simultaneously with a springy elastic ease."
-    value: "Split the hero headline into individual characters and animate each one in from a random position — some from the top, some from the sides, some from below — all converging on their correct position simultaneously with a springy elastic ease."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.2
-    type: text
-    label: "[words] Split a subheading into words and animate each word in from below with translateY 40px and opacity 0, staggered by 80ms per word, using a smooth power2."
-    value: "Split a subheading into words and animate each word in from below with translateY 40px and opacity 0, staggered by 80ms per word, using a smooth power2.out ease — a clean, confident entrance that feels like the words are stepping forward."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.3
-    type: text
-    label: "[lines] Split a paragraph into lines and animate each line in with a combined translateX and opacity — odd lines slide from the left, even lines from the right — all triggering simultaneously with a 100ms stagger between lines."
-    value: "Split a paragraph into lines and animate each line in with a combined translateX and opacity — odd lines slide from the left, even lines from the right — all triggering simultaneously with a 100ms stagger between lines."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.4
-    type: text
-    label: "[chars] A large display number splits into digits."
-    value: "A large display number splits into digits. Each digit drops in from above, overshoots its final position slightly, and bounces back — staggered from left to right by 60ms — so the number slaps into place with a satisfying impact."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.5
-    type: text
-    label: "[words] A navigation menu entrance animates each menu item word in with a rotateX flip — starting face-up at 90 degrees and rotating to face-forward — staggered left to right, like a row of tiles being flipped over one by one."
-    value: "A navigation menu entrance animates each menu item word in with a rotateX flip — starting face-up at 90 degrees and rotating to face-forward — staggered left to right, like a row of tiles being flipped over one by one."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.6
-    type: text
-    label: "[chars] Split a brand name into characters."
-    value: "Split a brand name into characters. Animate each character in with a scale from 0 and a rotation from 45 degrees, staggered outward from the center character — so the name builds from the middle letter outward in both directions simultaneously."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.7
-    type: text
-    label: "[lines] A full-screen text block reveals line by line with a clip-path wipe — each line is clipped to zero height and expands downward to full height with a stagger of 120ms, making the text unfold like a scroll being rolled out."
-    value: "A full-screen text block reveals line by line with a clip-path wipe — each line is clipped to zero height and expands downward to full height with a stagger of 120ms, making the text unfold like a scroll being rolled out."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.8
-    type: text
-    label: "[words] Split a testimonial quote into words."
-    value: "Split a testimonial quote into words. Animate each word with a slight blur that clears as it fades in — starting at filter blur 8px and opacity 0, resolving to blur 0 and opacity 1 with a stagger, like words coming into focus one at a time."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.9
-    type: text
-    label: "[chars] A loading screen headline splits into characters that start scattered across the entire screen at random positions and rotations, then fly into their correct positions simultaneously with a power4."
-    value: "A loading screen headline splits into characters that start scattered across the entire screen at random positions and rotations, then fly into their correct positions simultaneously with a power4.out ease — chaos resolving into order."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.10
-    type: text
-    label: "[lines] Section intro text splits into lines, each animating in with a skewX distortion — starting at skewX 10 degrees and resolving to 0 alongside the opacity and translateY — giving the entrance a dynamic, rushing-forward energy."
-    value: "Section intro text splits into lines, each animating in with a skewX distortion — starting at skewX 10 degrees and resolving to 0 alongside the opacity and translateY — giving the entrance a dynamic, rushing-forward energy."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.11
-    type: text
-    label: "[words] A CTA headline splits into words that animate in with a wave — the first word arrives at full opacity, and each subsequent word is delayed by 60ms but also starts 10px higher, creating a rising staircase effect that levels out as each word settles."
-    value: "A CTA headline splits into words that animate in with a wave — the first word arrives at full opacity, and each subsequent word is delayed by 60ms but also starts 10px higher, creating a rising staircase effect that levels out as each word settles."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.12
-    type: text
-    label: "[chars] Split a section title into characters and animate each one with a unique duration between 0."
-    value: "Split a section title into characters and animate each one with a unique duration between 0.4s and 0.8s — randomly assigned — so the characters arrive at slightly different times, creating an organic, hand-lettered feel to the entrance."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.13
-    type: text
-    label: "[lines] A two-line headline splits and animates the lines in opposite directions — line one slides in from the left and line two from the right — meeting at center simultaneously, framing the composition from both sides at once."
-    value: "A two-line headline splits and animates the lines in opposite directions — line one slides in from the left and line two from the right — meeting at center simultaneously, framing the composition from both sides at once."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.14
-    type: text
-    label: "[words] A feature benefit list entrance splits each bullet into words."
-    value: "A feature benefit list entrance splits each bullet into words. The first word of each bullet pops in at scale 1.2 then settles, followed by the remaining words at normal scale with a 40ms stagger — the key word always hits first for emphasis."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.15
-    type: text
-    label: "[chars] An awards or accolades section has year numbers split into digits."
-    value: "An awards or accolades section has year numbers split into digits. Each digit rotates in on the Y axis — a 3D flip from perpendicular to face-forward — staggered by 80ms, making the year stamp itself into place like a rubber stamp being pressed."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.16
-    type: text
-    label: "[lines] A manifesto text block splits into lines where each line has a unique color on entry — bright and saturated — then fades to the final neutral color over 600ms after it arrives, so the text flashes into existence vividly before settling."
-    value: "A manifesto text block splits into lines where each line has a unique color on entry — bright and saturated — then fades to the final neutral color over 600ms after it arrives, so the text flashes into existence vividly before settling."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.17
-    type: text
-    label: "[words] Split a page title into words and animate each with a perspective entrance — they start rotated 60 degrees on the X axis (leaning backward away from the viewer) and rotate forward to flat — staggered left to right, like dominos falling toward you."
-    value: "Split a page title into words and animate each with a perspective entrance — they start rotated 60 degrees on the X axis (leaning backward away from the viewer) and rotate forward to flat — staggered left to right, like dominos falling toward you."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.18
-    type: text
-    label: "[chars] A countdown or score display splits into characters that each start as a different random character and rapidly cycle through the alphabet before landing on the correct letter — a slot-machine scramble that resolves character by character, left to right."
-    value: "A countdown or score display splits into characters that each start as a different random character and rapidly cycle through the alphabet before landing on the correct letter — a slot-machine scramble that resolves character by character, left to right."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.19
-    type: text
-    label: "[lines] Body copy splits into lines where each line entrance is tied to the user's scroll position entering that line's bounding box — no batch trigger, each line fires independently as the viewport reaches it, so the text reveals precisely as it's read."
-    value: "Body copy splits into lines where each line entrance is tied to the user's scroll position entering that line's bounding box — no batch trigger, each line fires independently as the viewport reaches it, so the text reveals precisely as it's read."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.split_text_entrance.20
-    type: text
-    label: "[words] A closing statement splits into words that animate in with a gravity drop — starting 80px above and accelerating downward with a bounce ease, staggered by 50ms — so the words fall into place like they have weight, landing with a soft thud."
-    value: "A closing statement splits into words that animate in with a gravity drop — starting 80px above and accelerating downward with a bounce ease, staggered by 50ms — so the words fall into place like they have weight, landing with a soft thud."
-    section: split_text_entrance
-    enabled: false
-  - key: animations.sticky_text_background_swap.enabled
-    type: text
-    label: "Sticky Text Background Swap — enable category"
-    value: ""
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.1
-    type: text
-    label: "[color] Pin the headline text in the center of the viewport while the background color morphs through a sequence of brand colors as the user scrolls — each color has its own scroll range and the transitions crossfade smoothly so there's never a hard cut."
-    value: "Pin the headline text in the center of the viewport while the background color morphs through a sequence of brand colors as the user scrolls — each color has its own scroll range and the transitions crossfade smoothly so there's never a hard cut."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.2
-    type: text
-    label: "[image] A pinned product name sits over a full-bleed background that swaps between lifestyle photos as the user scrolls — each photo crossfades in over 400ms, and the text color shifts from dark to light or back depending on the brightness of the incoming image."
-    value: "A pinned product name sits over a full-bleed background that swaps between lifestyle photos as the user scrolls — each photo crossfades in over 400ms, and the text color shifts from dark to light or back depending on the brightness of the incoming image."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.3
-    type: text
-    label: "[color] A pinned section counter — showing '01 of 05' — updates each time the background swaps."
-    value: "A pinned section counter — showing '01 of 05' — updates each time the background swaps. The number change animates as a vertical flip, the outgoing digit rolling upward and the incoming digit rolling in from below."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.4
-    type: text
-    label: "[gradient] The pinned headline stays fixed while the background transitions between bold full-bleed gradients — each gradient flows in as a diagonal wipe from the bottom-left corner, replacing the previous one as the scroll crosses each threshold."
-    value: "The pinned headline stays fixed while the background transitions between bold full-bleed gradients — each gradient flows in as a diagonal wipe from the bottom-left corner, replacing the previous one as the scroll crosses each threshold."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.5
-    type: text
-    label: "[image] A sticky title block stays in the left third of the screen while full-bleed background images swap on the right two-thirds as the user scrolls."
-    value: "A sticky title block stays in the left third of the screen while full-bleed background images swap on the right two-thirds as the user scrolls. Each image slides up from the bottom of its container and the previous one slides up out of frame above it."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.6
-    type: text
-    label: "[color] The pinned text is a large typographic element that shifts color in sync with the background swap — but delayed by 200ms — so the background changes first and the text color catches up, creating a brief moment of contrast before harmonizing."
-    value: "The pinned text is a large typographic element that shifts color in sync with the background swap — but delayed by 200ms — so the background changes first and the text color catches up, creating a brief moment of contrast before harmonizing."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.7
-    type: text
-    label: "[gradient] Pin a section with a looping sequence of four background colors."
-    value: "Pin a section with a looping sequence of four background colors. Each color has a unique texture overlay — subtle noise, lines, or dots — that crossfades in alongside the color, giving each background section a distinct material feel."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.8
-    type: text
-    label: "[image] The sticky text is actually a mask — the background images show through the letterforms of the headline."
-    value: "The sticky text is actually a mask — the background images show through the letterforms of the headline. As backgrounds swap, the new image fades in behind the mask, so the typography always shows a live, changing image texture inside it."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.9
-    type: text
-    label: "[color] A pinned navigation indicator — a small colored pill — updates its background color to match the current section's background swap theme, animating the color transition with a smooth 300ms crossfade in sync with the background."
-    value: "A pinned navigation indicator — a small colored pill — updates its background color to match the current section's background swap theme, animating the color transition with a smooth 300ms crossfade in sync with the background."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.10
-    type: text
-    label: "[gradient] Five background sections each have a unique color."
-    value: "Five background sections each have a unique color. The pinned headline word rotates to a synonym for each section — 'fast', 'smart', 'bold', 'clear', 'yours' — the word exit animates upward and the new word enters from below, timed to the background swap."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.11
-    type: text
-    label: "[image] The background images in the swap sequence are the same photo at different zoom levels — starting wide and progressively more zoomed in with each scroll section."
-    value: "The background images in the swap sequence are the same photo at different zoom levels — starting wide and progressively more zoomed in with each scroll section. The pinned text stays fixed as the world behind it closes in on a focal point."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.12
-    type: text
-    label: "[color] A sticky sidebar progress list shows five items."
-    value: "A sticky sidebar progress list shows five items. As each background section activates, the corresponding list item highlights — scaling up slightly and shifting from muted to full color — and the previous one dims back down."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.13
-    type: text
-    label: "[gradient] Each background section has a distinct sound-wave or frequency visualization SVG that fades in with the background and animates in a loop — a looping pulse or oscillation — giving each section its own ambient motion while the text stays still."
-    value: "Each background section has a distinct sound-wave or frequency visualization SVG that fades in with the background and animates in a loop — a looping pulse or oscillation — giving each section its own ambient motion while the text stays still."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.14
-    type: text
-    label: "[image] The background swap is driven by a clipping reveal rather than a crossfade — the new background image expands from a small circle in the center, growing to fill the entire viewport before the next scroll section takes over."
-    value: "The background swap is driven by a clipping reveal rather than a crossfade — the new background image expands from a small circle in the center, growing to fill the entire viewport before the next scroll section takes over."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.15
-    type: text
-    label: "[color] Pin a bold section title and swap five background colors beneath it."
-    value: "Pin a bold section title and swap five background colors beneath it. Each background color is accompanied by a unique subtle pattern that tiles across the background — switching pattern and color simultaneously creates a complete scene change beneath the static text."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.16
-    type: text
-    label: "[gradient] The sticky text block contains multiple lines, and each line has a different scroll range for its background section — so as you scroll, the background behind each line changes at a different threshold, creating a cascading section swap effect."
-    value: "The sticky text block contains multiple lines, and each line has a different scroll range for its background section — so as you scroll, the background behind each line changes at a different threshold, creating a cascading section swap effect."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.17
-    type: text
-    label: "[image] Background images in the swap sequence enter with a horizontal ken-burns motion — each image slowly pans left to right during its active scroll range, adding life to the static pinned section without overwhelming the fixed headline."
-    value: "Background images in the swap sequence enter with a horizontal ken-burns motion — each image slowly pans left to right during its active scroll range, adding life to the static pinned section without overwhelming the fixed headline."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.18
-    type: text
-    label: "[color] A sticky quote rotator pairs with background color swaps — each background section reveals a new quote by the same author."
-    value: "A sticky quote rotator pairs with background color swaps — each background section reveals a new quote by the same author. The outgoing quote fades and rises, the incoming quote fades and rises into place, all while the author name stays permanently pinned."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.19
-    type: text
-    label: "[gradient] The section has a sticky frosted overlay element — a card behind the text — that tints to a semi-transparent version of the current background color with each swap, keeping the text readable while still reflecting the changing background palette."
-    value: "The section has a sticky frosted overlay element — a card behind the text — that tints to a semi-transparent version of the current background color with each swap, keeping the text readable while still reflecting the changing background palette."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.sticky_text_background_swap.20
-    type: text
-    label: "[image] As background images swap, a thin border around the pinned text container changes color to match the dominant hue of the incoming image — extracted at runtime — so the text frame always harmonizes with the backdrop behind it."
-    value: "As background images swap, a thin border around the pinned text container changes color to match the dominant hue of the incoming image — extracted at runtime — so the text frame always harmonizes with the backdrop behind it."
-    section: sticky_text_background_swap
-    enabled: false
-  - key: animations.staggered_image_grid.enabled
-    type: text
-    label: "Staggered Image Grid — enable category"
-    value: ""
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.1
-    type: text
-    label: "[enter] A 3x3 image grid enters the viewport with each image fading in and scaling up from 90%, staggered diagonally from the top-left corner to the bottom-right — the cascade travels across the grid like a wave rolling from one corner to the other."
-    value: "A 3x3 image grid enters the viewport with each image fading in and scaling up from 90%, staggered diagonally from the top-left corner to the bottom-right — the cascade travels across the grid like a wave rolling from one corner to the other."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.2
-    type: text
-    label: "[direction] The image grid items slide in from alternating directions — odd-numbered items enter from the left and even-numbered from the right — creating a symmetrical inward collapse as the grid assembles itself from the outside edges."
-    value: "The image grid items slide in from alternating directions — odd-numbered items enter from the left and even-numbered from the right — creating a symmetrical inward collapse as the grid assembles itself from the outside edges."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.3
-    type: text
-    label: "[enter] Each image in the grid starts as a blurred, desaturated placeholder and resolves to sharp and full-color with a stagger — as if the images are loading one by one in sequence, left to right, top to bottom."
-    value: "Each image in the grid starts as a blurred, desaturated placeholder and resolves to sharp and full-color with a stagger — as if the images are loading one by one in sequence, left to right, top to bottom."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.4
-    type: text
-    label: "[clip] Grid images reveal with a clip-path wipe — each image starts fully clipped and the clip rectangle expands from the center outward, staggered by 80ms per item, so the grid fills in as a ripple of expanding squares."
-    value: "Grid images reveal with a clip-path wipe — each image starts fully clipped and the clip rectangle expands from the center outward, staggered by 80ms per item, so the grid fills in as a ripple of expanding squares."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.5
-    type: text
-    label: "[direction] The portfolio grid enters with a vertical stagger by row — all items in row one animate in first, then row two, then row three — each row sliding up from 30px below with opacity 0, giving the grid a floor-by-floor build feel."
-    value: "The portfolio grid enters with a vertical stagger by row — all items in row one animate in first, then row two, then row three — each row sliding up from 30px below with opacity 0, giving the grid a floor-by-floor build feel."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.6
-    type: text
-    label: "[enter] Images in the grid enter with a rotation from 6 degrees to 0, combined with scale and opacity — each image tilts into place as it arrives, staggered column by column from left to right."
-    value: "Images in the grid enter with a rotation from 6 degrees to 0, combined with scale and opacity — each image tilts into place as it arrives, staggered column by column from left to right."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.7
-    type: text
-    label: "[clip] A masonry grid reveals images with a top-to-bottom clip wipe on each item individually — the clip starts at the top and sweeps downward, staggered so shorter columns start after taller ones and all finish at the same time."
-    value: "A masonry grid reveals images with a top-to-bottom clip wipe on each item individually — the clip starts at the top and sweeps downward, staggered so shorter columns start after taller ones and all finish at the same time."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.8
-    type: text
-    label: "[hover] After the grid entrance animation completes, hovering any image causes it to scale to 102% while adjacent images scale to 98% — a subtle push-away effect that focuses attention on the hovered item without abrupt jumps."
-    value: "After the grid entrance animation completes, hovering any image causes it to scale to 102% while adjacent images scale to 98% — a subtle push-away effect that focuses attention on the hovered item without abrupt jumps."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.9
-    type: text
-    label: "[enter] A 4-column image grid enters with a wave stagger — the delay for each item is calculated by its column index, creating a left-to-right cascade where every column's images animate in together, sweeping across the layout."
-    value: "A 4-column image grid enters with a wave stagger — the delay for each item is calculated by its column index, creating a left-to-right cascade where every column's images animate in together, sweeping across the layout."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.10
-    type: text
-    label: "[direction] Grid images enter from outside the viewport in their actual direction from center — top-left image enters from the top-left, center-right image from the right — all converging inward to their grid positions simultaneously."
-    value: "Grid images enter from outside the viewport in their actual direction from center — top-left image enters from the top-left, center-right image from the right — all converging inward to their grid positions simultaneously."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.11
-    type: text
-    label: "[clip] Each grid image has a colored overlay at full opacity on load."
-    value: "Each grid image has a colored overlay at full opacity on load. As the item enters the viewport, the overlay slides off to reveal the photo beneath — the slide direction alternates by row: odd rows reveal left-to-right, even rows right-to-left."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.12
-    type: text
-    label: "[hover] The image grid sits at 85% scale on load and expands to 100% as a unit when it scrolls into view, then each individual image stagger-fades from 70% to 100% opacity — a two-stage entrance that first reveals the grid shape then populates it."
-    value: "The image grid sits at 85% scale on load and expands to 100% as a unit when it scrolls into view, then each individual image stagger-fades from 70% to 100% opacity — a two-stage entrance that first reveals the grid shape then populates it."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.13
-    type: text
-    label: "[enter] A square grid of 16 images enters with a random stagger — each item has a randomly assigned delay between 0 and 600ms — so the grid fills in unpredictably, as if each image is arriving from a separate source at its own time."
-    value: "A square grid of 16 images enters with a random stagger — each item has a randomly assigned delay between 0 and 600ms — so the grid fills in unpredictably, as if each image is arriving from a separate source at its own time."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.14
-    type: text
-    label: "[clip] Images reveal with an iris clip-path — starting as a small circle at each image's center and expanding to fill the image frame — staggered in a spiral pattern from the center of the grid outward."
-    value: "Images reveal with an iris clip-path — starting as a small circle at each image's center and expanding to fill the image frame — staggered in a spiral pattern from the center of the grid outward."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.15
-    type: text
-    label: "[direction] The image grid entrance is driven directly by scroll position rather than a one-shot trigger — as the user scrolls down, images progressively appear in sequence, and scrolling back up reverses them, so the user controls the reveal pace."
-    value: "The image grid entrance is driven directly by scroll position rather than a one-shot trigger — as the user scrolls down, images progressively appear in sequence, and scrolling back up reverses them, so the user controls the reveal pace."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.16
-    type: text
-    label: "[hover] On hover, the entire grid dims to 40% opacity except the hovered image which stays at 100% — the spotlight effect transitions smoothly with a 200ms ease, and shifts instantly to whichever new image the cursor moves to."
-    value: "On hover, the entire grid dims to 40% opacity except the hovered image which stays at 100% — the spotlight effect transitions smoothly with a 200ms ease, and shifts instantly to whichever new image the cursor moves to."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.17
-    type: text
-    label: "[enter] A photography grid enters with each image dropping in from above its final position — starting 60px higher — and settling with a slight bounce ease, staggered in reading order, as if each photo is being pinned to a board one by one."
-    value: "A photography grid enters with each image dropping in from above its final position — starting 60px higher — and settling with a slight bounce ease, staggered in reading order, as if each photo is being pinned to a board one by one."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.18
-    type: text
-    label: "[clip] Grid items reveal with a horizontal blinds effect — each image is divided into five horizontal strips that each expand from 0 height to full height with a stagger of 40ms per strip — the image assembles like venetian blinds opening."
-    value: "Grid items reveal with a horizontal blinds effect — each image is divided into five horizontal strips that each expand from 0 height to full height with a stagger of 40ms per strip — the image assembles like venetian blinds opening."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.19
-    type: text
-    label: "[enter] An image grid entrance uses a 3D card-flip reveal — each image starts face-down (rotateY 90deg) and flips to face-forward staggered across the grid, as if a dealer is turning over a hand of cards across the layout."
-    value: "An image grid entrance uses a 3D card-flip reveal — each image starts face-down (rotateY 90deg) and flips to face-forward staggered across the grid, as if a dealer is turning over a hand of cards across the layout."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.staggered_image_grid.20
-    type: text
-    label: "[hover] After the staggered entrance, the grid supports a tilt interaction — as the mouse moves across the grid, each image tilts on X and Y axes based on the cursor's distance from that image's center, creating a parallax field of depth across the whole grid."
-    value: "After the staggered entrance, the grid supports a tilt interaction — as the mouse moves across the grid, each image tilts on X and Y axes based on the cursor's distance from that image's center, creating a parallax field of depth across the whole grid."
-    section: staggered_image_grid
-    enabled: false
-  - key: animations.card_flip_3d_rotate.enabled
-    type: text
-    label: "Card Flip 3d Rotate — enable category"
-    value: ""
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.1
-    type: text
-    label: "[hover] A service card flips on hover — the front shows an icon and title, the back reveals a description and CTA button."
-    value: "A service card flips on hover — the front shows an icon and title, the back reveals a description and CTA button. The flip rotates on the Y axis with a smooth 0.6s ease, and the card lifts slightly with a translateZ as it begins turning."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.2
-    type: text
-    label: "[scroll] A row of feature cards flips into view as the section scrolls into the viewport — each card starts face-down and rotates to face-forward with a stagger of 100ms per card, as if being dealt from a deck flat on the table."
-    value: "A row of feature cards flips into view as the section scrolls into the viewport — each card starts face-down and rotates to face-forward with a stagger of 100ms per card, as if being dealt from a deck flat on the table."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.3
-    type: text
-    label: "[hover] A team member card flips to reveal bio and contact details on the back."
-    value: "A team member card flips to reveal bio and contact details on the back. During the flip, the card casts a soft scale shadow on its container that grows as it reaches 90 degrees and shrinks as it completes the turn."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.4
-    type: text
-    label: "[3d] A pricing card tilts continuously on the X and Y axes following the user's cursor position within a 15 degree range — when the cursor leaves, it springs back to flat with a gentle oscillation, as if the card is a physical object on a table."
-    value: "A pricing card tilts continuously on the X and Y axes following the user's cursor position within a 15 degree range — when the cursor leaves, it springs back to flat with a gentle oscillation, as if the card is a physical object on a table."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.5
-    type: text
-    label: "[scroll] Cards in a grid flip on scroll — but instead of Y-axis flips, they rotate on the X axis as if the cards are tipping forward toward the viewer."
-    value: "Cards in a grid flip on scroll — but instead of Y-axis flips, they rotate on the X axis as if the cards are tipping forward toward the viewer. The flip is staggered by column so a left-to-right wave of forward-tipping cards sweeps across the grid."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.6
-    type: text
-    label: "[hover] A product card does a partial 3D tilt on hover — not a full flip, just a 12 degree rotateY lean in the direction of the cursor — combined with the product image shifting slightly in the opposite direction of the tilt for a parallax-inside-card effect."
-    value: "A product card does a partial 3D tilt on hover — not a full flip, just a 12 degree rotateY lean in the direction of the cursor — combined with the product image shifting slightly in the opposite direction of the tilt for a parallax-inside-card effect."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.7
-    type: text
-    label: "[3d] A card stack entrance animates each card rotating in from perpendicular — starting at rotateY 90deg from the right — and landing flat with a bounce."
-    value: "A card stack entrance animates each card rotating in from perpendicular — starting at rotateY 90deg from the right — and landing flat with a bounce. Cards stagger by 80ms so the stack assembles from back to front."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.8
-    type: text
-    label: "[scroll] A testimonial card section flips each quote card as the scroll reaches it — the card rotates 180 degrees on the Y axis and the quote is revealed on the back, as if turning the card over to read what's written on the reverse side."
-    value: "A testimonial card section flips each quote card as the scroll reaches it — the card rotates 180 degrees on the Y axis and the quote is revealed on the back, as if turning the card over to read what's written on the reverse side."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.9
-    type: text
-    label: "[hover] A portfolio card lifts and rotates 5 degrees on hover — translateZ 20px and rotateX minus 3 degrees — so it feels like picking up a physical card."
-    value: "A portfolio card lifts and rotates 5 degrees on hover — translateZ 20px and rotateX minus 3 degrees — so it feels like picking up a physical card. The surrounding cards press down slightly in response, reinforcing the 3D space."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.10
-    type: text
-    label: "[3d] A full-screen card rotates slowly on its Y axis in a continuous loop at 0."
-    value: "A full-screen card rotates slowly on its Y axis in a continuous loop at 0.5 RPM while idle — showing 3D depth between the front and back content. On hover the rotation pauses and the card aligns to face-forward perfectly."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.11
-    type: text
-    label: "[scroll] Fact cards flip into position as they scroll into view, but the flip axis is diagonal — rotateX and rotateY simultaneously — so the card tumbles in from a corner angle before settling flat, adding a more dynamic entrance than a straight axial flip."
-    value: "Fact cards flip into position as they scroll into view, but the flip axis is diagonal — rotateX and rotateY simultaneously — so the card tumbles in from a corner angle before settling flat, adding a more dynamic entrance than a straight axial flip."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.12
-    type: text
-    label: "[hover] Clicking a card triggers a 3D flip to its detail view."
-    value: "Clicking a card triggers a 3D flip to its detail view. While flipped, clicking a back-arrow button triggers the reverse flip back to the front — the card maintains its 3D depth throughout so both faces feel like sides of the same physical object."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.13
-    type: text
-    label: "[3d] A knowledge base card grid uses perspective depth — cards closer to the edges of the grid tilt slightly inward toward center, as if arranged on a curved surface facing the viewer."
-    value: "A knowledge base card grid uses perspective depth — cards closer to the edges of the grid tilt slightly inward toward center, as if arranged on a curved surface facing the viewer. Hovering any card brings it fully flat while others maintain their tilt."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.14
-    type: text
-    label: "[scroll] A card enters from off the right edge of the screen spinning on its Y axis — completing one full rotation as it travels to its resting position — so by the time it stops moving, it has shown both its front and back during the entrance journey."
-    value: "A card enters from off the right edge of the screen spinning on its Y axis — completing one full rotation as it travels to its resting position — so by the time it stops moving, it has shown both its front and back during the entrance journey."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.15
-    type: text
-    label: "[hover] A card reveals a hover state by rotating its top edge backward — rotateX minus 20 degrees — so the card leans away at the top, as if someone is lifting the bottom edge to peek at what's underneath."
-    value: "A card reveals a hover state by rotating its top edge backward — rotateX minus 20 degrees — so the card leans away at the top, as if someone is lifting the bottom edge to peek at what's underneath. A hint of the back face is visible."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.16
-    type: text
-    label: "[3d] A card row enters with a perspective fold — all cards start as a single flat surface and fan outward on the Y axis from a shared center spine, each rotating to its final angle with a stagger, like a book being opened to reveal its pages."
-    value: "A card row enters with a perspective fold — all cards start as a single flat surface and fan outward on the Y axis from a shared center spine, each rotating to its final angle with a stagger, like a book being opened to reveal its pages."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.17
-    type: text
-    label: "[scroll] A services section has cards that flip on scroll progress — the flip is not a one-shot trigger but tied 1:1 to scroll position, so the card is exactly halfway through its flip when the user is halfway through the scroll range for that item."
-    value: "A services section has cards that flip on scroll progress — the flip is not a one-shot trigger but tied 1:1 to scroll position, so the card is exactly halfway through its flip when the user is halfway through the scroll range for that item."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.18
-    type: text
-    label: "[hover] A card does a rubber-band response on hover — the first frame of hover pushes it back slightly in Z space, then it springs forward past its neutral position, then settles — a physical press-and-release that makes interaction feel tactile."
-    value: "A card does a rubber-band response on hover — the first frame of hover pushes it back slightly in Z space, then it springs forward past its neutral position, then settles — a physical press-and-release that makes interaction feel tactile."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.19
-    type: text
-    label: "[3d] A data card reveals its chart on the back side of a flip triggered by a filter button click."
-    value: "A data card reveals its chart on the back side of a flip triggered by a filter button click. When the filter changes, all visible cards flip simultaneously to their backs, the data updates, and they flip back to front showing new values."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.card_flip_3d_rotate.20
-    type: text
-    label: "[scroll] A card grid sits in a perspective scene — all cards start tilted at rotateX 40 degrees as if lying flat on a table receding into the distance."
-    value: "A card grid sits in a perspective scene — all cards start tilted at rotateX 40 degrees as if lying flat on a table receding into the distance. As the section scrolls into view they all rotate upright to face-forward simultaneously, rising from the table."
-    section: card_flip_3d_rotate
-    enabled: false
-  - key: animations.morphing_svg_paths.enabled
-    type: text
-    label: "Morphing Svg Paths — enable category"
-    value: ""
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.1
-    type: text
-    label: "[shape] A circle in the hero section morphs into a square as the page loads, then into a triangle, then back to a circle — looping continuously with a smooth 800ms morph between each shape and a 400ms pause at each final form."
-    value: "A circle in the hero section morphs into a square as the page loads, then into a triangle, then back to a circle — looping continuously with a smooth 800ms morph between each shape and a 400ms pause at each final form."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.2
-    type: text
-    label: "[logo] The brand logomark enters by morphing from a simple dot — expanding and reshaping into the final logo path over 1."
-    value: "The brand logomark enters by morphing from a simple dot — expanding and reshaping into the final logo path over 1.2 seconds with an elastic ease — so the logo feels like it crystallizes out of a single point of origin."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.3
-    type: text
-    label: "[scroll] A decorative SVG blob in the background morphs its outline continuously as the user scrolls — tied directly to scroll position, so scrolling down stretches the blob taller and narrower, scrolling up squishes it wide and flat."
-    value: "A decorative SVG blob in the background morphs its outline continuously as the user scrolls — tied directly to scroll position, so scrolling down stretches the blob taller and narrower, scrolling up squishes it wide and flat."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.4
-    type: text
-    label: "[hover] An icon morphs between two states on hover — the default icon path smoothly transforms into an active-state icon path over 300ms, and morphs back on mouse-out, making the icon feel alive and responsive rather than just swapping images."
-    value: "An icon morphs between two states on hover — the default icon path smoothly transforms into an active-state icon path over 300ms, and morphs back on mouse-out, making the icon feel alive and responsive rather than just swapping images."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.5
-    type: text
-    label: "[shape] Section dividers between content blocks are wavy SVG paths."
-    value: "Section dividers between content blocks are wavy SVG paths. As each section scrolls into view, the wave morph animates — from a straight horizontal line to a gentle wave to a deep wave — and holds at the deepest point while the section is in view."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.6
-    type: text
-    label: "[scroll] A large background shape morphs through five different organic blob forms as the user scrolls through the page — each section has its own blob shape and they transition smoothly between forms as the scroll crosses each section boundary."
-    value: "A large background shape morphs through five different organic blob forms as the user scrolls through the page — each section has its own blob shape and they transition smoothly between forms as the scroll crosses each section boundary."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.7
-    type: text
-    label: "[logo] An SVG illustration of a product morphs into the brand icon on scroll — the detailed product outline simplifies and reshapes into the minimal logo mark as the section exits the viewport, abstracting from complex to simple."
-    value: "An SVG illustration of a product morphs into the brand icon on scroll — the detailed product outline simplifies and reshapes into the minimal logo mark as the section exits the viewport, abstracting from complex to simple."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.8
-    type: text
-    label: "[hover] Navigation icons morph on hover — the hamburger menu morphs into an X, a play button morphs into a pause, a heart outline morphs into a filled heart — all using GSAP MorphSVG with a smooth 250ms transition."
-    value: "Navigation icons morph on hover — the hamburger menu morphs into an X, a play button morphs into a pause, a heart outline morphs into a filled heart — all using GSAP MorphSVG with a smooth 250ms transition."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.9
-    type: text
-    label: "[shape] A loading state uses a morphing path — a circle that stretches into an oval, then into a line, then snaps back to a circle in a loop — the morph ease is custom-tuned to feel like stretching elastic rather than a simple tween."
-    value: "A loading state uses a morphing path — a circle that stretches into an oval, then into a line, then snaps back to a circle in a loop — the morph ease is custom-tuned to feel like stretching elastic rather than a simple tween."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.10
-    type: text
-    label: "[scroll] An abstract SVG background illustration morphs different elements at different scroll speeds — the outer shapes morph slowly, the inner details morph quickly — so as you scroll the illustration reconfigures itself at multiple rates simultaneously."
-    value: "An abstract SVG background illustration morphs different elements at different scroll speeds — the outer shapes morph slowly, the inner details morph quickly — so as you scroll the illustration reconfigures itself at multiple rates simultaneously."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.11
-    type: text
-    label: "[logo] Five SVG icons for five service categories are all morphed from the same starting path — a generic star shape."
-    value: "Five SVG icons for five service categories are all morphed from the same starting path — a generic star shape. Each icon morphs in from the star on scroll entry, establishing a visual lineage between all the services."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.12
-    type: text
-    label: "[hover] A CTA button has an SVG background shape that morphs on hover — from a standard rounded rectangle to an organic blob form — making the button feel soft and inviting on hover rather than rigid and static."
-    value: "A CTA button has an SVG background shape that morphs on hover — from a standard rounded rectangle to an organic blob form — making the button feel soft and inviting on hover rather than rigid and static."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.13
-    type: text
-    label: "[shape] A progress indicator uses a morphing path — it starts as a circle outline, and as progress increases the path morphs toward a filled arc, then a half-filled shape, then a fully filled circle — shape-morphing instead of a conventional progress bar."
-    value: "A progress indicator uses a morphing path — it starts as a circle outline, and as progress increases the path morphs toward a filled arc, then a half-filled shape, then a fully filled circle — shape-morphing instead of a conventional progress bar."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.14
-    type: text
-    label: "[scroll] Country or region outlines in an SVG map morph from abstract blob shapes into their actual geographic forms as the map section scrolls into view — each country assembles its real shape from an amorphous starting point."
-    value: "Country or region outlines in an SVG map morph from abstract blob shapes into their actual geographic forms as the map section scrolls into view — each country assembles its real shape from an amorphous starting point."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.15
-    type: text
-    label: "[logo] The page loader uses a morphing animation — a simple ring morphs into the brand logomark as loading completes, establishing the brand identity as the very first animation the user sees before any content is visible."
-    value: "The page loader uses a morphing animation — a simple ring morphs into the brand logomark as loading completes, establishing the brand identity as the very first animation the user sees before any content is visible."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.16
-    type: text
-    label: "[hover] Social media icons morph between their standard outline form and a bespoke branded shape on hover — a heart becomes a speech bubble, a share icon becomes a star — unexpected transformations that reward cursor exploration."
-    value: "Social media icons morph between their standard outline form and a bespoke branded shape on hover — a heart becomes a speech bubble, a share icon becomes a star — unexpected transformations that reward cursor exploration."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.17
-    type: text
-    label: "[shape] A data visualization uses morphing bar shapes — when the data category filter changes, each bar morphs from its current height and width to its new values rather than fading out and back in, showing continuity between the two data states."
-    value: "A data visualization uses morphing bar shapes — when the data category filter changes, each bar morphs from its current height and width to its new values rather than fading out and back in, showing continuity between the two data states."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.18
-    type: text
-    label: "[scroll] A hero illustration has a central SVG character that morphs its pose as the user scrolls — standing to leaning to sitting — with each morph timed to a scroll threshold, so the character reacts to the user's reading progress."
-    value: "A hero illustration has a central SVG character that morphs its pose as the user scrolls — standing to leaning to sitting — with each morph timed to a scroll threshold, so the character reacts to the user's reading progress."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.19
-    type: text
-    label: "[logo] The 404 page uses a morphing number sequence — the path of the zero morphs into other digits (0 to 4 to 0 to 4) in a loop, as if the page number can't decide what it is, giving the error page a playful and memorable animation."
-    value: "The 404 page uses a morphing number sequence — the path of the zero morphs into other digits (0 to 4 to 0 to 4) in a loop, as if the page number can't decide what it is, giving the error page a playful and memorable animation."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.morphing_svg_paths.20
-    type: text
-    label: "[shape] A testimonial section uses a quote mark SVG that morphs between an opening and closing quote mark as each testimonial transitions — the opening curls unfurl and re-curl as a continuous morph loop that punctuates each quote change."
-    value: "A testimonial section uses a quote mark SVG that morphs between an opening and closing quote mark as each testimonial transitions — the opening curls unfurl and re-curl as a continuous morph loop that punctuates each quote change."
-    section: morphing_svg_paths
-    enabled: false
-  - key: animations.hero_cinematic_intro.enabled
-    type: text
-    label: "Hero Cinematic Intro — enable category"
-    value: ""
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.1
-    type: text
-    label: "[sequence] On page load, the hero background fades in first, then the headline clips up into view from below its mask, then the subtext fades in, then the CTA button pops in with a scale from 90% — each element staggered 200ms apart in a deliberate, cinematic build."
-    value: "On page load, the hero background fades in first, then the headline clips up into view from below its mask, then the subtext fades in, then the CTA button pops in with a scale from 90% — each element staggered 200ms apart in a deliberate, cinematic build."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.2
-    type: text
-    label: "[scale] The hero image starts at 120% scale and slowly zooms out to 100% over 2 seconds as the page loads — a Ken Burns entrance that makes the hero feel alive the moment the page appears, before any other element has animated in."
-    value: "The hero image starts at 120% scale and slowly zooms out to 100% over 2 seconds as the page loads — a Ken Burns entrance that makes the hero feel alive the moment the page appears, before any other element has animated in."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.3
-    type: text
-    label: "[sequence] The page begins completely black."
-    value: "The page begins completely black. The hero background fades in from black over 1 second, then the logo drops from above, then the headline reveals line by line, then a thin horizontal rule draws across the full width — a dramatic theatrical curtain-raise."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.4
-    type: text
-    label: "[split] The hero section splits apart on load — the top half slides upward and the bottom half slides downward, parting like stage curtains to reveal the headline text in the center, which fades in simultaneously as the halves travel outward."
-    value: "The hero section splits apart on load — the top half slides upward and the bottom half slides downward, parting like stage curtains to reveal the headline text in the center, which fades in simultaneously as the halves travel outward."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.5
-    type: text
-    label: "[scale] A full-bleed hero video starts paused at frame zero, invisible."
-    value: "A full-bleed hero video starts paused at frame zero, invisible. On load, it fades in and begins playing while simultaneously the headline text drops from 0% opacity to full — the video and type arrive together as a unified moment."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.6
-    type: text
-    label: "[sequence] The hero loads with a staggered grid of image tiles — 12 squares that each fade in from white to the hero image content with a random stagger between 0 and 800ms — so the full image assembles itself from a mosaic of arriving pieces."
-    value: "The hero loads with a staggered grid of image tiles — 12 squares that each fade in from white to the hero image content with a random stagger between 0 and 800ms — so the full image assembles itself from a mosaic of arriving pieces."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.7
-    type: text
-    label: "[split] On load, the hero background slides in from the left while the hero text slides in from the right — both traveling to meet at center simultaneously — creating a converging composition that locks into place as a unified whole."
-    value: "On load, the hero background slides in from the left while the hero text slides in from the right — both traveling to meet at center simultaneously — creating a converging composition that locks into place as a unified whole."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.8
-    type: text
-    label: "[scale] The hero loads with the entire viewport at scale 1."
-    value: "The hero loads with the entire viewport at scale 1.15 and zooms smoothly to scale 1.0 over 1.5 seconds while opacity goes from 0 to 1 — the whole scene expanding into view as if the camera is pulling back to reveal the full picture."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.9
-    type: text
-    label: "[sequence] Each word of the hero headline arrives from a different direction — first word from the left, second from above, third from the right, fourth from below — all converging to their correct positions simultaneously, 400ms after page load."
-    value: "Each word of the hero headline arrives from a different direction — first word from the left, second from above, third from the right, fourth from below — all converging to their correct positions simultaneously, 400ms after page load."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.10
-    type: text
-    label: "[split] The hero features a large circular image that starts as a tiny dot in the center of the screen and expands radially to its full size over 1 second — an iris-open reveal that bursts open to expose the hero content."
-    value: "The hero features a large circular image that starts as a tiny dot in the center of the screen and expands radially to its full size over 1 second — an iris-open reveal that bursts open to expose the hero content."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.11
-    type: text
-    label: "[scale] The hero background image loads in sharp but then a motion blur is applied that clears over 800ms — as if the camera just stopped panning and the scene is coming into focus — before the headline fades in over the sharp image."
-    value: "The hero background image loads in sharp but then a motion blur is applied that clears over 800ms — as if the camera just stopped panning and the scene is coming into focus — before the headline fades in over the sharp image."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.12
-    type: text
-    label: "[sequence] A full-screen headline is the first thing visible — large, centered, already in place."
-    value: "A full-screen headline is the first thing visible — large, centered, already in place. Then the background image fades in behind it over 1.2 seconds, placing the text in context — reversing the typical order to lead with the message."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.13
-    type: text
-    label: "[split] The hero uses a venetian blind entrance — horizontal strips of the hero image each slide in from alternating left and right positions, assembling the full image from top to bottom like shutters closing over a window."
-    value: "The hero uses a venetian blind entrance — horizontal strips of the hero image each slide in from alternating left and right positions, assembling the full image from top to bottom like shutters closing over a window."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.14
-    type: text
-    label: "[scale] The hero number or year stat starts at 1000% scale — enormous and filling the screen — and rapidly zooms out to its final size over 600ms as other hero elements fade in around it."
-    value: "The hero number or year stat starts at 1000% scale — enormous and filling the screen — and rapidly zooms out to its final size over 600ms as other hero elements fade in around it. The scale-down creates a crash-zoom effect."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.15
-    type: text
-    label: "[sequence] On load: background is immediate, headline clips in from a mask, then a thin animated underline draws under the key word left-to-right over 400ms, then the subheading fades up, then the CTA appears with a gentle scale — five beats, perfectly timed."
-    value: "On load: background is immediate, headline clips in from a mask, then a thin animated underline draws under the key word left-to-right over 400ms, then the subheading fades up, then the CTA appears with a gentle scale — five beats, perfectly timed."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.16
-    type: text
-    label: "[split] The hero headline text and background image swap layers on entry — the text arrives first as large dark letters on white, then the background image crossfades in behind them over 800ms, recontextualizing the already-visible words."
-    value: "The hero headline text and background image swap layers on entry — the text arrives first as large dark letters on white, then the background image crossfades in behind them over 800ms, recontextualizing the already-visible words."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.17
-    type: text
-    label: "[scale] A hero section enters with a depth pop — all elements start at their final positions but with a slight rotateX 5 degrees, as if the page is lying flat, then rotate to face-forward over 1 second — the whole scene tilting up to greet the viewer."
-    value: "A hero section enters with a depth pop — all elements start at their final positions but with a slight rotateX 5 degrees, as if the page is lying flat, then rotate to face-forward over 1 second — the whole scene tilting up to greet the viewer."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.18
-    type: text
-    label: "[sequence] The page loads to a hero with just one word visible — the brand verb."
-    value: "The page loads to a hero with just one word visible — the brand verb. Then the full headline builds around it word by word, then the background image fades in, then supporting elements arrive — expanding outward from the single central word."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.19
-    type: text
-    label: "[split] The hero image is split into left and right halves."
-    value: "The hero image is split into left and right halves. On load, the left half slides in from the left and the right half from the right, meeting at center — and as they meet the headline text fades in at the seam between them."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.hero_cinematic_intro.20
-    type: text
-    label: "[scale] The hero intro uses a slow film-grain texture overlay at 80% opacity that fades out over 2 seconds after load — leaving the clean hero beneath — creating a vintage projector-warming-up feel that transitions into the modern design."
-    value: "The hero intro uses a slow film-grain texture overlay at 80% opacity that fades out over 2 seconds after load — leaving the clean hero beneath — creating a vintage projector-warming-up feel that transitions into the modern design."
-    section: hero_cinematic_intro
-    enabled: false
-  - key: animations.scroll_progress_indicator.enabled
-    type: text
-    label: "Scroll Progress Indicator — enable category"
-    value: ""
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.1
-    type: text
-    label: "[bar] A thin horizontal bar sits at the very top of the viewport, pinned above the navigation."
-    value: "A thin horizontal bar sits at the very top of the viewport, pinned above the navigation. It fills from left to right as the user scrolls the page, reaching full width exactly when the footer is reached — a clean, unobtrusive reading progress indicator."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.2
-    type: text
-    label: "[circle] A circular progress ring sits in the bottom-right corner of the screen."
-    value: "A circular progress ring sits in the bottom-right corner of the screen. Its stroke draws clockwise from the 12 o'clock position as the user scrolls, and a percentage number in the center counts up from 0 to 100 in sync with scroll progress."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.3
-    type: text
-    label: "[bar] Each major section of the page has its own progress bar at the top — a thin colored line that fills as the user scrolls through that section, and empties when they leave."
-    value: "Each major section of the page has its own progress bar at the top — a thin colored line that fills as the user scrolls through that section, and empties when they leave. The color changes per section to match the section's brand color."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.4
-    type: text
-    label: "[path] A vertical SVG path runs along the left edge of the screen — a winding, organic line."
-    value: "A vertical SVG path runs along the left edge of the screen — a winding, organic line. As the user scrolls, a colored fill traces along the path from top to bottom, like ink flowing through a drawn line, marking reading progress artistically."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.5
-    type: text
-    label: "[circle] A scroll progress indicator uses a morphing blob rather than a ring — the blob starts as a small dot at the bottom of the screen and grows and reshapes as the user scrolls, becoming larger and more complex toward the top of the page."
-    value: "A scroll progress indicator uses a morphing blob rather than a ring — the blob starts as a small dot at the bottom of the screen and grows and reshapes as the user scrolls, becoming larger and more complex toward the top of the page."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.6
-    type: text
-    label: "[bar] The section navigation in the sidebar has individual progress bars for each section link — each bar fills proportionally as the user scrolls through its section and depletes as they leave, showing not just which section they're in but how far through it."
-    value: "The section navigation in the sidebar has individual progress bars for each section link — each bar fills proportionally as the user scrolls through its section and depletes as they leave, showing not just which section they're in but how far through it."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.7
-    type: text
-    label: "[path] A dotted path connects section markers down the left side of the page like a map trail."
-    value: "A dotted path connects section markers down the left side of the page like a map trail. As the user scrolls, each dot pulses and fills in as they pass it, and the connecting line between filled dots brightens — a journey metaphor for page progress."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.8
-    type: text
-    label: "[circle] The page's scroll progress is shown as a clock face — the hand sweeps clockwise from 12 as the user scrolls, reaching 12 again at the bottom of the page."
-    value: "The page's scroll progress is shown as a clock face — the hand sweeps clockwise from 12 as the user scrolls, reaching 12 again at the bottom of the page. Hour markers pulse as the hand passes them, representing major page sections."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.9
-    type: text
-    label: "[bar] The hero image at the top of the page has a horizontal progress bar overlaid at its bottom edge."
-    value: "The hero image at the top of the page has a horizontal progress bar overlaid at its bottom edge. As the user scrolls away from the hero, the bar fills — when they've scrolled one full viewport height, it's complete and fades out."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.10
-    type: text
-    label: "[path] A vertical progress indicator uses a ruler motif — a thin vertical line with tick marks."
-    value: "A vertical progress indicator uses a ruler motif — a thin vertical line with tick marks. A sliding marker travels downward along the ruler as the user scrolls, and a numerical depth reading beside it counts up in pixels or percent."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.11
-    type: text
-    label: "[circle] Page section pills in the navigation each contain a micro progress arc — as the user scrolls into a section, that pill's arc begins filling, and completes just as the next section starts."
-    value: "Page section pills in the navigation each contain a micro progress arc — as the user scrolls into a section, that pill's arc begins filling, and completes just as the next section starts. Tapping the pill smoothly scrolls to that section's start."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.12
-    type: text
-    label: "[bar] The page footer has an arrival progress bar — a bar that starts empty when the footer first enters the viewport and fills as the user scrolls until the footer is fully visible."
-    value: "The page footer has an arrival progress bar — a bar that starts empty when the footer first enters the viewport and fills as the user scrolls until the footer is fully visible. Reaching 100% triggers a subtle congratulatory animation."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.13
-    type: text
-    label: "[path] Scroll progress is shown as a vertical waveform along the right edge of the screen — as the user scrolls, the waveform draws downward, its amplitude varying to reflect the length of each section — short sections produce narrow waves, long ones wide."
-    value: "Scroll progress is shown as a vertical waveform along the right edge of the screen — as the user scrolls, the waveform draws downward, its amplitude varying to reflect the length of each section — short sections produce narrow waves, long ones wide."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.14
-    type: text
-    label: "[circle] A large, nearly full-screen circle ring is centered behind the page content at low opacity."
-    value: "A large, nearly full-screen circle ring is centered behind the page content at low opacity. Its stroke draws as the user scrolls, making a gigantic subtle progress ring that the content sits inside — visible on close inspection but not distracting."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.15
-    type: text
-    label: "[bar] Chapter-based long-form content has a timeline bar along the bottom of the screen divided into labeled chapters."
-    value: "Chapter-based long-form content has a timeline bar along the bottom of the screen divided into labeled chapters. A playhead marker slides along it as the user scrolls, and each chapter label highlights when the playhead enters its range."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.16
-    type: text
-    label: "[path] An SVG drawing of a road or path winds down the page layout."
-    value: "An SVG drawing of a road or path winds down the page layout. A car or traveler icon follows the path as the user scrolls, moving along the road in sync with scroll progress — a literal journey metaphor for navigating long content."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.17
-    type: text
-    label: "[circle] The loading state before the page is ready uses the same circular progress ring that later shows reading progress — the ring fills during load, then immediately begins tracking scroll progress, creating continuity between the two states."
-    value: "The loading state before the page is ready uses the same circular progress ring that later shows reading progress — the ring fills during load, then immediately begins tracking scroll progress, creating continuity between the two states."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.18
-    type: text
-    label: "[bar] Each paragraph in a long article has a tiny dot beside it in the left margin."
-    value: "Each paragraph in a long article has a tiny dot beside it in the left margin. As the user scrolls past each paragraph, the dot fills in with the accent color — so the entire left margin gradually fills with color as the article is read."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.19
-    type: text
-    label: "[path] Scroll progress powers a constellation animation — stars appear in a star map illustration as the user scrolls, connecting into constellation line patterns section by section, completing the full constellation when the user reaches the end of the page."
-    value: "Scroll progress powers a constellation animation — stars appear in a star map illustration as the user scrolls, connecting into constellation line patterns section by section, completing the full constellation when the user reaches the end of the page."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.scroll_progress_indicator.20
-    type: text
-    label: "[circle] A radial menu in the corner shows section icons arranged in a semicircle."
-    value: "A radial menu in the corner shows section icons arranged in a semicircle. As the user scrolls through each section, the corresponding icon pulses to the foreground and the arc between icons fills — a compass-like guide to page position."
-    section: scroll_progress_indicator
-    enabled: false
-  - key: animations.image_clip_reveal.enabled
-    type: text
-    label: "Image Clip Reveal — enable category"
-    value: ""
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.1
-    type: text
-    label: "[wipe] As the image section scrolls into view, a rectangular clip-path wipes from left to right across the image, revealing it from edge to edge over 800ms with a smooth cubic ease — clean, editorial, and highly satisfying."
-    value: "As the image section scrolls into view, a rectangular clip-path wipes from left to right across the image, revealing it from edge to edge over 800ms with a smooth cubic ease — clean, editorial, and highly satisfying."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.2
-    type: text
-    label: "[iris] The image reveals from the center outward as a growing circle clip-path — starting as a tiny dot at the image's focal point and expanding until the full rectangular image is visible, like a camera iris opening on the subject."
-    value: "The image reveals from the center outward as a growing circle clip-path — starting as a tiny dot at the image's focal point and expanding until the full rectangular image is visible, like a camera iris opening on the subject."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.3
-    type: text
-    label: "[wipe] A vertical wipe reveals the image from top to bottom — a horizontal clip edge descends across the frame, and behind it the image appears in full detail, as if a physical blind is being raised to expose the photo beneath."
-    value: "A vertical wipe reveals the image from top to bottom — a horizontal clip edge descends across the frame, and behind it the image appears in full detail, as if a physical blind is being raised to expose the photo beneath."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.4
-    type: text
-    label: "[diagonal] The clip-path reveal travels diagonally from the top-left corner to the bottom-right — a triangular mask that expands across the image frame, revealing the photo along a diagonal front that sweeps the composition corner to corner."
-    value: "The clip-path reveal travels diagonally from the top-left corner to the bottom-right — a triangular mask that expands across the image frame, revealing the photo along a diagonal front that sweeps the composition corner to corner."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.5
-    type: text
-    label: "[wipe] A hero image pair reveals with opposing wipes — the left image wipes from left to right and the right image wipes from right to left simultaneously, both images arriving at center together to frame the headline between them."
-    value: "A hero image pair reveals with opposing wipes — the left image wipes from left to right and the right image wipes from right to left simultaneously, both images arriving at center together to frame the headline between them."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.6
-    type: text
-    label: "[iris] A circular clip reveal starts not at the center but at the subject's face or key focal point of the photo — the iris expands outward from the most important part of the image, drawing the eye before the full context is visible."
-    value: "A circular clip reveal starts not at the center but at the subject's face or key focal point of the photo — the iris expands outward from the most important part of the image, drawing the eye before the full context is visible."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.7
-    type: text
-    label: "[diagonal] An image grid reveals each item with a diagonal wipe but on alternating diagonals — odd items wipe from top-left to bottom-right, even items from top-right to bottom-left — creating a herringbone reveal pattern across the grid."
-    value: "An image grid reveals each item with a diagonal wipe but on alternating diagonals — odd items wipe from top-left to bottom-right, even items from top-right to bottom-left — creating a herringbone reveal pattern across the grid."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.8
-    type: text
-    label: "[wipe] The image sits behind a colored overlay at page load."
-    value: "The image sits behind a colored overlay at page load. On scroll trigger, the overlay wipes away in the same direction as the nearest page edge — the image and its color plate separate, with the overlay sliding off to reveal the photo underneath."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.9
-    type: text
-    label: "[iris] Multiple small circular reveals happen simultaneously across the image — six iris openings spread across the frame, each starting at a different point and expanding until their circles overlap and merge into the fully revealed image."
-    value: "Multiple small circular reveals happen simultaneously across the image — six iris openings spread across the frame, each starting at a different point and expanding until their circles overlap and merge into the fully revealed image."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.10
-    type: text
-    label: "[diagonal] A product image reveals with a chevron-shaped clip — two diagonal wipes originating from the left center and traveling to the top-right and bottom-right corners simultaneously, uncovering the image in a V-shape from left to right."
-    value: "A product image reveals with a chevron-shaped clip — two diagonal wipes originating from the left center and traveling to the top-right and bottom-right corners simultaneously, uncovering the image in a V-shape from left to right."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.11
-    type: text
-    label: "[wipe] The image reveal is tied directly to scroll position — as the user scrolls down, the clip boundary descends 1:1 with scroll distance, so the user controls exactly how much of the image is visible by how far they scroll."
-    value: "The image reveal is tied directly to scroll position — as the user scrolls down, the clip boundary descends 1:1 with scroll distance, so the user controls exactly how much of the image is visible by how far they scroll."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.12
-    type: text
-    label: "[iris] A portrait image reveals from bottom to top as an expanding ellipse — wider than tall — that grows upward from the chin to the crown, revealing the face in a natural reading order from below, as if emerging from darkness."
-    value: "A portrait image reveals from bottom to top as an expanding ellipse — wider than tall — that grows upward from the chin to the crown, revealing the face in a natural reading order from below, as if emerging from darkness."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.13
-    type: text
-    label: "[diagonal] A full-section background image reveals with a diagonal wipe that starts at the top-right corner and sweeps to the bottom-left — the reveal travels against the typical reading direction, creating a dynamic tension in the composition."
-    value: "A full-section background image reveals with a diagonal wipe that starts at the top-right corner and sweeps to the bottom-left — the reveal travels against the typical reading direction, creating a dynamic tension in the composition."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.14
-    type: text
-    label: "[wipe] An image is revealed through the negative space of large type — the clip-path is shaped like the section's headline letters, and the wipe expands the letterform cutouts until the whole image is visible, text becoming the reveal mechanism."
-    value: "An image is revealed through the negative space of large type — the clip-path is shaped like the section's headline letters, and the wipe expands the letterform cutouts until the whole image is visible, text becoming the reveal mechanism."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.15
-    type: text
-    label: "[iris] On hover, a thumbnail image expands from its natural size using an iris clip reveal — the clip circle is perfectly sized to the thumbnail on hover start and expands to a larger featured size, so the image grows without a hard cut."
-    value: "On hover, a thumbnail image expands from its natural size using an iris clip reveal — the clip circle is perfectly sized to the thumbnail on hover start and expands to a larger featured size, so the image grows without a hard cut."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.16
-    type: text
-    label: "[diagonal] A timeline image section reveals each photo with a wipe that matches the timeline direction — past events wipe from the left edge, future events from the right — so the reveal direction encodes the image's temporal position."
-    value: "A timeline image section reveals each photo with a wipe that matches the timeline direction — past events wipe from the left edge, future events from the right — so the reveal direction encodes the image's temporal position."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.17
-    type: text
-    label: "[wipe] The image reveal uses a multi-strip wipe — the image is divided into five vertical strips, each clip-path opening upward with a stagger of 60ms — the image assembles itself in a venetian-blind upward reveal."
-    value: "The image reveal uses a multi-strip wipe — the image is divided into five vertical strips, each clip-path opening upward with a stagger of 60ms — the image assembles itself in a venetian-blind upward reveal."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.18
-    type: text
-    label: "[iris] A case study hero image reveals with a slow, deliberate iris expand over 1."
-    value: "A case study hero image reveals with a slow, deliberate iris expand over 1.5 seconds — much slower than a typical entrance — timed to coincide with a headline that builds word by word over the same duration, both arriving together."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.19
-    type: text
-    label: "[diagonal] A feature image reveals with a diamond-shaped clip that expands from the center — four triangular clip edges peeling back simultaneously toward the four corners — turning the reveal into an X-shape that opens outward."
-    value: "A feature image reveals with a diamond-shaped clip that expands from the center — four triangular clip edges peeling back simultaneously toward the four corners — turning the reveal into an X-shape that opens outward."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.image_clip_reveal.20
-    type: text
-    label: "[wipe] On mobile scroll, images reveal with a bottom-to-top clip wipe to match the natural upward scroll direction — the clip edge travels in the same direction the user's thumb is moving, making the reveal feel physically connected to the gesture."
-    value: "On mobile scroll, images reveal with a bottom-to-top clip wipe to match the natural upward scroll direction — the clip edge travels in the same direction the user's thumb is moving, making the reveal feel physically connected to the gesture."
-    section: image_clip_reveal
-    enabled: false
-  - key: animations.lottie_svg_scrub.enabled
-    type: text
-    label: "Lottie Svg Scrub — enable category"
-    value: ""
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.1
-    type: text
-    label: "[scrub] Pin the section and tie a Lottie animation's playhead directly to scroll position — as the user scrolls down the animation advances frame by frame, and scrolling up rewinds it — giving the user full control over the animated story."
-    value: "Pin the section and tie a Lottie animation's playhead directly to scroll position — as the user scrolls down the animation advances frame by frame, and scrolling up rewinds it — giving the user full control over the animated story."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.2
-    type: text
-    label: "[trigger] A complex SVG line drawing of a product is drawn stroke by stroke as it scrolls into view — each path's strokeDashoffset animates from full dash to zero, staggered so the lines appear to be drawn in real time by an invisible hand."
-    value: "A complex SVG line drawing of a product is drawn stroke by stroke as it scrolls into view — each path's strokeDashoffset animates from full dash to zero, staggered so the lines appear to be drawn in real time by an invisible hand."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.3
-    type: text
-    label: "[scrub] A Lottie character animation is scrubbed by scroll — the character walks in place as the scroll advances, and the background behind them scrolls to create the illusion that the character is actually traveling through the scene."
-    value: "A Lottie character animation is scrubbed by scroll — the character walks in place as the scroll advances, and the background behind them scrolls to create the illusion that the character is actually traveling through the scene."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.4
-    type: text
-    label: "[trigger] An SVG world map has flight path lines that draw in one by one as the section scrolls — each arc path animates its strokeDashoffset from hidden to visible in sequence, with a pulse dot traveling along each path after it completes."
-    value: "An SVG world map has flight path lines that draw in one by one as the section scrolls — each arc path animates its strokeDashoffset from hidden to visible in sequence, with a pulse dot traveling along each path after it completes."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.5
-    type: text
-    label: "[scrub] A Lottie data visualization animates on scroll — bars grow, lines chart upward, and numbers tick over — all driven by the scroll progress, so the user can slow-scroll to watch the data build or fast-scroll to see the final state immediately."
-    value: "A Lottie data visualization animates on scroll — bars grow, lines chart upward, and numbers tick over — all driven by the scroll progress, so the user can slow-scroll to watch the data build or fast-scroll to see the final state immediately."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.6
-    type: text
-    label: "[trigger] An SVG icon library section reveals each icon by drawing it — the paths animate in with a stroke draw effect staggered by grid position, left to right top to bottom, so the icons appear to be sketched in front of the user."
-    value: "An SVG icon library section reveals each icon by drawing it — the paths animate in with a stroke draw effect staggered by grid position, left to right top to bottom, so the icons appear to be sketched in front of the user."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.7
-    type: text
-    label: "[scrub] A Lottie explainer animation of a complex process — like how a product works — is pinned and scrubbed."
-    value: "A Lottie explainer animation of a complex process — like how a product works — is pinned and scrubbed. Progress markers appear at key animation frames as the scroll reaches them, labeling each stage of the process as it animates."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.8
-    type: text
-    label: "[trigger] An SVG signature or handwriting element draws itself on scroll entry — the letterform paths animate from 0% to 100% strokeDashoffset in sequence following the natural pen path, making the signature appear to be written in real time."
-    value: "An SVG signature or handwriting element draws itself on scroll entry — the letterform paths animate from 0% to 100% strokeDashoffset in sequence following the natural pen path, making the signature appear to be written in real time."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.9
-    type: text
-    label: "[scrub] A Lottie animated logo reveal is tied to page scroll progress — at 0% scroll the logo is in its pre-animation state, at 50% it reaches its most complex animated state, and at 100% it settles into its final clean logomark."
-    value: "A Lottie animated logo reveal is tied to page scroll progress — at 0% scroll the logo is in its pre-animation state, at 50% it reaches its most complex animated state, and at 100% it settles into its final clean logomark."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.10
-    type: text
-    label: "[trigger] An infographic SVG with multiple data layers animates each layer in sequence on scroll — the base grid draws first, then the data lines plot themselves, then the data points drop in with a scale bounce, then labels fade in beside each point."
-    value: "An infographic SVG with multiple data layers animates each layer in sequence on scroll — the base grid draws first, then the data lines plot themselves, then the data points drop in with a scale bounce, then labels fade in beside each point."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.11
-    type: text
-    label: "[scrub] A Lottie animation of seasons changing — spring to summer to autumn to winter — is scrubbed by vertical scroll."
-    value: "A Lottie animation of seasons changing — spring to summer to autumn to winter — is scrubbed by vertical scroll. The landscape transforms over the scroll journey of the page, completing the full seasonal cycle by the time the footer is reached."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.12
-    type: text
-    label: "[trigger] A complex SVG circuit board illustration has each trace animate in as the section scrolls — paths light up in sequence following the circuit's logical flow from power input to components to output, like electricity traveling the board."
-    value: "A complex SVG circuit board illustration has each trace animate in as the section scrolls — paths light up in sequence following the circuit's logical flow from power input to components to output, like electricity traveling the board."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.13
-    type: text
-    label: "[scrub] A Lottie character reacts to scroll velocity — scrolling slowly makes the character walk calmly, scrolling quickly makes them run, and scrolling very fast makes them sprint with exaggerated motion blur — velocity changes the animation playback rate."
-    value: "A Lottie character reacts to scroll velocity — scrolling slowly makes the character walk calmly, scrolling quickly makes them run, and scrolling very fast makes them sprint with exaggerated motion blur — velocity changes the animation playback rate."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.14
-    type: text
-    label: "[trigger] An SVG architectural blueprint draws itself on scroll entry — structural lines appear first, then room labels, then dimension markers, then detail callouts — the plan assembling itself in the logical order a drafter would create it."
-    value: "An SVG architectural blueprint draws itself on scroll entry — structural lines appear first, then room labels, then dimension markers, then detail callouts — the plan assembling itself in the logical order a drafter would create it."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.15
-    type: text
-    label: "[scrub] A Lottie loading animation morphs into a success or error state based on a form completion."
-    value: "A Lottie loading animation morphs into a success or error state based on a form completion. The loading Lottie plays normally during wait, then the scroll (or a state change) triggers the jump to the success frame, which plays through to completion."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.16
-    type: text
-    label: "[trigger] An SVG of a human body or anatomical diagram draws its systems in layers on scroll — skeleton first, then organ outlines, then detail lines, then labels — each system fading in over the previous as the scroll progresses through the section."
-    value: "An SVG of a human body or anatomical diagram draws its systems in layers on scroll — skeleton first, then organ outlines, then detail lines, then labels — each system fading in over the previous as the scroll progresses through the section."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.17
-    type: text
-    label: "[scrub] A Lottie animation of a product being assembled is scrubbed by scroll — each scroll increment reveals the next component being added, so the user must scroll through the entire build process to see the finished product revealed."
-    value: "A Lottie animation of a product being assembled is scrubbed by scroll — each scroll increment reveals the next component being added, so the user must scroll through the entire build process to see the finished product revealed."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.18
-    type: text
-    label: "[trigger] An SVG timeline graphic draws its connecting line on scroll — a horizontal or vertical path animating its strokeDashoffset from start to end — and as the line reaches each event marker, that marker's dot scales in and its label fades up."
-    value: "An SVG timeline graphic draws its connecting line on scroll — a horizontal or vertical path animating its strokeDashoffset from start to end — and as the line reaches each event marker, that marker's dot scales in and its label fades up."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.19
-    type: text
-    label: "[scrub] Two Lottie animations play in sync with scroll but at different speeds — a foreground animation advances at 1:1 scroll ratio while a background animation advances at 0."
-    value: "Two Lottie animations play in sync with scroll but at different speeds — a foreground animation advances at 1:1 scroll ratio while a background animation advances at 0.5x — creating a parallax effect between two layered animated scenes."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.lottie_svg_scrub.20
-    type: text
-    label: "[trigger] An SVG logo is drawn stroke by stroke on page load rather than on scroll — the brand mark assembles itself over 2 seconds as the very first animation on the page, with each path drawing in sequence from the logo's visual starting point."
-    value: "An SVG logo is drawn stroke by stroke on page load rather than on scroll — the brand mark assembles itself over 2 seconds as the very first animation on the page, with each path drawing in sequence from the logo's visual starting point."
-    section: lottie_svg_scrub
-    enabled: false
-  - key: animations.sticky_media_text_fade.enabled
-    type: text
-    label: "Sticky Media Text Fade — enable category"
-    value: ""
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.1
-    type: text
-    label: "[fade] Pin a product image or video on the right half of the screen while text blocks on the left scroll past it."
-    value: "Pin a product image or video on the right half of the screen while text blocks on the left scroll past it. Each text block fades in as it enters the center of the viewport and fades out as it leaves, with the media staying perfectly still throughout."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.2
-    type: text
-    label: "[swap] A sticky full-bleed background video plays on loop while text sections scroll over it."
-    value: "A sticky full-bleed background video plays on loop while text sections scroll over it. Each new text section has a unique color overlay that crossfades in as the text arrives, tinting the video to match the current section's mood."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.3
-    type: text
-    label: "[fade] Feature explanation sections each have a sticky phone mockup on the right."
-    value: "Feature explanation sections each have a sticky phone mockup on the right. As each feature text scrolls into view, the phone screen content crossfades to show that feature's UI — sticky device, swappable screen content."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.4
-    type: text
-    label: "[reveal] A sticky 3D product render sits at center while feature bullet points scroll alongside it."
-    value: "A sticky 3D product render sits at center while feature bullet points scroll alongside it. As each bullet enters view, its corresponding part of the product highlights — a colored glow pulses on that component — then fades when the next bullet takes over."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.5
-    type: text
-    label: "[fade] A documentary-style section pins a full-screen photo on the left while long-form text scrolls on the right."
-    value: "A documentary-style section pins a full-screen photo on the left while long-form text scrolls on the right. The photo has a vignette overlay that pulses at key paragraphs — darkening around the edges to draw focus — then relaxing again."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.6
-    type: text
-    label: "[swap] A sticky laptop mockup displays a website demo."
-    value: "A sticky laptop mockup displays a website demo. As the user scrolls through feature descriptions beside it, the laptop screen animates to show different pages of the demo — each transition a smooth GSAP crossfade between screenshot states."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.7
-    type: text
-    label: "[fade] Pin a video reel on the left half."
-    value: "Pin a video reel on the left half. As text sections scroll on the right, the video playback speed changes — slow during contemplative sections, faster during energetic ones — the text controls the video's pacing as a narrative tool."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.8
-    type: text
-    label: "[reveal] A sticky infographic sits on the right side and builds up progressively as the user scrolls through explanatory text on the left — each text section adds a new layer or annotation to the infographic, growing the visual alongside the reading."
-    value: "A sticky infographic sits on the right side and builds up progressively as the user scrolls through explanatory text on the left — each text section adds a new layer or annotation to the infographic, growing the visual alongside the reading."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.9
-    type: text
-    label: "[fade] A sticky map or diagram is on the left."
-    value: "A sticky map or diagram is on the left. As scrollable text sections highlight different regions or components, the corresponding area on the map highlights with a colored overlay that fades in and out — the map and text stay in perfect sync."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.10
-    type: text
-    label: "[swap] A sticky split screen has media on one side and a quote block on the other."
-    value: "A sticky split screen has media on one side and a quote block on the other. As the user scrolls, the quote text cross-fades to the next quote while the media crossfades to its paired image — both sides swap simultaneously, always paired together."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.11
-    type: text
-    label: "[fade] Pin an illustration on the right while text scrolls left."
-    value: "Pin an illustration on the right while text scrolls left. At each text section boundary, a new illustration element fades in on top of the existing illustration — building a complex layered scene incrementally as the user reads through the copy."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.12
-    type: text
-    label: "[reveal] A sticky before/after image comparison sits pinned while scroll-driven text describes the transformation."
-    value: "A sticky before/after image comparison sits pinned while scroll-driven text describes the transformation. As the text advances, the divider of the before/after slider moves — revealing more of the after state as the benefits are described."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.13
-    type: text
-    label: "[fade] A sticky full-bleed image on the right has a frosted glass text card overlaid on it."
-    value: "A sticky full-bleed image on the right has a frosted glass text card overlaid on it. The card content changes as scroll sections advance — the overlay fades out, the text updates, the overlay fades back in — the image stays, only the card changes."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.14
-    type: text
-    label: "[swap] A sticky video plays a specific chapter when its paired text section is in view."
-    value: "A sticky video plays a specific chapter when its paired text section is in view. The video seeks to the chapter's timestamp as each text section scrolls into the active zone, playing the relevant segment while the user reads the description."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.15
-    type: text
-    label: "[fade] A pinned product photo changes colorway as the user scrolls through color variant descriptions."
-    value: "A pinned product photo changes colorway as the user scrolls through color variant descriptions. The product image crossfades from one color to the next in sync with the scroll-in of the corresponding text — sticky frame, dynamic color."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.16
-    type: text
-    label: "[reveal] A sticky statistical graphic pins on the left while text analysis scrolls on the right."
-    value: "A sticky statistical graphic pins on the left while text analysis scrolls on the right. Each text paragraph, as it enters view, highlights the corresponding data point in the graphic with a scale pulse and color shift — text and data in conversation."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.17
-    type: text
-    label: "[fade] Pin a full-height image of a person or character."
-    value: "Pin a full-height image of a person or character. As text scrolls alongside, the character's expression subtly changes between photos — crossfading between shots where their pose or expression matches the emotional tone of the current text section."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.18
-    type: text
-    label: "[swap] A sticky media area shows a rotating sequence of testimonial videos — each one loads as its corresponding text quote scrolls into the active viewport zone, pauses while the text is active, and transitions out as the next testimonial takes over."
-    value: "A sticky media area shows a rotating sequence of testimonial videos — each one loads as its corresponding text quote scrolls into the active viewport zone, pauses while the text is active, and transitions out as the next testimonial takes over."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.19
-    type: text
-    label: "[fade] A sticky abstract animation plays in a loop on the left — particles, geometric shapes, or fluid motion."
-    value: "A sticky abstract animation plays in a loop on the left — particles, geometric shapes, or fluid motion. As text sections scroll, the animation's color palette crossfades to match each section's theme, the motion staying constant but the palette shifting."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.sticky_media_text_fade.20
-    type: text
-    label: "[reveal] A pinned process diagram adds glowing active-state highlights to each step as its description scrolls into view on the right — the diagram starts in a neutral muted state and lights up progressively, step by step, as the user reads through the process."
-    value: "A pinned process diagram adds glowing active-state highlights to each step as its description scrolls into view on the right — the diagram starts in a neutral muted state and lights up progressively, step by step, as the user reads through the process."
-    section: sticky_media_text_fade
-    enabled: false
-  - key: animations.counter_data_animation.enabled
-    type: text
-    label: "Counter Data Animation — enable category"
-    value: ""
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.1
-    type: text
-    label: "[counter] Statistics section with large numbers that count up from zero to their final values as they scroll into the viewport — each number uses a power2."
-    value: "Statistics section with large numbers that count up from zero to their final values as they scroll into the viewport — each number uses a power2.out ease so it accelerates quickly and slows to a satisfying stop exactly on the final digit."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.2
-    type: text
-    label: "[chart] A bar chart draws in on scroll entry — each bar grows from 0% height to its data value with a stagger of 80ms per bar, using a spring ease so each bar slightly overshoots its final height and bounces back before settling."
-    value: "A bar chart draws in on scroll entry — each bar grows from 0% height to its data value with a stagger of 80ms per bar, using a spring ease so each bar slightly overshoots its final height and bounces back before settling."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.3
-    type: text
-    label: "[counter] A revenue or user count stat animates as a formatted number — counting up with comma separators appearing naturally as the number grows past thousands and millions — the formatting updates in real time as the counter climbs."
-    value: "A revenue or user count stat animates as a formatted number — counting up with comma separators appearing naturally as the number grows past thousands and millions — the formatting updates in real time as the counter climbs."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.4
-    type: text
-    label: "[chart] A line chart draws its path from left to right on scroll — the SVG path's strokeDashoffset animates from full to zero, and data point dots scale in with a spring bounce as the drawing line reaches each one."
-    value: "A line chart draws its path from left to right on scroll — the SVG path's strokeDashoffset animates from full to zero, and data point dots scale in with a spring bounce as the drawing line reaches each one."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.5
-    type: text
-    label: "[counter] A percentage stat animates both the number counting up and a circular progress ring filling simultaneously — the ring and the number reach 100% at exactly the same moment, reinforcing the data with two synchronized visual channels."
-    value: "A percentage stat animates both the number counting up and a circular progress ring filling simultaneously — the ring and the number reach 100% at exactly the same moment, reinforcing the data with two synchronized visual channels."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.6
-    type: text
-    label: "[chart] A horizontal bar chart animates each bar extending from the left axis on scroll entry — staggered by 60ms per row — and the bar labels fade in as each bar finishes extending, keeping the focus on one data point at a time."
-    value: "A horizontal bar chart animates each bar extending from the left axis on scroll entry — staggered by 60ms per row — and the bar labels fade in as each bar finishes extending, keeping the focus on one data point at a time."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.7
-    type: text
-    label: "[counter] A comparison stat section shows two numbers that count up simultaneously but at different rates — one reaching its value faster than the other — so the relative difference between them is immediately legible through the animation timing."
-    value: "A comparison stat section shows two numbers that count up simultaneously but at different rates — one reaching its value faster than the other — so the relative difference between them is immediately legible through the animation timing."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.8
-    type: text
-    label: "[chart] A donut or pie chart animates its segments in sequence on scroll entry — each slice sweeps in clockwise with a stagger, and the center total counts up as each segment adds its value, reaching the grand total when the last segment completes."
-    value: "A donut or pie chart animates its segments in sequence on scroll entry — each slice sweeps in clockwise with a stagger, and the center total counts up as each segment adds its value, reaching the grand total when the last segment completes."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.9
-    type: text
-    label: "[counter] A countdown timer animates in reverse — starting at a large number and counting down to a deadline value — with each digit flip animated as a vertical roll, like a physical split-flap display ticking down the remaining count."
-    value: "A countdown timer animates in reverse — starting at a large number and counting down to a deadline value — with each digit flip animated as a vertical roll, like a physical split-flap display ticking down the remaining count."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.10
-    type: text
-    label: "[chart] A scatter plot reveals its data points one by one on scroll — each dot scales in from zero with a slight bounce, positioned at its x/y coordinate, and a connecting line draws between sequential points after all dots have arrived."
-    value: "A scatter plot reveals its data points one by one on scroll — each dot scales in from zero with a slight bounce, positioned at its x/y coordinate, and a connecting line draws between sequential points after all dots have arrived."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.11
-    type: text
-    label: "[counter] Impact stats animate with a visual emphasis burst at completion — when the counter reaches its final value, a ring expands outward from the number and fades, and the number itself briefly scales up to 110% before settling back to 100%."
-    value: "Impact stats animate with a visual emphasis burst at completion — when the counter reaches its final value, a ring expands outward from the number and fades, and the number itself briefly scales up to 110% before settling back to 100%."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.12
-    type: text
-    label: "[chart] A stacked bar chart animates each segment layer separately — the base layer extends first, then the second segment grows on top of it, then the third — building the stack from bottom to top so each layer's contribution is clearly visible."
-    value: "A stacked bar chart animates each segment layer separately — the base layer extends first, then the second segment grows on top of it, then the third — building the stack from bottom to top so each layer's contribution is clearly visible."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.13
-    type: text
-    label: "[counter] A carbon footprint or environmental stat uses an icon that fills in proportion to the counter's progress — a leaf filling with green, a globe with coverage, a battery icon with charge level — icon fill and number count in sync."
-    value: "A carbon footprint or environmental stat uses an icon that fills in proportion to the counter's progress — a leaf filling with green, a globe with coverage, a battery icon with charge level — icon fill and number count in sync."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.14
-    type: text
-    label: "[chart] A timeline chart plots events as dots along a horizontal axis on scroll — the axis line draws first from left to right, then each event dot drops in from above to land on its date position with a small bounce."
-    value: "A timeline chart plots events as dots along a horizontal axis on scroll — the axis line draws first from left to right, then each event dot drops in from above to land on its date position with a small bounce."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.15
-    type: text
-    label: "[counter] A multi-stat dashboard layout has all counters start simultaneously on scroll entry but finish at different times based on their values — smaller numbers finish quickly, larger numbers take longer — making the relative size of stats viscerally clear."
-    value: "A multi-stat dashboard layout has all counters start simultaneously on scroll entry but finish at different times based on their values — smaller numbers finish quickly, larger numbers take longer — making the relative size of stats viscerally clear."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.16
-    type: text
-    label: "[chart] An area chart fills its color region progressively from left to right on scroll — both the outline path and the filled area beneath it animate together, the fill lagging slightly behind the stroke to create a paint-filling-in-a-drawing effect."
-    value: "An area chart fills its color region progressively from left to right on scroll — both the outline path and the filled area beneath it animate together, the fill lagging slightly behind the stroke to create a paint-filling-in-a-drawing effect."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.17
-    type: text
-    label: "[counter] A word count or document stat animates with the actual words appearing and stacking in a text block in fast-forward — lines of placeholder text filling in rapidly until the final word count number is both displayed numerically and literally visible."
-    value: "A word count or document stat animates with the actual words appearing and stacking in a text block in fast-forward — lines of placeholder text filling in rapidly until the final word count number is both displayed numerically and literally visible."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.18
-    type: text
-    label: "[chart] A radar/spider chart draws each axis line first, then the data polygon path traces around the axes from the first spoke clockwise, and data point dots appear at each vertex as the path reaches them."
-    value: "A radar/spider chart draws each axis line first, then the data polygon path traces around the axes from the first spoke clockwise, and data point dots appear at each vertex as the path reaches them."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.19
-    type: text
-    label: "[counter] Currency amounts count up with the decimal precision changing as the number grows — starting with cents, then rounding to dollars as the value climbs past hundreds, then to thousands — the precision of the counter reflects the scale of the value."
-    value: "Currency amounts count up with the decimal precision changing as the number grows — starting with cents, then rounding to dollars as the value climbs past hundreds, then to thousands — the precision of the counter reflects the scale of the value."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.counter_data_animation.20
-    type: text
-    label: "[chart] A Gantt-style timeline chart animates each row's bar extending from its start date to its end date with a stagger by row — early start dates begin first, later ones follow — so the chart builds in chronological order of project start."
-    value: "A Gantt-style timeline chart animates each row's bar extending from its start date to its end date with a stagger by row — early start dates begin first, later ones follow — so the chart builds in chronological order of project start."
-    section: counter_data_animation
-    enabled: false
-  - key: animations.floating_magnetic_cursor.enabled
-    type: text
-    label: "Floating Magnetic Cursor — enable category"
-    value: ""
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.1
-    type: text
-    label: "[magnetic] Buttons on the page pull the cursor toward them magnetically — within a 60px radius, the cursor begins drifting toward the button center, and the button itself shifts slightly toward the cursor position, meeting it halfway with a springy lag."
-    value: "Buttons on the page pull the cursor toward them magnetically — within a 60px radius, the cursor begins drifting toward the button center, and the button itself shifts slightly toward the cursor position, meeting it halfway with a springy lag."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.2
-    type: text
-    label: "[custom] Replace the default cursor with a large hollow circle that follows the mouse with a 150ms lag using GSAP quickTo for smooth interpolation — it trails behind the true cursor position, feeling like it's floating through air."
-    value: "Replace the default cursor with a large hollow circle that follows the mouse with a 150ms lag using GSAP quickTo for smooth interpolation — it trails behind the true cursor position, feeling like it's floating through air."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.3
-    type: text
-    label: "[magnetic] Navigation menu items pull the cursor horizontally — as the cursor moves along the nav bar, each link magnetically attracts the cursor along the X axis, making it feel like the links are drawing the cursor between them."
-    value: "Navigation menu items pull the cursor horizontally — as the cursor moves along the nav bar, each link magnetically attracts the cursor along the X axis, making it feel like the links are drawing the cursor between them."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.4
-    type: text
-    label: "[hover] The custom cursor circle shrinks to a small dot when hovering text and expands to a large ring when hovering interactive elements — the scale transition uses a spring ease so the cursor snaps to its new size with a slight overshoot."
-    value: "The custom cursor circle shrinks to a small dot when hovering text and expands to a large ring when hovering interactive elements — the scale transition uses a spring ease so the cursor snaps to its new size with a slight overshoot."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.5
-    type: text
-    label: "[custom] A cursor follower displays the current hover action as text — hovering a video shows 'Play', hovering a link shows 'Visit', hovering an image shows 'View' — the text fades in and out as the cursor moves between element types."
-    value: "A cursor follower displays the current hover action as text — hovering a video shows 'Play', hovering a link shows 'Visit', hovering an image shows 'View' — the text fades in and out as the cursor moves between element types."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.6
-    type: text
-    label: "[magnetic] Social media icons have a magnetic field that pulls and distorts the cursor — as it approaches, the cursor morphs from its circular shape toward a pointed shape aimed at the icon center, like a magnet attracting a compass needle."
-    value: "Social media icons have a magnetic field that pulls and distorts the cursor — as it approaches, the cursor morphs from its circular shape toward a pointed shape aimed at the icon center, like a magnet attracting a compass needle."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.7
-    type: text
-    label: "[hover] On hover of a project card, a large custom cursor circle fills with a thumbnail preview image of the project — the cursor becomes a moving preview window that follows the mouse across the card area."
-    value: "On hover of a project card, a large custom cursor circle fills with a thumbnail preview image of the project — the cursor becomes a moving preview window that follows the mouse across the card area."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.8
-    type: text
-    label: "[custom] A cursor trail effect leaves five fading dots behind the cursor as it moves — each dot is slightly smaller and more transparent than the one before it, creating a comet tail that evaporates 200ms behind the cursor."
-    value: "A cursor trail effect leaves five fading dots behind the cursor as it moves — each dot is slightly smaller and more transparent than the one before it, creating a comet tail that evaporates 200ms behind the cursor."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.9
-    type: text
-    label: "[magnetic] The hero CTA button has a magnetic attraction radius of 80px — as the cursor enters this zone, the button moves toward the cursor by up to 20px in any direction, making the button appear to reach toward the user's mouse."
-    value: "The hero CTA button has a magnetic attraction radius of 80px — as the cursor enters this zone, the button moves toward the cursor by up to 20px in any direction, making the button appear to reach toward the user's mouse."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.10
-    type: text
-    label: "[hover] The cursor changes shape based on the section background — a light ring on dark backgrounds, a dark filled dot on light backgrounds — transitioning between states with a smooth 200ms crossfade as the cursor crosses section boundaries."
-    value: "The cursor changes shape based on the section background — a light ring on dark backgrounds, a dark filled dot on light backgrounds — transitioning between states with a smooth 200ms crossfade as the cursor crosses section boundaries."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.11
-    type: text
-    label: "[custom] A split-color cursor follows the mouse — one half is the accent color and the other half white — and as the cursor moves it rotates the split based on direction of travel, always showing the accent color forward and white trailing behind."
-    value: "A split-color cursor follows the mouse — one half is the accent color and the other half white — and as the cursor moves it rotates the split based on direction of travel, always showing the accent color forward and white trailing behind."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.12
-    type: text
-    label: "[magnetic] Image gallery thumbnails have a subtle magnetic push effect — as the cursor approaches, the thumbnail shifts away from the cursor by 5px, creating a repulsion field instead of attraction, making the gallery feel physically present."
-    value: "Image gallery thumbnails have a subtle magnetic push effect — as the cursor approaches, the thumbnail shifts away from the cursor by 5px, creating a repulsion field instead of attraction, making the gallery feel physically present."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.13
-    type: text
-    label: "[hover] On hover of a draggable element, the cursor transforms to display crossed arrows or a drag icon — the custom cursor ring rotates 45 degrees and the drag icon fades in at its center, signaling the available interaction."
-    value: "On hover of a draggable element, the cursor transforms to display crossed arrows or a drag icon — the custom cursor ring rotates 45 degrees and the drag icon fades in at its center, signaling the available interaction."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.14
-    type: text
-    label: "[custom] The cursor follower circle has a gooey blob quality — as it moves, it stretches in the direction of travel and snaps back to circular when it stops, using GSAP physics to give it a viscous, jelly-like momentum."
-    value: "The cursor follower circle has a gooey blob quality — as it moves, it stretches in the direction of travel and snaps back to circular when it stops, using GSAP physics to give it a viscous, jelly-like momentum."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.15
-    type: text
-    label: "[magnetic] Card components in a grid magnetically nudge each other — hovering one card pushes adjacent cards away by 8px in a ripple effect, and when the cursor leaves, all cards spring back to their original positions simultaneously."
-    value: "Card components in a grid magnetically nudge each other — hovering one card pushes adjacent cards away by 8px in a ripple effect, and when the cursor leaves, all cards spring back to their original positions simultaneously."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.16
-    type: text
-    label: "[hover] On hover of a text link, the custom cursor expands to underline the link text as a wide flat rectangle — exactly the width of the word — appearing to draw the underline dynamically as the cursor settles over the link."
-    value: "On hover of a text link, the custom cursor expands to underline the link text as a wide flat rectangle — exactly the width of the word — appearing to draw the underline dynamically as the cursor settles over the link."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.17
-    type: text
-    label: "[custom] A cursor that shows scroll progress within a section — a circular progress ring around the cursor dot that fills clockwise as the user scrolls through a pinned section, combining cursor position and scroll progress into a single persistent element."
-    value: "A cursor that shows scroll progress within a section — a circular progress ring around the cursor dot that fills clockwise as the user scrolls through a pinned section, combining cursor position and scroll progress into a single persistent element."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.18
-    type: text
-    label: "[magnetic] Menu items in a large navigation have a magnetic grid — hovering any item pulls all surrounding items slightly toward it, creating a gravity-well effect in the navigation space that makes the whole menu feel physically interconnected."
-    value: "Menu items in a large navigation have a magnetic grid — hovering any item pulls all surrounding items slightly toward it, creating a gravity-well effect in the navigation space that makes the whole menu feel physically interconnected."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.19
-    type: text
-    label: "[hover] On hover of video content, the cursor transforms into a play button shape — the circular cursor ring morphs its clip-path into a triangle play icon — and morphs back to a circle when the cursor leaves the video area."
-    value: "On hover of video content, the cursor transforms into a play button shape — the circular cursor ring morphs its clip-path into a triangle play icon — and morphs back to a circle when the cursor leaves the video area."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.floating_magnetic_cursor.20
-    type: text
-    label: "[custom] A cursor spotlight effect — the cursor emits a soft radial light that illuminates a 150px radius of the page, with the rest slightly darkened — as if the user is exploring the page with a flashlight."
-    value: "A cursor spotlight effect — the cursor emits a soft radial light that illuminates a 150px radius of the page, with the rest slightly darkened — as if the user is exploring the page with a flashlight. The effect uses a radial gradient mask tied to cursor position."
-    section: floating_magnetic_cursor
-    enabled: false
-  - key: animations.navbar_scroll_transitions.enabled
-    type: text
-    label: "Navbar Scroll Transitions — enable category"
-    value: ""
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.1
-    type: text
-    label: "[shrink] The navigation starts tall and transparent over the hero, then as the user scrolls past the hero section it compresses in height, gains a solid background, and a bottom border fades in — transforming from hero overlay to fixed compact nav in one smooth transition."
-    value: "The navigation starts tall and transparent over the hero, then as the user scrolls past the hero section it compresses in height, gains a solid background, and a bottom border fades in — transforming from hero overlay to fixed compact nav in one smooth transition."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.2
-    type: text
-    label: "[hide] The navbar slides upward out of the viewport as the user scrolls down — hiding to maximize reading space — and slides back down smoothly when the user scrolls upward even a tiny amount, using scroll direction detection."
-    value: "The navbar slides upward out of the viewport as the user scrolls down — hiding to maximize reading space — and slides back down smoothly when the user scrolls upward even a tiny amount, using scroll direction detection."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.3
-    type: text
-    label: "[color] The navbar background transitions from fully transparent to a frosted glass effect as the user scrolls past 100px — the backdrop-filter and background opacity animate simultaneously so the nav solidifies progressively as the page scrolls."
-    value: "The navbar background transitions from fully transparent to a frosted glass effect as the user scrolls past 100px — the backdrop-filter and background opacity animate simultaneously so the nav solidifies progressively as the page scrolls."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.4
-    type: text
-    label: "[shrink] The logo in the navigation shrinks and shifts left as the user scrolls — from a large centered hero size to a compact left-aligned navigation size — while the menu links fade in alongside it, the whole nav reconfiguring as a unit."
-    value: "The logo in the navigation shrinks and shifts left as the user scrolls — from a large centered hero size to a compact left-aligned navigation size — while the menu links fade in alongside it, the whole nav reconfiguring as a unit."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.5
-    type: text
-    label: "[color] The navbar text and logo color inverts as the page scrolls from a dark section to a light section — the nav detects the background color of the section beneath it and animates its foreground color to always maintain contrast."
-    value: "The navbar text and logo color inverts as the page scrolls from a dark section to a light section — the nav detects the background color of the section beneath it and animates its foreground color to always maintain contrast."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.6
-    type: text
-    label: "[hide] Individual navigation links hide one by one as the user scrolls down — disappearing from right to left with a stagger — leaving only the logo and a hamburger menu, which itself transforms into a more compact icon as space tightens."
-    value: "Individual navigation links hide one by one as the user scrolls down — disappearing from right to left with a stagger — leaving only the logo and a hamburger menu, which itself transforms into a more compact icon as space tightens."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.7
-    type: text
-    label: "[shrink] The top navigation bar merges with a secondary category navigation on scroll — the two bars compress into a single unified bar over 300ms as the user scrolls past the hero, with the secondary nav items folding into a dropdown inside the primary bar."
-    value: "The top navigation bar merges with a secondary category navigation on scroll — the two bars compress into a single unified bar over 300ms as the user scrolls past the hero, with the secondary nav items folding into a dropdown inside the primary bar."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.8
-    type: text
-    label: "[color] A progress bar appears within the navbar on scroll — filling the full width of the nav bar from left to right as a reading progress indicator, using the brand accent color so it feels intentional rather than an afterthought."
-    value: "A progress bar appears within the navbar on scroll — filling the full width of the nav bar from left to right as a reading progress indicator, using the brand accent color so it feels intentional rather than an afterthought."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.9
-    type: text
-    label: "[shrink] The navigation has a full-width mega menu on load that collapses to a standard nav height as the user scrolls — the mega menu section slides upward and the remaining nav locks in place as a compact sticky bar."
-    value: "The navigation has a full-width mega menu on load that collapses to a standard nav height as the user scrolls — the mega menu section slides upward and the remaining nav locks in place as a compact sticky bar."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.10
-    type: text
-    label: "[hide] The navbar hides on downward scroll with a velocity threshold — slow scrolling keeps the nav visible, but fast downward scrolling triggers the hide animation."
-    value: "The navbar hides on downward scroll with a velocity threshold — slow scrolling keeps the nav visible, but fast downward scrolling triggers the hide animation. The sensitivity adjusts so intentional navigation is never accidentally hidden."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.11
-    type: text
-    label: "[color] Each page section has a designated nav color scheme — the nav background, link color, and accent color all crossfade to the section's palette as the scroll enters each section's range, making the nav responsive to the content below."
-    value: "Each page section has a designated nav color scheme — the nav background, link color, and accent color all crossfade to the section's palette as the scroll enters each section's range, making the nav responsive to the content below."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.12
-    type: text
-    label: "[shrink] The hero navigation has a full-screen height on load — covering the entire viewport — and collapses to a standard nav bar height as the first scroll input is detected, revealing the hero content beneath it."
-    value: "The hero navigation has a full-screen height on load — covering the entire viewport — and collapses to a standard nav bar height as the first scroll input is detected, revealing the hero content beneath it."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.13
-    type: text
-    label: "[hide] On mobile scroll, the nav bar transforms into a floating pill — shrinking from full-width to a compact centered pill containing only the logo — and docking to the bottom of the viewport rather than the top, optimizing for thumb reach."
-    value: "On mobile scroll, the nav bar transforms into a floating pill — shrinking from full-width to a compact centered pill containing only the logo — and docking to the bottom of the viewport rather than the top, optimizing for thumb reach."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.14
-    type: text
-    label: "[color] The active section link in the navigation highlights with an animated underline that slides from the previous active link to the new one as the user scrolls — the underline travels horizontally along the nav to its new position."
-    value: "The active section link in the navigation highlights with an animated underline that slides from the previous active link to the new one as the user scrolls — the underline travels horizontally along the nav to its new position."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.15
-    type: text
-    label: "[shrink] A large editorial navigation with oversized type and generous spacing compresses on scroll — font sizes reduce, line heights collapse, padding tightens — the typography rescaling fluidly so the nav transitions from editorial to functional."
-    value: "A large editorial navigation with oversized type and generous spacing compresses on scroll — font sizes reduce, line heights collapse, padding tightens — the typography rescaling fluidly so the nav transitions from editorial to functional."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.16
-    type: text
-    label: "[hide] The navbar fades out completely when the user has been idle for 3 seconds while scrolled deep into the page — and fades back in immediately on any mouse movement or scroll input — a distraction-free reading mode."
-    value: "The navbar fades out completely when the user has been idle for 3 seconds while scrolled deep into the page — and fades back in immediately on any mouse movement or scroll input — a distraction-free reading mode."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.17
-    type: text
-    label: "[color] A dark-mode navbar transitions to light mode as the user scrolls into a light-background section — all nav element colors transition simultaneously — logo, links, backgrounds — so the nav adapts seamlessly to the content it overlays."
-    value: "A dark-mode navbar transitions to light mode as the user scrolls into a light-background section — all nav element colors transition simultaneously — logo, links, backgrounds — so the nav adapts seamlessly to the content it overlays."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.18
-    type: text
-    label: "[shrink] The navigation has a secondary announcement bar above it that slides upward and disappears as the user scrolls past 50px — the main nav simultaneously rises to fill its position, expanding upward to fill the vacated space."
-    value: "The navigation has a secondary announcement bar above it that slides upward and disappears as the user scrolls past 50px — the main nav simultaneously rises to fill its position, expanding upward to fill the vacated space."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.19
-    type: text
-    label: "[hide] On downward scroll, the logo fades out of the nav and the nav links center-align to fill the space — on upward scroll the logo fades back in and the links shift back to their offset positions — the nav composition changes with scroll direction."
-    value: "On downward scroll, the logo fades out of the nav and the nav links center-align to fill the space — on upward scroll the logo fades back in and the links shift back to their offset positions — the nav composition changes with scroll direction."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.navbar_scroll_transitions.20
-    type: text
-    label: "[color] The navigation background uses a live color blend — it samples the average color of the page content directly behind it and sets its background to a semi-transparent version of that color, creating a chameleon nav that always harmonizes."
-    value: "The navigation background uses a live color blend — it samples the average color of the page content directly behind it and sets its background to a semi-transparent version of that color, creating a chameleon nav that always harmonizes."
-    section: navbar_scroll_transitions
-    enabled: false
-  - key: animations.page_transition_wipes.enabled
-    type: text
-    label: "Page Transition Wipes — enable category"
-    value: ""
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.1
-    type: text
-    label: "[wipe] Navigating to a new page triggers a solid color panel that sweeps in from the left edge, covers the entire viewport, then sweeps off to the right to reveal the incoming page — a classic curtain wipe using the brand accent color."
-    value: "Navigating to a new page triggers a solid color panel that sweeps in from the left edge, covers the entire viewport, then sweeps off to the right to reveal the incoming page — a classic curtain wipe using the brand accent color."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.2
-    type: text
-    label: "[fade] Page transitions use a coordinated fade — the outgoing page fades to white over 400ms while simultaneously the incoming page fades in from white, the two crossfading through a shared white moment in the middle of the transition."
-    value: "Page transitions use a coordinated fade — the outgoing page fades to white over 400ms while simultaneously the incoming page fades in from white, the two crossfading through a shared white moment in the middle of the transition."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.3
-    type: text
-    label: "[wipe] A diagonal wipe transition — a colored panel enters from the top-right corner and sweeps diagonally to the bottom-left, covering the screen, then retreats in the same direction to reveal the new page beneath it."
-    value: "A diagonal wipe transition — a colored panel enters from the top-right corner and sweeps diagonally to the bottom-left, covering the screen, then retreats in the same direction to reveal the new page beneath it."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.4
-    type: text
-    label: "[morph] The clicked navigation link or card morphs into the new page — its background color expands from the element's position outward to fill the entire viewport, then the new page content fades in over that color background."
-    value: "The clicked navigation link or card morphs into the new page — its background color expands from the element's position outward to fill the entire viewport, then the new page content fades in over that color background."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.5
-    type: text
-    label: "[wipe] A page transition uses multiple horizontal strips — the screen divides into six horizontal bands that each slide left simultaneously with a stagger of 30ms per band, revealing the new page in a venetian-blind wipe."
-    value: "A page transition uses multiple horizontal strips — the screen divides into six horizontal bands that each slide left simultaneously with a stagger of 30ms per band, revealing the new page in a venetian-blind wipe."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.6
-    type: text
-    label: "[fade] Between pages, the current page's hero image scales up to fill the entire viewport and then crossfades into the new page's hero image — a match-cut transition that connects the two pages through their most prominent visual."
-    value: "Between pages, the current page's hero image scales up to fill the entire viewport and then crossfades into the new page's hero image — a match-cut transition that connects the two pages through their most prominent visual."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.7
-    type: text
-    label: "[wipe] A circular wipe expands from the position of the clicked element — growing from that exact point outward to cover the screen — then the new page content fades in as the circle reaches full coverage."
-    value: "A circular wipe expands from the position of the clicked element — growing from that exact point outward to cover the screen — then the new page content fades in as the circle reaches full coverage."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.8
-    type: text
-    label: "[morph] The page exit animation slides all content upward off the screen — staggered from bottom to top so the footer leaves first and the header last — then the new page's content slides in from below in the same stagger order."
-    value: "The page exit animation slides all content upward off the screen — staggered from bottom to top so the footer leaves first and the header last — then the new page's content slides in from below in the same stagger order."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.9
-    type: text
-    label: "[wipe] A split wipe transition — the outgoing page splits into left and right halves that slide apart, revealing the new page in the gap between them."
-    value: "A split wipe transition — the outgoing page splits into left and right halves that slide apart, revealing the new page in the gap between them. The gap starts at the vertical center and expands outward until both halves are off screen."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.10
-    type: text
-    label: "[fade] Page transitions use a logo reveal — the brand mark scales up from its navbar size to fill the center of the screen during the transition, then scales back down as the new page loads, bookending the transition with brand identity."
-    value: "Page transitions use a logo reveal — the brand mark scales up from its navbar size to fill the center of the screen during the transition, then scales back down as the new page loads, bookending the transition with brand identity."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.11
-    type: text
-    label: "[wipe] A paint-stroke wipe transition — an organic brush stroke shape sweeps across the screen from left to right, its irregular edge giving the transition a hand-crafted, textural quality before the new page reveals beneath it."
-    value: "A paint-stroke wipe transition — an organic brush stroke shape sweeps across the screen from left to right, its irregular edge giving the transition a hand-crafted, textural quality before the new page reveals beneath it."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.12
-    type: text
-    label: "[morph] When navigating from a list to a detail page, the selected list item expands — its card scales and repositions to match the layout of the detail page header — a seamless FLIP transition that makes the navigation feel spatially continuous."
-    value: "When navigating from a list to a detail page, the selected list item expands — its card scales and repositions to match the layout of the detail page header — a seamless FLIP transition that makes the navigation feel spatially continuous."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.13
-    type: text
-    label: "[wipe] A pixel dissolve transition — the outgoing page breaks into a grid of small squares that fade out in a random order over 600ms, revealing the new page below — like a digital disintegration of the current content."
-    value: "A pixel dissolve transition — the outgoing page breaks into a grid of small squares that fade out in a random order over 600ms, revealing the new page below — like a digital disintegration of the current content."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.14
-    type: text
-    label: "[fade] Page transitions use a blur-out/blur-in — the outgoing page blurs to maximum and fades to 0, while the incoming page arrives blurred at 0 opacity and resolves to sharp and full opacity — a dreamy, cinematic between-pages moment."
-    value: "Page transitions use a blur-out/blur-in — the outgoing page blurs to maximum and fades to 0, while the incoming page arrives blurred at 0 opacity and resolves to sharp and full opacity — a dreamy, cinematic between-pages moment."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.15
-    type: text
-    label: "[wipe] A vertical wipe from the top — a color panel drops from the top edge to the bottom, covering the page, then rises from bottom to top to reveal the new page — the panel's color matches the destination page's primary color."
-    value: "A vertical wipe from the top — a color panel drops from the top edge to the bottom, covering the page, then rises from bottom to top to reveal the new page — the panel's color matches the destination page's primary color."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.16
-    type: text
-    label: "[morph] The page cursor morphs into a loading indicator during the transition — expanding to a large circle that fills the screen, inside which the new page content reveals — the cursor itself becomes the transition mechanism."
-    value: "The page cursor morphs into a loading indicator during the transition — expanding to a large circle that fills the screen, inside which the new page content reveals — the cursor itself becomes the transition mechanism."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.17
-    type: text
-    label: "[wipe] A text-based transition wipe — the word describing the destination page types itself across the screen in very large type, filling the viewport, then the letterforms clip away to reveal the actual destination page behind the text."
-    value: "A text-based transition wipe — the word describing the destination page types itself across the screen in very large type, filling the viewport, then the letterforms clip away to reveal the actual destination page behind the text."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.18
-    type: text
-    label: "[fade] Same-section page transitions use a subtle shared element animation — elements present on both pages (like the header or a shared image) stay in place while page-specific content fades out and new content fades in around them."
-    value: "Same-section page transitions use a subtle shared element animation — elements present on both pages (like the header or a shared image) stay in place while page-specific content fades out and new content fades in around them."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.19
-    type: text
-    label: "[wipe] A noise-texture wipe — a procedural noise pattern sweeps across the screen, the noise threshold animating from 0 to 1 to create an organic, non-geometric wipe pattern that feels natural rather than mechanical."
-    value: "A noise-texture wipe — a procedural noise pattern sweeps across the screen, the noise threshold animating from 0 to 1 to create an organic, non-geometric wipe pattern that feels natural rather than mechanical."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.page_transition_wipes.20
-    type: text
-    label: "[morph] On back navigation, the page transition reverses — instead of a left-to-right wipe, the new wipe comes from the right — so the direction of the transition always matches the conceptual direction of the navigation, forward or backward."
-    value: "On back navigation, the page transition reverses — instead of a left-to-right wipe, the new wipe comes from the right — so the direction of the transition always matches the conceptual direction of the navigation, forward or backward."
-    section: page_transition_wipes
-    enabled: false
-  - key: animations.typewriter_scramble_text.enabled
-    type: text
-    label: "Typewriter Scramble Text — enable category"
-    value: ""
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.1
-    type: text
-    label: "[typewriter] The hero headline types itself in one character at a time at 40ms per character, with a blinking cursor sitting at the insertion point — the cursor blinks three times after the last character is placed, then fades out."
-    value: "The hero headline types itself in one character at a time at 40ms per character, with a blinking cursor sitting at the insertion point — the cursor blinks three times after the last character is placed, then fades out."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.2
-    type: text
-    label: "[scramble] A rotating tagline cycles through three different messages — each transition scrambles the current text into random characters over 200ms, then unscrambles into the next message left to right, as if the text is being decoded."
-    value: "A rotating tagline cycles through three different messages — each transition scrambles the current text into random characters over 200ms, then unscrambles into the next message left to right, as if the text is being decoded."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.3
-    type: text
-    label: "[typewriter] A coding terminal aesthetic — green text on dark background — types a series of command lines with realistic delays between each line, including a blinking cursor and a pause before each new line begins, like watching a real terminal session."
-    value: "A coding terminal aesthetic — green text on dark background — types a series of command lines with realistic delays between each line, including a blinking cursor and a pause before each new line begins, like watching a real terminal session."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.4
-    type: text
-    label: "[scramble] Section headings use a hover scramble effect — mousing over any heading triggers a 300ms scramble animation that resolves back to the original text, as if the letters briefly lost their form under the cursor's attention."
-    value: "Section headings use a hover scramble effect — mousing over any heading triggers a 300ms scramble animation that resolves back to the original text, as if the letters briefly lost their form under the cursor's attention."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.5
-    type: text
-    label: "[typewriter] A pricing page has cost values that type in one digit at a time from left to right — the dollar sign appears first, then each digit types in — so the price builds up in front of the user rather than appearing all at once."
-    value: "A pricing page has cost values that type in one digit at a time from left to right — the dollar sign appears first, then each digit types in — so the price builds up in front of the user rather than appearing all at once."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.6
-    type: text
-    label: "[scramble] A skills or technology list has each item appear with a scramble-resolve — random characters rain through the word's positions for 400ms before the correct characters lock in left to right, staggered 100ms per word in the list."
-    value: "A skills or technology list has each item appear with a scramble-resolve — random characters rain through the word's positions for 400ms before the correct characters lock in left to right, staggered 100ms per word in the list."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.7
-    type: text
-    label: "[typewriter] An AI assistant interface typewriter effect — the response text types in at variable speed, faster for common words and slower for technical terms — mimicking the natural rhythm variations of a real streaming text response."
-    value: "An AI assistant interface typewriter effect — the response text types in at variable speed, faster for common words and slower for technical terms — mimicking the natural rhythm variations of a real streaming text response."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.8
-    type: text
-    label: "[scramble] The page title scrambles into the new section title during a page transition — the characters of the outgoing title randomly reassign themselves into the characters of the incoming title, morphing from one word to another through chaos."
-    value: "The page title scrambles into the new section title during a page transition — the characters of the outgoing title randomly reassign themselves into the characters of the incoming title, morphing from one word to another through chaos."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.9
-    type: text
-    label: "[typewriter] A quotes carousel types each new quote in after deleting the previous one — the cursor moves to the start of the text, deletes backward at high speed, then types the new quote forward at a natural reading pace."
-    value: "A quotes carousel types each new quote in after deleting the previous one — the cursor moves to the start of the text, deletes backward at high speed, then types the new quote forward at a natural reading pace."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.10
-    type: text
-    label: "[scramble] A hero with a rotating word — 'we are [creative / strategic / bold]' — uses a scramble to transition between adjectives."
-    value: "A hero with a rotating word — 'we are [creative / strategic / bold]' — uses a scramble to transition between adjectives. The static part stays fixed while only the rotating word scrambles and resolves into each new option."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.11
-    type: text
-    label: "[typewriter] Error messages type in with an intentionally slow, ominous pace — one character every 80ms — as if the system is reluctantly admitting the error, building tension through the typewriter timing before the full message is revealed."
-    value: "Error messages type in with an intentionally slow, ominous pace — one character every 80ms — as if the system is reluctantly admitting the error, building tension through the typewriter timing before the full message is revealed."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.12
-    type: text
-    label: "[scramble] A data dashboard has live values that scramble briefly when they update — a number changes, briefly scrambles its digits as if recalculating, then resolves to the new value — giving data updates a sense of computation happening."
-    value: "A data dashboard has live values that scramble briefly when they update — a number changes, briefly scrambles its digits as if recalculating, then resolves to the new value — giving data updates a sense of computation happening."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.13
-    type: text
-    label: "[typewriter] A timeline of company history types each year and milestone in sequence — year types first, then a dash, then the milestone description — all in a monospace font with the cursor moving through the timeline chronologically."
-    value: "A timeline of company history types each year and milestone in sequence — year types first, then a dash, then the milestone description — all in a monospace font with the cursor moving through the timeline chronologically."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.14
-    type: text
-    label: "[scramble] On page load, all headings simultaneously scramble for 600ms — all text on the page briefly unreadable — then all resolve to their final text simultaneously, as if the page is descrambling from an encrypted state."
-    value: "On page load, all headings simultaneously scramble for 600ms — all text on the page briefly unreadable — then all resolve to their final text simultaneously, as if the page is descrambling from an encrypted state."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.15
-    type: text
-    label: "[typewriter] A contact form confirmation message types itself in after submission — personal and human-feeling compared to an instant static reveal — 'Thanks [name], we'll be in touch soon."
-    value: "A contact form confirmation message types itself in after submission — personal and human-feeling compared to an instant static reveal — 'Thanks [name], we'll be in touch soon.' typing in with the user's name filled in mid-sentence."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.16
-    type: text
-    label: "[scramble] Navigation links scramble on hover — the link text briefly cycles through random characters before resolving back to the original text — a subtle scramble that rewards hover exploration without obscuring the navigation function."
-    value: "Navigation links scramble on hover — the link text briefly cycles through random characters before resolving back to the original text — a subtle scramble that rewards hover exploration without obscuring the navigation function."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.17
-    type: text
-    label: "[typewriter] A loading screen types a random interesting fact or brand statement while content loads in the background — one character at a time — giving the user something to read during the wait and establishing personality before the page is ready."
-    value: "A loading screen types a random interesting fact or brand statement while content loads in the background — one character at a time — giving the user something to read during the wait and establishing personality before the page is ready."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.18
-    type: text
-    label: "[scramble] A language/locale switcher scrambles the page's key text elements when switching language — all headings scramble simultaneously, then resolve into the translated versions — visualizing the translation as a transformation rather than a reload."
-    value: "A language/locale switcher scrambles the page's key text elements when switching language — all headings scramble simultaneously, then resolve into the translated versions — visualizing the translation as a transformation rather than a reload."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.19
-    type: text
-    label: "[typewriter] An about page bio types itself as if the person is writing their own introduction in real time — with occasional pauses as if thinking, a backspace to correct a word, then retyping — a playful self-aware typewriter that mimics human writing behavior."
-    value: "An about page bio types itself as if the person is writing their own introduction in real time — with occasional pauses as if thinking, a backspace to correct a word, then retyping — a playful self-aware typewriter that mimics human writing behavior."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.typewriter_scramble_text.20
-    type: text
-    label: "[scramble] A 404 error page headline scrambles repeatedly — 'Page Not Found' scrambling into random characters every 2 seconds and resolving back — as if the page can't quite figure out what it is, turning an error into an engaging animation."
-    value: "A 404 error page headline scrambles repeatedly — 'Page Not Found' scrambling into random characters every 2 seconds and resolving back — as if the page can't quite figure out what it is, turning an error into an engaging animation."
-    section: typewriter_scramble_text
-    enabled: false
-  - key: animations.section_background_morph.enabled
-    type: text
-    label: "Section Background Morph — enable category"
-    value: ""
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.1
-    type: text
-    label: "[color] The page background shifts through a curated palette of brand colors as the user scrolls through sections — each color crossfades over a 400ms window as the scroll crosses each section threshold, the whole page atmosphere changing with each transition."
-    value: "The page background shifts through a curated palette of brand colors as the user scrolls through sections — each color crossfades over a 400ms window as the scroll crosses each section threshold, the whole page atmosphere changing with each transition."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.2
-    type: text
-    label: "[gradient] The background gradient rotates its angle as the user scrolls — starting at 0 degrees at the top of the page and rotating to 180 degrees at the bottom — so the gradient's direction evolves continuously throughout the scrolling journey."
-    value: "The background gradient rotates its angle as the user scrolls — starting at 0 degrees at the top of the page and rotating to 180 degrees at the bottom — so the gradient's direction evolves continuously throughout the scrolling journey."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.3
-    type: text
-    label: "[color] Each section has a background color that bleeds into the next — no hard dividers between sections — instead the color morph begins 100px before the section boundary and completes 100px after, creating smooth color transitions in the content flow."
-    value: "Each section has a background color that bleeds into the next — no hard dividers between sections — instead the color morph begins 100px before the section boundary and completes 100px after, creating smooth color transitions in the content flow."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.4
-    type: text
-    label: "[texture] The background transitions from a flat color to a subtle texture pattern as the user scrolls into specific sections — the texture fades in over 500ms, adding material depth to certain sections while others remain clean and flat."
-    value: "The background transitions from a flat color to a subtle texture pattern as the user scrolls into specific sections — the texture fades in over 500ms, adding material depth to certain sections while others remain clean and flat."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.5
-    type: text
-    label: "[gradient] A two-tone gradient background has its stop positions animated by scroll — the gradient starts tight and centered, then stretches and shifts as the user scrolls, the color bands expanding and contracting in response to scroll position."
-    value: "A two-tone gradient background has its stop positions animated by scroll — the gradient starts tight and centered, then stretches and shifts as the user scrolls, the color bands expanding and contracting in response to scroll position."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.6
-    type: text
-    label: "[color] A dark-to-light page journey — the background starts near-black at the top and gradually lightens section by section to near-white at the bottom — a full tonal journey across the page driven entirely by scroll progress."
-    value: "A dark-to-light page journey — the background starts near-black at the top and gradually lightens section by section to near-white at the bottom — a full tonal journey across the page driven entirely by scroll progress."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.7
-    type: text
-    label: "[texture] The background alternates between solid color and a dot-grid pattern with each section — the dots fade in and scale up from nothing as the section enters and fade out as it exits, adding rhythmic texture changes to the reading experience."
-    value: "The background alternates between solid color and a dot-grid pattern with each section — the dots fade in and scale up from nothing as the section enters and fade out as it exits, adding rhythmic texture changes to the reading experience."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.8
-    type: text
-    label: "[gradient] A radial gradient follows the scroll position — its center point moves from the top of the viewport at page top to the bottom of the viewport at page bottom, always emanating from the center of the current view."
-    value: "A radial gradient follows the scroll position — its center point moves from the top of the viewport at page top to the bottom of the viewport at page bottom, always emanating from the center of the current view."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.9
-    type: text
-    label: "[color] Scrolling into a case study section triggers a background morph to that client's brand color — a smooth crossfade that immerses the user in the brand world of that project — then morphs back to neutral when leaving the section."
-    value: "Scrolling into a case study section triggers a background morph to that client's brand color — a smooth crossfade that immerses the user in the brand world of that project — then morphs back to neutral when leaving the section."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.10
-    type: text
-    label: "[texture] The background has a large, slowly moving blob shape — an organic SVG form — that shifts color in sync with section changes while continuing its slow autonomous drift, background color and shape both changing together."
-    value: "The background has a large, slowly moving blob shape — an organic SVG form — that shifts color in sync with section changes while continuing its slow autonomous drift, background color and shape both changing together."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.11
-    type: text
-    label: "[gradient] The background gradient transitions from warm tones in sections about problems — reds and ambers — to cool tones in sections about solutions — blues and teals — using color temperature to reinforce the emotional narrative of the page."
-    value: "The background gradient transitions from warm tones in sections about problems — reds and ambers — to cool tones in sections about solutions — blues and teals — using color temperature to reinforce the emotional narrative of the page."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.12
-    type: text
-    label: "[color] In a features section, each feature's background color is desaturated while the feature is not in focus, and saturates to its full color when the feature becomes the active scroll target — the whole section breathing color in and out."
-    value: "In a features section, each feature's background color is desaturated while the feature is not in focus, and saturates to its full color when the feature becomes the active scroll target — the whole section breathing color in and out."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.13
-    type: text
-    label: "[texture] The background has a subtle line-grid texture whose density changes with scroll — sparse at the top of each section, becoming denser as the scroll progresses through the section, visualizing depth or intensity through texture density."
-    value: "The background has a subtle line-grid texture whose density changes with scroll — sparse at the top of each section, becoming denser as the scroll progresses through the section, visualizing depth or intensity through texture density."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.14
-    type: text
-    label: "[gradient] A multi-stop gradient background has each color stop animated independently by scroll — some stops moving faster than others — so the gradient is constantly rearranging its color positions as the user scrolls, never static."
-    value: "A multi-stop gradient background has each color stop animated independently by scroll — some stops moving faster than others — so the gradient is constantly rearranging its color positions as the user scrolls, never static."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.15
-    type: text
-    label: "[color] The background color behind a testimonial section changes to match the brand color of the company whose testimonial is currently active — synced with the testimonial carousel — giving each quote its own branded atmospheric backdrop."
-    value: "The background color behind a testimonial section changes to match the brand color of the company whose testimonial is currently active — synced with the testimonial carousel — giving each quote its own branded atmospheric backdrop."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.16
-    type: text
-    label: "[texture] A particle field in the background becomes denser and more active as sections of greater importance are scrolled into view — sparse and slow-moving in intro sections, dense and fast in climax sections — intensity matching content weight."
-    value: "A particle field in the background becomes denser and more active as sections of greater importance are scrolled into view — sparse and slow-moving in intro sections, dense and fast in climax sections — intensity matching content weight."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.17
-    type: text
-    label: "[gradient] The page background uses a split — the left half transitions through one color palette and the right half through a complementary palette — both evolving in sync with scroll, creating a dynamic color field that evolves across both axes."
-    value: "The page background uses a split — the left half transitions through one color palette and the right half through a complementary palette — both evolving in sync with scroll, creating a dynamic color field that evolves across both axes."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.18
-    type: text
-    label: "[color] Scrolling speed affects the background color saturation — fast scrolling desaturates the background toward gray, slow and deliberate scrolling allows the full brand color to saturate fully — rewarding contemplative reading with richer visuals."
-    value: "Scrolling speed affects the background color saturation — fast scrolling desaturates the background toward gray, slow and deliberate scrolling allows the full brand color to saturate fully — rewarding contemplative reading with richer visuals."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.19
-    type: text
-    label: "[texture] The background transitions from a light-mode neutral to a dark-mode atmospheric as the user scrolls into the product demo section — the entire color scheme inverting smoothly over 600ms, framing the demo in its natural dark interface context."
-    value: "The background transitions from a light-mode neutral to a dark-mode atmospheric as the user scrolls into the product demo section — the entire color scheme inverting smoothly over 600ms, framing the demo in its natural dark interface context."
-    section: section_background_morph
-    enabled: false
-  - key: animations.section_background_morph.20
-    type: text
-    label: "[gradient] The footer approach uses a dramatic background morph — starting 400px before the footer, the background begins a deep color shift toward the footer's dark background — the transition starting early enough that the user feels themselves descending into the footer."
-    value: "The footer approach uses a dramatic background morph — starting 400px before the footer, the background begins a deep color shift toward the footer's dark background — the transition starting early enough that the user feels themselves descending into the footer."
-    section: section_background_morph
-    enabled: false
-  - key: animations.timeline_storytelling.enabled
-    type: text
-    label: "Timeline Storytelling — enable category"
-    value: ""
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.1
-    type: text
-    label: "[scroll] Pin the section and draw a vertical timeline line from top to bottom as the user scrolls — a drawing stroke that descends at the same pace as the scroll — with event nodes popping in with a scale bounce as the line reaches each one."
-    value: "Pin the section and draw a vertical timeline line from top to bottom as the user scrolls — a drawing stroke that descends at the same pace as the scroll — with event nodes popping in with a scale bounce as the line reaches each one."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.2
-    type: text
-    label: "[reveal] A horizontal timeline sits pinned at the top of the section."
-    value: "A horizontal timeline sits pinned at the top of the section. As the user scrolls, a playhead marker moves along the timeline from left to right, and at each event marker it pauses while the corresponding event card fades in below it."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.3
-    type: text
-    label: "[scroll] A company history timeline has decade markers."
-    value: "A company history timeline has decade markers. As each decade scrolls into view, the year number flips in like a split-flap display, the connecting line extends to the next event, and the event description clips up from below its mask."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.4
-    type: text
-    label: "[branch] A branching timeline shows cause-and-effect relationships — the main timeline advances on scroll, and at branch points, secondary branches extend outward with a drawing animation, showing parallel events or consequences."
-    value: "A branching timeline shows cause-and-effect relationships — the main timeline advances on scroll, and at branch points, secondary branches extend outward with a drawing animation, showing parallel events or consequences."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.5
-    type: text
-    label: "[scroll] Each timeline event has a before/after photo pair — as the event scrolls into view, the before photo is visible, then a horizontal wipe reveals the after photo, visually showing the change the event caused."
-    value: "Each timeline event has a before/after photo pair — as the event scrolls into view, the before photo is visible, then a horizontal wipe reveals the after photo, visually showing the change the event caused."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.6
-    type: text
-    label: "[reveal] A pinned timeline section shows events as cards that stack behind a fixed viewport window — as the user scrolls, cards emerge from the bottom of the window one at a time with a slide and fade entrance, and old cards exit the top."
-    value: "A pinned timeline section shows events as cards that stack behind a fixed viewport window — as the user scrolls, cards emerge from the bottom of the window one at a time with a slide and fade entrance, and old cards exit the top."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.7
-    type: text
-    label: "[scroll] A product development timeline animates version numbers incrementing — each version release event types its version number in, its feature list stagger-reveals below it, and a progress bar shows total development time elapsed."
-    value: "A product development timeline animates version numbers incrementing — each version release event types its version number in, its feature list stagger-reveals below it, and a progress bar shows total development time elapsed."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.8
-    type: text
-    label: "[branch] A personal or brand story timeline uses a winding path SVG — a curving road or river — that draws itself on scroll, with location pins dropping in at each key event, the path always arriving at the pin just as the event card animates in."
-    value: "A personal or brand story timeline uses a winding path SVG — a curving road or river — that draws itself on scroll, with location pins dropping in at each key event, the path always arriving at the pin just as the event card animates in."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.9
-    type: text
-    label: "[scroll] A news or press timeline has date stamps that type themselves in from right to left — the day, then month, then year — followed by the headline clipping in from a mask, creating a journalistic timestamp effect for each entry."
-    value: "A news or press timeline has date stamps that type themselves in from right to left — the day, then month, then year — followed by the headline clipping in from a mask, creating a journalistic timestamp effect for each entry."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.10
-    type: text
-    label: "[reveal] A pinned timeline with milestone markers — each marker is a circle that starts empty and fills with a solid color as the scroll reaches it, with the fill triggering the event label and description to animate in on the opposite side of the line."
-    value: "A pinned timeline with milestone markers — each marker is a circle that starts empty and fills with a solid color as the scroll reaches it, with the fill triggering the event label and description to animate in on the opposite side of the line."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.11
-    type: text
-    label: "[scroll] A scientific discovery timeline has each event accompanied by an SVG illustration that draws itself — the stroke animating in — as the scroll reaches that event."
-    value: "A scientific discovery timeline has each event accompanied by an SVG illustration that draws itself — the stroke animating in — as the scroll reaches that event. Complex discoveries have more complex drawings that take longer to complete."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.12
-    type: text
-    label: "[branch] An industry evolution timeline shows the emergence of technologies — each new technology branches off from a main trunk line, its branch extending outward as the scroll reaches its inception date, with sub-branches for derivative technologies."
-    value: "An industry evolution timeline shows the emergence of technologies — each new technology branches off from a main trunk line, its branch extending outward as the scroll reaches its inception date, with sub-branches for derivative technologies."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.13
-    type: text
-    label: "[scroll] A timeline that maps to real geographic distance — the further back in history, the more scroll distance required — so ancient events require long scrolling while recent events are close together, making the user feel the pace of historical change."
-    value: "A timeline that maps to real geographic distance — the further back in history, the more scroll distance required — so ancient events require long scrolling while recent events are close together, making the user feel the pace of historical change."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.14
-    type: text
-    label: "[reveal] A music album release timeline — each album card reveals with a vinyl record spinning in from the side, the album art fades in on the record, and a waveform visualizer draws in below each card representing the album's audio signature."
-    value: "A music album release timeline — each album card reveals with a vinyl record spinning in from the side, the album art fades in on the record, and a waveform visualizer draws in below each card representing the album's audio signature."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.15
-    type: text
-    label: "[scroll] A future roadmap timeline uses a different visual treatment than the past sections — past events use solid fills and completed-state styling, future events use dashed lines and outline-only styling, with the 'today' marker clearly animated."
-    value: "A future roadmap timeline uses a different visual treatment than the past sections — past events use solid fills and completed-state styling, future events use dashed lines and outline-only styling, with the 'today' marker clearly animated."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.16
-    type: text
-    label: "[branch] A team growth timeline shows headcount — as each hiring milestone is reached by the scroll, new avatar circles appear with a scale-in bounce, joining the growing cluster of team member icons, visually showing the team expanding."
-    value: "A team growth timeline shows headcount — as each hiring milestone is reached by the scroll, new avatar circles appear with a scale-in bounce, joining the growing cluster of team member icons, visually showing the team expanding."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.17
-    type: text
-    label: "[scroll] A climate or environmental timeline uses color-coded severity — early events in green, middle events in amber, recent events in red — the color of each event card and its timeline node reflecting the urgency of that historical moment."
-    value: "A climate or environmental timeline uses color-coded severity — early events in green, middle events in amber, recent events in red — the color of each event card and its timeline node reflecting the urgency of that historical moment."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.18
-    type: text
-    label: "[reveal] A legal or patent timeline reveals each document as a folded page that unfolds on scroll entry — the document icon animating from folded to flat — before the event description fades in below it, like opening an archive."
-    value: "A legal or patent timeline reveals each document as a folded page that unfolds on scroll entry — the document icon animating from folded to flat — before the event description fades in below it, like opening an archive."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.19
-    type: text
-    label: "[scroll] A sports season timeline has each match result revealed with a score counter that counts up from 0-0 to the final score — both numbers counting simultaneously — with the winning team's side highlighted as the scores resolve."
-    value: "A sports season timeline has each match result revealed with a score counter that counts up from 0-0 to the final score — both numbers counting simultaneously — with the winning team's side highlighted as the scores resolve."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.timeline_storytelling.20
-    type: text
-    label: "[branch] A technology stack evolution timeline shows how the current tech stack grew — each tool or framework appearing at its adoption date, with dependency lines drawing between tools that influenced each other, building a visual dependency graph over time."
-    value: "A technology stack evolution timeline shows how the current tech stack grew — each tool or framework appearing at its adoption date, with dependency lines drawing between tools that influenced each other, building a visual dependency graph over time."
-    section: timeline_storytelling
-    enabled: false
-  - key: animations.infinite_marquee.enabled
-    type: text
-    label: "Infinite Marquee — enable category"
-    value: ""
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.1
-    type: text
-    label: "[horizontal] A logo strip marquee scrolls continuously from right to left in a seamless loop — client logos spaced evenly — pausing on hover with a smooth deceleration, and resuming with an acceleration when the cursor leaves."
-    value: "A logo strip marquee scrolls continuously from right to left in a seamless loop — client logos spaced evenly — pausing on hover with a smooth deceleration, and resuming with an acceleration when the cursor leaves."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.2
-    type: text
-    label: "[vertical] A vertical ticker of news headlines or updates scrolls upward in a continuous loop — each item slides up and out of frame at the top while a new one enters from the bottom — pausing on hover to allow reading."
-    value: "A vertical ticker of news headlines or updates scrolls upward in a continuous loop — each item slides up and out of frame at the top while a new one enters from the bottom — pausing on hover to allow reading."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.3
-    type: text
-    label: "[horizontal] Two marquee rows running in opposite directions — the top row moving left, the bottom row moving right — stacked with a small gap, creating a dynamic visual tension between the two streams of content."
-    value: "Two marquee rows running in opposite directions — the top row moving left, the bottom row moving right — stacked with a small gap, creating a dynamic visual tension between the two streams of content."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.4
-    type: text
-    label: "[speed] A marquee that accelerates when the page scrolls — the marquee base speed is slow when the page is idle, but as the user scrolls, the marquee speeds up proportionally, decelerating back to slow when scrolling stops."
-    value: "A marquee that accelerates when the page scrolls — the marquee base speed is slow when the page is idle, but as the user scrolls, the marquee speeds up proportionally, decelerating back to slow when scrolling stops."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.5
-    type: text
-    label: "[horizontal] A text-only marquee with a single repeated phrase — large, bold, oversized type — scrolling slowly across the full viewport width, the repetition creating a typographic wallpaper effect that reinforces the brand message."
-    value: "A text-only marquee with a single repeated phrase — large, bold, oversized type — scrolling slowly across the full viewport width, the repetition creating a typographic wallpaper effect that reinforces the brand message."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.6
-    type: text
-    label: "[vertical] A vertical awards and recognition ticker scrolls through accolades — each item formatted as an award icon, title, and year — scrolling upward slowly enough to be read without pausing, like credits rolling at the end of a film."
-    value: "A vertical awards and recognition ticker scrolls through accolades — each item formatted as an award icon, title, and year — scrolling upward slowly enough to be read without pausing, like credits rolling at the end of a film."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.7
-    type: text
-    label: "[speed] A marquee that reverses direction when the scroll direction reverses — scrolling down moves the marquee left, scrolling up moves it right — so the marquee direction is always linked to the user's scroll momentum."
-    value: "A marquee that reverses direction when the scroll direction reverses — scrolling down moves the marquee left, scrolling up moves it right — so the marquee direction is always linked to the user's scroll momentum."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.8
-    type: text
-    label: "[horizontal] A marquee strip that separates page sections — positioned between content blocks — alternating between text and small decorative icons or symbols in the stream, creating a divider that also communicates brand personality."
-    value: "A marquee strip that separates page sections — positioned between content blocks — alternating between text and small decorative icons or symbols in the stream, creating a divider that also communicates brand personality."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.9
-    type: text
-    label: "[vertical] A skills or services list in a vertical marquee that scrolls at just below reading speed — forcing the user to track individual items — with a gradient mask fading items out at the top and bottom edges of the visible area."
-    value: "A skills or services list in a vertical marquee that scrolls at just below reading speed — forcing the user to track individual items — with a gradient mask fading items out at the top and bottom edges of the visible area."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.10
-    type: text
-    label: "[speed] A marquee whose speed is controlled by cursor proximity — as the cursor moves toward the marquee strip the speed increases, as it moves away the speed decreases — a magnetic speed relationship between cursor and content."
-    value: "A marquee whose speed is controlled by cursor proximity — as the cursor moves toward the marquee strip the speed increases, as it moves away the speed decreases — a magnetic speed relationship between cursor and content."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.11
-    type: text
-    label: "[horizontal] A multi-language marquee — the same phrase repeating in different languages — scrolling so that each language occupies the same amount of horizontal space due to variable type sizing, creating a global rhythm."
-    value: "A multi-language marquee — the same phrase repeating in different languages — scrolling so that each language occupies the same amount of horizontal space due to variable type sizing, creating a global rhythm."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.12
-    type: text
-    label: "[vertical] A testimonial quote ticker scrolls upward showing short excerpts — just one or two lines each — with the speaker's name below each quote, creating a rapid impression of social proof as the quotes stream past."
-    value: "A testimonial quote ticker scrolls upward showing short excerpts — just one or two lines each — with the speaker's name below each quote, creating a rapid impression of social proof as the quotes stream past."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.13
-    type: text
-    label: "[speed] A marquee that pauses when a specific element on the page is in the viewport — a related section or featured item — and resumes when that element is scrolled past, creating a contextual relationship between scroll position and marquee motion."
-    value: "A marquee that pauses when a specific element on the page is in the viewport — a related section or featured item — and resumes when that element is scrolled past, creating a contextual relationship between scroll position and marquee motion."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.14
-    type: text
-    label: "[horizontal] An image marquee with mixed portrait and landscape photos at consistent heights — photos scrolling left with slight gaps between them — each photo subtly zooms in on hover while the strip continues scrolling around it."
-    value: "An image marquee with mixed portrait and landscape photos at consistent heights — photos scrolling left with slight gaps between them — each photo subtly zooms in on hover while the strip continues scrolling around it."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.15
-    type: text
-    label: "[vertical] A real-time data ticker — showing live statistics, counts, or updates — scrolling upward with new items appending at the bottom."
-    value: "A real-time data ticker — showing live statistics, counts, or updates — scrolling upward with new items appending at the bottom. New items slide in with a brief highlight color that fades to match the others."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.16
-    type: text
-    label: "[speed] A marquee that slows dramatically as it enters the viewport on scroll — starting fast as the section first appears and decelerating to its cruise speed over 1 second — giving the first impression of urgency that settles into a calm rhythm."
-    value: "A marquee that slows dramatically as it enters the viewport on scroll — starting fast as the section first appears and decelerating to its cruise speed over 1 second — giving the first impression of urgency that settles into a calm rhythm."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.17
-    type: text
-    label: "[horizontal] A marquee with mixed content types — some items are text, some are small icons, some are image thumbnails — all in a single continuous stream, creating a rich varied strip that rewards extended watching."
-    value: "A marquee with mixed content types — some items are text, some are small icons, some are image thumbnails — all in a single continuous stream, creating a rich varied strip that rewards extended watching."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.18
-    type: text
-    label: "[vertical] A job listings or opportunities ticker scrolls position titles upward — each item formatted with role, team, and location — with a 'View all' CTA that fades in after the ticker has been running for 3 seconds."
-    value: "A job listings or opportunities ticker scrolls position titles upward — each item formatted with role, team, and location — with a 'View all' CTA that fades in after the ticker has been running for 3 seconds."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.19
-    type: text
-    label: "[speed] A diagonal marquee — scrolling at 45 degrees from bottom-left to top-right — filling a full-bleed section as a background texture of repeating text, the diagonal direction making it feel more dynamic than horizontal or vertical."
-    value: "A diagonal marquee — scrolling at 45 degrees from bottom-left to top-right — filling a full-bleed section as a background texture of repeating text, the diagonal direction making it feel more dynamic than horizontal or vertical."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.infinite_marquee.20
-    type: text
-    label: "[horizontal] A marquee that clips at a container boundary rather than the viewport edge — contained within a card or section — with a gradient fade at both edges of the container, creating an internal scrolling window effect."
-    value: "A marquee that clips at a container boundary rather than the viewport edge — contained within a card or section — with a gradient fade at both edges of the container, creating an internal scrolling window effect."
-    section: infinite_marquee
-    enabled: false
-  - key: animations.3d_scene_on_scroll.enabled
-    type: text
-    label: "3d Scene On Scroll — enable category"
-    value: ""
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.1
-    type: text
-    label: "[orbit] A 3D product model orbits slowly as the user scrolls — the camera position rotates around the object's Y axis, completing a full 360-degree orbit over the full scroll distance of the pinned section, revealing all angles of the product."
-    value: "A 3D product model orbits slowly as the user scrolls — the camera position rotates around the object's Y axis, completing a full 360-degree orbit over the full scroll distance of the pinned section, revealing all angles of the product."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.2
-    type: text
-    label: "[depth] A scene built with CSS perspective has elements at multiple Z depths — foreground, mid, and background layers — that spread apart on scroll, the camera pulling back to reveal the full depth of the composition as the user scrolls down."
-    value: "A scene built with CSS perspective has elements at multiple Z depths — foreground, mid, and background layers — that spread apart on scroll, the camera pulling back to reveal the full depth of the composition as the user scrolls down."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.3
-    type: text
-    label: "[orbit] A 3D globe rotates on the Y axis in sync with horizontal mouse movement — and tilts on the X axis with vertical mouse movement — while scroll controls the camera zoom level, pulling the globe closer or pushing it further away."
-    value: "A 3D globe rotates on the Y axis in sync with horizontal mouse movement — and tilts on the X axis with vertical mouse movement — while scroll controls the camera zoom level, pulling the globe closer or pushing it further away."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.4
-    type: text
-    label: "[tilt] An entire hero section tilts in 3D perspective as the cursor moves — the whole scene rotating up to 8 degrees on both axes based on mouse position — creating the illusion that the flat design exists in a real 3D space."
-    value: "An entire hero section tilts in 3D perspective as the cursor moves — the whole scene rotating up to 8 degrees on both axes based on mouse position — creating the illusion that the flat design exists in a real 3D space."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.5
-    type: text
-    label: "[depth] A stack of 3D cards is arranged along the Z axis — closest card in full size and sharp, cards behind it progressively smaller and slightly blurred."
-    value: "A stack of 3D cards is arranged along the Z axis — closest card in full size and sharp, cards behind it progressively smaller and slightly blurred. Scrolling moves the whole stack forward, cycling each card to the front position."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.6
-    type: text
-    label: "[orbit] Scroll drives a first-person camera through a 3D scene — a hallway, a space, a landscape — built from layered CSS elements with perspective."
-    value: "Scroll drives a first-person camera through a 3D scene — a hallway, a space, a landscape — built from layered CSS elements with perspective. The camera advances forward as the user scrolls, creating a walk-through experience."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.7
-    type: text
-    label: "[tilt] Individual feature cards tilt independently based on cursor position within their own bounds — each card has its own tilt center, so multiple cards on screen simultaneously each have their own perspective response to the cursor."
-    value: "Individual feature cards tilt independently based on cursor position within their own bounds — each card has its own tilt center, so multiple cards on screen simultaneously each have their own perspective response to the cursor."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.8
-    type: text
-    label: "[depth] A 3D text extrusion effect — the headline has depth behind it, the extrusion visible from one angle."
-    value: "A 3D text extrusion effect — the headline has depth behind it, the extrusion visible from one angle. As the user scrolls, the text rotates to face-forward, collapsing the visible depth, as if the 3D text is turning to look at the user."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.9
-    type: text
-    label: "[orbit] A 3D icon or logo spins on entry — arriving from a rotated state and spinning to face-forward as it enters the viewport, the rotation triggered by scroll position so the spin speed is controlled by how fast the user scrolls."
-    value: "A 3D icon or logo spins on entry — arriving from a rotated state and spinning to face-forward as it enters the viewport, the rotation triggered by scroll position so the spin speed is controlled by how fast the user scrolls."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.10
-    type: text
-    label: "[tilt] A pricing table section uses 3D perspective — the table starts tilted back at rotateX 30 degrees as if lying flat on a table, and as it scrolls into view it rotates to face the user, rising from horizontal to vertical over the scroll range."
-    value: "A pricing table section uses 3D perspective — the table starts tilted back at rotateX 30 degrees as if lying flat on a table, and as it scrolls into view it rotates to face the user, rising from horizontal to vertical over the scroll range."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.11
-    type: text
-    label: "[depth] A 3D product showcase has the product on a virtual turntable — scroll drives rotation on the Y axis — while a separate mouse-driven tilt controls X axis rotation — combining two input types for full 3D control over the viewing angle."
-    value: "A 3D product showcase has the product on a virtual turntable — scroll drives rotation on the Y axis — while a separate mouse-driven tilt controls X axis rotation — combining two input types for full 3D control over the viewing angle."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.12
-    type: text
-    label: "[orbit] A team section uses a 3D arc layout — team member cards arranged on a curve receding into the distance."
-    value: "A team section uses a 3D arc layout — team member cards arranged on a curve receding into the distance. As the user scrolls, the arc rotates to bring each team member to the front-and-center position in the arc."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.13
-    type: text
-    label: "[tilt] A mobile app screenshot has a 3D device tilt that matches the screenshot content — a map app tilts the device to show the map in perspective, a fitness app tilts dynamically based on a simulated accelerometer value driven by scroll."
-    value: "A mobile app screenshot has a 3D device tilt that matches the screenshot content — a map app tilts the device to show the map in perspective, a fitness app tilts dynamically based on a simulated accelerometer value driven by scroll."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.14
-    type: text
-    label: "[depth] A 3D layered infographic uses CSS preserve-3d to separate layers — icons float at different Z positions — and as the user scrolls past the section, the layers slowly drift apart in Z space, then come back together, demonstrating their relationships."
-    value: "A 3D layered infographic uses CSS preserve-3d to separate layers — icons float at different Z positions — and as the user scrolls past the section, the layers slowly drift apart in Z space, then come back together, demonstrating their relationships."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.15
-    type: text
-    label: "[orbit] A 3D rotating cube displays different content on each face — scroll rotates the cube to the next face every section — each 90-degree rotation reveals a new content panel, making navigation a physical 3D turning of a cube."
-    value: "A 3D rotating cube displays different content on each face — scroll rotates the cube to the next face every section — each 90-degree rotation reveals a new content panel, making navigation a physical 3D turning of a cube."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.16
-    type: text
-    label: "[tilt] A gallery section uses a 3D perspective grid — images arranged with slight rotational offsets along both axes — the whole grid tilts gently as the cursor moves across the section, making the grid feel like a physical surface in space."
-    value: "A gallery section uses a 3D perspective grid — images arranged with slight rotational offsets along both axes — the whole grid tilts gently as the cursor moves across the section, making the grid feel like a physical surface in space."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.17
-    type: text
-    label: "[depth] A 3D book or brochure opens on scroll — the cover rotates on a spine axis to reveal interior pages, each page then turning individually as the scroll advances, creating a realistic page-turning animation driven entirely by scroll position."
-    value: "A 3D book or brochure opens on scroll — the cover rotates on a spine axis to reveal interior pages, each page then turning individually as the scroll advances, creating a realistic page-turning animation driven entirely by scroll position."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.18
-    type: text
-    label: "[orbit] A 3D architectural model rotates to show different elevations — front, side, rear, top — as the user scrolls through the description of each elevation."
-    value: "A 3D architectural model rotates to show different elevations — front, side, rear, top — as the user scrolls through the description of each elevation. The model snaps to each view with a smooth spring rotation."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.19
-    type: text
-    label: "[tilt] A skills or expertise radar chart exists in a 3D perspective — tilted back at 60 degrees — and rotates upright to face the user as it scrolls into view."
-    value: "A skills or expertise radar chart exists in a 3D perspective — tilted back at 60 degrees — and rotates upright to face the user as it scrolls into view. The chart's data fills in as the 3D rotation completes, combining entrance and data animation."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.3d_scene_on_scroll.20
-    type: text
-    label: "[depth] A 3D ribbon or banner twists through the section in perspective — one long surface folding through space — with text content printed on the ribbon."
-    value: "A 3D ribbon or banner twists through the section in perspective — one long surface folding through space — with text content printed on the ribbon. As the scroll advances, the camera moves along the ribbon, reading its content around the twists."
-    section: 3d_scene_on_scroll
-    enabled: false
-  - key: animations.accordion_drawer_reveal.enabled
-    type: text
-    label: "Accordion Drawer Reveal — enable category"
-    value: ""
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.1
-    type: text
-    label: "[height] An FAQ accordion opens each answer panel by animating from height 0 to auto — using GSAP's height auto technique — with an ease that starts fast and decelerates, making the drawer feel like it's releasing under spring tension."
-    value: "An FAQ accordion opens each answer panel by animating from height 0 to auto — using GSAP's height auto technique — with an ease that starts fast and decelerates, making the drawer feel like it's releasing under spring tension."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.2
-    type: text
-    label: "[clip] Accordion panels reveal their content with a clip-path animation rather than height — the content is already at full height but clipped to zero, and the clip expands downward on open, creating a smoother animation without layout reflow."
-    value: "Accordion panels reveal their content with a clip-path animation rather than height — the content is already at full height but clipped to zero, and the clip expands downward on open, creating a smoother animation without layout reflow."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.3
-    type: text
-    label: "[height] When one accordion item opens, all currently open items close simultaneously — their heights animate to zero while the new item opens — so there's always exactly one panel visible, and the transitions cross-fade rather than happening in sequence."
-    value: "When one accordion item opens, all currently open items close simultaneously — their heights animate to zero while the new item opens — so there's always exactly one panel visible, and the transitions cross-fade rather than happening in sequence."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.4
-    type: text
-    label: "[icon] The accordion trigger icon rotates on open — a plus rotates 45 degrees to become an X, a chevron rotates 180 degrees to point upward — the icon rotation is springy, overshooting slightly before settling at its end angle."
-    value: "The accordion trigger icon rotates on open — a plus rotates 45 degrees to become an X, a chevron rotates 180 degrees to point upward — the icon rotation is springy, overshooting slightly before settling at its end angle."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.5
-    type: text
-    label: "[height] A drawer component reveals from the bottom of the screen — sliding upward from below the viewport to its open position — with the background content scaling down slightly to acknowledge the drawer's presence in the space."
-    value: "A drawer component reveals from the bottom of the screen — sliding upward from below the viewport to its open position — with the background content scaling down slightly to acknowledge the drawer's presence in the space."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.6
-    type: text
-    label: "[clip] A mobile filter panel slides in from the left edge — a drawer that opens horizontally — with the main content simultaneously shifting right to make room, both elements animating together as a coordinated space reconfiguration."
-    value: "A mobile filter panel slides in from the left edge — a drawer that opens horizontally — with the main content simultaneously shifting right to make room, both elements animating together as a coordinated space reconfiguration."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.7
-    type: text
-    label: "[height] Accordion items open with a stagger of internal content — the panel height expands first, then the content inside fades in with its own internal stagger — so the container opens first and content follows, like unpacking a box."
-    value: "Accordion items open with a stagger of internal content — the panel height expands first, then the content inside fades in with its own internal stagger — so the container opens first and content follows, like unpacking a box."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.8
-    type: text
-    label: "[icon] A settings drawer that opens from the right edge — clicking the trigger slides the panel in from the right — with an overlay fading in behind it, the overlay click closing the drawer with a matching reverse animation."
-    value: "A settings drawer that opens from the right edge — clicking the trigger slides the panel in from the right — with an overlay fading in behind it, the overlay click closing the drawer with a matching reverse animation."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.9
-    type: text
-    label: "[height] A nested accordion — parent items contain child accordions — with each level of nesting having a slightly different animation duration, so child panels open faster than parent panels, communicating their relative hierarchy through timing."
-    value: "A nested accordion — parent items contain child accordions — with each level of nesting having a slightly different animation duration, so child panels open faster than parent panels, communicating their relative hierarchy through timing."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.10
-    type: text
-    label: "[clip] A product specification accordion uses a horizontal reveal — each spec row expands its value column from the right using a clip animation — so the label is always visible and the value slides in to join it on open."
-    value: "A product specification accordion uses a horizontal reveal — each spec row expands its value column from the right using a clip animation — so the label is always visible and the value slides in to join it on open."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.11
-    type: text
-    label: "[height] An accordion where the active item expands while simultaneously all inactive items compress slightly — not closing, just shrinking by 10% — creating a breathing effect where the active item takes up proportionally more space in the group."
-    value: "An accordion where the active item expands while simultaneously all inactive items compress slightly — not closing, just shrinking by 10% — creating a breathing effect where the active item takes up proportionally more space in the group."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.12
-    type: text
-    label: "[icon] A drawer trigger button morphs on open — the button text changes from 'Show more' to 'Show less' with a character-by-character scramble transition — while the button width animates to accommodate the slightly different text length."
-    value: "A drawer trigger button morphs on open — the button text changes from 'Show more' to 'Show less' with a character-by-character scramble transition — while the button width animates to accommodate the slightly different text length."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.13
-    type: text
-    label: "[height] A timeline-style accordion where each item is a period or phase — opening an item expands it to show detailed content and simultaneously advances a progress indicator, so the expanded state is visually connected to a sense of progress."
-    value: "A timeline-style accordion where each item is a period or phase — opening an item expands it to show detailed content and simultaneously advances a progress indicator, so the expanded state is visually connected to a sense of progress."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.14
-    type: text
-    label: "[clip] A fullscreen overlay drawer — clicking a trigger expands a panel from the trigger's position outward to fill the entire viewport — using a clip-path circle expand from the trigger point — and collapses back to the trigger on close."
-    value: "A fullscreen overlay drawer — clicking a trigger expands a panel from the trigger's position outward to fill the entire viewport — using a clip-path circle expand from the trigger point — and collapses back to the trigger on close."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.15
-    type: text
-    label: "[height] A shopping cart drawer slides down from the top navigation — the nav bar remains visible and the cart panel expands below it — with each cart item stagger-fading in after the panel finishes opening."
-    value: "A shopping cart drawer slides down from the top navigation — the nav bar remains visible and the cart panel expands below it — with each cart item stagger-fading in after the panel finishes opening."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.16
-    type: text
-    label: "[icon] Accordion items have a background color that bleeds in on open — the panel background transitions from transparent to a light tint as the height expands — and bleeds back out on close — the color tied to the open state."
-    value: "Accordion items have a background color that bleeds in on open — the panel background transitions from transparent to a light tint as the height expands — and bleeds back out on close — the color tied to the open state."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.17
-    type: text
-    label: "[height] A comparison accordion — two columns, each with their own independent accordion items — where opening an item in one column highlights the corresponding row in the other column, syncing the two accordions contextually."
-    value: "A comparison accordion — two columns, each with their own independent accordion items — where opening an item in one column highlights the corresponding row in the other column, syncing the two accordions contextually."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.18
-    type: text
-    label: "[clip] A mega menu drawer that opens the entire secondary navigation below the header — the menu panel slides down from the header's bottom edge — with menu items staggering in from left to right after the panel has opened."
-    value: "A mega menu drawer that opens the entire secondary navigation below the header — the menu panel slides down from the header's bottom edge — with menu items staggering in from left to right after the panel has opened."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.19
-    type: text
-    label: "[height] An accordion where long open panels lazily load their content — the panel opens to a skeleton loader state first, then the real content fades in once loaded, with a smooth height adjustment if the real content is taller than the skeleton."
-    value: "An accordion where long open panels lazily load their content — the panel opens to a skeleton loader state first, then the real content fades in once loaded, with a smooth height adjustment if the real content is taller than the skeleton."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.accordion_drawer_reveal.20
-    type: text
-    label: "[icon] A horizontal accordion — items expand to the right rather than downward — where clicking an item pushes the other items to compress their width, the active item taking up more horizontal space while others shrink to icon-only mode."
-    value: "A horizontal accordion — items expand to the right rather than downward — where clicking an item pushes the other items to compress their width, the active item taking up more horizontal space while others shrink to icon-only mode."
-    section: accordion_drawer_reveal
-    enabled: false
-  - key: animations.stagger_list_entrance.enabled
-    type: text
-    label: "Stagger List Entrance — enable category"
-    value: ""
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.1
-    type: text
-    label: "[vertical] A feature list animates in from below — each list item slides up from translateY 30px and fades from 0 opacity to 1, staggered by 80ms per item in reading order — a clean, confident cascade that draws the eye downward through the list."
-    value: "A feature list animates in from below — each list item slides up from translateY 30px and fades from 0 opacity to 1, staggered by 80ms per item in reading order — a clean, confident cascade that draws the eye downward through the list."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.2
-    type: text
-    label: "[horizontal] A grid of service cards enters with a left-to-right stagger — each card slides in from the left side with opacity 0 to 1, the stagger timing creating a wave that travels across the grid from left edge to right edge."
-    value: "A grid of service cards enters with a left-to-right stagger — each card slides in from the left side with opacity 0 to 1, the stagger timing creating a wave that travels across the grid from left edge to right edge."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.3
-    type: text
-    label: "[vertical] A navigation menu opens with its items staggering in from above — each link drops down from above its final position with a spring ease, staggered from top to bottom so the menu assembles downward like a venetian blind opening."
-    value: "A navigation menu opens with its items staggering in from above — each link drops down from above its final position with a spring ease, staggered from top to bottom so the menu assembles downward like a venetian blind opening."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.4
-    type: text
-    label: "[scale] A tag cloud or skill pill list enters with each pill scaling in from 0 to 1 with a spring bounce, staggered randomly across all items so they pop in at unpredictable intervals, creating an organic arrival rather than a mechanical sequence."
-    value: "A tag cloud or skill pill list enters with each pill scaling in from 0 to 1 with a spring bounce, staggered randomly across all items so they pop in at unpredictable intervals, creating an organic arrival rather than a mechanical sequence."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.5
-    type: text
-    label: "[horizontal] A comparison feature list has two columns that stagger in from opposite sides — the left column items slide in from the left, the right column items from the right — both columns staggering simultaneously, meeting at center."
-    value: "A comparison feature list has two columns that stagger in from opposite sides — the left column items slide in from the left, the right column items from the right — both columns staggering simultaneously, meeting at center."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.6
-    type: text
-    label: "[vertical] A price breakdown list reveals each line item one at a time from top to bottom — each row slides in and a subtle total counter updates at the bottom, re-tallying with each new line item that appears."
-    value: "A price breakdown list reveals each line item one at a time from top to bottom — each row slides in and a subtle total counter updates at the bottom, re-tallying with each new line item that appears."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.7
-    type: text
-    label: "[scale] A team directory grid enters with cards scaling up from 80% and fading in, staggered diagonally — the card at the top-left corner arrives first, then the wave travels diagonally to the bottom-right, one card at a time."
-    value: "A team directory grid enters with cards scaling up from 80% and fading in, staggered diagonally — the card at the top-left corner arrives first, then the wave travels diagonally to the bottom-right, one card at a time."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.8
-    type: text
-    label: "[horizontal] A menu list stagger where items enter from alternating sides — odd items from the left, even items from the right — creating a zig-zag entrance that gives the list a dynamic, energetic arrival."
-    value: "A menu list stagger where items enter from alternating sides — odd items from the left, even items from the right — creating a zig-zag entrance that gives the list a dynamic, energetic arrival."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.9
-    type: text
-    label: "[vertical] A results list — search results, product listings, or news items — staggers in from below with a very tight 40ms delay between items, so the list appears to flow in rapidly like water filling the container."
-    value: "A results list — search results, product listings, or news items — staggers in from below with a very tight 40ms delay between items, so the list appears to flow in rapidly like water filling the container."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.10
-    type: text
-    label: "[scale] A statistics grid enters with each stat card scaling in with a rotation — starting at scale 0 and rotated 10 degrees — landing at scale 1 and 0 degrees with a spring overshoot, staggered column by column across the grid."
-    value: "A statistics grid enters with each stat card scaling in with a rotation — starting at scale 0 and rotated 10 degrees — landing at scale 1 and 0 degrees with a spring overshoot, staggered column by column across the grid."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.11
-    type: text
-    label: "[horizontal] A steps or process list enters with each step sliding in from the right — staggered by 100ms — so the steps arrive in reading order, reinforcing the sequential nature of the process with the direction of the animation."
-    value: "A steps or process list enters with each step sliding in from the right — staggered by 100ms — so the steps arrive in reading order, reinforcing the sequential nature of the process with the direction of the animation."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.12
-    type: text
-    label: "[vertical] A dropdown menu list staggers its items in with a very fast 30ms delay — the menu appears to fill almost instantly but the stagger is just perceptible enough to feel fluid rather than jarring, much smoother than a blink appearance."
-    value: "A dropdown menu list staggers its items in with a very fast 30ms delay — the menu appears to fill almost instantly but the stagger is just perceptible enough to feel fluid rather than jarring, much smoother than a blink appearance."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.13
-    type: text
-    label: "[scale] A client logo grid enters with each logo fading and scaling in — but tied to scroll position rather than a one-shot trigger — as the user scrolls down, logos pop in one at a time in the order they enter the viewport."
-    value: "A client logo grid enters with each logo fading and scaling in — but tied to scroll position rather than a one-shot trigger — as the user scrolls down, logos pop in one at a time in the order they enter the viewport."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.14
-    type: text
-    label: "[horizontal] A breadcrumb navigation animates in on page load — each crumb sliding in from the left with a stagger, the separator chevron between crumbs fading in after each crumb arrives, building the path from root to current page."
-    value: "A breadcrumb navigation animates in on page load — each crumb sliding in from the left with a stagger, the separator chevron between crumbs fading in after each crumb arrives, building the path from root to current page."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.15
-    type: text
-    label: "[vertical] A changelog or version list staggers in by version — newest version at top animates in first, older versions follow staggered below — with each version's change items having their own inner stagger after their version header appears."
-    value: "A changelog or version list staggers in by version — newest version at top animates in first, older versions follow staggered below — with each version's change items having their own inner stagger after their version header appears."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.16
-    type: text
-    label: "[scale] A selection of color swatches or material options enters with each swatch dropping in from above and landing with a bounce, staggered left to right — the bounce height varies by swatch position, earlier swatches bouncing higher."
-    value: "A selection of color swatches or material options enters with each swatch dropping in from above and landing with a bounce, staggered left to right — the bounce height varies by swatch position, earlier swatches bouncing higher."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.17
-    type: text
-    label: "[horizontal] A sidebar filter list enters when the sidebar opens — items sliding in from the left edge of the sidebar with a tight stagger, giving the filter panel a feel of being populated dynamically rather than appearing all at once."
-    value: "A sidebar filter list enters when the sidebar opens — items sliding in from the left edge of the sidebar with a tight stagger, giving the filter panel a feel of being populated dynamically rather than appearing all at once."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.18
-    type: text
-    label: "[vertical] A testimonial list staggers with photos and text separated — profile photos enter first with a scale-in stagger, then the quote text fades in beside each photo with a slight delay — photo then text, for each item in order."
-    value: "A testimonial list staggers with photos and text separated — profile photos enter first with a scale-in stagger, then the quote text fades in beside each photo with a slight delay — photo then text, for each item in order."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.19
-    type: text
-    label: "[scale] A social proof strip — logos plus text — enters as a unit but with internal stagger: the label fades in first, then each logo scales in one by one, then the supporting text fades in last — a three-beat build for a single component."
-    value: "A social proof strip — logos plus text — enters as a unit but with internal stagger: the label fades in first, then each logo scales in one by one, then the supporting text fades in last — a three-beat build for a single component."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.stagger_list_entrance.20
-    type: text
-    label: "[horizontal] An on-scroll list entrance that's tied to scroll velocity — scrolling fast staggers items in with minimal delay so they all appear quickly, scrolling slowly gives each item its full stagger duration — the reading pace shaping the animation pace."
-    value: "An on-scroll list entrance that's tied to scroll velocity — scrolling fast staggers items in with minimal delay so they all appear quickly, scrolling slowly gives each item its full stagger duration — the reading pace shaping the animation pace."
-    section: stagger_list_entrance
-    enabled: false
-  - key: animations.hover_microinteractions.enabled
-    type: text
-    label: "Hover Microinteractions — enable category"
-    value: ""
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.1
-    type: text
-    label: "[spring] Buttons have a spring press response on hover — scaling to 103% with a slight overshoot on enter and springing back to 100% with overshoot on leave — the button feels physically pliant, like pressing a soft pad."
-    value: "Buttons have a spring press response on hover — scaling to 103% with a slight overshoot on enter and springing back to 100% with overshoot on leave — the button feels physically pliant, like pressing a soft pad."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.2
-    type: text
-    label: "[underline] Navigation links reveal an animated underline on hover — the underline draws in from the left edge on mouseenter and retracts to the right edge on mouseleave — never retracting the same direction it entered."
-    value: "Navigation links reveal an animated underline on hover — the underline draws in from the left edge on mouseenter and retracts to the right edge on mouseleave — never retracting the same direction it entered."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.3
-    type: text
-    label: "[spring] Card components lift on hover — a translateY of minus 6px combined with a scale of 1."
-    value: "Card components lift on hover — a translateY of minus 6px combined with a scale of 1.02 — with a spring ease that makes the card feel like it's floating upward under magnetic repulsion from the surface below."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.4
-    type: text
-    label: "[fill] Icon buttons reveal a circular fill behind them on hover — the fill expands from the cursor's entry point within the button outward to cover the button area — a ripple-origin fill rather than a center-expanding one."
-    value: "Icon buttons reveal a circular fill behind them on hover — the fill expands from the cursor's entry point within the button outward to cover the button area — a ripple-origin fill rather than a center-expanding one."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.5
-    type: text
-    label: "[spring] Menu items have a stagger-responsive hover — hovering one item moves it forward while adjacent items subtly push backward, creating a depth relationship between the hovered item and its neighbors without the neighbors moving far."
-    value: "Menu items have a stagger-responsive hover — hovering one item moves it forward while adjacent items subtly push backward, creating a depth relationship between the hovered item and its neighbors without the neighbors moving far."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.6
-    type: text
-    label: "[underline] A link underline that follows the cursor position along the text — the underline is only as wide as the word or character directly above the cursor, sliding along the full text as the cursor moves across it."
-    value: "A link underline that follows the cursor position along the text — the underline is only as wide as the word or character directly above the cursor, sliding along the full text as the cursor moves across it."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.7
-    type: text
-    label: "[fill] A social share button fill — on hover a solid color floods in from the left using a clip-path wipe over 200ms — simultaneously the icon and label text color inverts to maintain contrast as the fill covers them."
-    value: "A social share button fill — on hover a solid color floods in from the left using a clip-path wipe over 200ms — simultaneously the icon and label text color inverts to maintain contrast as the fill covers them."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.8
-    type: text
-    label: "[spring] Image thumbnails have a hover zoom on the internal image — the frame stays fixed but the photo inside scales to 108% with a smooth spring ease, hinting at more content without changing the layout grid."
-    value: "Image thumbnails have a hover zoom on the internal image — the frame stays fixed but the photo inside scales to 108% with a smooth spring ease, hinting at more content without changing the layout grid."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.9
-    type: text
-    label: "[underline] A thick decorative underline on headings animates its width on hover — starting narrow and the same width as the text, expanding to full container width and changing color — a hover that reframes the heading in its space."
-    value: "A thick decorative underline on headings animates its width on hover — starting narrow and the same width as the text, expanding to full container width and changing color — a hover that reframes the heading in its space."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.10
-    type: text
-    label: "[fill] Tab buttons reveal their active state fill on hover — the fill slides in from the direction of the previously active tab, so if the last active tab was to the left, the hover fill enters from the left — directional fill based on origin."
-    value: "Tab buttons reveal their active state fill on hover — the fill slides in from the direction of the previously active tab, so if the last active tab was to the left, the hover fill enters from the left — directional fill based on origin."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.11
-    type: text
-    label: "[spring] A submit button compresses slightly on click — scaleY to 0."
-    value: "A submit button compresses slightly on click — scaleY to 0.95 — then releases with a spring rebound, combined with a label that briefly blurs and sharpens — a physical press-and-release that confirms the click action tactilely."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.12
-    type: text
-    label: "[underline] Dropdown trigger links reveal their open state with a double underline on hover — a second underline appearing 3px below the first — so the hover state is clearly distinguished from the normal underline that appears on focus."
-    value: "Dropdown trigger links reveal their open state with a double underline on hover — a second underline appearing 3px below the first — so the hover state is clearly distinguished from the normal underline that appears on focus."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.13
-    type: text
-    label: "[fill] A pricing plan card highlight shifts between plans smoothly — the highlight background rectangle slides horizontally from the current plan to the hovered plan with a spring tween — so the highlight is always visibly transitioning between options."
-    value: "A pricing plan card highlight shifts between plans smoothly — the highlight background rectangle slides horizontally from the current plan to the hovered plan with a spring tween — so the highlight is always visibly transitioning between options."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.14
-    type: text
-    label: "[spring] Icon elements do a quick shake or wiggle on hover — a rapid left-right oscillation using a GSAP keyframe timeline — subtle enough to be delightful rather than distracting, signaling interactivity through a micromotion gesture."
-    value: "Icon elements do a quick shake or wiggle on hover — a rapid left-right oscillation using a GSAP keyframe timeline — subtle enough to be delightful rather than distracting, signaling interactivity through a micromotion gesture."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.15
-    type: text
-    label: "[underline] Link underlines use a two-color system on hover — the default underline is neutral, and on hover a second colored underline slides in from the left underneath the first — so both colors are visible simultaneously during the hover state."
-    value: "Link underlines use a two-color system on hover — the default underline is neutral, and on hover a second colored underline slides in from the left underneath the first — so both colors are visible simultaneously during the hover state."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.16
-    type: text
-    label: "[fill] A category filter button swaps its fill on hover with a color that's complementary to its default state — not just darker, but a different hue — making the hover state feel like a genuine alternative rather than a simple brightness change."
-    value: "A category filter button swaps its fill on hover with a color that's complementary to its default state — not just darker, but a different hue — making the hover state feel like a genuine alternative rather than a simple brightness change."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.17
-    type: text
-    label: "[spring] Avatar images respond to hover with a subtle tilt — rotating 3 degrees clockwise — and a slight Z pop — combined with a ring that expands outward from the avatar edge — three simultaneous microinteractions reinforcing each other."
-    value: "Avatar images respond to hover with a subtle tilt — rotating 3 degrees clockwise — and a slight Z pop — combined with a ring that expands outward from the avatar edge — three simultaneous microinteractions reinforcing each other."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.18
-    type: text
-    label: "[underline] A multi-word button or label has its underline animate word by word — on hover the underline draws through each word sequentially from left to right, so a three-word label has three beats of underline drawing in rapid succession."
-    value: "A multi-word button or label has its underline animate word by word — on hover the underline draws through each word sequentially from left to right, so a three-word label has three beats of underline drawing in rapid succession."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.19
-    type: text
-    label: "[fill] A search input reveals a subtle fill animation when focused — the background lightens from the left edge to the right over 300ms as the cursor enters — then reverses the fill on blur, making the focus and blur states feel animated."
-    value: "A search input reveals a subtle fill animation when focused — the background lightens from the left edge to the right over 300ms as the cursor enters — then reverses the fill on blur, making the focus and blur states feel animated."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.hover_microinteractions.20
-    type: text
-    label: "[spring] Navigation items have a letter-spacing expansion on hover — the spacing between characters widens from default to 0."
-    value: "Navigation items have a letter-spacing expansion on hover — the spacing between characters widens from default to 0.05em with a spring ease — a typographic microinteraction that gives the link a breathing, opening quality on hover."
-    section: hover_microinteractions
-    enabled: false
-  - key: animations.scroll_snapping_sections.enabled
-    type: text
-    label: "Scroll Snapping Sections — enable category"
-    value: ""
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.1
-    type: text
-    label: "[snap] Full-page scroll sections snap to the nearest section on scroll — each snap transition uses GSAP to animate both the outgoing and incoming sections simultaneously, with the outgoing section fading and scaling down while the incoming one fades and scales up."
-    value: "Full-page scroll sections snap to the nearest section on scroll — each snap transition uses GSAP to animate both the outgoing and incoming sections simultaneously, with the outgoing section fading and scaling down while the incoming one fades and scales up."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.2
-    type: text
-    label: "[transition] Between snap points, a swipe-style transition plays — the current section slides off to the left while the next slides in from the right — the direction matching the scroll direction so swiping up reverses the animation."
-    value: "Between snap points, a swipe-style transition plays — the current section slides off to the left while the next slides in from the right — the direction matching the scroll direction so swiping up reverses the animation."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.3
-    type: text
-    label: "[snap] Vertical snap sections have a parallax relationship — as one section snaps out, its background image moves at 0."
-    value: "Vertical snap sections have a parallax relationship — as one section snaps out, its background image moves at 0.8x the section travel speed, creating a lag that gives each section's background image a sense of depth during the transition."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.4
-    type: text
-    label: "[indicator] Dot navigation on the right edge of the screen tracks the active snap section — each dot scaling up when its section is active and down when not — with an animated connector line between dots that shifts to highlight the active segment."
-    value: "Dot navigation on the right edge of the screen tracks the active snap section — each dot scaling up when its section is active and down when not — with an animated connector line between dots that shifts to highlight the active segment."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.5
-    type: text
-    label: "[transition] Snap section transitions use a crossfade with a brief moment of overlap — both sections at 50% opacity simultaneously — before the outgoing section completes its fade out, creating a dissolve transition between full-page sections."
-    value: "Snap section transitions use a crossfade with a brief moment of overlap — both sections at 50% opacity simultaneously — before the outgoing section completes its fade out, creating a dissolve transition between full-page sections."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.6
-    type: text
-    label: "[snap] A horizontal snap carousel has five full-width panels — scrolling horizontally snaps to each panel with a momentum-aware animation — panels that are scrolled past quickly animate faster, slow scrolls allow the spring ease to play fully."
-    value: "A horizontal snap carousel has five full-width panels — scrolling horizontally snaps to each panel with a momentum-aware animation — panels that are scrolled past quickly animate faster, slow scrolls allow the spring ease to play fully."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.7
-    type: text
-    label: "[transition] Each snap section's entrance is unique — section two clips in from the top, section three wipes from the right, section four scales up from center — giving each section its own arrival character while the snap mechanism stays consistent."
-    value: "Each snap section's entrance is unique — section two clips in from the top, section three wipes from the right, section four scales up from center — giving each section its own arrival character while the snap mechanism stays consistent."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.8
-    type: text
-    label: "[indicator] A section counter in the corner — '02 / 05' — updates with each snap using a digit flip animation, the outgoing number rolling upward and the incoming number rolling in from below, tracking position through the full-page snap sequence."
-    value: "A section counter in the corner — '02 / 05' — updates with each snap using a digit flip animation, the outgoing number rolling upward and the incoming number rolling in from below, tracking position through the full-page snap sequence."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.9
-    type: text
-    label: "[snap] Snap sections have staggered content entrances after snapping — once a section snaps into view, its headline, subtext, image, and CTA each animate in with a sequential stagger — a two-phase animation: snap then populate."
-    value: "Snap sections have staggered content entrances after snapping — once a section snaps into view, its headline, subtext, image, and CTA each animate in with a sequential stagger — a two-phase animation: snap then populate."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.10
-    type: text
-    label: "[transition] A page with six snap sections uses a shared element transition — a large geometric shape that's present in all sections repositions smoothly between snaps, its position, size, and color tweening to match the incoming section's design."
-    value: "A page with six snap sections uses a shared element transition — a large geometric shape that's present in all sections repositions smoothly between snaps, its position, size, and color tweening to match the incoming section's design."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.11
-    type: text
-    label: "[snap] Scroll velocity determines the snap transition style — a slow scroll triggers a gentle fade transition, a fast scroll triggers a more dynamic wipe — the transition energy matching the input energy."
-    value: "Scroll velocity determines the snap transition style — a slow scroll triggers a gentle fade transition, a fast scroll triggers a more dynamic wipe — the transition energy matching the input energy."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.12
-    type: text
-    label: "[indicator] A horizontal progress bar spans the full width of the viewport and fills in segment by segment — each segment representing one snap section — the fill advancing to the next segment with a spring ease when the snap occurs."
-    value: "A horizontal progress bar spans the full width of the viewport and fills in segment by segment — each segment representing one snap section — the fill advancing to the next segment with a spring ease when the snap occurs."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.13
-    type: text
-    label: "[transition] Snap sections with a split composition — content on the left, media on the right — transition with each half animating independently: the left content slides out and a new left content slides in, while the right media crossfades simultaneously."
-    value: "Snap sections with a split composition — content on the left, media on the right — transition with each half animating independently: the left content slides out and a new left content slides in, while the right media crossfades simultaneously."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.14
-    type: text
-    label: "[snap] A testimonial snap carousel allows arrow key navigation as well as scroll — keyboard navigation triggers the same GSAP transition as scroll, and the snap movement eases with a power3."
-    value: "A testimonial snap carousel allows arrow key navigation as well as scroll — keyboard navigation triggers the same GSAP transition as scroll, and the snap movement eases with a power3.inOut for a premium feel."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.15
-    type: text
-    label: "[transition] Each snap section has a theme color — the background, the dot nav active color, and the section counter all shift to the section theme color with each snap, animating the color transition simultaneously with the content transition."
-    value: "Each snap section has a theme color — the background, the dot nav active color, and the section counter all shift to the section theme color with each snap, animating the color transition simultaneously with the content transition."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.16
-    type: text
-    label: "[indicator] The snap progress indicator is a vertical line on the left edge — a circle marker that travels along the line to mark the current section position — animating smoothly along the line with a spring ease between section snaps."
-    value: "The snap progress indicator is a vertical line on the left edge — a circle marker that travels along the line to mark the current section position — animating smoothly along the line with a spring ease between section snaps."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.17
-    type: text
-    label: "[snap] A product showcase with five snap sections — each section showing the product from a different angle — transitions between sections with the product image appearing to rotate into the next angle, connecting the snap transition to the content change."
-    value: "A product showcase with five snap sections — each section showing the product from a different angle — transitions between sections with the product image appearing to rotate into the next angle, connecting the snap transition to the content change."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.18
-    type: text
-    label: "[transition] Snap transitions use a curtain wipe — a solid panel wipes in from the bottom, covers the section, and the new section is revealed as the panel wipes back up — the panel color matching the incoming section's accent color."
-    value: "Snap transitions use a curtain wipe — a solid panel wipes in from the bottom, covers the section, and the new section is revealed as the panel wipes back up — the panel color matching the incoming section's accent color."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.19
-    type: text
-    label: "[snap] The first section in the snap sequence plays a cinematic intro that only triggers once on page load — after which the snap sequence begins."
-    value: "The first section in the snap sequence plays a cinematic intro that only triggers once on page load — after which the snap sequence begins. On scroll back to section one, it shows the static final state of the intro rather than replaying it."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.scroll_snapping_sections.20
-    type: text
-    label: "[transition] Snap section transitions have an overscroll safety — if the user scroll-inertia carries past the snap point, a catch animation gently pulls the view back to the correct snap position with a spring ease, preventing half-snapped states."
-    value: "Snap section transitions have an overscroll safety — if the user scroll-inertia carries past the snap point, a catch animation gently pulls the view back to the correct snap position with a spring ease, preventing half-snapped states."
-    section: scroll_snapping_sections
-    enabled: false
-  - key: animations.particle_canvas_fx.enabled
-    type: text
-    label: "Particle Canvas Fx — enable category"
-    value: ""
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.1
-    type: text
-    label: "[burst] Clicking the hero CTA button triggers a confetti burst — dozens of small colored rectangles and circles explode outward from the button position, arcing upward with gravity pulling them down as they fade out over 1."
-    value: "Clicking the hero CTA button triggers a confetti burst — dozens of small colored rectangles and circles explode outward from the button position, arcing upward with gravity pulling them down as they fade out over 1.5 seconds."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.2
-    type: text
-    label: "[scroll] A canvas particle field sits behind the hero section — thousands of small dots connected by lines when close enough — and as the user scrolls, the particles drift upward and accelerate off the top of the canvas, thinning the field."
-    value: "A canvas particle field sits behind the hero section — thousands of small dots connected by lines when close enough — and as the user scrolls, the particles drift upward and accelerate off the top of the canvas, thinning the field."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.3
-    type: text
-    label: "[burst] A success state triggers a ring of particles expanding outward from the confirmation element — particles that start dense and close, spread outward in a radial burst, and fade out as they reach the edge of the ring."
-    value: "A success state triggers a ring of particles expanding outward from the confirmation element — particles that start dense and close, spread outward in a radial burst, and fade out as they reach the edge of the ring."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.4
-    type: text
-    label: "[cursor] The cursor leaves a trail of small particles as it moves across the page — each particle starts at the cursor position, drifts slightly in a random direction, and fades out over 500ms — a glowing trail that evaporates behind the cursor."
-    value: "The cursor leaves a trail of small particles as it moves across the page — each particle starts at the cursor position, drifts slightly in a random direction, and fades out over 500ms — a glowing trail that evaporates behind the cursor."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.5
-    type: text
-    label: "[scroll] A particle starfield accelerates as the user scrolls — particles move slowly when the page is idle, but as the user scrolls they streak forward like stars in warp speed, decelerating back to slow drift when scrolling stops."
-    value: "A particle starfield accelerates as the user scrolls — particles move slowly when the page is idle, but as the user scrolls they streak forward like stars in warp speed, decelerating back to slow drift when scrolling stops."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.6
-    type: text
-    label: "[burst] A product 'add to cart' button triggers a particle burst where the particles are miniature versions of the product icon — each tiny icon flies outward from the button, arcs toward the cart icon position, and disappears into it."
-    value: "A product 'add to cart' button triggers a particle burst where the particles are miniature versions of the product icon — each tiny icon flies outward from the button, arcs toward the cart icon position, and disappears into it."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.7
-    type: text
-    label: "[cursor] Hovering over an image section spawns particles that emerge from the edges of the image and drift into the surrounding space — the number and velocity of particles proportional to how quickly the cursor is moving over the image."
-    value: "Hovering over an image section spawns particles that emerge from the edges of the image and drift into the surrounding space — the number and velocity of particles proportional to how quickly the cursor is moving over the image."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.8
-    type: text
-    label: "[scroll] A canvas section has particles that organize into data visualizations — forming bar chart shapes, pie segments, or scatter plots — driven by scroll position, so the particle cloud coalesces from random noise into structured data as the section enters view."
-    value: "A canvas section has particles that organize into data visualizations — forming bar chart shapes, pie segments, or scatter plots — driven by scroll position, so the particle cloud coalesces from random noise into structured data as the section enters view."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.9
-    type: text
-    label: "[burst] A countdown reaching zero triggers an explosion of particles that spells out the word 'GO' or the event name — particles flying outward from letter-shaped formations, each particle following its own physics arc."
-    value: "A countdown reaching zero triggers an explosion of particles that spells out the word 'GO' or the event name — particles flying outward from letter-shaped formations, each particle following its own physics arc."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.10
-    type: text
-    label: "[cursor] The page background canvas reacts to cursor position — particles within a 100px radius of the cursor repel away from it, creating a cursor-shaped void in the particle field that heals itself as the cursor moves away."
-    value: "The page background canvas reacts to cursor position — particles within a 100px radius of the cursor repel away from it, creating a cursor-shaped void in the particle field that heals itself as the cursor moves away."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.11
-    type: text
-    label: "[scroll] A scroll-driven particle morph — the particle field on the canvas rearranges itself to form different shapes as the user scrolls through sections — morphing from a circle to a triangle to a brand logomark shape over the scroll distance."
-    value: "A scroll-driven particle morph — the particle field on the canvas rearranges itself to form different shapes as the user scrolls through sections — morphing from a circle to a triangle to a brand logomark shape over the scroll distance."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.12
-    type: text
-    label: "[burst] Section transitions trigger a particle wipe — particles stream in from one edge to the other to cover the screen, then stream off the opposite edge to reveal the new section — a particle curtain that sweeps across the viewport."
-    value: "Section transitions trigger a particle wipe — particles stream in from one edge to the other to cover the screen, then stream off the opposite edge to reveal the new section — a particle curtain that sweeps across the viewport."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.13
-    type: text
-    label: "[cursor] Drawing interaction — the cursor leaves a permanent particle trail on the canvas that persists until cleared — particles that solidify and stay where they were placed, allowing the user to draw with particles on the page background."
-    value: "Drawing interaction — the cursor leaves a permanent particle trail on the canvas that persists until cleared — particles that solidify and stay where they were placed, allowing the user to draw with particles on the page background."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.14
-    type: text
-    label: "[scroll] A DNA or molecular animation on canvas has particles connected in helical patterns that rotate and advance as the user scrolls — the camera traveling along the helix — particles staying in their molecular bonds as the structure scrolls through view."
-    value: "A DNA or molecular animation on canvas has particles connected in helical patterns that rotate and advance as the user scrolls — the camera traveling along the helix — particles staying in their molecular bonds as the structure scrolls through view."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.15
-    type: text
-    label: "[burst] A form submit button sends a burst of checkmark-shaped particles outward on success — tiny check icons that fly in random directions, spin once, and fade out — a satisfying micro-celebration for completing the form."
-    value: "A form submit button sends a burst of checkmark-shaped particles outward on success — tiny check icons that fly in random directions, spin once, and fade out — a satisfying micro-celebration for completing the form."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.16
-    type: text
-    label: "[cursor] Hovering interactive elements spawns a magnetic particle cluster around the element — particles orbiting the element while the cursor is near, dissolving back into the background when the cursor moves away."
-    value: "Hovering interactive elements spawns a magnetic particle cluster around the element — particles orbiting the element while the cursor is near, dissolving back into the background when the cursor moves away."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.17
-    type: text
-    label: "[scroll] A nebula-style particle section uses depth — particles at different sizes and opacities representing different distances — and the entire field drifts slowly in a circular path as the section is in view, creating a living space scene."
-    value: "A nebula-style particle section uses depth — particles at different sizes and opacities representing different distances — and the entire field drifts slowly in a circular path as the section is in view, creating a living space scene."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.18
-    type: text
-    label: "[burst] A notification badge animates new alerts with a radial particle burst — each new notification triggers a quick burst of 10-15 small particles that expand from the badge and fade out — a subtle physical excitement around the count changing."
-    value: "A notification badge animates new alerts with a radial particle burst — each new notification triggers a quick burst of 10-15 small particles that expand from the badge and fade out — a subtle physical excitement around the count changing."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.19
-    type: text
-    label: "[cursor] A hero canvas uses fluid simulation — the cursor disturbs the canvas like a finger dragging through water — color ink diffuses outward from the cursor path in real time, mixing with other colors already on the canvas."
-    value: "A hero canvas uses fluid simulation — the cursor disturbs the canvas like a finger dragging through water — color ink diffuses outward from the cursor path in real time, mixing with other colors already on the canvas."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.particle_canvas_fx.20
-    type: text
-    label: "[scroll] A section that maps particle density to data — the number of particles in the canvas directly represents a statistic — and as the scroll advances through sub-sections with different values, particles appear or disappear to match the changing data."
-    value: "A section that maps particle density to data — the number of particles in the canvas directly represents a statistic — and as the scroll advances through sub-sections with different values, particles appear or disappear to match the changing data."
-    section: particle_canvas_fx
-    enabled: false
-  - key: animations.mobile_gesture_animations.enabled
-    type: text
-    label: "Mobile Gesture Animations — enable category"
-    value: ""
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.1
-    type: text
-    label: "[swipe] When the user swipes a card to the right, animate it flying off screen with a slight rotation and a spring bounce on the next card underneath as it scales up into position."
-    value: "When the user swipes a card to the right, animate it flying off screen with a slight rotation and a spring bounce on the next card underneath as it scales up into position."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.2
-    type: text
-    label: "[drag] Let the user drag a bottom sheet panel upward — as it travels, the content behind it fades out and scales down slightly, and releasing mid-drag snaps it to the nearest anchor point with a springy overshoot."
-    value: "Let the user drag a bottom sheet panel upward — as it travels, the content behind it fades out and scales down slightly, and releasing mid-drag snaps it to the nearest anchor point with a springy overshoot."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.3
-    type: text
-    label: "[pinch] As the user pinches to zoom into a product image, smoothly scale it up with GSAP while keeping it centered on the pinch origin, and release it back with a gentle elastic snap if they go past the max zoom."
-    value: "As the user pinches to zoom into a product image, smoothly scale it up with GSAP while keeping it centered on the pinch origin, and release it back with a gentle elastic snap if they go past the max zoom."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.4
-    type: text
-    label: "[swipe] On swipe down to dismiss a modal, the sheet follows the finger with slight resistance, and if the velocity is high enough it flies off and fades out — otherwise it springs back to full open."
-    value: "On swipe down to dismiss a modal, the sheet follows the finger with slight resistance, and if the velocity is high enough it flies off and fades out — otherwise it springs back to full open."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.5
-    type: text
-    label: "[velocity] Track the velocity of a horizontal swipe on a carousel — if the finger lifts fast, continue the slide momentum and decelerate naturally to the next item; slow lifts snap back to the current one."
-    value: "Track the velocity of a horizontal swipe on a carousel — if the finger lifts fast, continue the slide momentum and decelerate naturally to the next item; slow lifts snap back to the current one."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.6
-    type: text
-    label: "[spring] When the user pulls down past the top of a scroll list to trigger a refresh, the whole list compresses with a rubber-band spring feel, the refresh spinner rotates in with a stagger, and everything bounces back once loaded."
-    value: "When the user pulls down past the top of a scroll list to trigger a refresh, the whole list compresses with a rubber-band spring feel, the refresh spinner rotates in with a stagger, and everything bounces back once loaded."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.7
-    type: text
-    label: "[drag] Make a draggable floating action button that snaps to the nearest screen edge when released, with a springy bounce as it lands and a subtle squish animation on impact."
-    value: "Make a draggable floating action button that snaps to the nearest screen edge when released, with a springy bounce as it lands and a subtle squish animation on impact."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.8
-    type: text
-    label: "[haptic] As the user drags a slider thumb, animate the track fill in real time and play a tiny scale pulse on the thumb at each major tick mark — synced to where haptic feedback would fire on a real device."
-    value: "As the user drags a slider thumb, animate the track fill in real time and play a tiny scale pulse on the thumb at each major tick mark — synced to where haptic feedback would fire on a real device."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.9
-    type: text
-    label: "[swipe] Cards in a Tinder-style stack rotate and fade based on horizontal drag distance — the further they go, the more they tilt and the more an accept or reject icon fades in, all snapping back if released near center."
-    value: "Cards in a Tinder-style stack rotate and fade based on horizontal drag distance — the further they go, the more they tilt and the more an accept or reject icon fades in, all snapping back if released near center."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.10
-    type: text
-    label: "[pinch] Let the user pinch two fingers on a map tile to zoom in — animate the surrounding tiles scaling and repositioning fluidly so the map feels continuous, not jumpy."
-    value: "Let the user pinch two fingers on a map tile to zoom in — animate the surrounding tiles scaling and repositioning fluidly so the map feels continuous, not jumpy."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.11
-    type: text
-    label: "[velocity] When the user flicks a list row sideways fast enough, it slides out and the rows below animate upward to close the gap with a staggered wave — too slow and it snaps back."
-    value: "When the user flicks a list row sideways fast enough, it slides out and the rows below animate upward to close the gap with a staggered wave — too slow and it snaps back."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.12
-    type: text
-    label: "[spring] A long-press on a grid item triggers a spring-pop scale up with a soft shadow ring expanding outward, entering a drag-to-reorder mode where surrounding items shuffle aside with springy offsets as the held item moves."
-    value: "A long-press on a grid item triggers a spring-pop scale up with a soft shadow ring expanding outward, entering a drag-to-reorder mode where surrounding items shuffle aside with springy offsets as the held item moves."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.13
-    type: text
-    label: "[drag] A color swatch picker lets the user drag their thumb in two dimensions — horizontal changes hue and vertical changes brightness, with the background of the whole screen crossfading to the selected color in real time."
-    value: "A color swatch picker lets the user drag their thumb in two dimensions — horizontal changes hue and vertical changes brightness, with the background of the whole screen crossfading to the selected color in real time."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.14
-    type: text
-    label: "[haptic] Animate a lock screen PIN pad where each digit button compresses slightly on press with a spring rebound, and entering the wrong code makes the whole row shake horizontally in a rapid stagger — like the device is shaking its head."
-    value: "Animate a lock screen PIN pad where each digit button compresses slightly on press with a spring rebound, and entering the wrong code makes the whole row shake horizontally in a rapid stagger — like the device is shaking its head."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.15
-    type: text
-    label: "[swipe] On a news feed, swiping an article left reveals a bookmark action icon behind it — the icon scales in with a spring as the card travels and the card color tints to confirm the action before snapping back."
-    value: "On a news feed, swiping an article left reveals a bookmark action icon behind it — the icon scales in with a spring as the card travels and the card color tints to confirm the action before snapping back."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.16
-    type: text
-    label: "[velocity] When the user throws a draggable element hard across the screen, it follows a curved arc based on throw direction, bounces off the screen edge with energy loss, and comes to rest with a subtle wobble."
-    value: "When the user throws a draggable element hard across the screen, it follows a curved arc based on throw direction, bounces off the screen edge with energy loss, and comes to rest with a subtle wobble."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.17
-    type: text
-    label: "[pinch] In a photo gallery, a pinch-to-close gesture morphs the image from full screen back into its thumbnail in the grid, matching the position and size of its origin tile with a smooth FLIP animation."
-    value: "In a photo gallery, a pinch-to-close gesture morphs the image from full screen back into its thumbnail in the grid, matching the position and size of its origin tile with a smooth FLIP animation."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.18
-    type: text
-    label: "[spring] A notification banner slides down from the top with a spring overshoot on entry, floats for a moment, then slides back up — but if the user swipes it upward mid-float, it snaps up instantly following their velocity."
-    value: "A notification banner slides down from the top with a spring overshoot on entry, floats for a moment, then slides back up — but if the user swipes it upward mid-float, it snaps up instantly following their velocity."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.19
-    type: text
-    label: "[drag] Animate a volume knob that the user rotates by dragging in a circle — the knob graphic rotates to match the gesture angle, and the waveform visualizer behind it grows and pulses in sync with the current volume value."
-    value: "Animate a volume knob that the user rotates by dragging in a circle — the knob graphic rotates to match the gesture angle, and the waveform visualizer behind it grows and pulses in sync with the current volume value."
-    section: mobile_gesture_animations
-    enabled: false
-  - key: animations.mobile_gesture_animations.20
-    type: text
-    label: "[haptic] A step counter ring animates the progress arc drawing forward each time a new milestone is hit — the ring completes with a spring burst that briefly overscales and snaps back, paired with a ripple ring expanding outward from the center."
-    value: "A step counter ring animates the progress arc drawing forward each time a new milestone is hit — the ring completes with a spring burst that briefly overscales and snaps back, paired with a ripple ring expanding outward from the center."
-    section: mobile_gesture_animations
-    enabled: false
----
-
-# Animations
-
-This file is the brand's animation menu. It ships pre-populated with 600 animation prompts (30 categories × 20 prompts each) drawn from the bundled animations library. **Every prompt is OFF by default.**
-
-## How it works
-
-Each entry is a human-language description of an animation idea. Toggle entries ON to add them to this brand's pool. The `gsap-v1.1` animator role reads only the enabled entries and decides which to apply, where, and how — subject to the motion tokens in `motion.md`.
-
-Category-level master toggles (`*.enabled` keys) are intended as quick-enable helpers for an entire category, but the animator still considers each prompt individually.
-
-## Categories
-
-- **Sticky Card Stacks** — 20 prompts
-- **Horizontal Scroll Panels** — 20 prompts
-- **Parallax Depth Layers** — 20 prompts
-- **Scroll Driven Video Scrub** — 20 prompts
-- **Text Reveal On Scroll** — 20 prompts
-- **Split Text Entrance** — 20 prompts
-- **Sticky Text Background Swap** — 20 prompts
-- **Staggered Image Grid** — 20 prompts
-- **Card Flip 3d Rotate** — 20 prompts
-- **Morphing Svg Paths** — 20 prompts
-- **Hero Cinematic Intro** — 20 prompts
-- **Scroll Progress Indicator** — 20 prompts
-- **Image Clip Reveal** — 20 prompts
-- **Lottie Svg Scrub** — 20 prompts
-- **Sticky Media Text Fade** — 20 prompts
-- **Counter Data Animation** — 20 prompts
-- **Floating Magnetic Cursor** — 20 prompts
-- **Navbar Scroll Transitions** — 20 prompts
-- **Page Transition Wipes** — 20 prompts
-- **Typewriter Scramble Text** — 20 prompts
-- **Section Background Morph** — 20 prompts
-- **Timeline Storytelling** — 20 prompts
-- **Infinite Marquee** — 20 prompts
-- **3d Scene On Scroll** — 20 prompts
-- **Accordion Drawer Reveal** — 20 prompts
-- **Stagger List Entrance** — 20 prompts
-- **Hover Microinteractions** — 20 prompts
-- **Scroll Snapping Sections** — 20 prompts
-- **Particle Canvas Fx** — 20 prompts
-- **Mobile Gesture Animations** — 20 prompts
-
-## What the animator does NOT do
-
-- It does not invent animations outside this library.
-- It does not write back to this file.
-- It does not animate sections where no enabled prompt is a good structural match — it skips silently.