Components
Loading preview...
A full-screen, wave-driven ribbon shader that mimics the dancing hues of the aurora borealis. Exposes amplitude and frequency props for real-time control.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/aurora-flow-shader"use client";
import React, { useState } from "react";
import AuroraFlowShader from "@/components/ui/aurora-flow-shader";
export default function DemoOne() {
const [amplitude, setAmplitude] = useState(0.3);
const [frequency, setFrequency] = useState(4.0);
return (
<div className="relative w-screen h-screen bg-background text-foreground">
{/* Full-screen aurora-style flow shader */}
<AuroraFlowShader amplitude={amplitude} frequency={frequency} />
{/* Controls overlay */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex space-x-4 bg-card/80 p-4 rounded-lg">
<div className="flex items-center space-x-2">
<label htmlFor="amplitude" className="text-sm">Amplitude:</label>
<input
id="amplitude"
type="range"
min={0.1}
max={1.0}
step={0.1}
value={amplitude}
onChange={(e) => setAmplitude(Number(e.target.value))}
className="range range-sm range-primary"
/>
<span>{amplitude.toFixed(1)}</span>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="frequency" className="text-sm">Frequency:</label>
<input
id="frequency"
type="range"
min={1}
max={10}
step={1}
value={frequency}
onChange={(e) => setFrequency(Number(e.target.value))}
className="range range-sm range-primary"
/>
<span>{frequency.toFixed(0)}</span>
</div>
</div>
</div>
);
}