MarqueeText

A clipped single-line label that becomes a hover-triggered marquee when its text is wider than the clip box, and stays a plain truncated label when it fits. On overflow it renders a duplicate aria-hidden copy and scrolls the pair for a seamless loop; a ResizeObserver on both the clip box and the text node re-measures on resize and on content change, setting --marquee-duration / --marquee-shift. Extracted from product-card-category's CategoryLabel.

Honed limestone porcelain — a category label that overflows its column

Usage

import { MarqueeText, MarqueeTextProps } from "@desk/ui/components/marquee-text";

Best practices

The scroll is gated on a .group ancestor's hover (the .animate-marquee utility runs only under .group:hover, plus a data-play="running" escape hatch) — a lone MarqueeText will not animate on its own hover. Wrap it in a .group element (typically the hoverable card) to trigger the reveal.
It only scrolls when the text overflows; short text that fits stays a static clipped label with no duplicate copy and no animation.
Honors prefers-reduced-motion automatically via the shared .animate-marquee utility, which disables the animation.

Props

Prop	Type	Default	Description
children(required)	`string`
className	`string`
speedPxPerSec	`number`	`40`	Scroll speed in px/sec.
gap	`number`	`24`	Gap in px between the two copies.

Also exports

interfaceMarqueeTextProps

Composition

Used by

ProductCard