🔀 Swap-Word Web Component

An animated text transformation component that morphs one word into another with scrambling effects, Zalgo corruption, and optional particle bursts. Feel free to mash the button to study its weirdness.

REMEMBRANCE

Features

🌀 Telephone-game scrambling: Characters randomly scramble during transition
👾 Zalgo intensity: Text corruption scales with scramble intensity (triangle wave)
✨ Particle bursts: Optional thorny-particles integration for visual effects
⏱️ Configurable timing: Control animation duration and initial delay
🎯 Accessibility: Preserves semantic HTML structure

Usage

Basic Example

<swap-word from="HELLO">WORLD</swap-word>
<button onclick="document.querySelector('swap-word').play()">Swap</button>

With Particles

<swap-word from="CHAOS" particles="15" duration="1500">ORDER</swap-word>

With Autoplay

<swap-word from="OLD" autoplay duration="1000">NEW</swap-word>

Attributes

`from`

Type: String
Default: Current text content
Description: The starting word/text to display before animation

`particles`

Type: Number
Default: 0 (disabled)
Description: Number of thorny particles to spawn during scrambling. Particles spawn at letter positions and scale with scramble intensity.

`duration`

Type: Number (milliseconds)
Default: 1200
Description: Total animation duration

`initial-delay`

Type: Number (milliseconds)
Default: 0
Description: Delay before animation starts

`charset`

Type: String
Default: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*?"
Description: Character set to use for scrambling

`autoplay`

Type: Boolean
Default: false
Description: Automatically start animation when component loads

Methods

`play()`

Starts the swap animation.

document.querySelector('swap-word').play();

Animation Phases

The swap-word animation follows a two-phase telephone-game pattern:

Phase 1: Scramble Out (0-50%)

Starts with the from text fully visible
Progressively scrambles letters from right to left
Zalgo intensity increases from 0 to 1 (triangle wave ascending)
Particle spawning increases with intensity (if enabled)

Phase 2: Unscramble In (50-100%)

Letters unscramble into target text from left to right
Zalgo intensity decreases from 1 to 0 (triangle wave descending)
Particle spawning decreases with intensity
Ends with clean target text, no Zalgo

Thorny Particles Integration

When the particles attribute is set, <swap-word> imperatively spawns thorny particles at the positions of scrambling letters:

Intensity-based: More particles spawn when scrambling is most intense (mid-point)
Throttled: Particles spawn at most every 50ms to avoid overwhelming the system
Position-aware: Particles spawn randomly across the word's bounding box
Averaged: Total particle count is distributed across the animation duration

The particle system uses the standalone thorny-helper.js API, not the <thorny-particles> web component, so there's no cursor-tracking behavior.

Examples

Minimal

<swap-word from="A">B</swap-word>

With Everything

<swap-word 
  from="CORRUPTION" 
  particles="20"
  duration="2000"
  initial-delay="500"
  charset="!@#$%"
  autoplay>
  CLARITY
</swap-word>

Technical Notes

Uses the zalgoify() helper from zalgo-cometh for text corruption
Uses the spawnThornyParticlesAt() helper from thorny-particles for particle effects
Animation driven by requestAnimationFrame
Automatically cleans up on disconnect
Element must be visible (non-zero dimensions) for particles to spawn