Stacking Cards

Layered 3D sticky stack cards with progressive scroll depth scale decay and reverse scaling exit mechanics.

CLI Installation

React

$pnpm dlxexhumaaddstacking-cards--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

SCROLL DOWN TO ENGAGE MOMENTUM↓

LAYER // 01120 FPS rAF

Autonomous Stacking Card

Card stacks with dynamic mathematical scale decay. Zero layout thrashing or parent scroll locking.

topStart: 20pxtopIncrement: 28pxcardGap: 20pxminScale: 0.9reverseScale: true

LAYER // 02120 FPS rAF

Autonomous Stacking Card

Card stacks with dynamic mathematical scale decay. Zero layout thrashing or parent scroll locking.

topStart: 20pxtopIncrement: 28pxcardGap: 20pxminScale: 0.9reverseScale: true

LAYER // 03120 FPS rAF

Autonomous Stacking Card

Card stacks with dynamic mathematical scale decay. Zero layout thrashing or parent scroll locking.

topStart: 20pxtopIncrement: 28pxcardGap: 20pxminScale: 0.9reverseScale: true

LAYER // 04120 FPS rAF

Autonomous Stacking Card

Card stacks with dynamic mathematical scale decay. Zero layout thrashing or parent scroll locking.

topStart: 20pxtopIncrement: 28pxcardGap: 20pxminScale: 0.9reverseScale: true

Terminal scroll reached — reverse scaling applied

Parameters

6 Props

topStart

topIncrement

cardGap

scaleThreshold

minScale

reverseScale

// 02Usage

Quick Start & Consumer Example

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

FeaturesSection.tsx

React (.tsx)

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

const CARDS = [
  {
    tag: '01 / ARCHITECTURE',
    title: 'Kinetic Performance Engine',
    desc: 'Batched read-write cycles guaranteeing 120Hz V-Sync refresh with zero layout thrashing.',
    badge: '120 FPS',
  },
  {
    tag: '02 / MEMORY',
    title: 'Zero-Allocation Pipeline',
    desc: 'Persistent Float64Array typed buffers eliminating garbage collection pauses during scroll.',
    badge: 'Ω(1) HEAP',
  },
  {
    tag: '03 / ACCELERATION',
    title: 'Sub-Pixel Delta Clamping',
    desc: 'Hardware compositor layer promotion with deadband skipping for static cards.',
    badge: 'GPU ACCEL',
  },
  {
    tag: '04 / MOTION',
    title: 'Tiered Reverse Cascade',
    desc: 'Continuous C1 Hermite smoothstep cascade scaling as the stack crowns the viewport.',
    badge: 'HERMITE C1',
  },
];

export function FeaturesSection() {
  return (
    <section className="min-h-[180vh] py-20 px-4 bg-background text-foreground">
      <div className="max-w-2xl mx-auto mb-12 text-center">
        <h2 className="text-3xl font-bold">Kinetic Stacking Architecture</h2>
        <p className="text-muted-foreground text-sm mt-2">
          Scroll down to experience depth decay scaling and reverse exit mechanics.
        </p>
      </div>

      <StackingCards
        topStart={20}
        topIncrement={28}
        cardGap={20}
        scaleThreshold={150}
        minScale={0.9}
        reverseScale={true}
        className="max-w-2xl mx-auto"
      >
        {CARDS.map((card, idx) => (
          <div
            key={idx}
            className="rounded-2xl border border-border/80 bg-card/95 p-8 shadow-lg backdrop-blur-md min-h-[220px] flex flex-col justify-between"
          >
            <div>
              <span className="font-mono text-xs font-semibold text-muted-foreground">
                {card.tag}
              </span>
              <h3 className="text-2xl font-bold mt-2">{card.title}</h3>
              <p className="text-muted-foreground text-sm mt-2 leading-relaxed">
                {card.desc}
              </p>
            </div>
            <div className="pt-6 border-t border-border/40 flex justify-between items-center text-xs font-mono text-muted-foreground">
              <span>EXHUMA EKM</span>
              <span className="font-bold text-emerald-500">{card.badge}</span>
            </div>
          </div>
        ))}
      </StackingCards>
    </section>
  );
}

// 03API Contract

Props & Configuration

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

Prop	Type	Default	Description
topStart	number	20	Offset in pixels from top of viewport for the first sticky card.
topIncrement	number	28	Vertical stacking offset in pixels for each subsequent card.
cardGap	number	20	Vertical gap in pixels between cards in normal flow before they stack.
scaleThreshold	number	150	Scroll distance threshold over which progressive scaling activates.
minScale	number	0.9	Minimum scale applied to the base card in the stack.
reverseScale	boolean	true	Enable or disable reverse scaling exit cascade mechanics.

