@whykusanagi/corrupted-theme 0.1.6 → 0.1.8

package/docs/governance/VERSION_REFERENCES.md

@@ -1,229 +1,86 @@
 # Version References - Update Checklist
 
-**Purpose**: Complete list of all files containing version numbers that must be updated when releasing a new version.
+**Purpose**: Canonical list of every file containing a version number. Update all of these when releasing a new version.
 
-**Current Version**: 0.1.4
+**Current Version**: 0.1.8
 
 ---
 
-## Critical Files (MUST UPDATE)
-
-### 1. package.json
-**Location**: `/package.json`
-**Line**: 3
-```json
-"version": "0.1.4"
-```
-
-### 2. CHANGELOG.md
-**Location**: `/CHANGELOG.md`
-**Lines**: 24 (header), 116-117 (references)
-- Add new version header: `## [0.1.X] - YYYY-MM-DD`
-- Update component counts if applicable
-- List all changes under new version
-
----
-
-## Documentation Files (SHOULD UPDATE)
-
-### 3. NPM_PACKAGE.md
-**Location**: `/docs/platforms/NPM_PACKAGE.md`
-**Lines to update**:
-- Line 34: Example package.json version
-- Line 83: CDN link with version (`@whykusanagi/corrupted-theme@0.1.X`)
-- Line 667: Version example
-- Line 677: Version history table (current stable release)
-- Line 694: Install command example
-- Line 852: Package version footer
-
-### 4. VERSION_MANAGEMENT.md
-**Location**: `/docs/governance/VERSION_MANAGEMENT.md`
-**Lines to update**:
-- Line 107: Current Celeste version
-- Line 183: Example changelog header
-- Line 444: Current Celeste version footer
-
-### 5. DESIGN_SYSTEM_GOVERNANCE.md
-**Location**: `/docs/governance/DESIGN_SYSTEM_GOVERNANCE.md`
-**Lines**: 223-224, 305
-- Version increment examples in tables
-- Update "current" version reference
+## Files That MUST Be Updated on Every Release
+
+| # | File | Location(s) | What to change |
+|---|------|-------------|----------------|
+| 1 | `package.json` | line 3 | `"version": "0.1.8"` |
+| 2 | `package-lock.json` | lines 3 and 9 | `"version": "0.1.8"` (both occurrences) |
+| 3 | `CHANGELOG.md` | top of file | Add new `## [0.1.X] - YYYY-MM-DD` section |
+| 4 | `README.md` | search for old ver | Any install/usage examples with pinned version |
+| 5 | `index.html` *(root)* | lines 476, 725 | Hero badge `v0.1.X` and footer `Corrupted Theme v0.1.X` |
+| 6 | `examples/index.html` | lines 496, 779 | Hero badge and footer |
+| 7 | `examples/showcase-complete.html` | lines 1700, 1923 | Footer + toast `Welcome to Corrupted Theme v0.1.X!` |
+| 8 | `examples/showcase.html` | line 468 | Footer |
+| 9 | `examples/button.html` | line 444 | Footer |
+| 10 | `examples/card.html` | line 687 | Footer |
+| 11 | `examples/form.html` | line 556 | Footer |
+| 12 | `examples/layout.html` | line 517 | Footer |
+| 13 | `examples/nikke-team-builder.html` | line 569 | Footer |
+
+## Files That SHOULD Be Updated (docs/governance)
+
+| # | File | Location(s) | What to change |
+|---|------|-------------|----------------|
+| 14 | `docs/governance/VERSION_REFERENCES.md` *(this file)* | line 5 | `**Current Version**: X.Y.Z` |
+| 15 | `docs/governance/VERSION_MANAGEMENT.md` | lines 107, 444 | `Current Celeste version: X.Y.Z` |
+| 16 | `docs/platforms/NPM_PACKAGE.md` | lines 34, 83, 667, 675–676 (table), 695, 853 | CDN link, install example, semver example, version table (add new row at top), footer |
 
 ---
 
