Pixel blast

A background of dithered pixel clouds that drift, shimmer and light up under the cursor. Click to send a ripple; put anything on top.

Backgrounds, hover and press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/pixel-blast.tsx https://motion-brew.com/r/pixel-blast.tsx

One self contained file for React and Tailwind CSS: pixel-blast.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PixelBlast } from "@/components/pixel-blast";

export default function Hero() {
  return (
    <PixelBlast className="h-[480px] rounded-3xl bg-white" coverage={1.4} density={0.8}>
      <div className="relative grid h-full place-items-center">
        <h1 className="text-[32px] font-medium tracking-tight">Ship faster</h1>
      </div>
    </PixelBlast>
  );
}

Props

Prop	Type	Default	Description
color	string	"#252528"	Pixel colour
cellSize	number	6	Grid cell in px
shape	"square" \	"circle" \	"diamond"	"square"	Dot shape
speed	number	1	Drift and shimmer speed
coverage	number	1.4	How much of the area the clouds cover
density	number	0.8	How heavy the clouds are
floor	boolean	false	Draw the perspective floor along the bottom
interactive	boolean	true	Light up under the pointer and ripple on press
children	ReactNode		Content laid over the field
className	string		Size and placement; it fills its width

More backgrounds

Contour lines: A background of live topographic lines that bend around the cursor.
Pixel scroll: A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band.
Magnetic flow: Cards follow the leader like a snake, then burst open like the sun.
Gravity tag pile: Tags fall, bounce, spin and pile up with real physics.

All animated react backgrounds and shaders