ChaosToggle.js

Trust & safety

Built so you can ship surprises without shipping regret.

Auto-cleanup. Effects respect a duration and tear down overlays, classes, and timers.
No server. Everything runs in the browser. No API calls, no analytics, no backend.
No lasting layout damage. DOM tweaks are restored after effects finish; you stay in control of when chaos runs.
Scoped targeting. Point chaos at #site-main (as on this page) or any container you choose.

What can you build with this?

Concrete ways teams use ChaosToggle.

Demo environments

Simulate incidents, errors, or “hack” moments for sales and training without touching real data.

Easter eggs

Hide a konami-style payoff on your marketing site or internal wiki.

Launch & milestones

Celebrate releases with confetti and themed particles—then reset in one call.

Hack days & internal tools

Low-risk fun on staging dashboards and team apps.

Presentations

Make a slide or prototype memorable with a timed effect sequence.

Visual stress tests

See how your UI behaves under motion, overlays, and input quirks.

Quick start

Copy, paste, run.

<script src="https://cdn.jsdelivr.net/npm/chaos-toggle@latest/dist/chaos-toggle.min.js"></script>
<script>
  ChaosToggle.start();
</script>

npm install chaos-toggle

import ChaosToggle from 'chaos-toggle';

ChaosToggle.start();

Trigger on key press

ChaosToggle.start({ duration: 3000 });

document.addEventListener('keydown', (e) => {
  if (e.key === 'c') ChaosToggle.trigger();
});

Trigger on button click

ChaosToggle.start();

document.querySelector('#go').addEventListener('click', () => {
  ChaosToggle.runEffect('confetti');
});

Common patterns

Four APIs you will use most often.

Run one effect

ChaosToggle.runEffect('bsod');
ChaosToggle.runEffect('gravity');

Apply a preset mode

ChaosToggle.runMode('nuclear');
ChaosToggle.runMode('demo');

Open the control panel

ChaosToggle.openPanel();

Chain a sequence

ChaosToggle.compose('intro', [
  { effect: 'screenCrack', delay: 0 },
  { effect: 'bsod', delay: 800 },
]);
ChaosToggle.runComposition('intro');

Top picks

Six effects teams reach for first. Explore the full catalog when you need more.

realityTearViewport split with a glowing rift core

bsodFull-screen blue screen prank

gravityLet page elements fall

confettiParticle celebration

glitchOverlayScanline glitch layer

fakeUpdateFake OS update screen

View all 51 effects

Effect	Category	What it does
`shake`	Visual	Shakes the page (4 animation styles)
`glitchOverlay`	Overlay	Full-screen scanline glitch layer
`noise`	Overlay	Film-grain noise overlay
`flashOverlay`	Overlay	Pulsing bright flash across viewport
`confetti`	Visual	Falling particles (emoji or colored pieces)
`zoomFlicker`	Visual	Subtle scale pulse on root
`fakeErrorState`	Visual	Dramatic hue-shift like a broken display
`matrixRain`	Overlay	Full-viewport katakana digital rain
`rgbSplit`	Visual	Chromatic aberration across root
`vhsDistortion`	Overlay	Scanlines, tracking errors, analog skew
`screenCrack`	Overlay	Shattered-glass fracture lines
`pixelDissolve`	Overlay	View explodes into colored pixel storm
`realityTear`	Overlay	Page splits into drifting slabs around a glowing dimensional rift
`screenMelt`	Visual	Viewport drips away with molten edge
`crtShutdown`	Visual	Vintage CRT display collapse with phosphor flash
`bsod`	Prank	Full-screen Windows Blue Screen of Death
`fakeUpdate`	Prank	Convincing Windows Update progress screen
`fakeTerminal`	Prank	Hollywood-style typing terminal overlay
`clippy`	Prank	Paperclip assistant with unhelpful suggestions
`fakeVirusScan`	Prank	Dramatic full-screen antivirus scan UI
`fakeCrash`	Prank	Chrome-style "Aw, Snap!" crash page
`gravity`	DOM	Visible blocks fall with goofy physics
`elementShuffle`	DOM	Swaps on-screen positions of elements
`elementScatter`	DOM	Flings elements off-screen with spin
`textScramble`	DOM	Replaces text with random characters, then restores
`tinyGiantMode`	DOM	Random elements balloon or shrink
`magneticCursor`	Interaction	Nearby elements creep toward the pointer
`cursorChaos`	Interaction	Rainbow crumbs and restless pointer styles
`cursorDrift`	Interaction	Fake pointer slowly wanders from real one
`autoTypo`	Interaction	Sneaks extra neighbor keys into text fields
`delayedClicks`	Interaction	Clicks pause on loading cursor before firing
`invertedScroll`	Interaction	Wheel direction goes backwards
`screenFlip`	Interaction	Rotates the whole page upside down
`drunkMode`	Interaction	Blurry vision and tipsy wobble
`popups`	Overlay	Corner toast with title and dismiss
`springParade`	Overlay	Hopping chicks and eggs parade across the page
`starSpangledBanner`	Overlay	Patriotic flags and stars drape across the top edge
`hackerHud`	Overlay	Floating status panes and reticle for cyber themes
`holidayLights`	Overlay	Festive lights and ornaments hang across the top edge
`hauntedEyes`	Overlay	Glowing eyes peer in from the dark edges of the viewport
`retroBroadcast`	Overlay	REC badges, channel bugs, and analog broadcast overlays
`partyBalloons`	Overlay	Birthday banner and balloon bouquet frame the viewport
`officeStickyNotes`	Overlay	Sticky notes and coffee clutter the page like office desk chaos
`evacuationTape`	Overlay	Hazard tape and warnings turn the screen into a disaster zone
`midnightBurst`	Overlay	Countdown medallion and fireworks markers celebrate the New Year rollover
`harvestTable`	Overlay	A harvest spread of pie, leaves, and candlelight settles along the bottom edge
`doorbusterMarquee`	Overlay	Flash sale ribbons and discount badges turn the screen into a Black Friday rush
`protocolGrid`	Overlay	Neon rails and checkout telemetry turn the page into a cyber storefront
`loveLetters`	Overlay	Pinned notes and heart seals wrap the page in Valentine energy
`lastCall`	Overlay	Neon bar sign, drinks, and bubbles sway across the viewport
`panicAlarm`	Overlay	Alarm braces and warning markers slam into the viewport

