Card Swipe Stack

Velocity-sensitive multi-card swipe stack with Euler angular rotation, circular velocity ring buffer, elastic last-card resistance, and zero external animation libraries.

CLI Installation

React

$pnpm dlxexhumaaddcard-swipe-stack--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

STAGE 01 // SWIPE STACK

Kinetic Card Swipe Stack

Drag to swipe cards → last card anchors with elastic resistance

MATHEMATICS

Big-Omega Guarantees

Guaranteed lower bound frame rate floor of 120Hz.

← SWIPE LEFTSWIPE RIGHT →

COMPILERS

Zero Framework Locks

Pure AST universal generation targeting 13 ecosystems.

← SWIPE LEFTSWIPE RIGHT →

KINETICS

Direct GPU Pipeline

Direct translate3d writes bypassing virtual DOM reconciliation.

← SWIPE LEFTSWIPE RIGHT →

SCROLL FOR NEXT SECTION↓

STAGE 02 // NEXT SECTION

Hardware Telemetry & Runtime Invariants

PASS-THROUGH ACTIVE

You have scrolled past the card stack. Drag cards to dismiss them — scroll always moves here naturally.

FRAME FLOOR

120 FPS

GESTURE BUFFER

Float64Array

HEAP ALLOC

Ω(1) ZERO

Parameters

6 Props

thresholdDistance

maxRotation

scaleStep

offsetStep

preventLastCardDismiss

loop

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

SwipeStackDemo.tsx

React (.tsx)

import React from 'react';
import { CardSwipeStack } from '@/components/ui/CardSwipeStack';

const ITEMS = [
  { id: 1, title: 'Big-Omega Guarantees', tag: 'MATHEMATICS', desc: 'Guaranteed lower bound frame rate floor of 120Hz with zero GC stutter.' },
  { id: 2, title: 'Zero Framework Locks', tag: 'COMPILERS', desc: 'Pure AST universal generation targeting 13 production ecosystems.' },
  { id: 3, title: 'Direct GPU Pipeline', tag: 'KINETICS', desc: 'Direct translate3d transform writes bypassing virtual DOM layout thrashing.' },
];

