Marquee
동일한 항목을 두 번 배치해 연속 흐름을 만들되 두 번째 복사본은 aria-hidden으로 제거합니다. 사용자는 Pause/Resume 버튼으로 움직임을 멈출 수 있고 prefers-reduced-motion에서는 애니메이션이 자동으로 정지됩니다.
@neumorphism-ui/marquee미리보기
접근성Base UIReact 19Tailwind 4
설치
설치: marquee
npx shadcn@latest add @neumorphism-ui/marqueeCLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.
Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.
사용법
Import
Marquee import 코드
"use client";
import { Marquee } from "@/components/ui/marquee";Example
Marquee 사용 코드
export default function Example() {
return <Marquee items={["접근성", "Base UI", "React 19", "Tailwind 4"]} label="지원 기술" pauseLabel="애니메이션 일시 정지" resumeLabel="애니메이션 다시 시작" />;
}API 레퍼런스
| 컴포넌트 | 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|---|
Marquee | items필수 | readonly ReactNode[] | — | 순환해서 보여줄 항목 목록입니다. |
Marquee | duration | number | 24 | 한 주기의 애니메이션 시간을 초 단위로 지정합니다. |
Marquee | defaultPaused | boolean | false | 처음부터 정지된 상태로 시작할지 지정합니다. |
Marquee | label | string | "Scrolling content" | 반복 정보 영역의 접근 가능한 이름입니다. |
Marquee | pauseLabel / resumeLabel | string | — | 동작 제어 버튼의 접근 가능한 이름을 지역화합니다. |
접근성
- 01
두 번째 시각적 복사본은 aria-hidden으로 제외해 스크린 리더가 같은 항목을 두 번 읽지 않게 합니다.
- 02
사용자가 직접 일시 정지할 수 있는 버튼을 항상 제공하고 현재 상태를 aria-pressed로 노출합니다.
- 03
prefers-reduced-motion에서는 이동 애니메이션을 제거하고 첫 번째 항목 집합만 표시합니다.