Theme showcase

Start with a theme that reads instantly, then decide how aggressive runtime behavior is allowed to be. Everything below is live on this page.

Preview state

Theme default

Policy safe

Last action ready

Holiday theme · low risk

easter

Pastel bounce, chicks, eggs, and a spring parade. It reads playful immediately and stays safe for public-facing pages.

Signature springParade

Best forSeasonal campaigns and internal demos

Recommended policysafe

Holiday theme · celebratory

4th-of-july

Flags, stars, fireworks, and recoil energy. Good when the page should feel like an event, not just a palette swap.

Signature starSpangledBanner

Best forLaunches, event pages, milestone demos

Recommended policydemo

System theme · cinematic

hacker

Binary fallout plus a real HUD layer. This is the right default when you want a “breach” moment that reads instantly.

Signature hackerHud

Best forTraining, incidents, terminal-themed demos

Recommended policydemo

Celebration theme · friendly

birthday

Balloons, party copy, and upbeat motion. Useful when you want obvious celebration with almost no risk to the page.

Signature partyBalloons

Best forRelease notes, ship-day pages, team dashboards

Recommended policysafe

Retail theme · high urgency

black-friday

Doorbuster ribbons and a price-drop center badge make the page feel like a timed sale, not generic glitch.

Signature doorbusterMarquee

Best forPromo pages and event storefronts

Recommended policydemo

Shock theme · stage only

jumpscare

Hard-stop warning treatment for scripted moments. Great for staging and incident theater, wrong for shared production screens.

Signature panicAlarm

Best forControlled demos and explicit prank flows

Recommended policyprank

Mode guide

Policy guide

Set the policy first, then run the theme or mode. The library respects that boundary for theme, mode, and direct effect execution.

View all themes & modes

Holiday

Retail

Vibe

Copy-paste recipes

Opinionated configs you can drop in and tweak.

Office prank

IT department vibes, then panic mode.

ChaosToggle.start({ duration: 4000, theme: 'office' });
ChaosToggle.runTheme('office');
ChaosToggle.runMode('panic');

Halloween horror

Glitch stack on a dark theme.

ChaosToggle.start({ duration: 3500, theme: 'halloween' });
ChaosToggle.runTheme('halloween');
ChaosToggle.runEffect('vhsDistortion');
ChaosToggle.runEffect('noise');

Launch celebration

Ship-it energy, minimal risk.

ChaosToggle.start({ duration: 5000, theme: 'birthday' });
ChaosToggle.runMode('celebration');
ChaosToggle.runEffect('confetti');

Full playground

Browse every effect, theme, and mode with buttons and a live sample area.

Open playground

