# Updated: Scroll Float

By Steven Van · 2026-10-13

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](<https://creatorstoolbox.com/resources/react-bits>) has been [updated](<https://reactbits.dev/text-animations/scroll-float>) 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](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/text-animations/scroll-float>)

[Read Updated: Scroll Float on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-scroll-float>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-scroll-float