Scramble Effect

Text cipher/decode animation. Characters cycle through random glyphs before settling on the correct character.

Domma.effects.scramble()

The scramble() effect wraps text characters and rapidly cycles through random glyphs before resolving each character to its final value. Supports multiple reveal orders and looping.

// Basic usage
Domma.effects.scramble('.hero-title');

// With options
const ctrl = Domma.effects.scramble('.heading', {
  scrambleDuration: 1200,
  revealOrder: 'random',
  loop: true,
  loopDelay: 3000,
  onComplete: () => console.log('Decoded!')
});

// Control
ctrl.pause();
ctrl.resume();
ctrl.restart();
ctrl.destroy();

Demo: Basic Scramble

Click to decode the text left-to-right.

Demo: Basic Scramble

Welcome to Domma

<div class="demo-box" id="scramble-demo-1">Welcome to Domma</div>
<button type="button" class="btn btn-primary" id="scramble-start-1">Start</button>
<button type="button" class="btn btn-secondary" id="scramble-pause-1">Pause</button>
<button type="button" class="btn btn-secondary" id="scramble-resume-1">Resume</button>
<button type="button" class="btn btn-danger" id="scramble-stop-1">Stop</button>

/**
 * Demo: Basic Scramble - from public/showcase/effects/scramble.
 */
export function mount(root) {
    let ctrl1;
        // Demo 1: Basic
    $(root).find('#scramble-start-1').on('click', () => {
          if (ctrl1) ctrl1.destroy();
          $(root).find('#scramble-demo-1').text('Welcome to Domma');
          ctrl1 = Domma.effects.scramble('#scramble-demo-1', {
            respectMotionPreference: false
          });
        });
    $(root).find('#scramble-pause-1').on('click', () => { if (ctrl1) ctrl1.pause(); });
    $(root).find('#scramble-resume-1').on('click', () => { if (ctrl1) ctrl1.resume(); });
    $(root).find('#scramble-stop-1').on('click', () => { if (ctrl1) ctrl1.stop(); });
}

Demo: Reveal Orders

Different orders for character resolution.

Left to Right

Domma Effects

<div class="demo-box" id="scramble-ltr">Domma Effects</div>
<button type="button" class="btn btn-primary mb-4" id="scramble-start-ltr">Start Left-to-Right</button>

/**
 * Left to Right - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 2: Reveal Orders
    let ctrlLtr, ctrlRtl, ctrlRandom, ctrlCenter;
    $(root).find('#scramble-start-ltr').on('click', () => {
          if (ctrlLtr) ctrlLtr.destroy();
          $(root).find('#scramble-ltr').text('Domma Effects');
          ctrlLtr = Domma.effects.scramble('#scramble-ltr', {
            revealOrder: 'left-to-right',
            respectMotionPreference: false
          });
        });
}

Right to Left

Domma Effects

<div class="demo-box" id="scramble-rtl">Domma Effects</div>
<button type="button" class="btn btn-primary mb-4" id="scramble-start-rtl">Start Right-to-Left</button>

/**
 * Right to Left - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 2: Reveal Orders
    let ctrlLtr, ctrlRtl, ctrlRandom, ctrlCenter;
    $(root).find('#scramble-start-rtl').on('click', () => {
          if (ctrlRtl) ctrlRtl.destroy();
          $(root).find('#scramble-rtl').text('Domma Effects');
          ctrlRtl = Domma.effects.scramble('#scramble-rtl', {
            revealOrder: 'right-to-left',
            respectMotionPreference: false
          });
        });
}

Random

Domma Effects

<div class="demo-box" id="scramble-random">Domma Effects</div>
<button type="button" class="btn btn-primary mb-4" id="scramble-start-random">Start Random</button>

/**
 * Random - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 2: Reveal Orders
    let ctrlLtr, ctrlRtl, ctrlRandom, ctrlCenter;
    $(root).find('#scramble-start-random').on('click', () => {
          if (ctrlRandom) ctrlRandom.destroy();
          $(root).find('#scramble-random').text('Domma Effects');
          ctrlRandom = Domma.effects.scramble('#scramble-random', {
            revealOrder: 'random',
            respectMotionPreference: false
          });
        });
}

Centre Out

Domma Effects

<div class="demo-box" id="scramble-center">Domma Effects</div>
<button type="button" class="btn btn-primary" id="scramble-start-center">Start Centre-Out</button>

/**
 * Centre Out - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 2: Reveal Orders
    let ctrlLtr, ctrlRtl, ctrlRandom, ctrlCenter;
    $(root).find('#scramble-start-center').on('click', () => {
          if (ctrlCenter) ctrlCenter.destroy();
          $(root).find('#scramble-center').text('Domma Effects');
          ctrlCenter = Domma.effects.scramble('#scramble-center', {
            revealOrder: 'center-out',
            respectMotionPreference: false
          });
        });
}

Domma.effects.scramble('#el', { revealOrder: 'left-to-right' });
Domma.effects.scramble('#el', { revealOrder: 'right-to-left' });
Domma.effects.scramble('#el', { revealOrder: 'random' });
Domma.effects.scramble('#el', { revealOrder: 'center-out' });

Demo: Looping Scramble

Infinite loop with configurable delay between cycles.

Demo: Looping Scramble

Build Amazing Apps

<div class="demo-box" id="scramble-loop">Build Amazing Apps</div>
<button type="button" class="btn btn-primary" id="scramble-start-loop">Start Loop</button>
<button type="button" class="btn btn-danger" id="scramble-stop-loop">Stop Loop</button>

/**
 * Demo: Looping Scramble - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 3: Loop
    let ctrlLoop;
    $(root).find('#scramble-start-loop').on('click', () => {
          if (ctrlLoop) ctrlLoop.destroy();
          $(root).find('#scramble-loop').text('Build Amazing Apps');
          ctrlLoop = Domma.effects.scramble('#scramble-loop', {
            loop: true,
            loopDelay: 2000,
            scrambleDuration: 1000,
            revealOrder: 'random',
            respectMotionPreference: false
          });
        });
    $(root).find('#scramble-stop-loop').on('click', () => { if (ctrlLoop) ctrlLoop.stop(); });
}

Domma.effects.scramble('.headline', {
  loop: true,
  loopDelay: 2000,
  scrambleDuration: 1000,
  revealOrder: 'random'
});

Demo: Custom Character Pool

Use custom characters for the scramble animation.

Demo: Custom Character Pool

01100100

<div class="demo-box" id="scramble-custom">01100100</div>
<button type="button" class="btn btn-primary" id="scramble-start-custom">Start Binary Scramble</button>

/**
 * Demo: Custom Character Pool - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 4: Custom characters
    let ctrlCustom;
    $(root).find('#scramble-start-custom').on('click', () => {
          if (ctrlCustom) ctrlCustom.destroy();
          $(root).find('#scramble-custom').text('01100100');
          ctrlCustom = Domma.effects.scramble('#scramble-custom', {
            characters: '01',
            scrambleDuration: 1500,
            speed: 80,
            respectMotionPreference: false
          });
        });
}

Domma.effects.scramble('#binary', {
  characters: '01',
  scrambleDuration: 1500,
  speed: 80
});

Demo: Speed Variations

Adjust scramble duration and resolve speed.

Demo: Speed Variations

Quick Decode

Slow Reveal

<div class="demo-box" id="scramble-fast" style="font-size: 1.5rem;">Quick Decode</div>
<button type="button" class="btn btn-primary mb-3" id="scramble-start-fast">Fast (300ms)</button>
<div class="demo-box" id="scramble-slow" style="font-size: 1.5rem;">Slow Reveal</div>
<button type="button" class="btn btn-primary" id="scramble-start-slow">Slow (2000ms)</button>

/**
 * Demo: Speed Variations - from public/showcase/effects/scramble.
 */
export function mount(root) {
        // Demo 5: Speed variations
    let ctrlFast, ctrlSlow;
    $(root).find('#scramble-start-fast').on('click', () => {
          if (ctrlFast) ctrlFast.destroy();
          $(root).find('#scramble-fast').text('Quick Decode');
          ctrlFast = Domma.effects.scramble('#scramble-fast', {
            scrambleDuration: 300,
            speed: 20,
            respectMotionPreference: false
          });
        });
    $(root).find('#scramble-start-slow').on('click', () => {
          if (ctrlSlow) ctrlSlow.destroy();
          $(root).find('#scramble-slow').text('Slow Reveal');
          ctrlSlow = Domma.effects.scramble('#scramble-slow', {
            scrambleDuration: 2000,
            speed: 100,
            respectMotionPreference: false
          });
        });
}

Options Reference

Option	Type	Default	Description
`speed`	number	50	Ms per character resolve
`scrambleSpeed`	number	30	Ms between scramble frame updates
`characters`	string	A-Z, a-z, 0-9, symbols	Character pool for scramble glyphs
`revealOrder`	string	'left-to-right'	'left-to-right', 'right-to-left', 'random', 'center-out'
`scrambleDuration`	number	800	How long each char scrambles before resolving (ms)
`stagger`	number	0	Delay between multiple elements (ms)
`loop`	boolean\|number	false	false, true (infinite), or number of loops
`loopDelay`	number	2000	Ms between loops
`respectMotionPreference`	boolean	true	Honour prefers-reduced-motion
`onComplete`	function	null	Callback when animation completes
`onCharacter`	function	null	Callback per character resolved (char, index)