Library/Elements/Animation sandbox
Brand · Motion · Live tuner

Hero motion, tuned live.

Tune duration, stagger, easing, and offset for the Aqua hero word reveal. Click the stage to replay, copy the generated CSS at the bottom into your landing page. Useful for nailing the hero animation on a customer-branded landing page before wiring it in.

Alts, operationalized.

Presets

Timing

Easing


    

Fork & ship

The animation is a CSS @keyframes applied to each .w span with per-word animation-delay for stagger. Drop the generated CSS into your hero, wrap each word in <span class="w">.

When to use this

Tuning the hero animation on a customer-branded landing page. Quick design experiments before committing to a motion direction. A/B'ing emotional pace (slow editorial vs. punchy) without coding two variants.

Reuse ideas

Card-reveal sequence on a deck, KPI tile count-up, dashboard load-in choreography, scroll-triggered reveal.