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.
What is Card Cascade?
A scroll-driven 3D semi-circular cascade of technical-skill cards with tangent tilt and per-card icon rails.
Card Cascade at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React, React Icons and Lucide React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 2
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Card Cascade works
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 active card rotates forward on its X axis to face the viewer while a vertical icon rail lists that card's skills. Preview mode auto-advances deterministically (ease, then hold, looping) because there is no page scroll. Mobile shrinks the arc radius, card size and rail.
Technical information for Card Cascade
| Category | Image Interactions |
|---|---|
| Libraries | React, React Icons and Lucide React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| State change | cards stacked along the far arc with the header hidden to active card facing forward at the arc apex with its skill rail expanded |
| Props | 2 configurable |
| Usage example | Included on this page |
What Card Cascade requires
- Semi-circle arc transform math (R·cos/R·sin + tangent rotation)
- rAF-throttled passive scroll handler with cleanup
- Deterministic preview auto-advance via cancelAnimationFrame
- useIsMobile-driven arc radius and clamp() card sizing
- 3D perspective stage with preserve-3d cards
How to use Card Cascade
- Install the dependencies: npm install react-icons and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <CardCascade /> in your page using that import path.
- Pass any of the 2 documented props to change colours, density, speed or behaviour.
Card Cascade questions
What is Card Cascade?
A scroll-driven 3D semi-circular cascade of technical-skill cards with tangent tilt and per-card icon rails.
How does Card Cascade work?
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 active card rotates forward on its X axis to face the viewer while a vertical icon rail lists that card's skills. Preview mode auto-advances deterministically (ease, then hold, looping) because there is no page scroll. Mobile shrinks the arc radius, card size and rail.
Which category does Card Cascade belong to?
Card Cascade is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the preview prop do in Card Cascade?
Auto-advance through the cards when rendered inside a fixed-height preview box (no page scroll drives it). It defaults to false.
What does the scrollerRef prop do in Card Cascade?
Optional internal scroll container that drives the cascade in fullscreen mode; falls back to window scroll. It defaults to undefined.
Is Card Cascade free to use?
Card Cascade is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Card Cascade use?
Card Cascade uses React, React Icons and Lucide React and is styled with Tailwind CSS.
What does Card Cascade need to run?
Card Cascade needs Semi-circle arc transform math (R·cos/R·sin + tangent rotation), rAF-throttled passive scroll handler with cleanup, Deterministic preview auto-advance via cancelAnimationFrame and useIsMobile-driven arc radius and clamp() card sizing.