Skip to content
SloplessTry the picker

Signature look · kinetic-type

Kinetic headline

The hero headline assembles itself on load: lines and words slide up from a mask in a staggered sequence, then stay still. Built with GSAP and SplitText.

Id
kinetic-headline
Cost
about 34 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Animate only the hero headline (the text node with role display or h1); every other text stays static.
  • Split the headline into lines and words with GSAP SplitText (mask: "lines"), then reveal words upward with a 0.04–0.08 s stagger and the style's motion easing.
  • Run once on load, total under 1.2 s; never loop, never re-trigger on scroll.
  • Respect prefers-reduced-motion with gsap.matchMedia(): show the headline immediately with no transform.
  • Render the full headline in HTML first (no flash of empty text); revert the split on resize to keep line breaks correct.
  • Load GSAP only on pages with a kinetic headline, and keep it out of the critical rendering path.

Required skills (the agent asks before installing, per project)

gsap-core
Official GSAP core API: tweens, easing, stagger, matchMedia for prefers-reduced-motion. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-core
gsap-plugins
Official GSAP plugins: SplitText, ScrambleText, Flip, Observer, ScrollSmoother. Used by kinetic type and text scramble. Source: greensock/gsap-skills, reviewed 2026-10-24 at 5b909b9d9475.
npx skills add greensock/gsap-skills#5b909b9d9475884aedbca35375d12f963df4e898 --skill gsap-plugins

Running demo, in Art Deco

The preview renderer's stand-in for this look on the hero of a Art Deco design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop, prefers-reduced-motion: reduce
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone, reduced motion

Styles it suits

Art DecoAthletic SportBauhausBrutalistConstructivistLuxury FashionMaximalist CollageMemphisMid-Century ModernNeo-BrutalismRisograph PrintSeventies PsychedelicSwiss InternationalSynthwave Retro-FutureY2K Chrome