Adventureland Registry
Motion / Effects

Turbulent Text

Edge breakup + surface warp + internal grain — print-on-texture blending.

TurbulentText stacks three SVG filters — wavy edge breakup, a broader surface warp, and grain masked to the text fill — to fake ink-on-paper printing. Use off-white / off-black inks (e.g. #f5f0e6, #1a1a1a) rather than pure values for the most convincing result.

Installation

npx shadcn@latest add @adv/turbulent-text

Usage

import { TurbulentText } from '@adv/motion';

<TurbulentText grainColor="#f5f0e6" grainOpacity={0.3}>
  <span style={{ fontSize: 56, fontWeight: 700, color: '#f5f0e6' }}>turbulent</span>
</TurbulentText>

Example

Scribbled Text

Two displaced text passes gated by a moving luma matte — hand-drawn scribble.

Choker Reveal

Animated erode + roughened edges on a posterized cadence — a logo/shape reveal.

On this page

InstallationUsageExample