Shadcn.io is not affiliated with official shadcn/ui
React Paths Background
Animated SVG bezier curves flowing across the screen with layered depth and smooth motion
This is elegant, understated motion. 36 SVG paths flow across the screen, each animating its stroke length and opacity in a slow, organic pulse. The paths are bezier curves with coordinates that shift slightly for each line, creating this nice layered depth. Two mirrored sets create symmetry across the viewport. Each path has its own timing between 20-30 seconds, so they drift in and out of phase. The stroke width and opacity increase with each path index, giving you that sense of foreground and background. It's Framer Motion powered, GPU-accelerated, and runs smooth. Good for landing pages, hero sections, or anywhere you want sophisticated ambient motion without being distracting.
React Paths Background preview
Installation
Related Components
Background Beams
Animated gradient beams
Wavy Background
Noise-driven waves
Aurora Background
Flowing gradient aurora
Background Circles
Rotating gradient circles
Gradient Animation
Flowing gradient mesh
Light Waves
Ambient light animation
FAQ
Was this page helpful?
Sign in to leave feedback.