React DNA Background
Rotating DNA double helix background for React and Next.js — two intertwined sinusoidal backbones joined by color-coded base pairs that spin around a vertical axis with a hand-rolled 3D projection, zero dependencies.
React DNA Background preview
A rotating DNA double helix rendered in pure canvas — two intertwined backbones winding vertically down the viewport, joined by color-coded base-pair rungs that spin around a central axis with convincing front/back depth cues. Built with a hand-rolled 3D projection (no WebGL, no three.js), runs at 60fps, and adapts to any container via ResizeObserver. Perfect for biotech landing pages, medical product heroes, life-sciences marketing, pharma launch pages, and genomics dashboards where the subject deserves its iconic silhouette.
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 dna background into my projectRelated Components
Paths
Flowing svg path lines
Magnetic Field
Field-line particles around a magnet
Wavy
Stacked flowing wave lines
Orbits
Concentric orbital particle rings
Constellation
Connected star network
Light Waves
Ambient vertical color washes
FAQ
Was this page helpful?
Sign in to leave feedback.
Disco
Rotating mirror-ball disco background for React and Next.js — a faceted sphere spins in the center casting radiating light rays while sparkles pulse in sync across the viewport.
Dot Pattern
Interactive dot matrix with mouse-reactive glow effects and ambient wave animation, rendered on canvas for smooth performance