# Updated: Shuffle

By Steven Van · 2026-10-13

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](<https://reactbits.dev/text-animations/shuffle>).

![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/shuffle>)

[Read Updated: Shuffle on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-shuffle>)

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