---
title: "Ransom Note Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/ransom-note-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Ransom Note Text

# Ransom Note Text

Collage-style cutout

[View on Framer](https://framer.com/marketplace/components/ransom-note-text/?via=elliot-li)

![Ransom Note Text preview image 1](https://framer.elliotli.dev/og/component/ransom-note-text/636768b4842b6134/1600x1046.jpg)

## Summary

Collage-style cutout

## Description

## **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](/community/creator/@karim-saif/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #2027

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-29
- **Updated**: 2026-07-29
- **Added**: 2026-07-29
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos