Updated: Split Flap Text
By Steven Van ·
Split Flap Text gains cascade directions, a sheen and a tile-free minimal style, and it still installs through the shadcn CLI.
Boards in React Bits' Split Flap Text component can now cascade from the right, from the middle or in random order.
Animation changes
- Cascade direction: the flaps can start from the right or the middle, or fall in random order.
- A soft sheen passes across the falling flaps.
- The depth of the effect is adjustable.
New minimal style
The minimal style drops the tiles and flips bare characters, split by a hinge line.
The component is a mechanical split-flap departure board that clacks through to each new phrase. It installs with npx shadcn@latest add @react-bits/SplitFlapText-TS-TW, and the page offers JavaScript or TypeScript and plain CSS or Tailwind variants.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →