SpotlightCard

@hua-labs/ui/advanced

v1.1.0

Pro

Pro 플랜 컴포넌트

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

웨이팅리스트 등록

A premium card component that displays a spotlight effect following the mouse cursor. Perfect for dark theme landing pages, feature showcases, and premium UI designs.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

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

라이브 데모

Feature Card Grid

Pro

Move your mouse over the cards

Fast

Optimized performance

Secure

Enterprise-grade security

Real-time

Instant updates

Colored Spotlight

Customize color with spotlightColor

Blue

Blue spotlight

Purple

Purple spotlight

Green

Green spotlight

Large Spotlight

spotlightSize=500, gradient=false

Large Spotlight

Dramatic effect with larger spotlight area.

Hero Section Example

Full-width promotional card

New Feature Launch

Experience faster, safer, and smarter workflows.

Props

이름	타입	기본값	설명
`spotlightColor`	`string`	`"rgba(255, 255, 255, 0.1)"`	Color of the spotlight effect
`spotlightSize`	`number`	`300`	Size of the spotlight in pixels
`gradient`	`boolean`	`true`	Enable subtle gradient overlay
`gradientFrom`	`string`	`"rgba(255, 255, 255, 0.05)"`	Gradient start color
`gradientTo`	`string`	`"transparent"`	Gradient end color
`dot`	`string`	-
`style`	`React.CSSProperties`	-
`children`	`ReactNode`	-	콘텐츠

코드 예시

기본 사용법

tsx

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

export function FeatureCard() {
  return (
    <SpotlightCard dot="p-6">
      <div className="text-3xl mb-3">🚀</div>
      <h3 className="font-bold text-white mb-2">Fast Performance</h3>
      <p className="text-sm text-gray-400">
        Optimized for quick loading
      </p>
    </SpotlightCard>
  );
}

Custom Colors

tsx

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

export function ColorfulSpotlight() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <SpotlightCard
        spotlightColor="rgba(59, 130, 246, 0.15)"
        dot="p-6"
      >
        <h3 className="text-blue-400 font-bold">Blue</h3>
      </SpotlightCard>

      <SpotlightCard
        spotlightColor="rgba(168, 85, 247, 0.15)"
        dot="p-6"
      >
        <h3 className="text-purple-400 font-bold">Purple</h3>
      </SpotlightCard>
    </div>
  );
}

Related Components

GlowCard

Card with mouse-following glow effect

TiltCard

Card with 3D tilt effect

접근성

•Screen Reader: 카드 컨테이너에 aria-label을 지원하여 보조 기술에 설명적인 레이블을 제공합니다.
•포커스: 카드 또는 내부 인터랙티브 요소가 키보드 포커스를 받으면 시각적 포커스 링이 표시됩니다.
•시각적 효과 전용: 스포트라이트 효과는 순수 장식이며 정보를 전달하지 않으므로 콘텐츠 접근성이 유지됩니다.

TiltCardPro HorizontalScroll