Editorial Deck

A stacked editorial story deck. Drag the front card and it springs back into the pile.

Installation

terminal

pnpm dlx layro-cli add @iurvish/editorial-deck

npx layro-cli add @iurvish/editorial-deck

npx layro-cli add @iurvish/editorial-deck

bunx layro-cli add @iurvish/editorial-deck

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

Code

Demo

"use client";

import { useRef, useState } from "react";
import { motion, useReducedMotion, type PanInfo } from "motion/react";

export type EditorialDeckCard = {
  id: string;
  date: string;
  title: string;
  image: string;
  tint: string;
};

export const DEFAULT_CARDS: EditorialDeckCard[] = [