# Updated: Pixel Swap

By Steven Van · 2026-10-13

Pixels now spring in from wherever the cursor enters, with new dot and spin styles and a pixel intro, in JavaScript or TypeScript and CSS or Tailwind.

Pixel Swap, the React Bits animation effect, has been rebuilt. Content now builds in pixel by pixel in a springy wave that starts wherever the cursor enters, and the pixels retreat the moment it leaves. The [updated component](<https://reactbits.dev/animations/pixel-swap>) is part of [React Bits](<https://creatorstoolbox.com/resources/react-bits>).

## What changed

- The effect was rebuilt to be fast and seamless, according to the vendor.

- Pixels spring in from the point where the cursor enters.

- New dot and spin styles.

- A new pixel intro.

## Installing it

The component page offers JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/PixelSwap-TS-TW. The interactive preview, customization controls and source tabs need JavaScript enabled.

![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/animations/pixel-swap>)

[Read Updated: Pixel Swap on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-pixel-swap>)

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