Components
A full-screen, canvas-driven aurora “curtains” effect that drifts like flowing curtains of light. Built with a self-contained Simplex noise implementation, this component layers glowing starfields with sinuous ribbon shapes that sway organically over time. Perfect for immersive hero sections, ambient backgrounds, or generative-art overlays.
npx @21st-dev/cli add dhileepkumargm/flowing-curtainsLoading preview...
import React from 'react'
import AuroraCurtains, { AuroraCurtainsProps } from '@/components/ui/flowing-curtains'
export const AuroraCurtainsDemo = () => {
const demoProps: AuroraCurtainsProps = {
starCount: 150,
ribbonCount: 10,
ribbonSpeed: 0.008,
swayAmplitude: 0.6,
trailOpacity: 0.9,
ribbonWidthRange: [80, 200],
ribbonSegments: 30,
className: 'flex flex-col items-center justify-center text-center px-6 py-8',
}
return (
<AuroraCurtains {...demoProps}>
<h1 className="text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">
Flowing Curtains
</h1>
<p className="mt-4 text-lg text-gray-300 max-w-xl">
A different vision of the celestial dance, rendered in real-time.
</p>
</AuroraCurtains>
)
}
export default AuroraCurtainsDemo