Light Speed

Installation

CommandManual

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @cortexcn/light-speed

Using TypeScript? Add the three.js types as well with pnpm add -D @types/three. The CLI adds them for you.

Usage

import { LightSpeed } from "@/components/light-speed";

<section className="relative isolate flex h-[480px] items-center justify-center overflow-hidden">
  <LightSpeed />
  <h1 className="relative text-4xl font-medium text-white">
    Ship at light speed
  </h1>
</section>

The background fills its nearest positioned parent, so give that parent relative and a height. Content placed after it with relative sits on top.

Examples

Color and speed

A cooler color with fewer, slower streaks.

<section className="relative isolate flex h-[420px] items-center justify-center overflow-hidden">  <LightSpeed lightColor="#33b2ff" particleCount={600} speed={1.2} />  <h2 className="relative text-4xl font-medium text-white">Ship at light speed</h2></section>

Behavior

• Draws with WebGL through React Three Fiber, and a bloom pass from @react-three/postprocessing turns the bright streaks into a glow.
• Ignores the pointer, so buttons and links on top stay clickable, and it is hidden from screen readers.
• Renders at up to twice the device pixel ratio, which keeps it sharp without overworking large screens.
• With reduced motion enabled, it holds a still frame instead of animating.
• Set paused to hold the frame yourself, for example while the section is off screen.

Props