Marquee

import { Marquee } from '@hanzo/ui'

Default

A horizontal ticker, looping a short row of pills.

Fast

Accessible

Themeable

Composable

Fast

Accessible

Themeable

Composable

export function Default() {
  return (
    <Marquee>
      <XStack gap="$4" px="$4">
        {["Fast", "Accessible", "Themeable", "Composable"].map((label) => (
          <YStack key={label} px="$3" py="$2" rounded="$2" bg="$hover">
            {label}
          </YStack>
        ))}
      </XStack>
    </Marquee>
  )
}

Vertical

The same ticker running top to bottom inside a fixed frame.

One

Two

Three

One

Two

Three

export function Vertical() {
  return (
    <YStack height={160}>
      <Marquee vertical gap={12}>
        <YStack gap="$2" py="$2">
          {["One", "Two", "Three"].map((label) => (
            <YStack key={label} px="$3" py="$2" rounded="$2" bg="$hover">
              {label}
            </YStack>
          ))}
        </YStack>
      </Marquee>
    </YStack>
  )
}

Reverse and pause on hover

Runs backwards, and stops while a pointer sits on it.

Hover to pause

export function ReversePauseOnHover() {
  return (
    <Marquee reverse pauseOnHover repeat={4}>
      <XStack px="$3">Hover to pause</XStack>
    </Marquee>
  )
}

Types

export type MarqueeProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
  children: React.ReactNode
  /** How many times `children` is laid out per loop. */
  repeat?: number
  /** Run the track backwards. */
  reverse?: boolean
  pauseOnHover?: boolean
  vertical?: boolean
  /** Track travel, px/s. */
  speed?: number
  /** Space between copies, px — across the loop's seam too. */
  gap?: number
  style?: React.CSSProperties
}

Exports

Marqueetype MarqueeProps