Updated: Scroll Float
By Steven Van ·
The React Bits text component adds flip, scatter, blur and wave effects, per-word mode, start-order control and an accent colour.
Scroll Float in React Bits has been updated with new ways to animate text into place. Letters can now flip, scatter, blur or wave in as the page scrolls.
Animation options
- Letters can flip, scatter, blur or wave into place.
- The effect can run by letter or by word.
- Text can arrive from above or below.
Order and colour
The update lets you pick which letters go first. Text can also arrive in an accent colour.
Install
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/ScrollFloat-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →