Animated Content
Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children.
Use Animated Content in your project
Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.
npx shadcn@latest add @react-bits/AnimatedContent-TS-TWRelated components
- Fade Content
Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks.
- Gradual Blur
Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll.
- Laser Flow
A beam of light that splashes onto your content and pours over its corners.