Display
带追踪光束的时间线
垂直时间线,发光光束随滚动追踪进度。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a vertical timeline section with a tracing beam effect. A vertical line runs down the center; a glowing segment of the line fills from top to bottom based on scroll position. Timeline items sit on alternating sides with a small dot where they connect to the line. Use a dark background, white headlines, and muted descriptions. Use CSS height interpolation tied to scroll or a simple JS scroll listener. Use Tailwind CSS. No images.
中文提示词
创建一个带追踪光束效果的垂直时间线区域。一条竖线沿中心向下延伸;其中一段发光线条根据滚动位置从上到下填充。时间线项目交替分布在两侧,连接处有一个小圆点。使用深色背景、白色标题和柔和描述。使用与滚动绑定的 CSS 高度插值或简单 JS 滚动监听。使用 Tailwind CSS。无图片。

Overview
使用发光滚动关联光束营造进程感和发现感的时间线。
Features
- 居中垂直时间线
- 滚动时填充的发光光束
- 左右交替项目
- 连接圆点
- 深色背景
- 滚动关联进度
Usage
适用于路线图、公司历史、流程步骤或产品演进。
Customization
修改 prompt 以:
- 为每个项目添加卡片悬停提升
- 将光束颜色改为品牌强调色
- 移动端使用水平布局
- 将日期作为大型字体标记