Marquee

无限滚动的横向/纵向跑马灯，支持悬停暂停、反向、调速与边缘渐隐。

#marquee #scroll #logos

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

MarqueeProps

同时支持以下类型的全部属性： React.ComponentProps<"div">

属性	类型	默认值	说明
vertical	`boolean`	`false`	Scroll vertically instead of horizontally
reverse	`boolean`	`false`	Reverse the scroll direction
pauseOnHover	`boolean`	`true`	Pause while hovered or focused
duration	`number`	`40`	Seconds for one full loop at speed 1
speed	`number`	`1`	Speed multiplier, 2 is twice as fast
gap	`string`	`"1rem"`	Gap between items, any CSS length
repeat	`number`	`4`	How many times the content is repeated to fill the strip
fade	`boolean`	`true`	Fade the edges with a mask
fadeSize	`number`	`12`	Size of the edge fade, in percent of the strip

安装

$ npx shadcn@latest add https://chromotion.dev/r/marquee.json

同类组件

Word Reveal

标题文字滚动进入视野后逐词模糊、位移淡入，可重播。

Tilt Card

跟随指针的 3D 倾斜卡片，带高光反光，移开后平滑复位。

Text Scramble

文字先随机乱码闪烁再逐字还原，悬停或聚焦时重新播放。