Components
Loading preview...
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.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/liquid-metal-vorteximport React, { useState, useEffect } from 'react';
import { Hero } from "@/components/ui/liquid-metal-vortex";
export default function DemoOne() {
// State for the shader parameters that are not controlled by the color swiper.
const [params, setParams] = useState({
speed: 1.22,
complexity: 1.0,
});
// State for the current color index.
const [colorIndex, setColorIndex] = useState(0);
// An array of 7 distinct hue values to cycle through.
const scrollHues = [0, 60, 120, 180, 240, 300, 360];
// This useEffect sets up an interval to automatically cycle through the colors.
useEffect(() => {
const interval = setInterval(() => {
// Increment the color index, looping back to the start.
setColorIndex(prevIndex => (prevIndex + 1) % scrollHues.length);
}, 4000); // Change color every 4 seconds.
// Cleanup the interval when the component unmounts.
return () => clearInterval(interval);
}, []); // The empty dependency array ensures this effect runs only once on mount.
// Get the current hue from the array based on the current index.
const hue = scrollHues[colorIndex];
return (
<div>
<Hero
title="Enter the Vortex"
description="An interactive liquid metal simulation crafted with WebGL. Explore the fluid dynamics and metallic reflections of a twisting vortex, rendered in real-time."
ctaButtons={[
{ text: "Get Started", href: "#", primary: true },
{ text: "View on GitHub", href: "#" }
]}
shaderProps={{ ...params, hue }}
/>
</div>
);
}