# Updated: Fade Content

By Steven Van · 2026-10-12

The React Bits wrapper adds blur, gray, grain, mist and pixel-block fades, plus staggered children and scroll-linked fades in and out.

Fade Content, the scroll-triggered wrapper in [React Bits](<https://creatorstoolbox.com/resources/react-bits>), has been [updated](<https://reactbits.dev/animations/fade-content>) with several new ways to fade content in.

## New fade styles

Content can now fade in plain, or out of focus, or from washed-out gray. It can also fade through grain, mist or pixel blocks.

## Stagger and scroll-linked fades

Children can be staggered, and fades can be linked to scroll so content fades in and out as the page moves.

## Installation

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/FadeContent-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/animations/fade-content>)

[Read Updated: Fade Content on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-fade-content>)

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