-## Example/Showcase Files (SHOULD UPDATE)
-
-### 6. index.html (Main Landing)
-**Location**: `/examples/index.html`
-**Lines to update**:
-- Line 476: Hero version badge `v0.1.X — Production Ready`
-- Line 725: Footer version `Corrupted Theme v0.1.X`
-
-### 7. showcase-complete.html
-**Location**: `/examples/showcase-complete.html`
-**Lines to update**:
-- Line 1135: "NEW v0.1.4" badge (keep for current release, change to version number after)
-- Line 1317: "NEW v0.1.4" badge (keep for current release, change to version number after)
-- Line 1697: Footer version `v0.1.X`
-- Line 1835: Comment `<!-- NEW v0.1.4: ... -->`
-- Line 1922: Toast message `Welcome to Corrupted Theme v0.1.X!`
-
-### 8. Other Example Pages
-**Location**: `/examples/*.html`
-**Files**: showcase.html, form.html, layout.html, card.html, button.html, nikke-team-builder.html
-
-All have footer version references like:
-```html
-<p>... • Corrupted Theme v0.1.0</p>
-```
+## What to Leave Alone
 
-**Update these to current version** (currently showing v0.1.0, should be v0.1.4)
+- **`CHANGELOG.md`** historical entries (0.1.7, 0.1.6, etc.) — these are release history, never change them
+- **`docs/governance/DESIGN_SYSTEM_GOVERNANCE.md`** — uses version numbers as abstract examples in tables/diagrams, not live references
+- **`docs/planning/*.md`** — archived planning docs with old version references, leave as historical record
+- **`docs/platforms/NPM_PACKAGE.md`** version history table rows other than the current one
+- **HTML comments** like `<!-- NEW v0.1.4 -->` in showcase pages — these record when a feature was added
 
 ---
 
-## Version Bump Procedure
-
-When releasing a new version (e.g., 0.1.4 → 0.1.4):
-
-### Step 1: Core Files
-```bash
-# 1. Update package.json
-npm version patch  # or minor, or major
-
-# 2. Update CHANGELOG.md
-# - Add new version header
-# - List all changes
-```
-
-### Step 2: Documentation
-```bash
-# 3. Update NPM_PACKAGE.md
-#    - Search and replace version numbers
-#    - Update version history table
-
-# 4. Update VERSION_MANAGEMENT.md
-#    - Update "Current Celeste version"
+## One-Command Version Bump
 
-# 5. Update DESIGN_SYSTEM_GOVERNANCE.md
-#    - Update version examples if needed
-```
-
-### Step 3: Examples
 ```bash
-# 6. Update index.html
-#    - Hero badge
-#    - Footer
+NEW=0.1.9
+OLD=0.1.8
 
-# 7. Update showcase-complete.html
-#    - Change "NEW v0.1.4" badges to just version number
-#    - Update footer
-#    - Update toast message
+# 1. Core package files (auto-syncs both package.json and package-lock.json)
+npm version patch --no-git-tag-version   # or minor / major
 
-# 8. Update all other example pages
-#    - Bulk find/replace footer versions
-```
+# 2. All HTML example footers + badges
+find . -name "*.html" ! -path "*/node_modules/*" \
+  -exec sed -i '' "s/v${OLD}/v${NEW}/g" {} +
 
-### Step 4: Search & Verify
-```bash
-# Search for old version references
-grep -rn "v0\.1\.[0-9]" . --include="*.html" --include="*.md" --include="*.json"
+# 3. Docs
+sed -i '' "s/${OLD}/${NEW}/g" \
+  docs/governance/VERSION_REFERENCES.md \
+  docs/governance/VERSION_MANAGEMENT.md \
+  docs/platforms/NPM_PACKAGE.md
 
-# Verify package.json
-cat package.json | grep version
+# 4. Add 0.1.9 row to NPM_PACKAGE.md version table manually
 
-# Verify CHANGELOG.md has new entry
-head -30 CHANGELOG.md
+# 5. Verify nothing left
+grep -rn "${OLD}" . --include="*.html" --include="*.md" --include="*.json" \
+  | grep -v node_modules | grep -v ".git" | grep -v CHANGELOG.md
 ```
 
 ---
 
-## Automated Version Bump Script (Future)
-
-Create `/scripts/bump-version.sh`:
+## Verify Current State
 
 ```bash
-#!/bin/bash
-# Usage: ./scripts/bump-version.sh 0.1.4
-
-NEW_VERSION=$1
-OLD_VERSION=$(node -p "require('./package.json').version")
-
-echo "Bumping version: $OLD_VERSION → $NEW_VERSION"
-
-# Update package.json
-npm version $NEW_VERSION --no-git-tag-version
-
-# Update all HTML files
-find examples -name "*.html" -exec sed -i '' "s/v$OLD_VERSION/v$NEW_VERSION/g" {} +
-
-# Update documentation
-find docs -name "*.md" -exec sed -i '' "s/$OLD_VERSION/$NEW_VERSION/g" {} +
-
-echo "✓ Version bumped to $NEW_VERSION"
-echo "⚠ Don't forget to update CHANGELOG.md manually!"
-```
-
----
-
-## Version Number Patterns to Search For
-
-When updating, search for these patterns:
-
-```bash
-# Version with v prefix
-"v0.1.4"
-"v0\.1\.3"
-
-# Version without v prefix
-"0.1.4"
-"0\.1\.3"
-
-# NPM package version
-"@whykusanagi/corrupted-theme@0.1.4"
-
-# NEW badge references
-"NEW v0.1.4"
-"NEW in v0.1.4"
+# Quick check — should only show 0.1.8 in live files, old versions only in CHANGELOG
+grep -rn "0\.1\.[0-9]" . --include="*.html" --include="*.json" \
+  | grep -v node_modules | grep -v ".git"
 ```
 
 ---
 
