The Scroll-Fan Kinetic Deck is where tactile physics meets elegant curation. Designed to grab attention the moment it enters the frame, this component transforms a standard media stack into a sophisticated Radial Fan display.

Powered by a high-performance Intersection Observer, the deck remains perfectly stacked and tilted until the user scrolls it into view. At that moment, it spring-animates into a wide, interactive arc. It’s not just a gallery; it’s a physical interaction that rewards the user for exploring your page.

✨ Key Highlights

• Radial Arc Physics: Unlike linear sliders, this deck uses Radial Geometry Math to fan cards out along a curved path. This mimics the physical movement of a deck of cards held in a hand, creating a more organic, premium feel.

• Scroll-Triggered Intelligence: Integrated with a viewport-sensing engine. The "Reveal" effect happens automatically when the component is 30% visible, ensuring your motion design is always seen but never distracting.

• Mixed Media Capability: Every card is a powerhouse. Mix and match high-resolution Images with Looping MP4/MOV Videos. The engine handles silent autoplay and "Poster Image" fallbacks natively.

• Spring-Mass Interactions: Every movement is calculated using a Cubic-Bezier Spring model ($0.175, 0.885, 0.32, 1.275$). This provides that "bouncy" high-end tech feel when hovering or transitioning.

• Dynamic Readability Layer: Features a customizable Text Overlay Engine. A smart-gradient backdrop is placed behind your titles and descriptions, ensuring crystal-clear readability regardless of the media behind it.

• Performance First: Built with will-change: transform and hardware-accelerated translate3d layers to ensure 60FPS performance, even with multiple video cards active.

⚙️ Complete Design Control

• Layout Lab: Adjust the "Spread Gap" (how far they fan out), "Stack Angle" (the tilt when closed), and "Stack Offset" (the 3D depth appearance).

• Media Center: Full control over video looping, muting, and autoplay logic.

• Typography Suite: Fine-tune your Title and Description fonts, sizes, weights, and colors directly in the Framer sidebar.

• Shadow & Depth: Customize the "Shadow Intensity" and "Hover Scale" to define how much the cards "pop" when a user interacts with them.