Arc Light

Component

About

A soft arc of light that the pointer stirs like ink in water.

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

Code

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

Usage.tsx

"use client";

import ArcLight from "@/components/ui/arc-light";

const settings = {
  color: "#ff5f00",
  backgroundColor: "#07060f",
  saturation: 1,
  intensity: 1,
  softness: 1,
  grain: 0.06,
  speed: 1,
  flow: 1,
  interactive: true,
  smearStrength: 1,
  smearRadius: 0.1,
};

export default function ArcLightDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-full">
      <ArcLight
        color={s.color}
        backgroundColor={s.backgroundColor}
        saturation={s.saturation}
        intensity={s.intensity}
        softness={s.softness}
        grain={s.grain}
        speed={s.speed}
        flow={s.flow}
        interactive={s.interactive}
        smearStrength={s.smearStrength}
        smearRadius={s.smearRadius}
      />
    </div>
  );
}