Paths

Floating SVG path animations with gradient text effects. Perfect for React applications requiring dynamic backgrounds with Next.js integration and TypeScript support.

Framer Motion

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>  );}

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

Features

36 animated SVG paths floating continuously with synchronized opacity cycling using Framer Motion
Letter-by-letter text animation with spring effects and customizable title content
Interactive glassmorphism button featuring hover effects and smooth micro-interactions
Dark mode compatibility with automatic theme switching and adaptive color schemes
Responsive gradient text effects that scale appropriately across all screen sizes
TypeScript support with complete interface definitions for reliable integration
Accessibility optimized including proper ARIA labels and motion preference respect
shadcn/ui integration following established design patterns and CSS custom properties

Examples

Custom Title

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>  );}

Use Cases

This free open source React component works well for:

Landing pages - Dynamic hero sections with floating path animations built with Next.js
Creative portfolios - Artistic backgrounds showcasing design capabilities using TypeScript
Product launches - Eye-catching announcement pages with gradient text effects
Tech presentations - Modern backgrounds for software demos using shadcn/ui design
App onboarding - Engaging welcome screens with interactive elements
Marketing sites - Professional backgrounds that maintain content focus using Tailwind CSS

API Reference

BackgroundPaths

Prop	Type	Default	Description
`title`	`string`	`"Background Paths"`	The title text to display with animated letters

Implementation Notes

Component renders 36 animated SVG paths with continuous floating movement and opacity cycling
Letter-by-letter text animation uses Framer Motion spring effects with staggered timing
Interactive button includes glassmorphism styling with hover effects and micro-interactions
Automatic dark mode support with theme-adaptive background colors and text gradients
Uses CSS custom properties and Tailwind classes for easy customization
Full viewport coverage with proper overflow handling to prevent layout issues
Compatible with shadcn/ui design system and accessibility standards
Path colors, opacity, animation durations, and easing can be modified through CSS variables

Reactbackground-paths

Reactbackground-paths

On this page