Ransom Note Text

Ransom Note Effect — Interactive Framer Component

Transform plain text into dynamic, collage-style cutout graphics directly inside Framer. The Ransom Note Effect component procedurally renders each character as a unique paper cutout scrap with custom typography, colors, background shapes, drop shadows, and physical interactive behaviors.

Key Features

• Procedural Letter Cutouts: Automatically generates paper scrap variants for every character, cycling through distinct font families, color palettes, and background card shapes.

• Interactive Physics & Magnetism (useMagnetism): Characters react in real-time to cursor hover, subtly floating, rotating, and scaling based on distance and depth calculation using requestAnimationFrame.

• Click/Tap to Swap Scrap Variants: Clicking (or pressing Space/Enter) on any letter swaps its variant on the fly, giving you instant creative control over individual glyphs.

• Automated Responsive Auto-Fitting: Dynamically calculates line widths and fits multi-line text seamlessly to any container size without overlapping or line-wrapping bugs.

• Deterministic Randomization (Seed System): Uses a pseudo-random seed generator (mulberry32 & FNV-1a hash). Freeze a look by entering a seed number, or leave it at 0 for dynamic generation.

• Static Renderer Optimized: Full support for useIsStaticRenderer to ensure lightweight, zero-overhead static output when rendered in Framer canvases or SSR pages.

• Accessible & Inclusive: Built with standard HTML button semantics, custom aria-label controls, and full keyboard navigation support (Tab, Space, Enter).

Framer Canvas Controls

• Text: Input your custom text (supports multi-line text with \n).

• Seed: Set to a non-zero value to lock or re-roll the randomized look (0 for auto-hash generation).

• Size: Adjust the base character font and cutout height (20px to 180px).

• Tilt: Fine-tune the maximum rotation angle for letters (0° to 22°).

• Bounce: Control vertical baseline jitter and displacement (dy).

Made with 💛 by @Karim Saif