Luminous Path
Glowing center beam timeline with scroll progress.
Main Features of Luminous Path
How to Use Luminous Path in Next.js
Installation Guide for Luminous Path
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{year: string, title: string, desc: string, category: string}> | [] | Array of timeline items with year, title, description, and category. |
backgroundColor | string | #020617 | Background color (hex, rgb, or hsl). |
beamColor | string | #3b82f6 | Center beam color. |
nodeColor | string | #3b82f6 | Timeline node color. |
cardBgColor | string | rgba(15, 23, 42, 0.5) | Card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
yearColor | string | #60a5fa | Year text color. |
titleColor | string | #ffffff | Title text color. |
textColor | string | #94a3b8 | Text color. |
Related Components
When to Use
Ideal for company history sections, product roadmaps, and Next.js applications that want a high-fidelity, futuristic feel. Use this React component for a vertical timeline with a glowing center beam that tracks the user's scroll progress.
Best Practices
Maintain consistent spacing within your design system by using it on dark or deep navy backgrounds. Follow React best practices by pairing it with clear, monospaced typography for 'Year' indicators. Optimize for performance by using hardware-accelerated transforms for the beam growth.
Why This Component Matters in Modern UI Development
Luminous paths create a sense of momentum and growth. This production-ready UI component helpsคุณ build an interface that feels atmospheric and structured, guiding the user through your brand's journey with visual precision.
Frequently Asked Questions
QHow does the scroll tracking work?
The center beam expand vertically as the user scrolls, visually connecting each timeline event while providing elegant feedback on progress.
QCan I adjust the beam color?
Yes, the `beamColor` and `nodeColor` props allow you to set the primary glow color to match your brand's highlight color.
QIs the layout responsive?
Absolutely, on mobile the cards and beam stay centered in a single-column layout that is easy to navigate with one hand.