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.
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).
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
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.
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).
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
