The Template Empire motion workshop
Premium animated React sections, ready to own
Explore 80 free, production-ready components for React and Next.js. Every component is accessible, reduced-motion aware and installable through the shadcn CLI.
Install from the registry
npx shadcn@latest add @te/hero-auroraSource lands in your project. Adapt it, inspect it and ship it without a runtime service dependency.
Featured components
A cross-section of the library, selected to show how the motion system handles layout, interaction and content.
HeroesGSAPambientdark preferredAurora HeroFree animated hero section for Next.js and React: masked headline reveal over a drifting aurora background, GSAP powered, accessible, reduced motion safe.View component Scroll StorytellingGSAPscrollEither themePinned PanelsFree pinned scroll section for Next.js and React: panels crossfade in place as you scroll, GSAP ScrollTrigger scrub, escapable, reduced motion shows a stack.View component Text EffectsGSAPambientEither themeScramble TextFree scramble text effect for Next.js and React: characters decrypt into your copy with GSAP ScrambleText, SSR safe, accessible and reduced motion safe.View component CardsMotionpointerEither themeTilt CardFree 3D tilt card for Next.js and React built with Motion springs: perspective tilt and moving glare on hover, disabled on touch and under reduced motion.View component PricingMotioninputlight preferredToggle Pricing CardsFree animated pricing section for React: monthly/annual switch with rolling price digits and highlighted-plan lift. Motion, accessible, Next.js and Tailwind.View component Modals and OverlaysMotionoverlayEither themeCommand PaletteFree React command palette: ⌘K opens a spring panel, results filter as you type with staggered reveals and full combobox keyboard navigation.View component Image and MediaMotionpointerEither themeBefore After SliderFree before/after comparison slider for React: drag or arrow-key the divider to reveal the second image with a spring handle. Fully keyboard operable.View component Logos and StatsGSAPambientEither themeVelocity Logo MarqueeFree animated logo marquee for React: infinite logo cloud whose drift speed reacts to scroll velocity, pauses on hover. GSAP, accessible, Next.js ready.View component
Find the right section
Browse by the job the component performs, then filter by animation runtime inside the catalogue.
Recently added
The latest additions selected from the current release line.
From preview to project
The shortest path from evaluating the motion to owning the implementation.
- 1
Choose
Search by category or runtime and test the real component.
- 2
Install
Copy one shadcn command and bring the source into your app.
- 3
Adapt
Use typed props and theme tokens to make the component yours.