React Marble Background

Swirled Italian-marble background for React and Next.js — domain-warped turbulence paints thin veins of gold across a creamy stone field with customisable palette, warp, and scale.

React Marble Background preview

Scroll to load preview

A slow hypnotic swirl that reads like polished Carrara marble or hand-marbled Florentine paper. Built on a tiny low-resolution canvas where every pixel runs a domain-warped sine turbulence, then mapped through a 256-entry lookup table biased heavily toward cream with a narrow band of bright vein color — the exact trick that gives real marble its "thin gold thread in a field of stone" look. Zero dependencies, runs at 60fps on a mid-range laptop, and the entire aesthetic is palette-driven so one prop flips it from Carrara white to Verde Alpi green or black Marquina. Perfect for luxury SaaS heroes, editorial landing pages, premium portfolio covers, and anywhere a brand wants 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 marble background into my project

React Marble Background