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 scrollx-ui@latest add background-paths

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

  • className (string) – Optional Tailwind or custom classes to style the outer container. Defaults to a full-screen responsive container with white/dark background.

  • children (React.ReactNode) – Optional React elements rendered above the animated background, usually for overlay content such as text, buttons, or call-to-actions.

  • svgOptions (object) – Optional animation customization for the SVG paths.

    • duration (number) – Controls the total duration (in seconds) of the SVG path animations. Defaults to 6.