ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Shredder Delete, animated React component

Delete files by feeding them to an office shredder. Drag a document onto the machine, or press Delete on a focused row: it becomes a printed sheet, the cutters pull it down through the throat and it comes out as thin curling strips that flutter into a smoked bin and pile up. Undo within five seconds runs the machine in reverse. It sounds like one too: the motor, the cutters and the strips rustling are driven by the machine itself, so what you hear is what you see. An Auto switch in the card plays the whole thing by itself.

  • Free
  • For Fun
  • Spring

Hums while the motor runs, with a pitch that follows its speed, chews while paper goes through the cutters and rustles as the strips flutter into the bin. Undo runs it in reverse. Everything is driven by the machine itself, so it stays in step with the picture. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Documents

4 items
  • Q3-report.pdf2.4 MB
  • Offer-letter.docx86 KB
  • Budget-2026.xlsx412 KB
  • Launch-deck.key18.6 MB

Drag a file into the shredder, or press Delete.

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseShreds a file by itself, undoes it, then shreds another, until the visitor touches the card. The Auto switch in the card turns it back on or off. Never runs under reduced motion and pauses while the card is off screen.
volumenumber0.7How loud the shredder is, 0 to 1.
classNamestring—Extra classes for the outer card.
enableSoundbooleantruePlays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  3. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/shredder-delete
  4. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    shredder-delete/
    index.ts
    shredder-delete.tsx
    shredder-sound.ts
  5. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  6. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { ShredderDelete } from "@/components/shredder-delete";

export default function Page() {
  return (
    <main>
      <ShredderDelete />
    </main>
  );
}

Shredder Delete questions

Does it make sound, and how do I turn it off?

Hums while the motor runs, with a pitch that follows its speed, chews while paper goes through the cutters and rustles as the strips flutter into the bin. Undo runs it in reverse. Everything is driven by the machine itself, so it stays in step with the picture. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More for fun