Components
Crystalline Growth
"Crystalline Growth" effect. It uses a 3D rendering technique called raymarching to create an animated, abstract scene of growing and rotating crystalline structures. The UI panel allows you to control the growth speed, the complexity of the shapes, the color scheme, and the position of the virtual light source, giving you a wide range of creative possibilities.
import React, { useState } from 'react';
import { InteractiveShader, ControlsPanel } from "@/components/ui/crystalline-growth";
export default function DemoOne() {
// State for shader parameters, controlled by UI sliders.
const [params, setParams] = useState({
hue: 180.0,
speed: 0.3,
shape: 0.5,
});
const handleParamChange = (param) => (e) => {
setParams(p => ({ ...p, [param]: parseFloat(e.target.value) }));
};
return (
<div className="relative w-full h-screen bg-black font-sans antialiased overflow-hidden">
<InteractiveShader {...params} />
<ControlsPanel params={params} onParamChange={handleParamChange} />
</div>
);
}