FlowingMenu
flowing-menu竖排流动菜单 · 指针近边缘判进/离向揭幕 + 循环跑马灯(文字/图片)(零依赖去 gsap·CSS keyframes + transition·token·reduced-motion)
用法
基础用法
竖排菜单项，指针从最近的上/下边缘滑入时一块跑马灯（文字 + 图片）从同侧揭幕铺满整行，离开时退回。需放在定高容器内。
tsx
<div className="h-80 overflow-hidden rounded-xl border">
<FlowingMenu
items={[
{ link: "#discover", text: "Discover", image: "/a.jpg" },
{ link: "#build", text: "Build", image: "/b.jpg" },
{ link: "#ship", text: "Ship", image: "/c.jpg" },
]}
/>
</div>纯文字（无图片）
item 不传 image 时跑马灯只跑文字，用一截小横杠分隔，不渲染图片块。
tsx
<FlowingMenu
items={[
{ link: "#home", text: "首页" },
{ link: "#products", text: "产品" },
{ link: "#about", text: "关于" },
]}
/>速度与份数
speed 越大跑马灯越慢；repeat 控制单项内重复份数，撑满并保证无缝循环（最小 2）。
tsx
<FlowingMenu items={items} speed={30} repeat={6} />何时用
需要一组竖排大字菜单项、悬停某项时从指针进入方向揭出一条文字/图片跑马灯的壁纸级炫技导航时用，适合作品集/品牌站的全屏目录。它是「逐项揭幕跑马灯」风格；要全屏铺开胶囊用 BubbleMenu，要展开成卡片用 CardNav，要规范多级导航用 NavigationMenu/NavMenu。
导入
ts
import { FlowingMenu } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items * | FlowingMenuItem[] | — | 菜单项列表 |
| speed | number | 18 | 跑马灯走完一整屏的秒数，越大越慢 |
| repeat | number | 4 | 单个文字块里重复的份数（撑满并保证无缝循环） |
FlowingMenuItem:{ link, text, image? }；text同时作主标题与揭幕跑马灯文字，image留空则只跑文字不渲染图片块。 还继承ComponentPropsWithoutRef<"nav">（除children），可透传className/style等。
禁忌 / 坑
- 根 nav 需放在有明确高度且
overflow-hidden的容器里，逐项揭幕才有纵向空间且跑马灯不溢出。 - reduced-motion 下跑马灯/揭幕动效降级。
- 暂无其他已知坑。
相关
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<div className="h-80 overflow-hidden rounded-xl border border-border">
<FlowingMenu
items={[
{ link: "#discover", text: "Discover", image: "/a.jpg" },
{ link: "#build", text: "Build", image: "/b.jpg" },
]}
speed={18}
repeat={4}
/>
</div>