Rust Text

"use client";

import { useEffect, useRef } from "react";
import { useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { SIZE } from "../_text-effects/shared";

// Rust text. Brushed steel type that oxidises while you watch: orange blooms
// open from the edges of each stroke and spread across it, darken as they
// age, and finally flake off in small pieces that fall away. Moving the
// pointer over it polishes the metal back, with a brief shine where it
// passed, and the rust starts again from there.
//
// Every pixel inside the glyphs has its own age. A noise field decides when
// each one starts to turn, biased so thin edges go first, so the rust grows
// as patches rather than a fade. Polishing just takes age away.

const FALL = 1.4; // room under the text for falling flakes, in em
const ONSET_SCALE = 38; // px per rust patch
const TINT_SCALE = 12;
const FLAKE_SCALE = 5;
const MAX_FLAKES = 500;

type Flake = { x: number; y: number; vx: number; vy: number; life: number; c: string };