Paper Shred Button

Hover Delete and a page appears above it. Click and the page clips away while paper strips draw in below. After a few seconds it resets so you can shred again.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/paper-shred-button

npx layro-cli add @iurvish/paper-shred-button

npx layro-cli add @iurvish/paper-shred-button

bunx layro-cli add @iurvish/paper-shred-button

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 type { Transition, Variants } from "motion/react";
import { motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

export type ShredState = "idle" | "preview" | "shredding" | "shredded";

const IDLE_SHADOW = "0px 0px 0px rgba(3,7,18,0)";
const PREVIEW_SHADOW = "0px 8px 18px rgba(153,27,27,.18)";
const QUICK_TRANSITION = { duration: 0.01 } as const;
const SHRED_COMPLETE_DELAY = 1500;
const REDUCED_MOTION_SHRED_COMPLETE_DELAY = 120;