React Halftone Background
Animated print-magazine halftone background for React and Next.js — a crisp grid of cyan dots whose radii pulse with a drifting brightness field, giving an editorial CMYK feel.
React Halftone Background preview
A clean, editorial halftone grid where every dot's size is modulated by an underlying brightness field that slowly drifts across the canvas. The field is a sum of two sine waves and a radial pulse traveling outward from a wandering center, so the dots "image" a moving gradient the way a newsprint photo would. Rendered directly to a single canvas with no offscreen buffer — the dot grid itself is the resolution — so it stays crisp at any viewport size and runs at 60fps on a mid-range laptop. Ideal for design-studio portfolios, magazine-style landing pages, print-inspired hero sections, and any product surface that wants a premium editorial feel without leaning into gradients or particles.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the halftone background into my projectRelated Components
Dot Pattern
Interactive dot matrix with mouse-reactive glow
Flickering Grid
Matrix-style flickering squares
Grid Pattern
Static SVG grid background
Spotlight
Animated spotlight beam effect
Circles
Concentric animated circle rings
Hexagon
Honeycomb pattern grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Grid Pattern
Static SVG grid pattern with configurable cell size, dashed lines, and optional highlighted squares for clean technical backgrounds
Heatmap
Thermal-imaging heatmap background for React and Next.js — a slowly shifting infrared noise field with drifting hot spots, mapped through a classic blue → cyan → green → yellow → red thermal palette.