Card Circular Scroll
This component creates a smooth scroll-based card fan animation. Cards start stacked at the center and expand into a circular spread as the user scrolls.
It’s built for visual storytelling, feature highlights, and interactive showcases.
Key Features
Scroll-driven animation (no manual triggers needed)
Smooth spring motion for natural movement
Fully responsive with automatic scaling
Supports unlimited cards
Optional image mode (image fills card, hides text)
Customizable colors and text styles
Adjustable initial stack angle
Clean center alignment with mathematically correct positioning
Customization Options
Card width and height
Background color
Initial rotation angle
Card list (color, text color, or image per card)
Preview state for canvas testing
How It Works
Cards are anchored at the center and rotate around their bottom-left corner
Scroll progress drives rotation from stacked → full circle
A hidden scroll layer controls animation smoothly
Layout auto-adjusts to fit any screen size
Use Cases
Feature showcases
Product highlights
Portfolio presentations
Interactive storytelling sections
Landing page hero interactions
Saadat Ali
