Skip to content
Components

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 "@instruments/materia-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.

  • Honours prefers-reduced-motion automatically via the shared .animate-marquee utility, which disables the animation.

Props

PropTypeDefaultDescription
children(required)string
classNamestring
speedPxPerSecnumber40

Scroll speed in px/sec.

gapnumber24

Gap in px between the two copies.

Also exports

  • interfaceMarqueeTextProps

Composition

Builds on

Flex

Used by

ProductCard