elixr

Heroes 89

About

Made for elixr copied

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds elixr to your project and fits it to your theme.

Code

How elixr is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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>
  )
}