Background Lines
Animated SVG lines flowing across the background with smooth wave motion.
Preview
Background Lines
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
About pages and brand story sections.
Why this component matters
Lines imply precision and structure. They reinforce the 'restraint signals quality' principle.
Usage guidance
Use as a subtle background layer behind text-heavy sections. Keep line count to 5-8 and opacity below 0.3 for readability.
Installation
bash
npx shadcn@latest add @aceternity/background-linesUsage
example.tsxtsx
import { BackgroundLines } from "@/components/ui/background-lines";
export default function Example() {
return (
<BackgroundLines>
{/* Your content here */}
</BackgroundLines>
);
}Source
background-lines.tsx
components/ui/background-lines.tsx