비주얼 이펙트 카드

@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

이름	타입	기본값	설명
`glowColor`	`string`	`"rgba(120, 119, 198, 0.3)"`	글로우 색상
`glowSize`	`number`	`400`	글로우 크기 (px)
`glowOpacity`	`number`	`0.6`	글로우 투명도 (0-1)
`border`	`boolean`	`true`	글로우 보더 효과 표시
`borderColor`	`string`	`glowColor`	보더 색상 (기본: glowColor)

SpotlightCard

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

Pro

빠른 속도

최적화된 성능

보안

엔터프라이즈급 보안

실시간

즉각적인 업데이트

Props

이름	타입	기본값	설명
`spotlightColor`	`string`	`"rgba(255, 255, 255, 0.1)"`	스포트라이트 색상
`spotlightSize`	`number`	`300`	스포트라이트 크기 (px)
`gradient`	`boolean`	`true`	그라디언트 배경 표시

TiltCard

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

Pro

프리미엄 카드

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

Props

이름	타입	기본값	설명
`maxTilt`	`number`	`15`	최대 기울기 각도
`perspective`	`number`	`1000`	3D 효과 원근감
`scale`	`number`	`1.02`	호버시 스케일
`speed`	`number`	`400`	전환 속도 (ms)
`glare`	`boolean`	`true`	글레어 효과 표시
`maxGlare`	`number`	`0.3`	최대 글레어 투명도
`reset`	`boolean`	`true`	마우스 떠나면 리셋

코드 예시

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>

접근성

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

Marquee AnimatedGradient