Neo-Brutal Scroll
Neo-brutal scroll timeline with sticky stack cards.
Main Features of Neo-Brutal Scroll
How to Use Neo-Brutal Scroll in Next.js
Installation Guide for Neo-Brutal Scroll
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 | #E0E7FF | Background color (hex, rgb, or hsl). |
borderColor | string | #000000 | Border color. |
cardBgColor | string | #ffffff | Card background color. |
textColor | string | #000000 | Text color. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.