Scramble Title Handoff / Playground

01 / Overview

Encode a readable title into changing glyphs, carry its letters, then decode it at a new anchor. Adapted from the portfolio implementation listed below, with manual playback for inspection.

Portfolio implementation

• src/components/titleHandoff.js
• src/components/SectionGlitchTransition.jsx

Naming & history

Text scramble, character scramble and scramble/decode effect describe the randomized glyph replacement. Title handoff is a descriptive name for the spatial transfer used here. Encode and decode describe visual phases; the animation does not encrypt data. This differs from Text Decode, which only reveals text in place, and Font Cycling, which changes typefaces without replacing characters.

• GSAP — ScrambleText description and reveal controls
• Motion — text scrambling and split-text techniques

02 / How it works

Measure the source and destination letters. Move persistent character cells between those anchors while each character switches glyphs and serif fonts on its own stepped schedule, then settles into the target. The archive uses AMIRUL HAQIMI at both anchors to isolate the handoff.

Actual React demo source. Import this component with the archive stylesheet and pass variant (titleScramble), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.

Loading implementation…

04 / Parameters

05 / Usage & accessibility

This is a contained portfolio-derived study, not the full page controller. Play starts one transition; Replay resets it. Pause freezes active timelines. Scroll Camera Glitch requires scrolling inside its focusable preview after Play. Reduced motion shows a stable composition. Frames, timelines and local listeners are released on unmount.

Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.