Card Cascade

Card Cascade is an image interaction in the UI HUB image interactions collection. A scroll-driven 3D arc cascade of six technical-skill cards arranged on a giant right-side semi-circle. As the page or internal container scrolls, cards travel along the arc toward a focal centre and tilt to the arc tangent, with eased card-to-card interpolation so motion glides instead of tracking scroll linearly.

The component is driven by 2 documented props (preview, scrollerRef), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: Semi-circle arc transform math (R·cos/R·sin + tangent rotation); rAF-throttled passive scroll handler with cleanup; Deterministic preview auto-advance via cancelAnimationFrame.

Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.