Components

'use client'
import { useState, useRef } from 'react'

export default function TiltCard({ title = 'Empire UI Pro', emoji = '⚡', desc = 'AI-powered component generation', color = '#6d28d9' }) {
  const [tilt, setTilt] = useState({ x:0, y:0 })
  const [glare, setGlare] = useState({ x:50, y:50 })
  const ref = useRef(null)
  const onMove = (e) => {
  

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', width:size*3, height:size*3, display:'flex', alignItems:'center', justifyContent:'center' }}>
        {A

'use client'
import { useState } from 'react'

const COLORS = ['#6d28d9','#2563eb','#10b981','#f59e0b','#ef4444','#ec4899','#a78bfa','#60a5fa']

export default function ConfettiButton({ label = 'Celebrate! 🎊' }) {
  const [pieces, setPieces] = useState([])
  const fire = () => {
    const newPieces = Array.from({ length: 30 }, (_, i) => ({
      i

'use client'
const ITEMS = ['⚛️ React','🔷 TypeScript','💨 Tailwind','▲ Next.js','🔶 Prisma','🐘 PostgreSQL','🤖 OpenAI','🚀 Vercel','🐳 Docker','⚡ Vite']

export default function Marquee({ items = ITEMS, speed = 30, pauseOnHover = true }) {
  return (
    <div style={{ overflow:'hidden', position:'relative', padding:'12px 0' }}>
      <div style={

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%)',
      backgroundSize:'200% 100%',
      animation:'shimmer 1.5s infinite',
    }}/>
  )
}

expor

'use client'
import { useState, useRef } from 'react'

export default function MagneticButton({ label = 'Hover me ✨', strength = 30 }) {
  const [pos, setPos] = useState({ x:0, y:0 })
  const ref = useRef(null)
  const onMove = (e) => {
    const rect = ref.current.getBoundingClientRect()
    const cx = rect.left + rect.width / 2
    const cy = rec

'use client'
import { useState } from 'react'

export default function ParticleButton({ label = 'Click Me! 🎉' }) {
  const [particles, setParticles] = useState([])
  const burst = (e) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const cx = e.clientX - rect.left
    const cy = e.clientY - rect.top
    const newParticles = Array

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const [idx, setIdx] = useState(0)
  const [text, setText] = useState('')
  const [deleting, setDeleting] =

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}'}</style>
      <h1 s