@whykusanagi/corrupted-theme
v0.1.7
A dark, glassmorphic design system with pink/purple accents. Perfect for creating modern, visually striking web applications.
81/weekUpdated todayMITUnpacked: 1.7 MB
Published by whykusanagi
npm install @whykusanagi/corrupted-themeCorrupted Theme
A production-ready glassmorphic design system for cinematic, cyberpunk-inspired applications. Built as a drop-in CSS framework with JS enhancements, Docker showcase, and npm distribution standards on par with Meta/Google/Netflix internal libraries.
Table of Contents
1. Overview
2. Installation
3. Project Architecture
4. Base Layout & Background
5. CSS & JS Imports
6. Component Quick Reference
7. Interactive Components
8. Animations & Experience Layer
9. Lifecycle Management
10. Nikke Utilities
11. Extension Components
12. Customization & Tokens
13. Coding Standards
14. Development Workflow
15. Testing & QA Expectations
16. Support
17. Celeste Widget Integration
18. License
Overview
- Glassmorphism-first visual language with layered depth, gradients, and scanlines.
- Systemized tokens (
src/css/variables.css) for colors, typography, spacing, motion, and elevation.- Bootstrap-scale coverage of components (navigation, forms, data display, API docs, Nikke-specific UI).
- Buffer corruption effects with SFW/NSFW phrase modes (Pattern 1 & 2 from spec).
- WCAG AA compliance, motion safety, and keyboard support baked in.
- Dockerized showcase at
examples/showcase-complete.html for instant QA.$3
This package includes two corruption animation modes:
SFW Mode (Default)
- Playful anime-style expressions
- Cute/teasing phrases
- Atmospheric corruption themes
- Safe for professional and public projects
NSFW Mode (Opt-in Required)
- ⚠️ 18+ Content Warning
- Explicit intimate/sexual phrases
- Loss of control themes
- NOT suitable for:
- Professional/corporate projects
- Public streams without 18+ rating
- Educational contexts
- All-ages content
All examples and default behavior use SFW mode. NSFW requires explicit { nsfw: true } configuration.
Installation
$3
``
bash
npm install @whykusanagi/corrupted-theme
`
css
@import '@whykusanagi/corrupted-theme';
/ or scoped imports /
@import '@whykusanagi/corrupted-theme/variables';
@import '@whykusanagi/corrupted-theme/components';
`
> Tip: make sure you are logged in with if the package is private. No .npmrc token is needed for the public release.$3
`html
`$3
Copy into your project (or use dist/theme.min.css) and import it locally.Project Architecture
`
.
├── src/
│ ├── css/
│ │ ├── variables.css # design tokens
│ │ ├── typography.css # font stack + hierarchy
│ │ ├── glassmorphism.css # shared glass utilities
│ │ ├── animations.css # motion + corruption keyframes
│ │ ├── components.css # UI primitives + layouts (incl. carousel)
│ │ ├── utilities.css # spacing, flex, layout utilities
│ │ └── theme.css # entry point (imports all modules)
│ ├── core/
│ │ ├── timer-registry.js # lifecycle: tracked setTimeout/setInterval/rAF
│ │ └── event-tracker.js # lifecycle: tracked addEventListener
│ └── lib/
│ ├── carousel.js # carousel/slideshow with autoplay + swipe
│ ├── character-corruption.js# auto-corruption for individual characters
│ ├── components.js # modal, dropdown, tabs, collapse, accordion, toast
│ ├── corrupted-text.js # multi-language glitch animation
│ ├── corruption-loading.js # cinematic loading curtain
│ ├── countdown-widget.js # event countdown with shapes
│ └── gallery.js # gallery grid with filtering + lightbox
├── dist/theme.min.css # postcss + cssnano build output
├── examples/
│ ├── showcase-complete.html # full design system demo
│ └── interactive-components.html # modal, dropdown, tabs, carousel demo
├── scripts/static-server.js # ESM static server (Docker)
└── docs/COMPONENTS_REFERENCE.md # exhaustive snippets
npm scripts
-
– compiles dist/theme.min.css
- – rebuilds on change (dev use)
- npm run dev:static – serves /examples (port 8000)
- npm run dev:proxy – Celeste proxy (port 5000)Base Layout & Background
$3
`html
`$3
html
`$3
css
html, body { min-height: 100vh; background: var(--bg); margin: 0; }
.background-media { position: fixed; inset: 0; object-fit: cover; z-index: var(--z-negative); }
.glass-backdrop { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,0,16,.85), rgba(10,10,10,.9)); z-index: var(--z-background); }
.app-shell { position: relative; z-index: var(--z-elevated); padding: clamp(1.5rem, 3vw, 3rem); backdrop-filter: blur(0); }
`$3
When using video backgrounds, place the navbar outside
for proper z-index stacking:`html
`$3
The theme uses a systematic z-index scale defined in
:| Token | Value | Purpose |
|-------|-------|---------|
|
--z-negative | -2 | Background media (video/image) |
| --z-background | -1 | Glass backdrop overlay |
| --z-base | 0 | Default stacking |
| --z-elevated | 1 | App shell and content |
| --z-navbar | 1000 | Navigation (always above content) |
| --z-modal | 1000 | Modals and overlays |> Important: The navbar uses
z-index: 1000 to ensure it always appears above all content, including video backgrounds and elevated containers.CSS & JS Imports
$3
The simplest approach — import everything in one line:
`html
`css
/ CSS /
@import '@whykusanagi/corrupted-theme';
`✅ Recommended for most projects. Includes all styles in the correct order automatically.
$3
Import only the modules you need for smaller bundle sizes.
> ⚠️ CRITICAL: Import order matters! Modules have dependencies that require specific ordering.
#### CSS @import Syntax
css
/ Correct order (matches theme.css structure) /
@import '@whykusanagi/corrupted-theme/variables'; / 1. Foundation tokens /
@import '@whykusanagi/corrupted-theme/typography'; / 2. Font styles /
@import '@whykusanagi/corrupted-theme/glassmorphism'; / 3. Glass effects /
@import '@whykusanagi/corrupted-theme/animations'; / 4. Keyframes - MUST come before components /
@import '@whykusanagi/corrupted-theme/components'; / 5. UI components - MUST come after animations /
@import '@whykusanagi/corrupted-theme/utilities'; / 6. Utility classes /
`#### HTML Link Tags
html
`#### Why Order Matters
-
uses animation keyframes defined in animations.css
- If loads before animations.css, spinner and loading animations won't work
- Always verify order by checking src/css/theme.css (shows canonical import structure)$3
`js
// Interactive components (modal, dropdown, tabs, collapse, accordion, toast)
import { initComponents, destroyComponents, showToast, toast }
from '@whykusanagi/corrupted-theme/components-js';// Carousel (separate module)
import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
// Corruption effects
import { initCorruptedText } from '@whykusanagi/corrupted-theme/corrupted-text';
import { initGallery, destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
`Components auto-initialize on
when imported. For manual control:`js
initComponents(); // scan DOM for data-ct-* attributes
destroyComponents(); // tear down all managers and tracked listeners
`Component Quick Reference
The snippets below mirror the canonical showcase. For the full catalog (tabs, modals, tables, API docs, Nikke cards, etc.) keep open beside this README.$3
`html
Glass Card
Enhanced glass depth layer.
const example = 'Hello';
`$3
html
`$3
html
`$3
html
`
js
function toggleNavbar(button) {
const menu = document.querySelector('.navbar-links');
menu.classList.toggle('active');
button.classList.toggle('active');
}
`$3
Zero-JS (data attributes):
html
`Manual JS (legacy):
html
`
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'));
}
});
`$3
html
Name Email Status
Eve eve@demo.com Active
Dan dan@demo.com Pending
GET
/api/v1/units
Retrieve a list of units.
element
string
optional
Filter by element type.
200 OK
{"data": []}
`$3
Pattern 1: Character-Level Corruption (Visual Glitch)
html
data-english="Hello World"
data-romaji="konnichiwa"
data-hiragana="こんにちは"
data-katakana="コンニチハ"
data-kanji="今日は">
`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
flagSee
examples/basic/ for SFW examples and examples/advanced/nsfw-corruption.html for NSFW demo.Interactive Components
v0.1.7 adds JS-driven interactive components that self-initialize via
data-ct-* attributes. Import the components module and everything wires up automatically on DOMContentLoaded.`html
`$3
html
`Closes via X button, overlay click, or Escape key. Dispatches
/ modal:close custom events.$3
`html
Panel 1 content
Panel 2 content
`$3
html
Collapsible content.
`$3
html
`Features: autoplay, prev/next controls, dot indicators, touch/swipe, keyboard navigation (ArrowLeft/Right). Import separately:
js
import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
`$3
html
Question 1
Answer 1
Question 2
Answer 2
`$3
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
for a live demo of all interactive components.Animations & Experience Layer
$3
Class | Behavior
--- | ---
.fade-in, .fade-up, .slide-in-left/right, .scale-in | Standard entrance motions synchronized to var(--transition)
, .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$3
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-multilangTypingAnimation - 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
- Color: Magenta (#d94f90) for SFW, Purple (#8b5cf6) for NSFWCorruption Phrases Library
- Normalized SFW/NSFW phrase sets
- Separate exports for each mode
- Helper functions for random phrase selection
- Module:
Lifecycle Management
All JS components follow a consistent init/destroy pattern to prevent memory leaks in SPAs and dynamic UIs.
$3
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();
`$3
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
for a working multi-instance demo.$3
The
src/core/ directory provides lifecycle primitives used by all components:- TimerRegistry (
timer-registry.js) — wraps setTimeout, setInterval, and requestAnimationFrame with bulk clearAll()
- EventTracker () — wraps addEventListener with bulk removeAll()These ensure no orphaned timers or listeners remain after
.Nikke Utilities
`html
1
Front Left
Scarlet Priest Abe
`
All Nikke-specific helpers live alongside the main utilities () 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.$3
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)
`$3
Link-in-bio style layout with branded platform colors.
html
`
$3
Event countdown with configurable shapes (diamond, circle, heart, star, hexagon, octagon).
javascript
import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';initCountdown({
config: {
title: 'Launch Countdown',
eventDate: '2025-04-01T00:00:00-07:00',
completedMessage: 'Now Live!',
character: {
image: 'character.png',
background: { type: 'diamond' }
}
}
});
`$3
Click-to-reveal overlay for sensitive content.
html
`See
for interactive demos and docs/COMPONENTS_REFERENCE.md for complete API documentation.Customization & Tokens
Override only the tokens you need. The defaults intentionally mirror the showcase.
`css
:root {
--accent: #ff5fb0;
--accent-light: #ff8cd0;
--accent-dark: #c71c7d;
--glass: rgba(15, 10, 25, 0.65);
--glass-light: rgba(24, 14, 42, 0.45);
--glass-darker: rgba(10, 5, 20, 0.65);
--text: #f4e9ff;
--text-secondary: #b8afc8;
--transition-normal: 0.3s ease;
--transition-fast: 0.15s ease;
}
`
Utilities () provide spacing (.p-xl, .gap-md), layout (.flex, .grid), and elevation helpers so you rarely write bespoke CSS.Coding Standards
These guidelines keep contributions aligned with enterprise frameworks:
- CSS architecture: component classes are flat (.btn.secondary), tokens live in variables.css, and utilities never override component styles.
- Naming: prefer descriptive nouns (e.g., .api-endpoint, .glass-card) and suffix modifiers with dot notation (.btn.secondary). Avoid chained hyphen variants unless the base class does not apply (.badge-method).
- JavaScript: all helper scripts are ES modules, side-effect-free, and expose initialization functions. Never mutate global scope outside a guarded DOMContentLoaded block.
- Accessibility: every interactive component includes focus styles, ARIA labels where relevant, and respects prefers-reduced-motion fallbacks.
- Performance: animations use transform/opacity, heavy filters are scoped to small elements, and layout thrashers are avoided.
- Documentation: README + docs/COMPONENTS_REFERENCE.md are the single sources of truth. Additions must include runnable snippets and token usage notes.
- Versioning: update CHANGELOG.md with semantic sections (Added, Changed, Fixed) before publishing.Development Workflow
`bash
npm install # install dependencies
npm run build # compile CSS bundle
npm run watch # dev rebuild loop
npm run dev:static # serve /examples on :8000
npm run dev:proxy # optional Celeste proxy on :5000Docker showcase
docker build -t corrupted-theme:latest .
docker run -d -p 8000:8000 --name corrupted-theme corrupted-theme:latest
`
- The Docker container automatically serves .
- Provide CELESTE_* env vars to exercise the widget proxy inside the same container.Testing & QA Expectations
- Visual regression: validate against examples/showcase-complete.html in latest Chrome, Firefox, Safari, and a mobile viewport.
- Accessibility: run tab sweeps, screen reader spot checks, and prefers-reduced-motion toggles.
- Performance: Lighthouse performance budget ≥ 90, no long-running animations on background threads.
- Animation review: ensure the first-visit corrupted text + loader remain opt-in via JS flags for SPA integrations.Support
- GitHub Issues: corrupted-theme/issues
- Email: contact@whykusanagi.xyzCeleste Widget Integration (Secure Proxy)
The theme ships with an optional Celeste AI widget that never exposes credentials to the browser. It relies on the hardened proxy bundle located in celeste_widget_pack/.$3
| Variable | Purpose |
|----------|---------|
| CELESTE_AGENT_KEY | Bearer token for the Celeste API |
| CELESTE_AGENT_ID | Agent identifier (UUID) |
| CELESTE_AGENT_BASE_URL | API endpoint root |> Store these via your platform’s secret manager (Vault, Doppler, AWS Secrets Manager, etc.). Never commit them or inject them into client-side code.
$3
`bash
docker build -t corrupted-theme:latest .docker run -d \
-p 8000:8000 \ # static showcase
-p 5001:5000 \ # exposes proxy externally
-e CELESTE_AGENT_KEY="$CELESTE_AGENT_KEY" \
-e CELESTE_AGENT_ID="$CELESTE_AGENT_ID" \
-e CELESTE_AGENT_BASE_URL="https://api.your-domain.com" \
corrupted-theme:latest
Visit http://localhost:8000 (UI) and http://localhost:5001/api/health (proxy)
`$3
bash
Terminal 1 – proxy server (port defaults to 5000 inside container)
CELESTE_AGENT_KEY="..." \
CELESTE_AGENT_ID="..." \
CELESTE_AGENT_BASE_URL="..." \
PROXY_PORT=5000 node scripts/celeste-proxy-server.jsTerminal 2 – static showcase
STATIC_PORT=8000 node scripts/static-server.js
`$3
- Browser never receives variables (verified via DevTools/HTML scans)
- All outbound API calls originate from the proxy (/api/chat, /api/health)
- Health endpoint surfaces status without leaking secrets
- Ready for Cloudflare Worker / Pages deployment (see secure pack doc)For the full hardening guide—including architecture diagrams, Cloudflare steps, and troubleshooting—see
celeste_widget_pack/docs/CELESTE_WIDGET_SECURE_SETUP.md`.License
MIT © whykusanagi
---
Made with 💎 by whykusanagi