topStart

number

Offset in pixels from top of viewport for the first sticky card.

Default:20

topIncrement

number

Vertical stacking offset in pixels for each subsequent card.

Default:28

cardGap

number

Vertical gap in pixels between cards in normal flow before they stack.

Default:20

scaleThreshold

number

Scroll distance threshold over which progressive scaling activates.

Default:150

minScale

number

Minimum scale applied to the base card in the stack.

Default:0.9

reverseScale

boolean

Enable or disable reverse scaling exit cascade mechanics.

Default:true

// 04Source Code

Component Source

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

StackingCards.tsx

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

export interface StackingCardsProps extends React.ComponentPropsWithoutRef<typeof StackingCardsPrimitive.StackingCards> {
  className?: string;
}

export const StackingCards = React.forwardRef<HTMLDivElement, StackingCardsProps>(
  ({ className, children, ...props }, ref) => (
    <StackingCardsPrimitive.StackingCards
      ref={ref}
      className={clsx(
        'relative flex flex-col w-full max-w-2xl mx-auto',
        className
      )}
      {...props}
    >
      {children}
    </StackingCardsPrimitive.StackingCards>
  )
);
StackingCards.displayName = 'StackingCards';

// 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 { StackingCards } from '@/components/ui/StackingCards'; const CARDS = [ { tag: '01 / ARCHITECTURE', title: 'Kinetic Performance Engine', desc: 'Batched read-write cycles guaranteeing 120Hz V-Sync refresh with zero layout thrashing.', badge: '120 FPS', }, { tag: '02 / MEMORY', title: 'Zero-Allocation Pipeline', desc: 'Persistent Float64Array typed buffers eliminating garbage collection pauses during scroll.', badge: 'Ω(1) HEAP', }, { tag: '03 / ACCELERATION', title: 'Sub-Pixel Delta Clamping', desc: 'Hardware compositor layer promotion with deadband skipping for static cards.', badge: 'GPU ACCEL', }, { tag: '04 / MOTION', title: 'Tiered Reverse Cascade', desc: 'Continuous C1 Hermite smoothstep cascade scaling as the stack crowns the viewport.', badge: 'HERMITE C1', }, ]; export function FeaturesSection() { return ( <section className="min-h-[180vh] py-20 px-4 bg-background text-foreground"> <div className="max-w-2xl mx-auto mb-12 text-center"> <h2 className="text-3xl font-bold">Kinetic Stacking Architecture</h2> <p className="text-muted-foreground text-sm mt-2"> Scroll down to experience depth decay scaling and reverse exit mechanics. </p> </div> <StackingCards topStart={20} topIncrement={28} cardGap={20} scaleThreshold={150} minScale={0.9} reverseScale={true} className="max-w-2xl mx-auto" > {CARDS.map((card, idx) => ( <div key={idx} className="rounded-2xl border border-border/80 bg-card/95 p-8 shadow-lg backdrop-blur-md min-h-[220px] flex flex-col justify-between" > <div> <span className="font-mono text-xs font-semibold text-muted-foreground"> {card.tag} </span> <h3 className="text-2xl font-bold mt-2">{card.title}</h3> <p className="text-muted-foreground text-sm mt-2 leading-relaxed"> {card.desc} </p> </div> <div className="pt-6 border-t border-border/40 flex justify-between items-center text-xs font-mono text-muted-foreground"> <span>EXHUMA EKM</span> <span className="font-bold text-emerald-500">{card.badge}</span> </div> </div> ))} </StackingCards> </section> ); }

Prop

Type

Default

Description

topStart

number

Offset in pixels from top of viewport for the first sticky card.

topIncrement

number

Vertical stacking offset in pixels for each subsequent card.

cardGap

number

Vertical gap in pixels between cards in normal flow before they stack.

scaleThreshold

number

150

Scroll distance threshold over which progressive scaling activates.

minScale

number

0.9

Minimum scale applied to the base card in the stack.

reverseScale

boolean

true

Enable or disable reverse scaling exit cascade mechanics.

import * as React from 'react'; import * as StackingCardsPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface StackingCardsProps extends React.ComponentPropsWithoutRef<typeof StackingCardsPrimitive.StackingCards> { className?: string; } export const StackingCards = React.forwardRef<HTMLDivElement, StackingCardsProps>( ({ className, children, ...props }, ref) => ( <StackingCardsPrimitive.StackingCards ref={ref} className={clsx( 'relative flex flex-col w-full max-w-2xl mx-auto', className )} {...props} > {children} </StackingCardsPrimitive.StackingCards> ) ); StackingCards.displayName = 'StackingCards';