Skip to content
Docs
Back to Components

TiltCard

@hua-labs/ui/advanced
v1.1.0
Pro

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

A card component that creates a 3D tilt effect based on mouse movement. Perfect for product cards, image galleries, and interactive showcases.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { TiltCard } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

Pro

마우스를 카드 위에서 움직여보세요

프리미엄 카드

마우스를 움직여 3D 효과를 확인하세요

강한 효과

maxTilt=25, scale=1.05, maxGlare=0.5

Intense

강한 3D 틸트

글레어 없음

glare=false로 글레어 효과 비활성화

부드러운 효과

글레어 없이 틸트만

카드 그리드

여러 카드에 적용

디자인

마우스를 올려보세요

개발

마우스를 올려보세요

배포

마우스를 올려보세요

Props

이름타입기본값설명
maxTiltnumber15Maximum tilt angle in degrees
perspectivenumber1000Perspective value for 3D effect
scalenumber1.02Scale factor on hover
speednumber400Transition speed in milliseconds
glarebooleantrueEnable glare effect that follows mouse
maxGlarenumber0.3Maximum glare opacity (0-1)
resetbooleantrueReset tilt when mouse leaves the card
classNamestring-추가 CSS 클래스
childrenReactNode-콘텐츠

코드 예시

기본 사용법

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

export function ProductCard() {
  return (
    <TiltCard dot="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>
  );
}

커스텀 옵션

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

글레어 없는 버전

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

스포트라이트 효과 카드 (다크 테마용)

접근성

  • •모션 감소: prefers-reduced-motion을 감지하여 모션 감소를 선호하는 사용자에게는 틸트 및 글레어 애니메이션이 비활성화됩니다.
  • •스크린 리더: 카드 컨테이너에 aria-label을 지원하며, 틸트 효과는 순수 시각 장식으로 보조 기술에는 안내되지 않습니다.
  • •키보드: 카드 내부 콘텐츠는 완전히 키보드 탐색 가능하며, 인터랙티브 자식 요소는 포커스 표시를 유지합니다.