Ticker

Ticker scrolls its children in an endless horizontal loop, such as headlines, logos or prices. It renders the children twice in a row and animates the row's x position with motion. Hovering switches to a slower speed.

Import#

import { Ticker } from "@reactberry/system/blocks";

Usage#

import { Ticker } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

const headlines = ["Markets open higher", "New office in Leeds", "Q3 results published"];

export default function NewsTicker() {
  return (
    <Box py="s" skin="surface">
      <Ticker gap="l" fastDuration={30} slowDuration={90}>
        {headlines.map((headline) => (
          <Text key={headline} whiteSpace="nowrap">
            {headline}
          </Text>
        ))}
      </Ticker>
    </Box>
  );
}

Examples#

Direction#

Set direction="right" to scroll the other way.

Speed#

fastDuration and slowDuration set the seconds for one loop when idle and while hovered. Lower values scroll faster.

API#

Ticker#

children (required) are converted with React.Children.toArray and each wrapped in a Box. No other props are accepted and nothing is spread.

Accessibility#

• The second copy of the children is not aria-hidden, so assistive technology encounters the content twice.
• The animation does not check for reduced-motion preferences and cannot be paused.

Notes#

• One loop translates the row by half its measured width (measured with react-use-measure), then resets to 0, so each copy must be at least as wide as the visible area for a seamless loop.
• On hover start and end, the current pass finishes at the new speed before the loop restarts with the new duration.
• The root is width: 100%, height: 100%, and clips overflow.