Velocity Scroll
Uilora Velocity Scroll — high-octane marquee gallery driven by scroll momentum.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...4 image URLs] | Array of image URLs to display in marquee. |
| backgroundColor | string | #ffffff | #ffffff Background color (hex, rgb, or hsl). |
| borderColor | string | #000000 | #000000 Border color (hex, rgb, or hsl). |
| accentColor | string | #facc15 | #facc15 Accent color for marquee background (hex, rgb, or hsl). |
| titleText | string | UILORA | Large title text displayed in center. |
| imageLabelPrefix | string | UIL | Prefix text for image labels. |
When to Use
Perfect for street-style blogs, edgy agencies, and Next.js applications that want a high-octane 'Velocity' 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
High-velocity 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
QHow fast is it?
The marquee frequency is hard-coded for cinematic impact but can be adjusted in the internal Framer Motion motion controller to create slower, 'moody' loops.
QAre colors editable?
Absolutely, you can adjust both the `backgroundColor` and the primary `accentColor` (default yellow) to match your brand's specific high-intensity palette.
QWhat is 'Velocity Warp'?
The component features localized distortion peaks during scroll, simulating a real-time 'Stretch' effect common in high-end creative websites.
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.