Moving Light Path

A decorative background element featuring one or more SVG paths with a glowing light that traverses the path using Motion's path offset animation. Ideal for tech-focused landing sections.

ReactNext.jsClient ComponentReactMotionSVG

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/moving-light-path

Registry endpoint: https://ui.mridha.net/r/moving-light-path.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/moving-light-path.tsx

3. Import the component

import { MovingLightPath } from "@/components/ui/moving-light-path";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <MovingLightPath />
    </main>
  );
}

Dependencies

motion

Accessibility

Entirely decorative — uses aria-hidden='true' on the SVG.
Content placed over this background should maintain adequate contrast.

Performance

SVG path animation uses transform/offset-path — GPU-accelerated.
Multiple path instances can be used but watch for layout paint costs.