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
Install guideMotionScore

Hero: Parallax layers

An example of a full-bleed marketing hero where the headline and insight cards travel above a slower product-analytics window, in Motion for React.

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

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
Install guideMotionScore

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
Install guideMotionScore

More categories

Browse the rest of the Motion UI section library.