TiltCard

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { TiltCard } from "@hua-labs/ui/advanced";

Pro

Intense

Props


`maxTilt`	`number`	`15`	Maximum tilt angle in degrees
`perspective`	`number`	`1000`	Perspective value for 3D effect
`scale`	`number`	`1.02`	Scale factor on hover
`speed`	`number`	`400`	Transition speed in milliseconds
`glare`	`boolean`	`true`	Enable glare effect that follows mouse
`maxGlare`	`number`	`0.3`	Maximum glare opacity (0-1)
`reset`	`boolean`	`true`	Reset tilt when mouse leaves the card
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Card content

docs:common.basicUsage

tsx

import { TiltCard } from '@hua-labs/ui/advanced';

export function ProductCard() {
  return (
    <TiltCard className="w-72 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
      <div className="h-48 bg-gradient-to-br from-violet-500 to-purple-600" />
      <div className="p-6">
        <h3 className="font-bold text-lg mb-2">Premium Product</h3>
        <p className="text-sm text-gray-500">
          Move mouse to see 3D effect
        </p>
      </div>
    </TiltCard>
  );
}

docs:common.customOptions

tsx

import { TiltCard } from '@hua-labs/ui/advanced';

export function IntenseTiltCard() {
  return (
    <TiltCard
      maxTilt={25}
      perspective={800}
      scale={1.05}
      speed={200}
      glare={true}
      maxGlare={0.5}
      className="w-64 p-6 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl text-white"
    >
      <h3 className="text-xl font-bold mb-2">Intense Effect</h3>
      <p className="text-sm opacity-80">Strong 3D tilt effect</p>
    </TiltCard>
  );
}

docs:components.tiltCard.examples.withoutGlare

tsx

import { TiltCard } from '@hua-labs/ui/advanced';

export function SubtleTiltCard() {
  return (
    <TiltCard
      maxTilt={10}
      glare={false}
      reset={true}
      className="w-64 p-6 border rounded-xl"
    >
      <h3 className="font-semibold mb-2">Subtle Effect</h3>
      <p className="text-sm text-muted-foreground">
        Tilt only, no glare
      </p>
    </TiltCard>
  );
}

GlowCard

SpotlightCard

•Reduced Motion: Respects prefers-reduced-motion by disabling tilt and glare animations for users who prefer reduced motion.
•Screen Reader: Supports aria-label on the card container; tilt effect is purely decorative and not announced to assistive technologies.
•Keyboard: Card content remains fully keyboard navigable and interactive children maintain visible focus indicators.

VideoBackground SpotlightCardPro