Components
Crystal shader
renders a flowing, iridescent pattern that simulates the look of liquid crystals. It reacts to your mouse by creating ripples and distortions in the fluid. The UI panel has been updated with new controls like "Flow Speed," "Distortion," and "Mouse Ripple" to give you a different set of creative tools to play with.
import InteractiveShader from "@/components/ui/crystal-shader";
const settings = {
cellDensity: 8.0,
animationSpeed: 0.2,
warpFactor: 0.6,
mouseInfluence: 0.15,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<InteractiveShader {...s} />
</div>
);
}