# 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.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: no-license
- Tags: Interactive, Background Animation, WebGL, GLSL, Shader Background
- npm dependencies: three
- Live preview: https://21st.dev/@dhileepkumargm/components/light-up-shader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/light-up-shader?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/interactive.md