Corrupted Theme

Glass Components

Reusable glass components perfect for API documentation, dashboards, and modern web applications.

Glass Card

This is a glass-card component with backdrop blur and hover effects.

Hover Me

Hover over this card to see the enhanced shadow and border effects.

Glass Input

Glass Button

Link Button

Glass Code

const example = "Hello, World!";
const theme = {
  accent: "#d94f90",
  glass: "rgba(20, 12, 40, 0.7)"
};

Modals & Overlays

Loading & Progress

Spinners

Loading Bar

Progress Bars

25%

50%

75%

100%

Tooltips

Navigation Menus

Navbar (Sticky Navigation)

The navbar is sticky and stays at the top when scrolling. It includes logo and navigation links with hover effects.

<nav class="navbar">
  <div class="navbar-content">
    <a href="#" class="navbar-logo">
      <i class="fas fa-palette"></i> Logo
    </a>
    <ul class="navbar-links">
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>
        

Navbar with Submenu

<ul class="navbar-links">
  <li><a href="#">Home</a></li>
  <li class="has-submenu">
    <a href="#">Products <i class="fas fa-chevron-down"></i></a>
    <div class="submenu">
      <a href="#">Product 1</a>
      <a href="#">Product 2</a>
    </div>
  </li>
</ul>
        

Dropdown Menus

<div class="dropdown">
  <button class="dropdown-toggle" onclick="toggleDropdown(this)">
    Menu <i class="fas fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Action 1</a>
    <a href="#" class="dropdown-item">Action 2</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Separated Action</a>
  </div>
</div>
      

Tabs

Tab 1 Content

This is the content for the first tab.

Tab 2 Content

This is the content for the second tab.

Tab 3 Content

This is the content for the third tab.

Tables

Standard Table

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	User	Pending

Striped Table

Product	Price	Stock
Item 1	$29.99	In Stock
Item 2	$39.99	In Stock
Item 3	$19.99	Out of Stock

Pagination

Breadcrumbs

List Groups

Item 1

Active Item

Item 3

Disabled Item

Item 5

API Documentation Components

GET /api/v1/units

Retrieve a list of all available units. Supports filtering by element type and pagination.

Query Parameters

element string optional

Filter units by element type (water, wind, iron, electric, fire)

page number optional

Page number for pagination (default: 1)

Response (200 OK)

{
  "data": [
    {
      "id": 1,
      "name": "Scarlet Priest Abe",
      "element": "electric"
    }
  ],
  "meta": {
    "page": 1,
    "total": 100
  }
}

POST /api/v1/teams

Create a new team composition with up to 5 units.

Request Body

name string required

Team name

units array required

Array of unit IDs (max 5)

Nikke Components

Game-specific UI components for Nikke applications. See Full Team Builder Example

Element Badges

Water Wind Iron Electric Fire

Element Pills (Interactive)

Team Position Cards

1 Front Left

Scarlet Priest Abe

2 Front Middle

Soldier A Rapi

3 Front Right

Empty Slot

4 Back Left

Empty Slot

5 Back Right

Empty Slot

Unit Selection

Animation Utilities

Pre-built animation classes for common UI patterns. All animations respect prefers-reduced-motion for accessibility.

Fade Animations

`.fade-in`

Standard fade (0.5s)
Refresh page to see animation

`.fade-in-fast`

Quick fade (0.3s)
For snappy UI transitions

`.fade-in-slow`

Slow fade (1s)
For dramatic reveals

Slide Animations

`.slide-in`

Slide from bottom with bounce
Perfect for modals

`.slide-in-left`

Slide from left with bounce
For sidebars

`.slide-in-right`

Slide from right with bounce
For notifications

`.slide-in-slow`

Slow slide (1.2s)
Dramatic entrance

Scale Animations

`.scale-in`

Pop in from 95% to 100%
Subtle attention grabber

`.scale-up`

Hover to scale to 105%
Try hovering this card!

Pulse, Breathe & Float

`.pulse`

Pulses opacity 1 ↔ 0.7 (2s loop)
For attention indicators

`.breathe`

Slower pulse 0.8 ↔ 1 (3s loop)
Subtle ambient effect

`.float`

Floats up/down 10px (3s loop)
Smooth vertical motion

Shimmer (Loading State)

.shimmer - Animated loading state

Lift Effects (Hover)

`.lift`

Hover to lift 4px with shadow
Standard lift effect

`.lift-sm`

Hover to lift 2px (subtle)
Subtle hover feedback

`.lift-lg`

Hover to lift 8px (dramatic)
Strong hover effect

Transition Utilities

<!-- Fade animations -->
<div class="fade-in">Fades in on load</div>
<div class="fade-in-fast">Quick fade</div>
<div class="fade-in-slow">Slow fade</div>

<!-- Slide animations -->
<div class="slide-in">Slides from bottom</div>
<div class="slide-in-left">Slides from left</div>
<div class="slide-in-right">Slides from right</div>

<!-- Scale animations -->
<div class="scale-in">Pops in</div>
<div class="scale-up">Scales on hover</div>

<!-- Continuous animations -->
<div class="pulse">Pulses opacity</div>
<div class="breathe">Breathes slowly</div>
<div class="float">Floats up/down</div>
<div class="shimmer">Loading shimmer</div>

<!-- Hover effects (combine with transitions) -->
<div class="lift transition-normal">Lifts on hover</div>
<div class="lift-sm transition-fast">Subtle lift</div>
<div class="lift-lg transition-slow">Dramatic lift</div>

<!-- Transition utilities -->
<button class="btn transition-fast">Fast transitions</button>
<button class="btn transition-normal">Normal speed</button>
<button class="btn transition-slow">Slow & smooth</button>
      

Corrupted Animations & Text Highlighting

Corruption Loading Screen

The corruption loading animation plays automatically on first visit (or every 72 hours).

Features: Multi-language phrases (English/Romaji/Japanese), corrupted glyphs, typing animations, progress bar, and scanline effects.

<!-- Auto-plays on page load (every 72 hours) -->
<script src="corruption-loading.js"></script>

<!-- Disable auto-play -->
<html data-no-corruption-loading>

<!-- Manual trigger -->
<script>
  showCorruptionLoading({ force: true });
</script>
        

Multi-Language Corrupted Text (Japanese/English/Romaji)

Cycles through different language variants with smooth transitions.

Cycles through English → Romaji → Hiragana → Katakana
Watch for subtle glitching and language transitions

Three variants: English → Romaji → Hiragana

English → Romaji → Katakana

<!-- Simple usage with data attributes -->
<span class="corrupted-multilang" 
      data-english="Hello" 
      data-romaji="konnichiwa" 
      data-hiragana="こんにちは" 
      data-katakana="コンニチハ">
</span>

<!-- Display size variant -->
<span class="corrupted-multilang display" 
      data-english="Welcome" 
      data-romaji="youkoso">
</span>
      

Standard Corrupted Text Animation

Continuous corruption effect with dual-layer glitching. Hover to see the layers separate slightly.

CORRUPTED

Continuous corruption effect with glitch layers

CORRUPTED STRONG

Strong corruption with intense glow effect

GLITCH

Hover over this text to see the fragmented glitch effect with tearing noise

CORRUPTED TEXT

Text fragments and distorts on hover with clip-path animations, scanlines, and Japanese flicker

Text Highlighting (Code-like)

Use text-highlight for inline code-like highlighting.

Or use text-highlight code for a darker code block style.

You can also use accent, success, warning, or error variants.

Standard code tags also get the code block styling automatically.

Example: The function getUserData() returns a Promise.

Syntax-like Highlighting

const theme = "corrupted";
function init() {
// Initialize theme
return theme;
}