-## Current Version Discrepancies (As of 2025-12-15)
-
-**Files showing OLD versions that need updating:**
-
-1. `/examples/showcase.html` - Shows v0.1.0 (should be v0.1.4)
-2. `/examples/form.html` - Shows v0.1.0 (should be v0.1.4)
-3. `/examples/layout.html` - Shows v0.1.0 (should be v0.1.4)
-4. `/examples/card.html` - Shows v0.1.0 (should be v0.1.4)
-5. `/examples/button.html` - Shows v0.1.0 (should be v0.1.4)
-6. `/examples/nikke-team-builder.html` - Shows v0.1.0 (should be v0.1.4)
-7. `/examples/showcase-complete.html` footer - Shows v0.1.0 (should be v0.1.4)
-8. `/examples/index.html` - Shows v0.1.2 (should be v0.1.4)
-9. `/docs/platforms/NPM_PACKAGE.md` - Shows v0.1.2 (should be v0.1.4)
-10. `/docs/governance/VERSION_MANAGEMENT.md` - Shows v0.1.2 (should be v0.1.4)
-
-**Action Required**: Update all example footers and documentation to v0.1.4
-
----
-
-## Next Version Release Checklist
-
-When preparing v0.1.4 (or next version):
-
-- [ ] Update `package.json` version
-- [ ] Add CHANGELOG.md entry with release date
-- [ ] Update NPM_PACKAGE.md (6 locations)
-- [ ] Update VERSION_MANAGEMENT.md (3 locations)
-- [ ] Update index.html hero and footer
-- [ ] Update showcase-complete.html (5 locations)
-- [ ] Update all example page footers (6 files)
-- [ ] Run version search to verify no old references remain
-- [ ] Build and test Docker container
-- [ ] Git tag release: `git tag v0.1.4`
-- [ ] Publish to npm: `npm publish`
-
----
-
-**Last Updated**: 2025-12-15
-**Maintained By**: whykusanagi team
+**Last Updated**: 2026-03-01
+**Maintained By**: whykusanagi

package/docs/platforms/NPM_PACKAGE.md

@@ -31,7 +31,7 @@
 ```json
 {
   "name": "@whykusanagi/corrupted-theme",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "Premium corrupted AI aesthetic with glassmorphism and translation-failure linguistics",
   "author": "Kusanagi <you@example.com>",
   "license": "MIT",
@@ -80,7 +80,7 @@ pnpm add @whykusanagi/corrupted-theme
 
 ```html
 <!-- Full theme (8.2KB gzipped) -->
-<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.1.4/dist/theme.css">
+<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.1.8/dist/theme.css">
 ```
 
 ### Local Development
@@ -664,7 +664,7 @@ The package follows [Semantic Versioning 2.0.0](https://semver.org/):
 ```
 MAJOR.MINOR.PATCH
 
-Example: 0.1.4
+Example: 0.1.8
          │ │ └─ Patch: Bug fixes (backward compatible)
          │ └─── Minor: New features (backward compatible)
          └───── Major: Breaking changes
@@ -674,8 +674,10 @@ Example: 0.1.4
 
 | Version | Date | Changes | Migration |
 |---------|------|---------|-----------|
-| **0.1.4** | 2025-12-10 | Current stable release | N/A |
-| 0.1.1 | 2025-11-15 | Added interactive states | None required |
+| **0.1.8** | 2026-03-01 | GLSL vortex, Canvas particles, new JS components | N/A |
+| 0.1.7 | 2026-02-07 | Security, lifecycle, new components | N/A |
+| 0.1.6 | 2026-01-15 | Package cleanup | N/A |
+| 0.1.4 | 2025-12-10 | Character corruption, components | N/A |
 | 0.1.0 | 2025-10-01 | Initial public release | N/A |
 
 ### Upgrade Strategy
