React Silk Background
Flowing iridescent silk background for React and Next.js — layered sine waves paint a shifting satin gradient across the canvas with fully customisable palette, speed, and scale.
React Silk Background preview
An iridescent, flowing fabric of color that feels like watching satin ripple in slow motion. Built on a tiny 192×108 offscreen canvas where each pixel's hue is driven by a sum of three phase-offset sine waves and mapped through a smooth five-stop palette — then GPU-upscaled so the final result is buttery at any resolution. Zero dependencies, runs at 60fps on a mid-range laptop, and the entire look is palette-driven so it matches any brand in one prop. Perfect for premium SaaS landing pages, product launch heroes, design-tool marketing, and anywhere a hero needs motion that reads expensive rather than flashy.
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 silk background into my projectRelated Components
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Aurora
Emerald northern-lights sheets
Gradient Animation
Morphing gradient mesh
Light Waves
Ambient vertical color washes
Vortex
Simplex-noise particle vortex
Wavy
Stacked flowing wave lines
FAQ
Was this page helpful?
Sign in to leave feedback.
Shooting Stars
Shooting stars from random edges with gradient trails—stars streak across in all directions
Smoke
Cinematic volumetric smoke background for React and Next.js — soft billowing plumes drift upward and curl sideways over a near-black stage, evoking horror atmosphere, stage fog, and chimney plumes.