<span class="corrupted-text" data-text="CORRUPTED">CORRUPTED</span>
<span class="corrupted-strong">CORRUPTED STRONG</span>
<span class="text-highlight">highlighted text</span>
<span class="text-highlight code">code-like text</span>
<code>inline code</code>
      

Character-Level Corruption NEW v0.1.4

CLI Brand Parity: Matches Celeste CLI's translation-failure aesthetic. Japanese characters are mixed INTO English words at the character level (not word replacement).

Dual Corruption Systems

Multilingual Cycling

corrupted-text.js (existing)

Use for: Loading screens, full-screen animations, dramatic effects

Behavior: Cycles through language variants (English → Romaji → Kanji)

Loading

Character-Level Mixing NEW

character-corruption.js (new)

Use for: Dashboard titles, section headers, UI labels (matches CLI)

Behavior: Mixes Japanese INTO English

Loading

Corruption Intensity Levels

Watch the text below change every 3 seconds to see the randomization effect:

USAGE ANALYTICS

15% Minimal

Decorative only, critical labels

USAGE ANALYTICS

25% Low

Section headers, readable UI

USAGE ANALYTICS

35% Medium ★ Recommended

Dashboard titles, brand elements

USAGE ANALYTICS

45% High (Max)

Loading screens, dramatic effects (maximum readable)

Interactive Demo

CELESTE AI DASHBOARD

Click a button to see corruption at different intensities

❌ Anti-Patterns (What NOT to Do)

Leet Speak (BANNED)

US4G3 4N4LYT1CS

Number substitution (0,1,3,4,5,7) violates brand identity

Full Word Replacement

使用統計

Complete translation is NOT corruption

Over-Corruption (>45%)

壊統使計深分析監

Unreadable - violates accessibility (WCAG)

Implementation Example

<!-- Method 1: Auto-corruption with data attributes -->
<h1 class="auto-corrupt"
    data-text="CELESTE DASHBOARD"
    data-intensity="0.35"
    data-interval="3000">
  CELESTE DASHBOARD
</h1>

<script type="module">
  import { initAutoCorruption } from './character-corruption.js';
  initAutoCorruption();
</script>

<!-- Method 2: Manual JavaScript -->
<script type="module">
  import { corruptTextJapanese, INTENSITY } from './character-corruption.js';

  const title = document.getElementById('title');
  setInterval(() => {
    title.textContent = corruptTextJapanese('USAGE ANALYTICS', INTENSITY.MEDIUM);
  }, 3000);
</script>
      

New Bootstrap Components NEW v0.1.4

1:1 Bootstrap Parity: 25+ new components added for complete coverage. Build sites without writing custom CSS!

Accordion / Collapse

What is the Corrupted Theme?

Corrupted Theme is a production-ready glassmorphic design system with 65+ Bootstrap-equivalent components. It features a translation-failure aesthetic with Japanese character corruption, perfect for modern web applications.

How do I install it?

Install via npm: npm install @whykusanagi/corrupted-theme

Then import the CSS: import '@whykusanagi/corrupted-theme';

Is it accessible?

Yes! All components meet WCAG AA standards with proper color contrast, keyboard navigation, and screen reader support. Corruption intensity is capped at 45% to maintain readability.

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Click to expand</div>
    <div class="accordion-body">
      <p>Content goes here</p>
    </div>
  </div>
</div>

<script type="module">
  import { initAccordions } from './components.js';
  initAccordions(); // Auto-initializes on load
</script>
        

Toast Notifications

<script type="module">
  import { toast } from './components.js';

  // Success notification
  toast.success('Data saved successfully!', 'Success', 5000);

  // Warning notification
  toast.warning('Please review your input', 'Warning', 5000);

  // Error notification
  toast.error('Failed to connect to server', 'Error', 7000);

  // Info notification (no title)
  toast.info('New features available', '', 5000);
</script>
        

Button Groups

Horizontal button group:

Vertical button group:

Button toolbar:

<!-- Horizontal -->
<div class="btn-group">
  <button class="btn secondary active">Left</button>
  <button class="btn secondary">Middle</button>
  <button class="btn secondary">Right</button>
</div>

<!-- Vertical -->
<div class="btn-group-vertical">
  <button class="btn secondary">Top</button>
  <button class="btn secondary">Bottom</button>
</div>
        

Input Groups

Search with prepend text:

Input with append button:

Both prepend and append:

$

.00

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" placeholder="Username">
</div>
        

Form Enhancements

Custom Checkboxes & Radios

Enable notifications

Auto-save drafts

Disabled option

Option 1

Option 2

Toggle Switches

Dark mode

Auto-play videos

Disabled switch

Range Slider

Drag the slider to adjust value

Custom Select

Floating Labels

Email address

Message

Custom File Upload

Choose file

<!-- Checkbox -->
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check1">
  <label class="form-check-label" for="check1">Label</label>
</div>

<!-- Toggle Switch -->
<div class="form-switch">
  <input type="checkbox" class="form-switch-input" id="switch1">
  <label class="form-switch-label" for="switch1">Dark mode</label>
</div>

<!-- Range Slider -->
<input type="range" class="form-range" min="0" max="100" value="50">

<!-- Floating Label -->
<div class="form-floating">
  <input type="text" id="float-input" placeholder=" ">
  <label for="float-input">Email</label>
</div>
        

Utility Classes

Close Button

Standardized × close button

Text Truncate

This is a very long text that will be truncated with an ellipsis

Aspect Ratios

16:9 Ratio

Screen Reader Only

This text is only for screen readers Visible text

WCAG AA compliant

<!-- Close button -->
<button class="btn-close"></button>

<!-- Text truncate -->
<p class="text-truncate">Long text...</p>

<!-- Aspect ratio containers -->
<div class="ratio ratio-16x9">
  <img src="image.jpg" alt="...">
</div>

<!-- Screen reader only -->
<span class="visually-hidden">For screen readers</span>
        

Glass Components

Glass Card

Glass Card

Hover Me

Glass Input

Glass Button

Glass Code

Modals & Overlays

Modal Title

Large Modal

Card Inside Modal

Loading & Progress

Spinners

Loading Bar

Progress Bars

Tooltips

Navigation Menus

Navbar (Sticky Navigation)

Navbar with Submenu

Dropdown Menus

Tabs

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tables

Standard Table

Striped Table

Pagination

Breadcrumbs

List Groups

API Documentation Components

Query Parameters

Request Body

Nikke Components

Element Badges

Element Pills (Interactive)

Team Position Cards

Unit Selection

Animation Utilities

Fade Animations

.fade-in

.fade-in-fast

.fade-in-slow

Slide Animations

.slide-in

.slide-in-left

.slide-in-right

.slide-in-slow

Scale Animations

.scale-in

.scale-up

Pulse, Breathe & Float

.pulse

.breathe

.float

Shimmer (Loading State)

Lift Effects (Hover)

.lift

.lift-sm

.lift-lg

Transition Utilities

Corrupted Animations & Text Highlighting

Corruption Loading Screen

Multi-Language Corrupted Text (Japanese/English/Romaji)

Standard Corrupted Text Animation

Text Highlighting (Code-like)

Syntax-like Highlighting

Character-Level Corruption NEW v0.1.4

Dual Corruption Systems

Multilingual Cycling

Character-Level Mixing NEW

Corruption Intensity Levels

USAGE ANALYTICS

USAGE ANALYTICS

USAGE ANALYTICS

USAGE ANALYTICS

Interactive Demo

CELESTE AI DASHBOARD

❌ Anti-Patterns (What NOT to Do)

`.fade-in`

`.fade-in-fast`

`.fade-in-slow`

`.slide-in`

`.slide-in-left`

`.slide-in-right`

`.slide-in-slow`

`.scale-in`

`.scale-up`

`.pulse`

`.breathe`

`.float`

`.lift`

`.lift-sm`

`.lift-lg`