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