Components
Loading preview...
A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful wave 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.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/flowing-waves-shaderimport InteractiveWaveShader from "@/components/ui/flowing-waves-shader";
export default function DemoOne() {
return <div className="app-container">
<InteractiveWaveShader />
</div>
}