Advanced capabilities

Deeper than a single script tag—plugins, panel, and types.

Effects, themes, panel, plugins, TypeScript

51 effects

Overlays, pranks, DOM, cursor, and interaction effects—composable and timed.

Overlays: Glitch, noise, flash, VHS, CRT, screen crack, RGB split, melt, pixels
Pranks: BSOD, fake update, terminal, Clippy, virus scan, crash screen
DOM & input: Gravity, shuffle, scatter, scramble, cursor tricks, drunk mode

17 themes

Palettes, particles, overlays, and behaviors bundled per theme.

Holiday, retail, and vibe packs. Override pieces with themeOverrides when you need a custom mix.

Control panel

Floating UI for intensity, duration, effects, and export/import.

Open with ChaosToggle.openPanel()
Shadow DOM so panel styles never leak into your app
Default shortcut: Shift+P runs panic mode (customize with registerShortcut)

Plugins

Package effects, themes, and install hooks.

ChaosToggle.registerEffect, registerTheme, compose, on
ChaosToggle.use(plugin) to install

TypeScript

Exported types for settings, effects, plugins, and the fluent theme builder.

Use ChaosToggleAPI, ChaosEffect, ChaosPlugin, ThemeProfile, and more from the package.

Zero dependencies

Single bundle with inlined styles. CDN, ESM, or CJS.

No framework required. Drop in and opt in to chaos when you call the API.

Theme builder & hooks

Fluent theme builder

ChaosToggle.buildTheme('office-prank')
  .palette('#0078d7', '#ffb900', '#f0f0f0', '#333')
  .effects('bsod', 'fakeUpdate', 'clippy')
  .particles('confetti', { density: 0.3 })
  .popup({
    title: 'IT Department',
    message: 'Your PC has been compromised.'
  })
  .timing({ durationMultiplier: 2 })
  .register();

ChaosToggle.runTheme('office-prank');

Plugin shape

const myPlugin = {
  id: 'chaos-plugin-office',
  name: 'Office Pranks Pack',
  version: '1.0.0',
  effects: [myCustomEffect],
  themes: [{ id: 'corporate', config: {...} }],
  install(engine) {
    engine.registerShortcut('Shift+B', 'runEffect:bsod');
  },
};

ChaosToggle.use(myPlugin);

Event hooks

ChaosToggle.on('beforeTrigger', () =>
  console.log('Chaos incoming...')
);
ChaosToggle.on('effectStart', (id) =>
  console.log(`Effect: ${id}`)
);

TypeScript imports

import type {
  ChaosEffect,
  ChaosPlugin,
  ChaosToggleAPI,
  ThemeProfile,
  ChaosSettings,
} from 'chaos-toggle';

API & developer experience

Common methods below. See the repository README for the full surface area.

Method	Description
`start(config?)` / `init(config?)`	Initialize (aliases; first call wins)
`trigger()`	Fire enabled effects for current theme
`reset()`	Clear active effects and classes
`runEffect(id)`	Run a single effect
`runMode(name)`	Run a preset mode
`runTheme(name)`	Apply and trigger a theme
`compose` / `runComposition`	Define and run timed sequences
`openPanel()` / `togglePanel()`	Built-in Shadow DOM control panel
`registerShortcut`	Keyboard bindings
`use(plugin)`	Install a plugin package
`updateSettings`	Merge settings at runtime

Full API on GitHub →

Default shortcuts

Shortcut	Action
`Shift+H`	Trigger chaos
`Shift+P`	Panic mode
`Shift+R`	Reset
`Shift+C`	Celebration mode

Contributing

New effects, themes, fixes, and docs are welcome.

Effect Theme Bugfix Docs

Contributing guide

Trust & safety

What can you build with this?

Demo environments

Easter eggs

Launch & milestones

Hack days & internal tools

Presentations

Visual stress tests

Quick start

Trigger on key press

Trigger on button click

Common patterns

Run one effect

Apply a preset mode

Open the control panel

Chain a sequence

Top picks

Theme showcase

easter

4th-of-july

hacker

birthday

black-friday

jumpscare

Mode guide

Policy guide

subtle

demo

chaos

nuclear

celebration

glitch

panic

Copy-paste recipes

Office prank

Halloween horror

Launch celebration

Full playground

Advanced capabilities

51 effects

17 themes

Control panel

Plugins

TypeScript

Zero dependencies

Theme builder & hooks

Fluent theme builder

Plugin shape

Event hooks

TypeScript imports

API & developer experience

Default shortcuts

Contributing