Liquid Metal Vortex

Heroes 103

About

This component uses raymarching to render a swirling vortex of reflective, metallic fluid. The UI allows you to control the vortex's color hue, the speed of its rotation and turbulence, and the complexity of the fluid's surface. The lighting is dynamic and reacts to the fluid's shape, creating realistic metallic sheens.

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

Code

How Liquid Metal Vortex is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Hero from "@/components/ui/liquid-metal-vortex";

const settings = {
  title: "Liquid Metal Vortex",
  description:
    "An interactive WebGL shader background rendered in real time. Move your cursor to steer the camera through the swirling metal.",
  hue: 210,
  complexity: 1,
  speed: 1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <Hero
        title={s.title}
        description={s.description}
        shaderProps={{ hue: s.hue, complexity: s.complexity, speed: s.speed }}
        ctaButtons={[
          { text: "Get Started", href: "#", primary: true },
          { text: "Learn More", href: "#", primary: false },
        ]}
      />
    </div>
  );
}