```
```js
function toggleDropdown(button) {
const menu = button.nextElementSibling;
const open = menu.classList.contains('active');
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('active'));
document.querySelectorAll('.dropdown-toggle').forEach(b => b.classList.remove('active'));
if (!open) { menu.classList.add('active'); button.classList.add('active'); }
}
document.addEventListener('click', e => {
if (!e.target.closest('.dropdown')) {
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('active'));
document.querySelectorAll('.dropdown-toggle').forEach(b => b.classList.remove('active'));
}
});
```
### Data & API
```html
Name
Email
Status
Eve
eve@demo.com
Active
Dan
dan@demo.com
Pending
GET/api/v1/units
Retrieve a list of units.
elementstringoptional
Filter by element type.
200 OK
{"data": []}
```
### Corrupted Text & Buffer Corruption
**Pattern 1: Character-Level Corruption (Visual Glitch)**
```html
```
**Pattern 2: Phrase Flickering (Buffer Corruption)**
```html
```
**β οΈ Content Classification:**
- **SFW Mode (Default)**: Cute, playful, atmospheric phrases - safe for all audiences
- **NSFW Mode (Opt-in)**: Explicit 18+ content - requires `{ nsfw: true }` flag
See `examples/basic/typing-animation.html` β it has a toggle switch at the top to opt into NSFW phrases (checkbox resets each page load per the explicit-opt-in spec).
### Drift Reconvergence β Canonical Corruption Layer (0.2.0)
#### CorruptionCharsets
Named charset registry backed by `src/data/charsets.json`.
```js
import { CorruptionCharsets } from '@whykusanagi/corrupted-theme/corruption-charsets';
CorruptionCharsets.katakana; // primary corruption glyphs
CorruptionCharsets.standard; // katakana + symbols (matrix-style)
CorruptionCharsets.soft; // hiragana only (gentle degradation)
CorruptionCharsets.intense; // kanji + blocks (heavy data-loss)
CorruptionCharsets.all; // union of every set
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#corruptioncharsets) for all sets.
#### DecryptReveal
Fixed-length decryption animation. The target string is shown at its final length from frame 1 (scrambled with charset characters), then progressively resolves left-to-right to the target text.
**Distinct from TypingAnimation** β TypingAnimation grows the string over time (streaming/typed reveal with phrase-buffer flicker in the not-yet-revealed tail). DecryptReveal keeps the string at final length and scrambles unrevealed positions.
```js
import { DecryptReveal, decodeText } from '@whykusanagi/corrupted-theme/decrypt-reveal';
const dr = new DecryptReveal({ charset: CorruptionCharsets.standard });
dr.decode(el, 'SYSTEM READY', { duration: 2000 });
dr.decode(el, 'γ’γ―γ»γΉθ¨±ε―', { duration: 3000, charset: CorruptionCharsets.kanji });
dr.stop(); // cancel all
dr.destroy(); // full teardown
// One-shot helper (no instance needed) β returns a cancel function
const cancel = decodeText(el, 'NEURAL CORE ONLINE', { duration: 1500 });
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#decryptreveal) for full method table.
#### CRTEffects
CRT post-processing layer β scanlines, vignette, chromatic aberration, RGB split, screen shake.
```js
import { CRTEffects } from '@whykusanagi/corrupted-theme/crt-effects';
const crt = new CRTEffects(containerEl, { scanlines: true, vignette: true, flicker: false });
crt.start();
crt.screenShake(containerEl, 300, 5); // duration ms, intensity px
crt.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#crteffects) for the full options table.
#### animation-blocks (10 classes)
Composable animation blocks that return Promises. Mix with `playParallel` / `playSequence` / `playStaggered`.
```js
import {
TitleDecoder, ProgressBar, ScanlineSweep, TerminalBoot, GlitchPulse,
ASCIIBorder, SystemDiagnostic, LoadingBarMulti, DataTransmission, TerminalPrompt,
playSequence,
} from '@whykusanagi/corrupted-theme/animation-blocks';
await playSequence([
new TitleDecoder(el, { text: 'CORRUPTED STREAM', nsfw: false }),
new ProgressBar(el, { label: 'Loading...', duration: 2000 }),
new TerminalBoot(el, { lines: ['Initializing...', 'Ready.'] }),
]);
```
> `lewdMode` is a deprecated alias for `nsfw` β use `nsfw: true` in new code.
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#animation-blocks) for all 10 class descriptions.
#### CorruptedParticlesBackground
Auto-injecting background particles (DPR=1 performance mode, sits behind blur layers).
```js
import CorruptedParticlesBackground from '@whykusanagi/corrupted-theme/corrupted-particles-background';
const bg = new CorruptedParticlesBackground({ nsfw: false, count: 25 });
// automatically inserts a fixed canvas before .glass-backdrop
bg.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#corruptedparticlesbackground).
### Widgets (0.2.0)
#### Toast
Singleton notification helper. Auto-mounts its own DOM container on first use.
```js
import { Toast } from '@whykusanagi/corrupted-theme/toast';
Toast.show('Saved');
Toast.success('Submitted!', { duration: 3000 });
Toast.error('Upload failed');
Toast.info('Loadingβ¦');
```
Import `@whykusanagi/corrupted-theme/toast-css` alongside (or include in your `theme.css` build). See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#toast).
#### ClockWidget
Cycling multi-timezone clock using `Intl.DateTimeFormat` for DST correctness.
```js
import { ClockWidget } from '@whykusanagi/corrupted-theme/clock-widget';
const widget = new ClockWidget(document.getElementById('clock'), {
timezones: ['America/Los_Angeles', 'Europe/London'],
cycleMs: 10000,
format: '12h',
});
widget.start();
widget.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#clockwidget).
#### EventBar
Scrolling event-ticker banner with label + content + optional icon. Supports live `update()`.
```js
import { EventBar } from '@whykusanagi/corrupted-theme/event-bar';
const eb = new EventBar(document.getElementById('events'), {
items: [{ label: 'Latest Follow', content: '@user1', icon: 'β ' }],
});
eb.update([{ label: 'Latest Tip', content: '$10.00', icon: 'β¦' }]);
eb.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#eventbar).
#### LogoBanner
Animated logo/title banner with five position presets and reveal animation.
```js
import { LogoBanner } from '@whykusanagi/corrupted-theme/logo-banner';
const banner = new LogoBanner(el, {
src: '/assets/logo.png', subtitle: 'LIVE', position: 'top-right', animation: 'fade',
});
banner.show();
banner.update({ position: 'center' });
banner.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#logobanner).
#### Lightbox (standalone)
Extracted from `gallery.js` as its own module. Keyboard (Escape/arrows) + touch-swipe. `gallery.js` re-exports it for backward compat.
```js
import { Lightbox } from '@whykusanagi/corrupted-theme/lightbox';
const lb = new Lightbox(null, { onOpen: (img, i) => {}, onClose: () => {} });
lb.setImages([{ src: 'a.jpg', alt: 'A', caption: 'Caption' }]);
lb.open(0);
lb.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#lightbox-standalone).
#### PhraseCycle
Discrete phrase-state cycling. Replaces the entire element's text with phrase A, then phrase B, etc., at a fixed interval, then settles on `finalText`. Optional `loop: true` cycles forever without settling.
**Distinct from TypingAnimation and DecryptReveal:** TypingAnimation grows the string character-by-character (streaming/typed β string length increases over time). DecryptReveal shows the string at final length scrambled with charset characters and resolves left-to-right (char-level). PhraseCycle replaces the *entire element text* each tick β string length may vary between phrases.
Use for: loading screens (`Initializing... β Connecting... β Ready.`), boot sequences, "decrypting" preambles before a result is shown, glitch transitions between named states.
```js
import { PhraseCycle } from '@whykusanagi/corrupted-theme/phrase-cycle';
// Settling cycle: one pass then display finalText
const cycle = new PhraseCycle(element, {
phrases: ['Initializing...', 'Connecting...', 'Authenticating...'],
interval: 400, // ms between phrase swaps (default: 200)
finalText: 'Ready.', // text written after cycle ends; null = leave last phrase
});
cycle.start();
// Looping: cycle forever with no settle
const spinner = new PhraseCycle(element, {
phrases: ['Loading.', 'Loading..', 'Loading...'],
interval: 300,
loop: true,
});
spinner.start();
spinner.stop(); // pause; last phrase stays visible; reusable
spinner.destroy(); // teardown + release element reference
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#phrasecycle) and the [live demo](examples/advanced/phrase-cycle.html).
#### NsfwReveal
Age-gate blur overlay with click-to-reveal. Session persistence handled by the caller.
```js
import { NsfwReveal } from '@whykusanagi/corrupted-theme/nsfw-reveal';
const nr = new NsfwReveal(document.getElementById('img'), {
warning: 'NSFW β click to reveal',
blurPx: 20,
});
nr.reveal(); // programmatic reveal
nr.destroy(); // restore original state
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#nsfwreveal).
#### PngExport
Capture a DOM element as PNG and trigger a download. Requires optional peer dep `html2canvas`.
```js
import { exportElementAsPng } from '@whykusanagi/corrupted-theme/png-export';
await exportElementAsPng(document.getElementById('card'), {
filename: 'my-card.png',
scale: 2,
});
```
Install the peer dep only when using: `npm install html2canvas`. See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#pngexport).
#### WebSocketManager
Auto-reconnect WebSocket wrapper with exponential backoff (capped 30s), event-ID dedup, ACK support, and visibility-aware pause/resume.
```js
import { WebSocketManager } from '@whykusanagi/corrupted-theme/websocket-manager';
const ws = new WebSocketManager({ url: 'wss://your-server/ws', autoConnect: false });
ws.on((msg) => console.log(msg));
ws.connect();
ws.destroy();
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#websocketmanager) for all options.
### Core Utilities (0.2.0)
All utility modules are pure functions with no DOM dependency β safe in Node.js and SSR contexts.
#### random-utils
```js
import { randomPick, randomInt, randomFloat, randomVariance, shuffle, randomSample }
from '@whykusanagi/corrupted-theme/random-utils';
randomPick(['a', 'b', 'c']); // random element
randomVariance(50, 0.2); // 50 Β± 20%
shuffle([1, 2, 3]); // Fisher-Yates in-place
randomSample([1,2,3,4], 2); // 2 elements without replacement
```
#### time-utils
```js
import { formatTime12h, formatDate, timeAgo, formatDuration }
from '@whykusanagi/corrupted-theme/time-utils';
formatTime12h(); // "02:32 PM"
timeAgo(new Date(Date.now() - 3e5)); // "5m ago"
formatDuration(3661); // "1h 1m 1s" (input: seconds)
```
#### clipboard-helpers
```js
import { copyWithFeedback } from '@whykusanagi/corrupted-theme/clipboard-helpers';
await copyWithFeedback(btn, 'text to copy', { successLabel: 'COPIED!', durationMs: 1200 });
// Button label briefly becomes "COPIED!" then reverts. Returns Promise.
```
#### url-state
```js
import { buildShareUrl, applyParamsToForm } from '@whykusanagi/corrupted-theme/url-state';
const url = buildShareUrl(form, 'https://example.com/embed');
// β "https://example.com/embed?username=alice&dark=1"
applyParamsToForm(form, new URLSearchParams(window.location.search));
```
### CSS Utilities (0.2.0)
**`.scrollbar-corrupted`** β styled scrollbar (Firefox + WebKit) matching the theme accent colors. Apply to any scrollable container:
```html
β¦
```
**`seamless-background.css`** β multi-layer parallax tiled background. Import the CSS module, add `.seamless-bg-host` to a parent, and set the `--seamless-background-image` variable:
```html
```
See [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#seamless-backgroundcss) for the full modifier class list.
## Interactive Components
v0.1.8 adds JS-driven interactive components that self-initialize via `data-ct-*` attributes. Import the components module and everything wires up automatically on `DOMContentLoaded`.
```html
```
### Modal
```html
Title
Content here.
```
Closes via X button, overlay click, or Escape key. Dispatches `modal:open` / `modal:close` custom events.
### Tabs
```html
```
### Toast Notifications
```js
import { toast } from '@whykusanagi/corrupted-theme/components-js';
toast.success('Operation completed.');
toast.warning('Check your input.');
toast.error('Something went wrong.');
toast.info('FYI: update available.');
```
See `examples/interactive-components.html` for a live demo of all interactive components.
## Animations & Experience Layer
### Standard CSS Animations
Class | Behavior
--- | ---
`.fade-in`, `.fade-up`, `.slide-in-left/right`, `.scale-in` | Standard entrance motions synchronized to `var(--transition)`
`.glitch-word`, `.glitch-kanji` | Fragmented glitch with horizontal scanlines + JP overlays
`.corrupted-text`, `.corrupted-strong` | Brute-force corruption effect for headings and pills
`.scanlines`, `.tear`, `.data-corrupt` | Utility effects inspired by whykusanagi.xyz hero
`.spinner`, `.loading-bar`, `.progress-bar` | Loading indicators with shimmer + accent variants
### JavaScript Corruption Components
All JS corruption components follow the same lifecycle: `new Class(element, options)` with `start()`, `stop()`, `destroy()` methods. Full API details are in [COMPONENTS_REFERENCE.md](docs/COMPONENTS_REFERENCE.md#javascript-corruption-components).
**CorruptedText** - Pattern 1: Character-Level Corruption
- Visual glitch effect using random characters (Katakana, Hiragana, symbols)
- Always SFW (no phrases, just character-level noise)
- Cycles through multi-language variants
- Class: `.corrupted-multilang`
- Demo: `examples/basic/corrupted-text.html`
```js
import { initCorruptedText } from '@whykusanagi/corrupted-theme/corrupted-text';
// Auto-init all .corrupted-multilang elements
initCorruptedText();
// Or manual:
const ct = new CorruptedText(element, {
duration: 3000, // total animation duration (ms)
cycleDelay: 100, // delay between corruption steps (ms)
startDelay: 0, // initial delay before animation
loop: true, // loop or settle on final text
finalText: null // text to settle on (null = english variant)
});
ct.start(); // begin animation
ct.stop(); // pause
ct.restart(); // reset to first variant
ct.settle('Hello'); // stop and settle to specific text
ct.destroy(); // full teardown
```
**TypingAnimation** - Pattern 2: Phrase Flickering (Buffer Corruption)
- Simulates neural network decoding corrupted data buffer
- Phrases flicker through before revealing final text
- SFW mode (default): Cute, playful, atmospheric phrases
- NSFW mode (opt-in): Explicit 18+ content with `{ nsfw: true }`
- Color: Magenta (#d94f90) for SFW, Purple (#8b5cf6) for NSFW
- Demo: `examples/basic/typing-animation.html`
```js
import { TypingAnimation } from '@whykusanagi/corrupted-theme/typing-animation';
const typing = new TypingAnimation(element, {
duration: 2000, // 2s total typing pass
bufferEnabled: true, // always-on phrase buffer (default)
bufferFlickerSpeed: 100, // ms between buffer phrase swaps
nsfw: false, // enable 18+ phrase mode
});
typing.start('Neural corruption detected...');
typing.stop();
typing.settle('READY'); // skip remaining type-out, write final text
```
**CorruptedParticles** - Canvas 2D Floating Phrase Background
- Floating Japanese phrase particles across three depth layers
- Mouse hover repel, click burst (6 particles), connection lines between nearby particles
- SFW/NSFW phrase modes via `nsfw` toggle (`includeLewd` is a deprecated alias)
- Demo: `examples/advanced/particles-bg.html`
```js
import CorruptedParticles from '@whykusanagi/corrupted-theme/corrupted-particles';
const particles = new CorruptedParticles(canvas, {
count: 60, // number of particles
speed: 1.0, // global speed multiplier
lineDistance: 150, // max distance for connection lines (px)
nsfw: false // enable 18+ phrases (default: off)
});
// auto-starts on construction
particles.stop(); // pause animation
particles.start(); // resume
particles.destroy(); // full teardown
```
**CorruptedVortex** - WebGL Raymarched Spiral Vortex
- WebGL1 raymarched black hole accretion disk shader
- Quasar mode (hue: null) cycles yellow-to-magenta by depth
- Fixed hue mode locks to a single color
- Throttled to ~30fps for GPU efficiency
- Demo: `examples/advanced/glsl-vortex.html`
```js
import CorruptedVortex from '@whykusanagi/corrupted-theme/corrupted-vortex';
const vortex = new CorruptedVortex(canvas, {
speed: 1.0, // animation speed multiplier
intensity: 1.0, // brightness/glow intensity
rotationRate: 1.0, // rotation speed of spiral
hue: null // null = quasar multi-color, 0-1 = fixed hue
});
// auto-starts on construction
vortex.stop();
vortex.start();
vortex.destroy();
```
**Character Corruption** - Auto-Corruption for Individual Characters
- Replaces English characters with Japanese (Katakana, Hiragana, Kanji)
- Configurable intensity levels from `NONE` (0) to `MAX_READABLE` (0.45)
- Auto-corruption via `.auto-corrupt` class with `data-text`, `data-intensity`, `data-interval` attributes
- Includes phrase libraries (technical UI + personality/demon phrases)
```js
import {
corruptTextJapanese,
initAutoCorruption,
stopAutoCorruption,
destroyAllAutoCorruption,
createCorruptedElement,
getRandomPhrase,
INTENSITY
} from '@whykusanagi/corrupted-theme/character-corruption';
// Corrupt a string at medium intensity
corruptTextJapanese('Hello World', INTENSITY.MEDIUM); // β "Heγ’γo γ―oγ±ld"
// Auto-init all .auto-corrupt elements on page
initAutoCorruption();
// Create a new auto-corrupting element
const el = createCorruptedElement('System Online', {
intensity: 0.35,
interval: 2000,
className: 'status-text',
tag: 'span'
});
// Get a random phrase from the library
getRandomPhrase('loading'); // β "initializing neural link..."
getRandomPhrase('personality', 'japanese'); // β "γγΌγΏη ΄ζζ€εΊ..."
// Cleanup
stopAutoCorruption(element); // stop one element
destroyAllAutoCorruption(); // stop all
```
**Corruption Loading Screen** - Cinematic Loading Curtain
- Full-screen dramatic loading animation
- Module: `src/lib/corruption-loading.js`
**Corruption Phrases Library**
- Normalized SFW/NSFW phrase sets
- Separate exports for each mode
- Helper functions for random phrase selection
- Module: `src/core/corruption-phrases.js`
## Lifecycle Management
All JS components follow a consistent init/destroy pattern to prevent memory leaks in SPAs and dynamic UIs.
### Destroying Components
```js
import { destroyComponents } from '@whykusanagi/corrupted-theme/components-js';
import { destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
// Tear down all interactive components (modal, dropdown, tabs, accordion, toast)
destroyComponents();
// Destroy default gallery instance
destroyGallery();
```
### Multi-Instance Gallery
```js
import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
const g1 = initGallery('#gallery-1', { enableLightbox: true });
const g2 = initGallery('#gallery-2', { enableLightbox: true });
// Each instance has independent filters, lightbox, and state
g1.destroy(); // only tears down gallery-1
```
See `examples/basic/multi-gallery.html` for a working multi-instance demo.
### Core Utilities
The `src/core/` directory provides lifecycle primitives used by all components:
- **TimerRegistry** (`timer-registry.js`) β wraps `setTimeout`, `setInterval`, and `requestAnimationFrame` with bulk `clearAll()`
- **EventTracker** (`event-tracker.js`) β wraps `addEventListener` with bulk `removeAll()`
These ensure no orphaned timers or listeners remain after `destroy()`.
## Nikke Utilities
```html
1Front Left
Scarlet Priest Abe
```
All Nikke-specific helpers live alongside the main utilities (`src/css/nikke-utilities.css`) and observe the same token set, so there are no visual disconnects between game-specific and general UI.
## Extension Components
Production-tested components from whykusanagi.xyz for galleries, social links, countdowns, and more. All extension styles are included in `theme.css` or can be imported separately via `extensions.css`.
### Gallery System
Responsive gallery grid with filtering, lightbox, and NSFW content support. Supports multiple independent instances on the same page.
```html
Caption text
```
```javascript
import { initGallery, destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
const gallery = initGallery('#my-gallery', {
enableLightbox: true,
enableNsfw: true,
filterAnimation: true
});
gallery.filter('photos'); // Filter by category
gallery.openLightbox(0); // Open first image
gallery.destroy(); // Clean up (removes lightbox, listeners, timers)
```
### Social Links List
Link-in-bio style layout with branded platform colors.
```html
