FX · Backgrounds

Columns of glyphs streaming down, brightest at the leading edge.

Wake up

bash
npx shadcn@latest add https://www.rad-ui.com/r/code-rain.json
React
import CodeRain from "@/components/fx/code-rain"

<CodeRain className="px-8 py-24">
    <h2>Your content</h2>
</CodeRain>
  • The effect layer is aria-hidden and ignores pointer events; only children are exposed.
  • The glyphs are random decoration, never content: they are aria-hidden.
  • Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) freezes the columns mid-fall.
PropTypeDefaultDescription
columns
number
28

Number of columns.

color
string
'#4ade80'

Glyph colour.

characters
string
katakana, digits, symbols

Glyphs to draw from.

seed
number
3

Change for a different, stable pattern.

paused
boolean
false

Stop the animation. It also pauses offscreen.

...props
ComponentProps<'div'>
—

Passed to the root div; children render above.

Edit this page on GitHub →