Diagonal Marquee
Diagonal marquee gallery with scrolling text effects.
Main Features of Diagonal Marquee
How to Use Diagonal Marquee in Next.js
Installation Guide for Diagonal Marquee
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
row1Images | string[] | [...10 image URLs] | Array of image URLs for first row. |
row2Images | string[] | [...10 image URLs] | Array of image URLs for second row. |
row3Images | string[] | [...10 image URLs] | Array of image URLs for third row. |
backgroundColor | string | #e0e0e0 | #e0e0e0 Background color (hex, rgb, or hsl). |
badgePrefix | string | A | Prefix text for badge labels. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhy 'Diagonal'?
The grid is tilted at a cinematic angle to create a sense of unconventional digital flow and high-speed energy common in high-end streetwear and creative labs.
QAre colors editable?
Absolutely, you can adjust both the `backgroundColor` and the primary badge accents to match your brand's specific high-intensity palette.
QHow does the scroll work?
The component features localized horizontal scroll containers that move in 'Opposite' directions during scroll, creating an 'Immersive' physical movement effect.