Updated: Shuffle
By Steven Van ·
Shuffle in the open-source React component library gains 3D flip and spin effects, motion blur, accent colors and cursor-local hover reshuffling.
React Bits has updated its Shuffle text animation with two new letter effects and a hover mode. Letters can now flip like cards in 3D or spin in place with motion blur.
New animation styles
The 3D flip and the in-place spin are both available alongside the existing shuffle. Sliding letters also get a motion blur, and the update adds text and accent colors.
Hover reshuffling
Hovering can now reshuffle only the letters near the cursor, so the rest of the text stays as it is.
Fix for up and left shuffles
Shuffles that run up or left no longer land on random symbols.
The component page lists install options for JavaScript or TypeScript with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/Shuffle-TS-TW. Details are in the original announcement.