Background Paths

A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds.

Astra Intelligence,
Neuron Systems.

Innovate, automate, and elevate your vision with next-generation solutions for a smarter tomorrow.

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/background-paths.json

Usage

import { BackgroundPaths } from "@/components/ui/background-paths";
<BackgroundPaths
  className="h-[32rem]"
  svgOptions={{ duration: 8 }}
>
  <h1 className="text-white text-4xl font-bold text-center">Welcome</h1>
</BackgroundPaths>

API Reference

BackgroundPaths

The BackgroundPaths component renders a animated SVG paths ideal for tech-style hero sections. Adapts seamlessly to light and dark themes.

Props

PropertyTypeDefaultDescription
classNamestring—
Optional styling for the outer container.
childrenReactNode—
Overlay content rendered above the animated background.
svgOptions{ duration?: number }—
Options to customize SVG animation.
svgOptions.durationnumber6
Total duration (in seconds) of SVG path animations.

Built withby Ahdeetai.