Background Lines
A full-bleed backdrop of twelve long, sweeping SVG curves that draw themselves in and fade out on a loop, each staggered by a fixed delay so the field never pulses in unison.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/background-lines.jsonnpx shadcn@latest add @interlace/background-linesHistory
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
Single named export.
import { BackgroundLines } from '@/components/ui/aceternity/background-lines';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
BackgroundLines (div — bg-white dark:bg-black, isolate,
contain: layout style paint)
├─ div.absolute.inset-0
│ └─ SVG (motion.svg, viewBox 0 0 1440 900,
│ └─ motion.path ×12 opacity 0.4, aria-hidden,
│ pointer-events-none)
└─ div.z-10 (your children)
Each path animates `strokeDashoffset 800 → 0` with the dash pattern
tightening from `"50 800"` to `"20 800"` and opacity running `[0, 1, 1, 0]`,
so the stroke reads as a comet drawing along the curve.Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- Animation is gated on prefers-reduced-motion.
- ARIA in the source
aria-hidden
Examples
2 more states from the same story file.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
motion
- Registry dependencies
Source
The full implementation — components/ui/aceternity/background-lines.tsx once installed.
"use client";
import { cn } from "@/lib/utils";
// @interlace/background-lines v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/background-lines
// What changed since: https://ds.interlace.tools/c/background-lines#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — BackgroundLines
*
* A full-bleed backdrop of twelve long, sweeping SVG curves that draw
* themselves in and fade out on a loop, each staggered by a fixed delay so the
* field never pulses in unison.
*
* Your children render above it on a `z-10` layer; the container is
* `h-[20rem] md:h-screen`.
*
* Our reimplementation of the Aceternity UI effect of the same name. What is
…178 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.