Components
Loading preview...
t renders a dynamic, noise-based visual with a "warp" effect that reacts to your mouse movements. You can control parameters like hue, speed, noise intensity, and the warp amount in real-time using the sliders. This combines the procedural generation seen in the first example with the mouse interaction from the third.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/liquid-crystalimport React, { useState } from 'react';
import { InteractiveShader,ControlsPanel } from "@/components/ui/liquid-crystal";
export default function DemoOne() {
// State for shader parameters, controlled by UI sliders.
const [params, setParams] = useState({
hue: 225,
speed: 0.4,
noise: 0.2,
warp: 0.1,
zoom: 1.5,
brightness: 0.9,
});
const handleParamChange = (param) => (e) => {
setParams(p => ({ ...p, [param]: parseFloat(e.target.value) }));
};
return (
<div className="relative w-full h-screen bg-gray-900 font-sans antialiased overflow-hidden">
<InteractiveShader {...params} />
<ControlsPanel params={params} onParamChange={handleParamChange} />
</div>
);
}