React Paths Background

Floating SVG path animations that create depth and movement like abstract art in motion. Build mesmerizing React background components with Framer Motion, gradient text effects, interactive elements, and TypeScript support for Next.js applications with shadcn/ui.

Framer Motion

React

SVG Paths

Creating dynamic floating animations?

Join our Discord community for help from other developers.

Static backgrounds feel flat. Lifeless. Like a printed poster stuck to the wall. What if your background could float, breathe, suggest movement and depth? This React component creates 36 SVG paths that drift through space like abstract brushstrokes, with text that animates letter by letter and glassmorphism effects that feel premium.

Floating path animations

Watch abstract SVG paths drift with synchronized opacity and elegant text animations:

Loading component...

'use client';import { motion } from 'framer-motion';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';function FloatingPaths({ position }: { position: number }) {  const paths = Array.from({ length: 36 }, (_, i) => ({    id: i,    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${      380 - i * 5 * position    } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${      152 - i * 5 * position    } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${      684 - i * 5 * position    } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,    color: `rgba(15,23,42,${0.1 + i * 0.03})`,    width: 0.5 + i * 0.03,  }));  return (    <div className="absolute inset-0 pointer-events-none">      <svg        className="w-full h-full text-slate-950 dark:text-white"        viewBox="0 0 696 316"        fill="none"      >        <title>Background Paths</title>        {paths.map((path) => (          <motion.path            key={path.id}            d={path.d}            stroke="currentColor"            strokeWidth={path.width}            strokeOpacity={0.1 + path.id * 0.03}            initial={{ pathLength: 0.3, opacity: 0.6 }}            animate={{              pathLength: 1,              opacity: [0.3, 0.6, 0.3],              pathOffset: [0, 1, 0],            }}            transition={{              duration: 20 + Math.random() * 10,              repeat: Number.POSITIVE_INFINITY,              ease: 'linear',            }}          />        ))}      </svg>    </div>  );}export interface BackgroundPathsProps {  title?: string;}export function BackgroundPaths({  title = 'Background Paths',}: BackgroundPathsProps) {  const words = title.split(' ');  return (    <div className="relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-white dark:bg-neutral-950">      <div className="absolute inset-0">        <FloatingPaths position={1} />        <FloatingPaths position={-1} />      </div>      <div className="relative z-10 container mx-auto px-4 md:px-6 text-center">        <motion.div          initial={{ opacity: 0 }}          animate={{ opacity: 1 }}          transition={{ duration: 2 }}          className="max-w-4xl mx-auto"        >          <h1 className="text-5xl sm:text-7xl md:text-8xl font-bold mb-8 tracking-tighter">            {words.map((word, wordIndex) => (              <span                key={wordIndex}                className="inline-block mr-4 last:mr-0"              >                {word.split('').map((letter, letterIndex) => (                  <motion.span                    key={`${wordIndex}-${letterIndex}`}                    initial={{ y: 100, opacity: 0 }}                    animate={{ y: 0, opacity: 1 }}                    transition={{                      delay: wordIndex * 0.1 + letterIndex * 0.03,                      type: 'spring',                      stiffness: 150,                      damping: 25,                    }}                    className="inline-block text-transparent bg-clip-text                       bg-gradient-to-r from-neutral-900 to-neutral-700/80                       dark:from-white dark:to-white/80"                  >                    {letter}                  </motion.span>                ))}              </span>            ))}          </h1>          <div            className="inline-block group relative bg-gradient-to-b from-black/10 to-white/10               dark:from-white/10 dark:to-black/10 p-px rounded-2xl backdrop-blur-lg               overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"          >            <Button              variant="ghost"              className="rounded-[1.15rem] px-8 py-6 text-lg font-semibold backdrop-blur-md                 bg-white/95 hover:bg-white/100 dark:bg-black/95 dark:hover:bg-black/100                 text-black dark:text-white transition-all duration-300                 group-hover:-translate-y-0.5 border border-black/10 dark:border-white/10                hover:shadow-md dark:hover:shadow-neutral-800/50"            >              <span className="opacity-90 group-hover:opacity-100 transition-opacity">                Discover Excellence              </span>              <span                className="ml-3 opacity-70 group-hover:opacity-100 group-hover:translate-x-1.5                   transition-all duration-300"              >                →              </span>            </Button>          </div>        </motion.div>      </div>    </div>  );}

Built for React applications with TypeScript and Next.js. Uses Framer Motion for smooth path animations with staggered timing. Each path floats independently with opacity cycling that creates depth. Letter-by-letter text animation with spring effects adds sophistication. Perfect for landing pages, portfolios, or any design that needs to feel artistic and alive.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-paths.json

