Marquee

@hua-labs/ui

v1.1.0

무한 스크롤 애니메이션을 제공하는 컴포넌트입니다. 로고, 후기, 반복 콘텐츠 표시에 적합합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

라이브 데모

로고 캐러셀

React

Next.js

TypeScript

Tailwind

Framer

Vercel

역방향

DesignDevelopDeployScaleIterate

FastReliableSecureModernBeautiful

세로 스크롤

최고의 서비스였습니다!

— User 1

정말 추천합니다

— User 2

믿을 수 있어요

— User 3

다시 이용할게요

— User 4

완벽해요!

— User 5

Props

이름	타입	기본값	설명
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	이동 방향
`speed`	`number`	`50`	속도 (px/s)
`pauseOnHover`	`boolean`	`true`	호버시 일시정지
`pauseOnClick`	`boolean`	`false`	클릭시 일시정지 토글
`gap`	`number`	`16`	아이템 간격 (px)
`gradient`	`boolean`	`true`	양쪽 페이드 그라디언트 표시
`gradientColor`	`string`	`"hsl(var(--background))"`	그라디언트 색상 (테마 자동 적용)
`gradientWidth`	`number`	`100`	그라디언트 너비 (px)

코드 예시

docs:common.basicUsagetsx

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

<Marquee speed={40} gradient>
  {logos.map(logo => (
    <LogoCard key={logo.name} {...logo} />
  ))}
</Marquee>

docs:components.marquee.demo.reverseDirectionCodetsx

<Marquee direction="right" speed={30}>
  {items.map(item => <ItemCard {...item} />)}
</Marquee>

docs:components.marquee.demo.verticalScrollCodetsx

<Marquee direction="up" speed={30} gradient={false}>
  {testimonials.map(t => <TestimonialCard {...t} />)}
</Marquee>

접근성

•호버시 일시정지: 사용자가 호버하면 애니메이션이 일시정지되어 내용을 읽을 수 있습니다
•복제된 콘텐츠: 복제된 아이템은 aria-hidden으로 표시됩니다

Parallax GlowCardPro