Layered Dynamic Card Swiper

This is a Layered Dynamic Card Swiper. It replaces linear carousels with a 3D-stacked deck logic. Its function is to provide a high-fidelity interaction for decision-based interfaces (like discovery or voting), utilizing data attributes to trigger complex spatial transitions between card groups.

Specs

• Weight: ~4 KB. No external libraries.
• Performance: High. Uses transform for all motion, ensuring 60 FPS on mobile devices.
• Theming / Customization: Easily managed via CSS classes and vmin units for proportional scaling.
• Responsiveness: Fluid. Built on vmin units, ensuring the card stack scales relative to the smallest screen dimension.
• Graceful Degradation: Fails to a static stack of cards if JavaScript is disabled. Transitions rely on CSS, but state switching requires script execution.

Anatomy

The component functions as a state-aware container for stacked groups.

• HTML (The Skeleton): A .card-swiper wrapper housing .card-groups. Each group contains .big-card and .little-card nodes.
• CSS (The Skin): Sets a 5/7 aspect ratio. Absolute positioning stacks cards on the Z-axis. Uses cubic-bezier(.05,.43,.25,.95) to give the cards a “snappy” yet smooth physical weight.
• JS (The Nervous System): The logic handles the transition cycle. It monitors the activeIndex and updates the data-status of both the outgoing and incoming card groups to orchestrate the “exit” and “entry” animations.

Logic

The intelligence of the system lies in the “Intermediate State Injection.”

nextGroup.dataset.status = "becoming-active-from-before";

setTimeout(() => {
  nextGroup.dataset.status = "active";
  activeIndex = nextIndex;
});

By setting an intermediate status (becoming-active-from-before) before moving to active, the script resets the element’s position (via transition: none) without a visible frame jump. The setTimeout with a zero delay forces the browser to register the reset before the transition to the final position starts. This prevents cards from “sliding” back from a previous position when they are re-added to the stack.

Feel

Tactile and responsive. The hover effect, where cards fan out radially, creates a sense of physical exploration. Clicking “Love” or “Hate” triggers a satisfying ejection of the current deck, replaced by a fresh stack that scales up from the background. It mimics the behavior of physical card-dealing with digital precision.