Neo-Brutal Scroll
Neo-brutal scroll timeline with sticky stack cards.
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 | #E0E7FF | Background color (hex, rgb, or hsl). |
| borderColor | string | #000000 | Border color. |
| cardBgColor | string | #ffffff | Card background color. |
| textColor | string | #000000 | Text color. |
When to Use
Perfect for high-energy brands, street-wear e-commerce, and experimental Next.js portfolios. Use this React component for a bold, neo-brutalist timeline with sticky stacking cards that pile onto each other during scroll.
Best Practices
Follow React best practices by pairing this with thick, monospaced typography and saturated primary colors. Maintain scalable component architecture by keeping card content concise. Optimize for performance by using efficient `position: sticky` logic.
Why This Component Matters
Neo-brutalist design is a powerful visual statement of raw power and structural honesty. This production-ready UI component helpsคุณ build an interface that feels solid and unyielding, adding a unique architectural signature to your project's roadmap.
FAQ
QDo the cards actually stack?
Yes, each card 'sticks' to the top as the user scrolls, creating a dense, physical-feeling stack of historical events.
QCan I customize the borders?
The component uses signature chunky black borders (`borderColor`), which can be adjusted to match your brand's primary dark color.
QWhat happens on mobile?
The stacking effect is preserved while adjusting the card scale to ensure readability and smooth vertical scrolling on touch devices.
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.