Components

Marquee

A seamless infinite belt of content: children are duplicated (the copy is `aria-hidden`) and the track translates exactly one copy's width per loop, so the seam never shows.

SnapDriftGlideLumenQuietGlow

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add marquee

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Marquee } from "@lumora/ui/components/marquee";
// or from the barrel:
import { Marquee } from "@lumora/ui";

Props worth knowing

speed is travel in px per second (default 48); direction flips the belt; pauseOnHover stops it under the cursor; fade soft-masks both edges; gap spaces the items. The duplicate loop copy is aria-hidden. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.