👾 Zalgo-Cometh Web Component

The <zalgo-cometh> component transforms text using Zalgo (combining Unicode marks) with configurable intensity and smooth animation support.

Features

• 🔥 Configurable Zalgo intensity (0.0 - 1.0)
• ✨ Smooth animated transitions between intensities
• ♿ Accessibility-friendly with aria-label preservation
• 🎯 Whitespace preservation
• ⚡ Efficient requestAnimationFrame-based tweening

Usage

Basic Example

<zalgo-cometh degree="0.3">
  thinking...
</zalgo-cometh>

With Animation

<zalgo-cometh degree="0.5" animate duration="400">
  H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ
</zalgo-cometh>

Attributes

degree

• Type: Float
• Range: 0.0 - 1.0
• Default: 0
• Description: Intensity of Zalgo effect. 0 = no effect, 1 = maximum chaos

animate

• Type: Boolean
• Default: false
• Description: When present, changes to degree will tween smoothly over time

duration

• Type: Integer (milliseconds)
• Default: 300
• Description: Duration of tween animation (only used when animate is present)

Properties

degree

Can be set via JavaScript:

element.degree = 0.8;

Demo

Try the interactive demo: He Cometh

Accessibility

The component automatically preserves the original text in an aria-label attribute, ensuring screen readers can access the unmodified content.

Technical Details

The component uses three sets of Unicode combining marks:

• ZALGO_UP: Marks that appear above characters
• ZALGO_MID: Marks that appear in the middle
• ZALGO_DOWN: Marks that appear below characters

The number of marks applied scales with the degree attribute, creating progressively more chaotic text.