Shadcn.io is not affiliated with official shadcn/ui
React Ink Background
Animated ink-drop background for React and Next.js — discrete drops of dark ink bloom across a rice-paper surface with turbulent fractal edges, evoking Chinese calligraphy bleeding into washi.
React Ink Background preview
There is a quiet theatre in watching ink meet paper — the first dark bead, the slow bloom outward, the fractal tendrils where fibre pulls pigment past the circle. Ink captures that ritual in a single canvas: discrete drops spawn at random positions, grow radially with noise-perturbed edges, then fade to nothing as new drops arrive. Built in vanilla canvas with a seeded PRNG, a hand-rolled hash-noise function, and a fixed-size drop pool — zero runtime deps, DPR-aware, paused when the tab is hidden, and fully respectful of prefers-reduced-motion. Pair it with serif typography for editorial hero sections, with monochrome UI for a contemplative launch page, or with brand hues in the colors prop for a premium product page that feels hand-made rather than rendered.
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 ink background into my projectRelated Components
Ripple
Expanding concentric ring pulses
Metaballs
Fusing liquid blob physics
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Fog
Drifting volumetric fog layers
Bokeh
Soft out-of-focus light orbs
Aurora
Emerald northern-lights sheets
FAQ
Was this page helpful?
Sign in to leave feedback.
Honeycomb
Living hexagonal honeycomb background for React and Next.js — a pointy-top hex grid whose filled cells breathe in color via a layered value-noise field, with a customisable palette, speed, and cell size.
Interactive Grid Pattern
Interactive grid where cells glow on hover with proximity-based highlighting and smooth trailing effects