← Back to Prompts
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。无图片。
Timeline with Tracing Beam screenshot 1
## 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