Diagonal Marquee
Uilora Diagonal Marquee — three offset diagonal image ribbons scrolling at different speeds.
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 | U | Prefix text for badge labels. |
When to Use
Perfect for street-style blogs, edgy agencies, and Next.js applications that want a high-octane 'Diagonal Marquee' aesthetic. Use this gallery to communicate speed, confidence, and digital craft through technical marquees and high-speed scrolling.
Best Practices
Follow React best practices by pairing this with bold, professional typography. Maintain consistent spacing within your design system by keeping the marquee speed uniform. Optimize for performance by managed the image-repeat multiplier.
Why This Component Matters
Diagonal animations communicate energy, flow, and digital momentum. This Uilora-ready template helps you build an interface that feels alive and energetic, adding a distinct moving signature to your brand.
FAQ
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.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.