React Fractal Background
Recursive L-system fractal tree background for React and Next.js — a self-similar branching silhouette sways in procedural wind with glowing leaf tips, built with vanilla Canvas 2D and zero dependencies.
React Fractal Background preview
Every other background in the gallery draws a field of discrete things — particles, lines, grains. Fractal draws one thing, recursively, and ends up with a living organism. A trunk splits into two branches, each branch splits again, and after nine or ten levels you have a full pythagorean tree that sways in time-modulated wind — shallower limbs swinging wide, deeper twigs barely trembling, exactly like a real tree in a breeze. The tips flower into softly pulsing blossoms that shift from bark brown to leaf green as depth increases. Built in a single canvas file with a delta-time RAF loop, DPR-aware retina rendering, and prefers-reduced-motion support. Ideal for meditative hero sections, nature-adjacent product pages, mindfulness apps, and any surface where a page should feel rooted rather than busy.
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 fractal background into my projectRelated Components
Paths
Flowing bezier line paths
Magnetic Field
Dipole-pole field-line arcs
Topography
Layered elevation contour lines
Constellation
Connected starfield dot-and-line graph
Orbits
Nested planetary orbital rings
Wavy
Stacked flowing wave lines
FAQ
Was this page helpful?
Sign in to leave feedback.