Components
Loading preview...
Made for elixr copied
npx shadcn@latest add https://21st.dev/r/ibssibss7/elixr'use client'
import { SpiralAnimation } from "@/components/ui/elixr"
import { useEffect, useState } from "react"
export default function SpiralDemo() {
const [startVisible, setStartVisible] = useState(false)
const navigateToPersonalSite = () => {
window.location.href = "elixrlab.com"
}
useEffect(() => {
const t = setTimeout(() => setStartVisible(true), 2000)
return () => clearTimeout(t)
}, [])
return (
<div className="fixed inset-0 w-full h-full overflow-hidden bg-black">
{/* Spiral Animation */}
<div className="absolute inset-0">
<SpiralAnimation />
</div>
{/* Center Text Button */}
<div
className={`
absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10
transition-all duration-1500 ease-out
${startVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}
`}
>
<button
onClick={navigateToPersonalSite}
className="
text-white text-2xl tracking-[0.2em] uppercase font-extralight
transition-all duration-700
hover:tracking-[0.3em] animate-pulse
"
>
ELIXR
</button>
</div>
</div>
)
}