Light Runner Path

Shaders

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Light Runner Path to your project and fits it to your theme.

Code

How Light Runner Path is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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>
  )
}