Accessible Action

Interactive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth spring animations.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/accessible-action

npx layro-cli add @iurvish/accessible-action

npx layro-cli add @iurvish/accessible-action

bunx layro-cli add @iurvish/accessible-action

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React, { useState, useEffect, useMemo } from "react";
import { motion, useMotionValue, useTransform, PanInfo } from "framer-motion";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export interface CardStackItem {
  id?: string | number;
  color?: string;