```
```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).
## 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/src/core/typing-animation.js';
const typing = new TypingAnimation(element, {
typingSpeed: 50, // ms per character
glitchChance: 0.3, // probability of glitch per character
nsfw: false // enable 18+ phrase mode
});
typing.start();
typing.stop();
typing.settle(); // resolve to 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 with `includeLewd` toggle
- 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)
includeLewd: 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
