Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#f59e0b" | Accent color for label badges and section header |
| items | Array<{ image: string; label: string }> | DEFAULT_ITEMS | Gallery items — each needs an image URL and a label string |
| intensity | number | 22 | Maximum skew angle in degrees at peak scroll velocity |
When to Use
Perfect for photography portfolios, fashion editorials, and any gallery that should feel kinetic and alive. The velocity response makes scrolling feel physical.
Best Practices
Keep intensity between 15–28 degrees. Higher values are dramatic but can feel nauseating on desktop. Works best with portrait-ratio images in a 2–3 column grid.
Why This Component Matters
Velocity-driven transforms are rare in production UI — most devs only reach for scroll position. Using `useVelocity` signals deep motion craft and creates a sensation no static gallery can match.
FAQ
QHow is velocity measured?
Framer Motion's `useVelocity` tracks pixels-per-second of `scrollY`. Fast flick = high velocity = maximum skew.
QWill it snap back when I stop scrolling?
Yes — the `useSpring` wrapper (stiffness: 280, damping: 45) returns everything to 0 with a quick, snappy spring.
QCan I add more images?
Yes — pass any number of items. The grid auto-wraps into the configured columns.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Image Ribbons
Three horizontal image strips drifting in alternating directions as you scroll — rows counter-move to create depth and motion.