Corrupted 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.

1. Overview
2. Installation
3. Project Architecture
4. Base Layout & Background
5. CSS & JS Imports
6. Component Quick Reference
7. Animations & Experience Layer
8. Nikke Utilities
9. Extension Components
10. Customization & Tokens
11. Coding Standards
12. Development Workflow
13. Testing & QA Expectations
14. Support
15. Celeste Widget Integration
16. License

!Corrupted Theme - Glassmorphic Design System

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

npm login if the package is private. No .npmrc

 token is needed for the public release.
$3

html


$3

Copy

src/css 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
│   │   ├── utilities.css        # spacing, flex, layout utilities
│   │   └── theme.css            # entry point (imports all modules)
│   └── lib/
│       ├── corrupted-text.js    # multi-language glitch animation
│       └── corruption-loading.js# cinematic loading curtain
├── dist/theme.min.css            # postcss + cssnano build output
├── examples/showcase-complete.html
├── scripts/static-server.js      # ESM static server (Docker)
└── docs/COMPONENTS_REFERENCE.md  # exhaustive snippets

npm scripts -npm run build – compiles dist/theme.min.css-npm run watch– 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 .app-shell for proper z-index stacking:

`html


  
  
  
    
      Brand
      
        Home

        About

        Contact

$3

The theme uses a systematic z-index scale defined in variables.css:

| 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 -components.css uses animation keyframes defined in animations.css- Ifcomponents.css loads before animations.css, spinner and loading animations won't work - Always verify order by checkingsrc/css/theme.css (shows canonical import structure)

`$3`

`html`

`js // ES Modules import { initCorruptedText } from '@whykusanagi/corrupted-theme/src/lib/corrupted-text.js'; import { showCorruptionLoading } from '@whykusanagi/corrupted-theme/src/lib/corruption-loading.js';

