Motion / Effects
Scribbled Text
Two displaced text passes gated by a moving luma matte — hand-drawn scribble.
ScribbledText renders text twice — a sharp displaced pass and a blurred-and-roughened pass —
then gates between them with a moving feTurbulence luma matte. All seeds advance on a posterized
cadence, so the scribble shifts "on 8s" and reads as marker / chalk drawn live. Procedural noise
only; no textures.
Installation
npx shadcn@latest add @adv/scribbled-textUsage
import { ScribbledText } from '@adv/motion';
<ScribbledText>
<span style={{ fontSize: 56, fontWeight: 700 }}>scribble</span>
</ScribbledText>