Ransom Note

Renders text as animated paper scraps with varying fonts, colors, and movements. Each character behaves based on specified animation settings. Use for visually engaging text effects in UIs.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ransom-note

npx layro-cli add @educlopez/ransom-note

npx layro-cli add @educlopez/ransom-note

bunx layro-cli add @educlopez/ransom-note

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  type TargetAndTransition,
  useReducedMotion,
} from "motion/react";
import { useMemo } from "react";

export type RansomNoteAnimate = "none" | "assemble" | "jitter";

export interface RansomNoteProps {
  /** How the scraps enter/behave: fly in, idly wobble, or render static. */