Rutmarquee

A seamless infinite scrolling marquee component for React.

Features

• Smooth infinite scrolling animation
• GPU-accelerated using CSS transforms
• Fully customizable via CSS
• TypeScript support
• Lightweight and performant

Installation

npm install rutmarquee
# or
pnpm add rutmarquee
# or
yarn add rutmarquee

Usage

import { Rutmarquee } from 'rutmarquee'

export default function App() {
  const texts = [
    '用户体验',
    '产品设计',
    '交互创新',
    '视觉美学',
  ]

  return (
    <Rutmarquee
      texts={texts}
      speed={0.5}
      separator="/"
      className="my-marquee"
    />
  )
}

Styles

Add the following CSS to customize the marquee:

.rutmarquee {
  overflow: hidden;
  border-y: 1px solid #e5e5e5;
  padding: 20px 0;
  background: #fafafa;
}

.rutmarquee-item {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #666;
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | texts | string[] | required | Array of text strings to display | | speed | number | 0.5 | Scrolling speed (pixels per frame) | | separator | string | '/' | Separator between items | | className | string | '' | Custom class for the container | | itemClassName | string | '' | Custom class for each item | | gap | number | 32 | Gap between items in pixels | | preLoadCount | number | 2 | Number of times to duplicate texts | | resetThreshold | number | 100 | Distance before reset trigger |

License

MIT