Skip to content
Docs
컴포넌트로 돌아가기

비주얼 이펙트 카드

@hua-labs/ui
v1.1.0
Pro

Pro 플랜 컴포넌트

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

웨이팅리스트 등록

마우스를 따라다니는 비주얼 효과가 있는 프리미엄 카드 컴포넌트입니다. SaaS 랜딩 페이지, 포트폴리오, 프리미엄 UI에 적합합니다.

설치

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

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

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

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

라이브 데모

GlowCard

마우스를 따라다니는 글로우 효과가 있는 카드

Pro

스타터 플랜

개인 프로젝트에 적합

$9/mo

프로 플랜

팀과 비즈니스용

$29/mo

Props

이름타입기본값설명
glowColorstring"rgba(120, 119, 198, 0.3)"글로우 색상
glowSizenumber400글로우 크기 (px)
glowOpacitynumber0.6글로우 투명도 (0-1)
borderbooleantrue글로우 보더 효과 표시
borderColorstringglowColor보더 색상 (기본: glowColor)

SpotlightCard

다크 테마에 최적화된 스포트라이트 효과 카드

Pro

빠른 속도

최적화된 성능

보안

엔터프라이즈급 보안

실시간

즉각적인 업데이트

Props

이름타입기본값설명
spotlightColorstring"rgba(255, 255, 255, 0.1)"스포트라이트 색상
spotlightSizenumber300스포트라이트 크기 (px)
gradientbooleantrue그라디언트 배경 표시

TiltCard

마우스 움직임에 따라 3D로 기울어지는 카드

Pro

프리미엄 카드

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

Props

이름타입기본값설명
maxTiltnumber15최대 기울기 각도
perspectivenumber10003D 효과 원근감
scalenumber1.02호버시 스케일
speednumber400전환 속도 (ms)
glarebooleantrue글레어 효과 표시
maxGlarenumber0.3최대 글레어 투명도
resetbooleantrue마우스 떠나면 리셋

코드 예시

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

<GlowCard glowColor="rgba(59, 130, 246, 0.4)" dot="p-6">
  <h3>Starter Plan</h3>
  <p>Perfect for personal projects</p>
  <div className="text-3xl font-bold">$9/mo</div>
</GlowCard>
SpotlightCardtsx
import { SpotlightCard } from '@hua-labs/ui/advanced';

<SpotlightCard dot="p-6">
  <div className="text-3xl mb-3">🚀</div>
  <h3 className="font-bold text-white">Fast</h3>
  <p className="text-sm text-gray-400">Optimized performance</p>
</SpotlightCard>
TiltCardtsx
import { TiltCard } from '@hua-labs/ui/advanced';

<TiltCard dot="w-72 bg-white rounded-2xl shadow-2xl">
  <div className="h-40 bg-gradient-to-br from-violet-500 to-purple-600" />
  <div className="p-6">
    <h3>Premium Card</h3>
    <p>Move your mouse to see the 3D effect</p>
  </div>
</TiltCard>

접근성

  • 시각적 향상만: 효과는 순수하게 시각적이며 콘텐츠 접근성에 영향을 주지 않습니다
  • 모션 감소: 사용자가 모션 감소를 선호하면 효과가 자동으로 비활성화됩니다