document.addEventListener('DOMContentLoaded', () => { initCorruptedText(); // Initialize glitch text effects // showCorruptionLoading({ force: true }); // Force loader outside 72h cadence });`

`Component Quick Reference`


The snippets below mirror the canonical showcase. For the full catalog (tabs, modals, tables, API docs, Nikke cards, etc.) keep

docs/COMPONENTS_REFERENCE.md

 open beside this README.
$3

html

  Glass Card

  Enhanced glass depth layer.

  
  
  const example = 'Hello';

$3

html

$3

html

  Name
  
  Message

$3

html

  
    whyku
    
      Glass

      Components

      
        Products 
        
          Product 1
          Product 2

js
function toggleNavbar(button) {
  const menu = document.querySelector('.navbar-links');
  menu.classList.toggle('active');
  button.classList.toggle('active');
}

$3

html

  
  
    Action
    Settings
    

    Logout

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": []}

Name	Email	Status
Eve	eve@demo.com	Active
Dan	dan@demo.com	Pending

$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{ nsfw: true } flag

See examples/basic/ for SFW examples and examples/advanced/nsfw-corruption.html for NSFW demo.

`Animations & Experience Layer`

`$3`


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
$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-multilang

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

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

`Nikke Utilities`

html

  
  
  
  
  


  
    
      1
      Front 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.

`$3`

Responsive gallery grid with filtering, lightbox, and NSFW content support.

`html


  
    
    Caption text

`javascript import { initGallery } 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`

`$3`

Link-in-bio style layout with branded platform colors.

`html


  
  @username

  Your bio here

  
     Twitter
     GitHub


$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 examples/extensions-showcase.html 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 (

src/css/utilities.css) 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 :5000
Docker showcase

docker build -t corrupted-theme:latest .
docker run -d -p 8000:8000 --name corrupted-theme corrupted-theme:latest


- The Docker container automatically serves

examples/showcase-complete.html

.
- 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.xyz
Celeste 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.js
Terminal 2 – static showcase

STATIC_PORT=8000 node scripts/static-server.js


$3

- Browser never receives

CELESTE_*

 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

Corrupted Theme

!Corrupted Theme - Glassmorphic Design System

Overview

$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

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

npm login if the package is private. No .npmrc

 token is needed for the public release.
$3

html


$3

Copy

src/css 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
│   │   ├── utilities.css        # spacing, flex, layout utilities
│   │   └── theme.css            # entry point (imports all modules)
│   └── lib/
│       ├── corrupted-text.js    # multi-language glitch animation
│       └── corruption-loading.js# cinematic loading curtain
├── dist/theme.min.css            # postcss + cssnano build output
├── examples/showcase-complete.html
├── scripts/static-server.js      # ESM static server (Docker)
└── docs/COMPONENTS_REFERENCE.md  # exhaustive snippets

`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 .app-shell for proper z-index stacking:

`html


  
  
  
    
      Brand
      
        Home

        About

        Contact

$3

The theme uses a systematic z-index scale defined in variables.css:

> 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.

#### HTML Link Tags`html`

`$3`

`html`

document.addEventListener('DOMContentLoaded', () => { initCorruptedText(); // Initialize glitch text effects // showCorruptionLoading({ force: true }); // Force loader outside 72h cadence });`

`Component Quick Reference`


The snippets below mirror the canonical showcase. For the full catalog (tabs, modals, tables, API docs, Nikke cards, etc.) keep

docs/COMPONENTS_REFERENCE.md

 open beside this README.
$3

html

  Glass Card

  Enhanced glass depth layer.

  
  
  const example = 'Hello';

$3

html

$3

html

  Name
  
  Message

$3

html

  
    whyku
    
      Glass

      Components

      
        Products 
        
          Product 1
          Product 2

js
function toggleNavbar(button) {
  const menu = document.querySelector('.navbar-links');
  menu.classList.toggle('active');
  button.classList.toggle('active');
}

$3

html

  
  
    Action
    Settings
    

    Logout

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": []}

Name	Email	Status
Eve	eve@demo.com	Active
Dan	dan@demo.com	Pending

$3

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/ for SFW examples and examples/advanced/nsfw-corruption.html for NSFW demo.

`Animations & Experience Layer`

`$3`


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
$3

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

`Nikke Utilities`

html

  
  
  
  
  


  
    
      1
      Front 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

`$3`

Responsive gallery grid with filtering, lightbox, and NSFW content support.

`html


  
    
    Caption text

`javascript import { initGallery } 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`

`$3`

Link-in-bio style layout with branded platform colors.

`html


  
  @username

  Your bio here

  
     Twitter
     GitHub


$3
Event countdown with configurable shapes (diamond, circle, heart, star, hexagon, octagon).

`javascript import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';

`$3`

Click-to-reveal overlay for sensitive content.

`html

See examples/extensions-showcase.html 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 (

src/css/utilities.css) 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 :5000
Docker showcase

docker build -t corrupted-theme:latest .
docker run -d -p 8000:8000 --name corrupted-theme corrupted-theme:latest


- The Docker container automatically serves

examples/showcase-complete.html

.
- 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.xyz
Celeste 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.js
Terminal 2 – static showcase

STATIC_PORT=8000 node scripts/static-server.js


$3

- Browser never receives

CELESTE_*

 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

---
Made with 💎 by whykusanagi

@whykusanagi/corrupted-theme

Corrupted Theme

Table of Contents

Overview

$3

Installation

$3

$3

$3

Project Architecture

Base Layout & Background

$3

$3

$3

$3

$3

CSS & JS Imports

$3

$3

$3

Component Quick Reference

$3

Glass Card

$3

$3

$3

$3

$3

$3

Animations & Experience Layer

$3

$3

Nikke Utilities

Extension Components

$3

$3

@username

$3

$3

Customization & Tokens

Coding Standards

Development Workflow

Docker showcase

Testing & QA Expectations

Support

Celeste Widget Integration (Secure Proxy)

$3

$3

Visit http://localhost:8000 (UI) and http://localhost:5001/api/health (proxy)

$3

Terminal 1 – proxy server (port defaults to 5000 inside container)

Terminal 2 – static showcase

$3

License

@whykusanagi/corrupted-theme

Corrupted Theme

Table of Contents

Overview

$3

Installation

$3

$3

$3

Project Architecture

Base Layout & Background

$3

$3

$3

$3

$3

CSS & JS Imports

$3

$3

$3

Component Quick Reference

$3

Glass Card

$3

$3

$3

`Base Layout & Background`

`$3`

`CSS & JS Imports`

`$3`

`$3`

`$3`

`Component Quick Reference`

`Animations & Experience Layer`

`$3`

`Nikke Utilities`

`$3`

`$3`

`$3`

`Customization & Tokens`

`Base Layout & Background`

`$3`

`CSS & JS Imports`

`$3`

`$3`

`$3`

`Component Quick Reference`

`Animations & Experience Layer`

`$3`

`Nikke Utilities`

`$3`

`$3`

`$3`

`Customization & Tokens`