Components
Loading preview...
A stunning, interactive shader featuring a real-time volumetric aurora shader. Built with React and WebGL for a captivating user experience.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/aurora-shaderimport React, { useRef, useEffect, useState } from 'react';
import InteractiveShader from '@/components/ui/aurora-shader';
export default function DemoOne() {
// State variables to hold the shader parameters, controlled by sliders
const [flowSpeed, setFlowSpeed] = useState(0.4);
const [colorIntensity, setColorIntensity] = useState(1.2);
const [noiseLayers, setNoiseLayers] = useState(4.0);
const [mouseInfluence, setMouseInfluence] = useState(0.3);
return (
<div className="relative w-full h-screen font-sans">
{/* The main shader component that renders the visual effect */}
<InteractiveShader
flowSpeed={flowSpeed}
colorIntensity={colorIntensity}
noiseLayers={noiseLayers}
mouseInfluence={mouseInfluence}
/>
{/* UI controls panel with a new "Volumetric Aurora" theme */}
<div className="absolute top-4 left-4 bg-black bg-opacity-70 backdrop-blur-md text-white p-6 rounded-xl shadow-2xl w-full max-w-sm border border-gray-700">
<h1 className="text-xl font-bold mb-4 tracking-wider text-center">Volumetric Aurora</h1>
<div className="space-y-4">
{/* Slider for Flow Speed */}
<div>
<label htmlFor="flowSpeed" className="block mb-2 text-sm font-medium">Flow Speed: {flowSpeed.toFixed(2)}</label>
<input
id="flowSpeed"
type="range"
min="0"
max="2.0"
step="0.01"
value={flowSpeed}
onChange={(e) => setFlowSpeed(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-400"
/>
</div>
{/* Slider for Color Intensity */}
<div>
<label htmlFor="colorIntensity" className="block mb-2 text-sm font-medium">Color Intensity: {colorIntensity.toFixed(2)}</label>
<input
id="colorIntensity"
type="range"
min="0"
max="3"
step="0.01"
value={colorIntensity}
onChange={(e) => setColorIntensity(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-400"
/>
</div>
{/* Slider for Noise Layers */}
<div>
<label htmlFor="noiseLayers" className="block mb-2 text-sm font-medium">Noise Layers: {noiseLayers.toFixed(2)}</label>
<input
id="noiseLayers"
type="range"
min="1.0"
max="8.0"
step="0.01"
value={noiseLayers}
onChange={(e) => setNoiseLayers(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-400"
/>
</div>
{/* Slider for Mouse Influence */}
<div>
<label htmlFor="mouseInfluence" className="block mb-2 text-sm font-medium">Mouse Influence: {mouseInfluence.toFixed(2)}</label>
<input
id="mouseInfluence"
type="range"
min="0"
max="1.0"
step="0.01"
value={mouseInfluence}
onChange={(e) => setMouseInfluence(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-400"
/>
</div>
</div>
</div>
</div>
);
}