Glass Helix
Glass helix timeline with rotating cards.
Main Features of Glass Helix
How to Use Glass Helix in Next.js
Installation Guide for Glass Helix
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 | #0f172a | Background color (hex, rgb, or hsl). |
cardBgColor | string | rgba(255,255,255,0.05) | Card background color. |
borderColor | string | rgba(255,255,255,0.1) | Border color. |
accentColor | string | #a855f7 | Accent color for hover effects. |
Related Components
When to Use
Excellent for modern tech brands, AI platforms, and Next.js applications that want a high-fidelity, immersive aesthetic. Use this React component for a glassmorphic timeline where cards rotate and blur into place along a glowing central helix.
Best Practices
Maintain consistent spacing within your design system by using it on dark or textured backgrounds. Follow React best practices by pairing it with high-contrast font colors. Optimize for performance by using hardware-accelerated transforms and `backdrop-filter` sparingly.
Why This Component Matters in Modern UI Development
Glassmorphic helixes create a sense of depth and technical sophistication. This production-ready UI component helpsคุณ build an interface that feels lightweight and premium, turning a standard timeline into a 3D-feeling experience.
Frequently Asked Questions
QHow is the glass effect made?
It uses semi-transparent backgrounds and `backdrop-blur` filters to simulate physical frosted glass panes.
QDo the cards rotate?
The cards feature a subtle perspective rotation that shifts as the user scrolls, creating an immersive sense of 3D depth along the timeline.
QIs it mobile responsive?
Yes, the 3D rotations are typically simplified on mobile to ensure legibility while maintaining the premium glass aesthetic.