TiltCard

tiltcard-1779394643255.tsx

'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) => {
    const rect = ref.current.getBoundingClientRect()
    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 20
    const y = -((e.clientY - rect.top) / rect.height - 0.5) * 20
    const gx = ((e.clientX - rect.left) / rect.width) * 100
    const gy = ((e.clientY - rect.top) / rect.height) * 100
    setTilt({ x, y }); setGlare({ x:gx, y:gy })
  }
  const onLeave = () => setTilt({ x:0, y:0 })
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{
        width:'240px', height:'300px', borderRadius:'20px',
        background:'linear-gradient(135deg,' + color + ',#2563eb)',
        transform:'perspective(800px) rotateX('+tilt.y+'deg) rotateY('+tilt.x+'deg)',
        transition:'transform 0.1s ease',
        cursor:'pointer', position:'relative', overflow:'hidden',
        boxShadow:'0 20px 50px rgba(0,0,0,0.2)',
        display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:'24px',
      }}
    >
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(circle at '+glare.x+'% '+glare.y+'%, rgba(255,255,255,0.15), transparent 60%)',
        pointerEvents:'none',
      }}/>
      <div style={{ fontSize:'48px', marginBottom:'12px' }}>{emoji}</div>
      <h3 style={{ color:'#fff', margin:'0 0 6px', fontSize:'20px', fontWeight:800 }}>{title}</h3>
      <p style={{ color:'rgba(255,255,255,0.7)', margin:0, fontSize:'13px', lineHeight:1.5 }}>{desc}</p>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

3D tilt card with perspective transform on mouse hover

More from Animations

'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

TypingAnimation

Animations

'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', widt

PulseIndicator

Animations

'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%

ShimmerCard

Animations

'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-posi

GradientText

Animations