Velocity Scroll
High-velocity scrolling gallery with momentum effects.
Main Features of Velocity Scroll
How to Use Velocity Scroll in Next.js
Installation Guide for Velocity Scroll
Props
Customize the component with these 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 | STREET | Large title text displayed in center. |
imageLabelPrefix | string | FIG | Prefix text for image 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
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.