Kinetic Lines
A free animated line background for directional product sections.
Seabright Ocean
Where the cargo is, not where the paperwork says
Every booking is tracked against berth, gate and rail data from the ports themselves, so a missed connection surfaces while there is still time to rebook. Your customer hears the new date from you.
See how tracking worksCustomise
Code
<BgKineticLines />Kinetic Lines is a free animated lines background React component for Next.js, React, and Tailwind. It renders a deterministic field of cubic SVG paths, then uses one GSAP tween to send evenly phased accent trails through the field in any of four directions.
Line count, curvature, speed, trail length, direction, spread, and seed all change the real effect. Static base paths keep the full composition visible during server rendering, without JavaScript, and when reduced motion is enabled.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-kinetic-linesUsage
import { BgKineticLines } from "@/components/bg-kinetic-lines";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgKineticLines
lineCount={18}
curvature={0.34}
speed={7}
trailLength={0.28}
direction="right"
spread={0.82}
seed={11}
/>
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted-foreground">Directional lines flow behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lineCount | number | 18 | Number of lines, rounded and clamped to 8 to 36. |
| curvature | number | 0.34 | Normalised path bend, clamped to 0 to 0.75. |
| speed | number | 7 | Duration of one accent cycle in seconds, clamped to 2.5 to 18. |
| trailLength | number | 0.28 | Visible fraction of each accent path, clamped to 0.08 to 0.62. |
| direction | "left" | "right" | "up" | "down" | "right" | Flow direction and SVG path orientation. |
| spread | number | 0.82 | Fraction of the cross-axis occupied by the field, clamped to 0.45 to 1. |
| seed | number | 11 | Finite deterministic seed for path variation. |
| className | string | undefined | Additional classes merged onto the absolute fill root. |
Customisation
Kinetic Lines exposes three component tokens. --kinetic-line controls the resting stroke, --kinetic-line-accent controls the travelling dash, and --kinetic-line-width controls both stroke widths. Each colour defaults to a semantic token:
:root {
--kinetic-line: var(--border);
--kinetic-line-accent: var(--primary);
--kinetic-line-width: 1.5;
}Frequently asked questions
- Is Kinetic Lines free for commercial use?
- Yes. Kinetic Lines is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Kinetic Lines handle performance and accessibility?
- One scoped GSAP tween drives every accent path at a linear rate and pauses while the layer is offscreen or the document is hidden. The SVG is decorative, aria-hidden, pointer inert, and creates no tween when reduced motion is enabled.
- Can I change the line colours and geometry?
- Use the three CSS custom properties for stroke styling. Use the component props or live playground for line count, curvature, speed, trail length, direction, spread, and deterministic seed.