Scrollable Card Stack

A scrollable card stack component that displays a list of cards in a vertical stack. It allows users to scroll through cards using mouse wheel, keyboard arrows, or touch gestures. It is suitable for showcasing a series of items in a compact, interactive format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/scrollable-card-stack

npx layro-cli add @educlopez/scrollable-card-stack

npx layro-cli add @educlopez/scrollable-card-stack

bunx layro-cli add @educlopez/scrollable-card-stack

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useMotionValue, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";

const SCROLL_TIMEOUT_OFFSET = 100;
const MIN_SCROLL_INTERVAL = 300;
const SCROLL_THRESHOLD = 20;
const TOUCH_SCROLL_THRESHOLD = 100;
const SCALE_FACTOR = 0.08;
const MIN_SCALE = 0.08;
const MAX_SCALE = 2;
const HOVER_SCALE_MULTIPLIER = 1.02;