Light Up shader

A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful line light up pattern using a custom GLSL shader. The component is interactive, allowing its appearance to be controlled via props (or UI buttons in the demo) to change colors based on different states, such as "active" or "upcoming" reminders. It also includes an optional center-dimming effect.

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

import InteractiveStarfieldShader from "@/components/ui/light-up-shader";

const settings = {
  hasActiveReminders: false,
  hasUpcomingReminders: false,
  disableCenterDimming: false,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <InteractiveStarfieldShader {...s} />
    </div>
  );
}