export default function SwipeStackDemo() {
  return (
    <div className="flex min-h-screen items-center justify-center p-8 bg-background">
      <CardSwipeStack
        thresholdDistance={120}
        maxRotation={20}
        scaleStep={0.05}
        offsetStep={14}
        preventLastCardDismiss={true}
        loop={false}
        className="w-full max-w-sm"
        items={ITEMS}
        onSwipe={(item, dir) => console.log('Swiped:', item.title, dir)}
        renderCard={(item) => (
          <div className="w-full rounded-2xl border border-border bg-card p-6 shadow-2xl backdrop-blur-md">
            <span className="text-3xs font-mono font-bold text-primary">{item.tag}</span>
            <h4 className="mt-2 text-lg font-bold text-foreground">{item.title}</h4>
            <p className="mt-1 text-xs text-muted-foreground leading-relaxed">{item.desc}</p>
            <div className="mt-4 flex items-center justify-between border-t border-border pt-3 font-mono text-3xs text-muted-foreground">
              <span>← SWIPE LEFT</span>
              <span>SWIPE RIGHT →</span>
            </div>
          </div>
        )}
      />
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Card Swipe Stack. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
thresholdDistance	number	120	Minimum drag distance to trigger a card dismiss.
maxRotation	number	20	Maximum angular rotation coupled to horizontal translation.
scaleStep	number	0.05	Scale reduction step between consecutive cards in the stack.
offsetStep	number	14	Vertical offset in pixels between consecutive cards in the stack.
preventLastCardDismiss	boolean	true	When enabled, the final card cannot be dismissed. Dragging it applies elastic rubber-band resistance and it snaps back to center on release.
loop	boolean	false	Infinite deck recycling: swiped cards smoothly swoop under the deck back to the bottom of the stack.

thresholdDistance

number

Minimum drag distance to trigger a card dismiss.

Default:120

maxRotation

number

Maximum angular rotation coupled to horizontal translation.

Default:20

scaleStep

number

Scale reduction step between consecutive cards in the stack.

Default:0.05

offsetStep

number

Vertical offset in pixels between consecutive cards in the stack.

Default:14

preventLastCardDismiss

boolean

When enabled, the final card cannot be dismissed. Dragging it applies elastic rubber-band resistance and it snaps back to center on release.

Default:true

loop

boolean

Infinite deck recycling: swiped cards smoothly swoop under the deck back to the bottom of the stack.

Default:false

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

CardSwipeStack.tsx

import * as React from 'react';
import * as CardSwipeStackPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface CardSwipeStackProps extends React.ComponentPropsWithoutRef<typeof CardSwipeStackPrimitive.CardSwipeStack> {
  className?: string;
}

export const CardSwipeStack = React.forwardRef<HTMLDivElement, CardSwipeStackProps>(
  ({ className, children, ...props }, ref) => (
    <CardSwipeStackPrimitive.CardSwipeStack
      ref={ref}
      className={clsx(
        'relative flex items-center justify-center min-h-[14.5rem] w-full',
        className
      )}
      {...props}
    >
      {children}
    </CardSwipeStackPrimitive.CardSwipeStack>
  )
);
CardSwipeStack.displayName = 'CardSwipeStack';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { CardSwipeStack } from '@/components/ui/CardSwipeStack'; const ITEMS = [ { id: 1, title: 'Big-Omega Guarantees', tag: 'MATHEMATICS', desc: 'Guaranteed lower bound frame rate floor of 120Hz with zero GC stutter.' }, { id: 2, title: 'Zero Framework Locks', tag: 'COMPILERS', desc: 'Pure AST universal generation targeting 13 production ecosystems.' }, { id: 3, title: 'Direct GPU Pipeline', tag: 'KINETICS', desc: 'Direct translate3d transform writes bypassing virtual DOM layout thrashing.' }, ]; export default function SwipeStackDemo() { return ( <div className="flex min-h-screen items-center justify-center p-8 bg-background"> <CardSwipeStack thresholdDistance={120} maxRotation={20} scaleStep={0.05} offsetStep={14} preventLastCardDismiss={true} loop={false} className="w-full max-w-sm" items={ITEMS} onSwipe={(item, dir) => console.log('Swiped:', item.title, dir)} renderCard={(item) => ( <div className="w-full rounded-2xl border border-border bg-card p-6 shadow-2xl backdrop-blur-md"> <span className="text-3xs font-mono font-bold text-primary">{item.tag}</span> <h4 className="mt-2 text-lg font-bold text-foreground">{item.title}</h4> <p className="mt-1 text-xs text-muted-foreground leading-relaxed">{item.desc}</p> <div className="mt-4 flex items-center justify-between border-t border-border pt-3 font-mono text-3xs text-muted-foreground"> <span>← SWIPE LEFT</span> <span>SWIPE RIGHT →</span> </div> </div> )} /> </div> ); }

Prop

Type

Default

Description

thresholdDistance

number

120

Minimum drag distance to trigger a card dismiss.

maxRotation

number

Maximum angular rotation coupled to horizontal translation.

scaleStep

number

0.05

Scale reduction step between consecutive cards in the stack.

offsetStep

number

Vertical offset in pixels between consecutive cards in the stack.

preventLastCardDismiss

boolean

true

When enabled, the final card cannot be dismissed. Dragging it applies elastic rubber-band resistance and it snaps back to center on release.

loop

boolean

false

Infinite deck recycling: swiped cards smoothly swoop under the deck back to the bottom of the stack.

import * as React from 'react'; import * as CardSwipeStackPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface CardSwipeStackProps extends React.ComponentPropsWithoutRef<typeof CardSwipeStackPrimitive.CardSwipeStack> { className?: string; } export const CardSwipeStack = React.forwardRef<HTMLDivElement, CardSwipeStackProps>( ({ className, children, ...props }, ref) => ( <CardSwipeStackPrimitive.CardSwipeStack ref={ref} className={clsx( 'relative flex items-center justify-center min-h-[14.5rem] w-full', className )} {...props} > {children} </CardSwipeStackPrimitive.CardSwipeStack> ) ); CardSwipeStack.displayName = 'CardSwipeStack';