Ransom Note

Home LabRansom Note

Ransom Note

Jul 22, 2026

•

0 views

Loading component...

react

typescript

tailwindcss

I always liked the ransom-note look, where every letter is torn from a different magazine and taped down crooked. So I took a set of real cut-out letters and made it into something you can type with. Each character picks a random paper scrap, then gets a small random tilt, bounce and size so the line reads like it was assembled by hand, not typed.

Move the cursor across the note to magnetize each scrap toward it, click a letter to swap it for another cutout of the same character, or drag one around. Type your own note below, tune how messy it is, and re-roll to shuffle the scraps.

Playground

Text

Chaos

Tilt8°

Bounce0.06

Layout

Scale mix0.12

Spacing0.20

Size78px

import { RansomNoteCard } from "./ransom-note-card";

// Default export = what the craft rail + <ComponentPreview name="ransom-note" /> render:
// the self-playing display card. The interactive editor lives in ./playground.
export default function RansomNotePage() {
  return (
    <div className="w-full max-w-xl px-4">
      <RansomNoteCard />
    </div>
  );
}

import { RansomNoteCard } from "./ransom-note-card";

// Default export = what the craft rail + <ComponentPreview name="ransom-note" /> render:
// the self-playing display card. The interactive editor lives in ./playground.
export default function RansomNotePage() {
  return (
    <div className="w-full max-w-xl px-4">
      <RansomNoteCard />
    </div>
  );
}

Original concept by Arlan. Cutout letters from the Resource Boy "Ransom Note Letters" pack (free for personal & commercial use).

NextNextjs Dev Tools