react-patternify

Animated canvas background patterns for React. Drop a component into your layout and get a self-contained, GPU-friendly animated background, no dependencies beyond React, no DOM overhead, fully customizable via props.

Live demo

Install

npm install react-patternify

Next.js App Router: the components are already marked "use client" in the bundle — no wrapper needed.

Components

TetrisSkyline

An animated Tetris-inspired cityscape. Tetromino pieces spawn at the top and fall onto a procedurally generated skyline terrain. When a column grows too tall the blocks fade out and the terrain resets, keeping the animation running indefinitely.

Full-viewport background (default)

The canvas is fixed, full-viewport, placed behind your content (z-index: -1, pointer-events: none, aria-hidden) — a drop-in background with no layout impact.

import { TetrisSkyline } from 'react-patternify'

export default function App() {
  return (
    <>
      <TetrisSkyline />
      {/* your content */}
    </>
  )
}

Contained mode

Set contained to render the canvas inside a specific element instead of the full viewport. The parent must have position: relative (or any positioning context) and explicit dimensions.

import { TetrisSkyline } from 'react-patternify'

export default function Hero() {
  return (
    <section style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
      <TetrisSkyline contained />
      <h1 style={{ position: 'relative' }}>Hello</h1>
    </section>
  )
}

The canvas uses position: absolute; inset: 0 and a ResizeObserver on the parent, so it adapts automatically when the container resizes.

Props

Prop	Type	Default	Description
contained	boolean	false	Fill the nearest positioned parent instead of the full viewport
palette	string[]	['#ff2d6d', '#a855f7', '#60a5fa']	Block colors, cycled across pieces
bg	string	'#0b1220'	Canvas background fill
gridLine	string	'transparent'	Cell border color
minCell	number	16	Minimum auto-calculated cell size (px)
maxCell	number	24	Maximum auto-calculated cell size (px)
preferredCell	number	20	Target cell size; clamped to min/max to minimize edge gaps
cellGap	number	3	Gap between cells (px)
pieceDropMs	number	90	Time per one-cell drop (ms) — lower is faster
spawnEveryMs	number	520	Interval between new piece spawns (ms)
maxActivePieces	number	7	Max pieces falling at once
initialTerrainPercent	number	0.2	Initial terrain height as a fraction of total rows (0 = no terrain) between 0 and 1
terrainRoughness	number	2	Skyline jaggedness — higher values create more variation
topChipsChance	number	0.05	Per-cell probability of a surface notch on the terrain
columnClearAnimMs	number	260	Duration of the column fade-out animation (ms)

---

Tetris

A classic Tetris animation. Tetromino pieces spawn at the top and fall onto an empty grid. When a row is completely filled it fades out and the rows above shift down. When pieces stack to the top the board resets, keeping the animation running indefinitely.

Full-viewport background (default)

import { Tetris } from 'react-patternify'

export default function App() {
  return (
    <>
      <Tetris />
      {/* your content */}
    </>
  )
}

Contained mode

import { Tetris } from 'react-patternify'

export default function Hero() {
  return (
    <section style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
      <Tetris contained />
      <h1 style={{ position: 'relative' }}>Hello</h1>
    </section>
  )
}

Props

Prop	Type	Default	Description
contained	boolean	false	Fill the nearest positioned parent instead of the full viewport
palette	string[]	['#ff2d6d', '#a855f7', '#60a5fa']	Block colors, cycled across pieces
bg	string	'#0b1220'	Canvas background fill
gridLine	string	'transparent'	Cell border color
minCell	number	16	Minimum auto-calculated cell size (px)
maxCell	number	24	Maximum auto-calculated cell size (px)
preferredCell	number	20	Target cell size; clamped to min/max to minimize edge gaps
cellGap	number	3	Gap between cells (px)
pieceDropMs	number	90	Time per one-cell drop (ms) — lower is faster
spawnEveryMs	number	520	Interval between new piece spawns (ms)
maxActivePieces	number	7	Max pieces falling at once
rowClearAnimMs	number	260	Duration of the row fade-out animation (ms)
rowShiftAnimMs	number	180	Duration of the rows-above sliding down after a clear (ms)

---

Matrix

A Matrix-style digital rain animation. Streams of randomly mutating characters fall from the top of the canvas to the bottom, each with a glowing head and a fading trail. Streams restart at randomized intervals to keep the animation organic.

Full-viewport background (default)

import { Matrix } from 'react-patternify'

export default function App() {
  return (
  return (
    <>
      <Matrix />
      {/* your content */}
    </>
  )
}

Contained mode

import { Matrix } from 'react-patternify'

export default function Hero() {
  return (
    <section style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
      <Matrix contained />
      <h1 style={{ position: 'relative' }}>Hello</h1>
    </section>
  )
}

Props

Prop	Type	Default	Description
contained	boolean	false	Fill the nearest positioned parent instead of the full viewport
bg	string	'#060606'	Canvas background fill
color	string	'#00FF41'	Trail character color
headColor	string	'#9BE9A8'	Leading character color (brightest point of each stream)
fontSize	number	14	Character size in pixels; controls column density
speed	number	20	Fall speed in rows per second
density	number	0.65	Fraction of columns that are active at once (0–1)
trailLength	number	40	Number of visible characters behind the head
fontFamily	string	'inherit'	CSS font-family for characters; resolves to the canvas element's computed font
charset	string	ASCII letters, digits, symbols	Pool of characters drawn randomly in each stream