Luminous Path
Glowing center beam timeline with scroll progress.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.