Components
Liquid Crystal
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.
import { InteractiveShader } from "@/components/ui/liquid-crystal";
const settings = {
hue: 180,
speed: 1,
noise: 0.5,
warp: 0.1,
zoom: 2,
brightness: 1,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen relative overflow-hidden">
<InteractiveShader {...s} />
</div>
);
}