npx shadcn@latest add https://www.shadcn.io/registry/background-paths.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-paths.json

bunx shadcn@latest add https://www.shadcn.io/registry/background-paths.json

Usage

import { BackgroundPaths } from "@/components/ui/background-paths";

export default function ArtisticLanding() {
  return (
    <div className="relative h-screen w-full">
      <BackgroundPaths title="Creative Studio" />
      {/* The component includes its own content overlay with title and button */}
      {/* Additional content can be layered with higher z-index if needed */}
    </div>
  );
}

Why most floating animations look cheap

Most developers use CSS keyframes with basic transforms. Paths move in perfect circles or straight lines—obviously programmed, predictably robotic. Others try JavaScript with setInterval for random movement, but it's janky and inconsistent. Some use particle libraries, but they render thousands of identical dots instead of unique artistic shapes.

This React component uses 36 unique SVG path definitions that create abstract, organic shapes. Framer Motion handles the animation with spring physics and staggered timing. Each path floats with independent opacity cycling, creating natural depth layers. The letter-by-letter text animation uses proper easing curves, not linear movement. It's the difference between digital art and a screensaver.

Features

36 unique SVG paths floating with independent timing and opacity cycles
Framer Motion animations providing spring physics and smooth interpolation
Letter-by-letter text animation with staggered timing and spring effects
Interactive glassmorphism button with hover states and micro-interactions
Automatic dark mode adaptation with theme-aware colors and gradients
Responsive text scaling maintaining readability across all screen sizes
Accessibility optimized respecting motion preferences and screen readers
TypeScript definitions for all animation and customization parameters
Performance optimized using hardware-accelerated transforms
shadcn/ui compatible with proper theming and design system integration

API Reference

BackgroundPaths

Main component for floating SVG path animations with integrated text and UI elements.

Prop	Type	Default	Description
`title`	`string`	`"Background Paths"`	Title text for letter-by-letter animation

Note: This component includes built-in content (title, button, full-screen layout) and is designed as a complete hero section rather than a background-only component.

Animation Details

Each floating path uses carefully orchestrated Framer Motion animations:

// Path floating animation
animations: {
  y: [-20, 20, -20], // Vertical floating
  opacity: [0.1, 0.8, 0.1], // Synchronized opacity cycling
  transition: {
    duration: 8-15s, // Variable timing per path
    repeat: Infinity,
    ease: "easeInOut"
  }
}

// Text letter animation
letter: {
  initial: { opacity: 0, y: 50 },
  animate: { opacity: 1, y: 0 },
  transition: {
    type: "spring",
    stiffness: 100,
    delay: index * 0.1 // Staggered timing
  }
}

SVG Path Design

The 36 paths use diverse bezier curves and shapes:

Abstract organic curves and flowing lines
Varied stroke widths and path lengths
Strategic positioning across the viewport
Optimized SVG code for performance

Common gotchas

Performance with motion sensitivity: The component has many animated elements. Users with prefers-reduced-motion should see static versions. Consider adding motion preference detection.

Fixed content structure: Unlike other background components, this includes built-in UI elements (title, button, layout). It's designed as a complete hero section, not just a background.

Framer Motion dependency: Requires Framer Motion as a peer dependency. If your project doesn't use it elsewhere, this adds bundle size. Consider simpler alternatives for basic floating effects.

Z-index layering complexity: The component manages its own layering with multiple elements. Adding custom content requires careful z-index planning to avoid conflicts.

Dark mode path visibility: SVG paths adapt to theme colors. In some custom themes, paths might become too faint or too bold. Test across all theme variations.

Text length limitations: Very long titles might break the letter-by-letter animation layout. Consider truncating or wrapping for extremely long text.

Explore other artistic and flowing background components for React applications:

Floating path animations

Installation

Usage

Why most floating animations look cheap

Features

API Reference

BackgroundPaths

Animation Details

SVG Path Design

Common gotchas

You might also like

Aurora

Vortex

Gradient Animation

Waves

Particles

Sparkles

Questions developers actually ask

On this page

React Paths Background

Reactbackground-paths

Aurora

Vortex

Gradient Animation

Waves

Particles

Sparkles

Can I customize the SVG paths or add my own shapes?

Can I use this as a background-only component without the UI elements?

How do I change the floating animation speed?

Can I change the colors of the floating paths?

Does this work well on mobile devices?

How does this handle users who prefer reduced motion?

On this page