Ribbon Scroll
Uilora Ribbon Scroll — three rotated editorial bands drifting in opposite directions on scroll.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| band1 | string[] | [...6 image URLs] | Images for the top angled band (scrolls left). |
| band2 | string[] | [...6 image URLs] | Images for the middle reverse band — taller portrait cards (scrolls right). |
| band3 | string[] | [...6 image URLs] | Images for the bottom angled band (scrolls left). |
| backgroundColor | string | #080808 | Background color (hex, rgb, or hsl). |
| angle | number | 12 | Diagonal tilt angle in degrees for the outer bands. |
When to Use
Perfect for fashion brands, creative agencies, and editorial-style portfolios. The three-band layout works best for presenting 18+ images in a single impactful viewport.
Best Practices
Use portrait images for the tall middle band and landscape for outer bands. Keep images tonally consistent per band. Increase `angle` for more dramatic tension.
Why This Component Matters
Diagonal motion fights the left-right reading pattern, creating productive tension. Alternating scroll directions add controlled chaos that signals creative confidence.
FAQ
QCan I change scroll speed per band?
Adjust the useTransform output ranges for x1, x2, x3 in the component.
QHow many images per band?
Each array is tripled internally — 4–8 per band gives a good loop without obvious repetition.
QCan I add a 4th band?
Yes — add a Band component with a new useTransform for x4 and pick an angle.
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.