Give any route a pulse. Pass an SVG path and Light Runner draws it as a glowing fibre: a bulb-shaped head that always leads, a tapering tail behind it, and tips at the positions you choose that merge into the stroke (smooth-min, not dots on a line) and flare when the runner passes. One to four runners per lap, either direction, freeze at any progress for stills. Separate colors for the path, the light, the glow and the tips. Works as a connector animation, a progress route, or a loader on a closed loop. Retina-crisp WebGL, transparent background, zero dependencies.
// Copyright (c) 2026 haim repael azoulay. All rights reserved.
import LightRunner from "@/components/ui/light-runner-path"
const settings = {
playback: true,
speed: 0.22, // laps per second
direction: 1, // 1 forward, -1 backward
runners: 1, // light heads per lap (1–4)
headLength: 10,
tailLength: 140,
tailBrightness: 0.7,
trailSoftness: 0.7,
intensity: 1,
baseOpacity: 0.55, // base line opacity
glowRadius: 14,
glowStrength: 1,
strokeWidth: 4,
bulbRadius: 7,
baseColor: { r: 0.42, g: 0.3, b: 0.85, a: 1 }, // path color
lightColor: { r: 1, g: 0.85, b: 0.65, a: 1 },
glowColor: { r: 1, g: 0.6, b: 0.35, a: 1 },
bulbColor: { r: 0.9, g: 0.85, b: 1, a: 1 }, // tips
}
export default function LightRunnerPathDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex min-h-[420px] w-full flex-col items-center justify-center gap-10 bg-background p-8">
{/* A route with fibre-optic tips at start, middle and end: the runner flares each one as it passes */}
<div className="h-40 w-full max-w-2xl">
<LightRunner
path="M 24 120 C 160 120, 200 40, 340 40 S 520 120, 660 120 S 860 40, 976 40"
viewBox={{ width: 1000, height: 160 }}
bulbs={[0, 0.5, 1]}
{...(s as any)}
/>
</div>
{/* A closed loop with two runners — works as a loader */}
<div className="h-40 w-40">
<LightRunner
path="M 80 10 A 70 70 0 1 1 79.9 10 Z"
viewBox={{ width: 160, height: 160 }}
bulbs={[]}
{...(s as any)}
runners={2}
strokeWidth={3}
baseOpacity={0.3}
/>
</div>
</div>
)
}