@@ -691,7 +693,7 @@ npm update @whykusanagi/corrupted-theme
 npm install @whykusanagi/corrupted-theme@^0.2.0
 
 # Update to specific version
-npm install @whykusanagi/corrupted-theme@0.1.4
+npm install @whykusanagi/corrupted-theme@0.1.8
 
 # Update to latest (including major - may have breaking changes)
 npm install @whykusanagi/corrupted-theme@latest
@@ -849,6 +851,6 @@ import '@whykusanagi/corrupted-theme/src/css/components.css';
 
 **Last Updated**: 2025-12-13
 **Version**: 1.0.0
-**Package Version**: 0.1.4
+**Package Version**: 0.1.8
 **Maintainer**: Celeste Brand System
 **Status**: ✅ Production Ready

package/examples/advanced/glsl-vortex.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GLSL Vortex - Corrupted Theme</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link rel="stylesheet" href="../../src/css/theme.css">
+  <style>
+    body { margin: 0; background: #000; overflow-x: hidden; }
+
+    .vortex-wrap {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+    }
+
+    #vortex-canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding: var(--spacing-2xl);
+      pointer-events: none;
+    }
+
+    .controls-panel {
+      pointer-events: all;
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+      width: 100%;
+      max-width: 480px;
+      backdrop-filter: blur(12px);
+    }
+
+    .controls-panel h2 {
+      color: var(--accent);
+      margin: 0 0 var(--spacing-md);
+      font-size: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
+    .control-row {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-md);
+      margin-bottom: var(--spacing-sm);
+    }
+
+    .control-row label {
+      color: var(--text-muted);
+      font-size: 0.8rem;
+      width: 120px;
+      flex-shrink: 0;
+    }
+
+    .control-row input[type="range"] {
+      flex: 1;
+      accent-color: var(--corrupted-magenta);
+    }
+
+    .control-row .val {
+      color: var(--corrupted-cyan);
+      font-size: 0.8rem;
+      width: 40px;
+      text-align: right;
+    }
+
+    .hue-row {
+      border-top: 1px solid var(--border);
+      margin-top: var(--spacing-sm);
+      padding-top: var(--spacing-sm);
+    }
+
+    .hue-toggle {
+      display: flex;
+      gap: var(--spacing-sm);
+      margin-bottom: var(--spacing-sm);
+    }
+
+    .hue-toggle button {
+      flex: 1;
+      padding: 4px 8px;
+      font-size: 0.75rem;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-muted);
+      transition: all 0.2s;
+    }
+
+    .hue-toggle button.active {
+      background: var(--corrupted-magenta);
+      border-color: var(--corrupted-magenta);
+      color: #000;
+    }
+
+    .code-block {
+      margin-top: var(--spacing-2xl);
+      max-width: 700px;
+      width: 100%;
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+    }
+
+    .code-block h3 {
+      color: var(--accent);
+      font-size: 0.85rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin: 0 0 var(--spacing-md);
+    }
+
+    .code-block pre {
+      margin: 0;
+      overflow-x: auto;
+      font-size: 0.78rem;
+      color: var(--corrupted-cyan);
+      line-height: 1.5;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li class="has-submenu">
+          <a href="../showcase-complete.html">
+            <i class="fas fa-cube"></i> Components
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../showcase-complete.html"><i class="fas fa-layer-group"></i> All Components</a>
+            <a href="../showcase-complete.html#glass"><i class="fas fa-square"></i> Glass</a>
+            <a href="../showcase-complete.html#components"><i class="fas fa-shapes"></i> Standard</a>
+            <a href="../showcase-complete.html#navigation"><i class="fas fa-bars"></i> Navigation</a>
+            <a href="../showcase-complete.html#api-docs"><i class="fas fa-code"></i> API Docs</a>
+          </div>
+        </li>
+        <li class="has-submenu">
+          <a href="../extensions-showcase.html" class="active">
+            <i class="fas fa-puzzle-piece"></i> Extensions
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../extensions-showcase.html#gallery"><i class="fas fa-images"></i> Gallery</a>
+            <a href="../extensions-showcase.html#lightbox"><i class="fas fa-expand"></i> Lightbox</a>
+            <a href="../extensions-showcase.html#nsfw"><i class="fas fa-eye-slash"></i> NSFW Blur</a>
+            <a href="../extensions-showcase.html#social"><i class="fas fa-share-alt"></i> Social Links</a>
+            <a href="../extensions-showcase.html#countdown"><i class="fas fa-hourglass-half"></i> Countdown</a>
+            <a href="glsl-vortex.html" class="active"><i class="fas fa-hurricane"></i> GLSL Vortex</a>
+            <a href="particles-bg.html"><i class="fas fa-atom"></i> Particles BG</a>
+          </div>
+        </li>
+        <li class="has-submenu">
+          <a href="#">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <!-- Full-screen vortex -->
+  <div class="vortex-wrap">
+    <canvas id="vortex-canvas"></canvas>
+    <div class="overlay">
+
+      <!-- Controls -->
+      <div class="controls-panel">
+        <h2><i class="fas fa-sliders-h"></i> Vortex Controls</h2>
+
+        <div class="control-row">
+          <label>Speed</label>
+          <input type="range" id="ctrl-speed" min="0.1" max="3.0" step="0.05" value="1.0">
+          <span class="val" id="val-speed">1.00</span>
+        </div>
+
+        <div class="control-row">
+          <label>Intensity</label>
+          <input type="range" id="ctrl-intensity" min="0.1" max="3.0" step="0.05" value="1.0">
+          <span class="val" id="val-intensity">1.00</span>
+        </div>
+
+        <div class="control-row">
+          <label>Rotation Rate</label>
+          <input type="range" id="ctrl-rotation" min="0.0" max="5.0" step="0.05" value="1.0">
+          <span class="val" id="val-rotation">1.00</span>
+        </div>
+
+        <div class="hue-row">
+          <div class="hue-toggle">
+            <button id="btn-quasar" class="active">Quasar (multi-color)</button>
+            <button id="btn-fixed">Fixed Hue</button>
+          </div>
+          <div class="control-row" id="hue-slider-row" style="display:none;">
+            <label>Hue</label>
+            <input type="range" id="ctrl-hue" min="0.0" max="1.0" step="0.01" value="0.6">
+            <span class="val" id="val-hue">0.60</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Code snippet -->
+      <div class="code-block">
+        <h3>Minimal Usage</h3>
+        <pre><code>&lt;canvas id="my-canvas" style="width:100%;height:400px;"&gt;&lt;/canvas&gt;
+&lt;script src="src/lib/corrupted-vortex.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  const vortex = new CorruptedVortex(
+    document.getElementById('my-canvas'),
+    {
+      speed:        1.0,   // 0.1&#x2013;3.0
+      intensity:    1.0,   // 0.1&#x2013;3.0
+      rotationRate: 1.0,   // 0.0&#x2013;5.0
+      hue:          null,  // null = quasar; 0.0&#x2013;1.0 = fixed hue
+    }
+  );
+  // vortex.stop();
+  // vortex.start();
+  // vortex.destroy();
+&lt;/script&gt;</code></pre>
+      </div>
+
+    </div><!-- /overlay -->
+  </div><!-- /vortex-wrap -->
+
+  <script src="../../src/lib/corrupted-vortex.js"></script>
+  <script>
+    const canvas = document.getElementById('vortex-canvas');
+    const vortex = new CorruptedVortex(canvas);
+
+    function bind(sliderId, valId, prop) {
+      const slider = document.getElementById(sliderId);
+      const display = document.getElementById(valId);
+      slider.addEventListener('input', () => {
+        const v = parseFloat(slider.value);
+        vortex.options[prop] = v;
+        display.textContent = v.toFixed(2);
+      });
+    }
+
+    bind('ctrl-speed',    'val-speed',    'speed');
+    bind('ctrl-intensity','val-intensity','intensity');
+    bind('ctrl-rotation', 'val-rotation', 'rotationRate');
+
+    document.getElementById('ctrl-hue').addEventListener('input', function() {
+      vortex.options.hue = parseFloat(this.value);
+      document.getElementById('val-hue').textContent = parseFloat(this.value).toFixed(2);
+    });
+
+    document.getElementById('btn-quasar').addEventListener('click', () => {
+      vortex.options.hue = null;
+      document.getElementById('btn-quasar').classList.add('active');
+      document.getElementById('btn-fixed').classList.remove('active');
+      document.getElementById('hue-slider-row').style.display = 'none';
+    });
+
+    document.getElementById('btn-fixed').addEventListener('click', () => {
+      const hue = parseFloat(document.getElementById('ctrl-hue').value);
+      vortex.options.hue = hue;
+      document.getElementById('btn-fixed').classList.add('active');
+      document.getElementById('btn-quasar').classList.remove('active');
+      document.getElementById('hue-slider-row').style.display = 'flex';
+    });
+  </script>
+</body>
+</html>