Ransom Note Text

Collage-style cutout

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

Collage-style cutout