Display
Timeline with Tracing Beam
A vertical timeline with a glowing beam that traces progress as you scroll.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一个带追踪光束效果的垂直时间线区域。一条竖线沿中心向下延伸;其中一段发光线条根据滚动位置从上到下填充。时间线项目交替分布在两侧,连接处有一个小圆点。使用深色背景、白色标题和柔和描述。使用与滚动绑定的 CSS 高度插值或简单 JS 滚动监听。使用 Tailwind CSS。无图片。

Overview
A timeline that uses a glowing scroll-linked beam to create a sense of progression and discovery.
Features
- Vertical centered timeline line
- Glowing beam fills on scroll
- Alternating left/right items
- Connection dots
- Dark background
- Scroll-linked progress
Usage
Use for roadmaps, company history, process steps, or product evolution.
Customization
Modify the prompt to:
- Add card hover lift on each item
- Change beam color to brand accent
- Use horizontal layout on mobile
- Add dates as large typographic markers