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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Crystal shader to your project and fits it to your theme.

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>
  );
}