Motion UISections4 sections

Hero sections

Parallax layers, editorial text staggers, scroll-driven zooms and dev-tool terminals.

Editorial stagger hero

An example of a type-led hero with a masked line-by-line headline reveal and an orchestrated entrance stagger in Motion for React.

npx shadcn@latest add @motion/hero-editorial-stagger
Components usedStaggerReveal
MotionScore

Hero: Parallax layers

An example of a full-bleed marketing hero with a three-layer scroll-linked parallax between a background wash, a live product-analytics window and the headline, in Motion for React.

npx shadcn@latest add @motion/hero-parallax-layers
Components usedParallaxLayers
MotionScore

Terminal hero

An example of a dev-tool hero with a terminal that types a Velocity CLI session and a copyable install command in Motion for React.

npx shadcn@latest add @motion/hero-terminal
Components usedCopyButtonTerminalSession
MotionScore

Hero: Split text reveal

An example of a type-led product header whose headline and supporting copy reveal word by word through masked split-text animation, in Motion for React.

npx shadcn@latest add @motion/text-split-reveal
Components usedSplitReveal
MotionScore

More categories

Browse the rest of the Motion UI section library.