TextDecode

Character-by-character decode — each glyph cycles through a pool of random characters before settling on the target. The element's text content is captured on mount and used as the destination. GSAP-backed.

Decoding the boogie

Usage

import { TextDecode } from '@bwo-ui/react';

<TextDecode as="h1" duration={1.6}>
  Welcome aboard.
</TextDecode>

// Looping with a custom pool
<TextDecode
  loop
  chars="01"
  duration={2}
>
  System online
</TextDecode>

Props

Prop	Type	Default	Description
`duration`	`number`	`1.4`	Total animation duration in seconds.
`chars`	`string`	—	Pool of characters used for the scramble. Defaults to alphanumerics + symbols.
`speed`	`number`	`0.04`	Seconds per character swap during the scramble.
`delay`	`number`	`0`	Delay before the decode begins.
`loop`	`boolean`	`false`	Replay forever.
`onComplete`	`() => void`	—	Fires when every character has settled.
`as`	`ElementType`	`'span'`	Tag to render.