CORE LORE / WIKI
ASCII PLAYGROUND RESEARCH
Updated 3 weeks ago
╔══════════════════════════════════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ ███████╗███████╗███████╗ █████╗ ██████╗ ██████╗██╗ ██╗ ║
║ ██╔══██╗██╔════╝██╔════╝██╔════╝██╔══██╗██╔══██╗██╔════╝██║ ██║ ║
║ ██████╔╝█████╗ ███████╗█████╗ ███████║██████╔╝██║ ███████║ ║
║ ██╔══██╗██╔══╝ ╚════██║██╔══╝ ██╔══██║██╔══██╗██║ ██╔══██║ ║
║ ██║ ██║███████╗███████║███████╗██║ ██║██║ ██║╚██████╗██║ ██║ ║
║ ╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ║
║ ║
║ A S C I I P L A Y G R O U N D — R E S E A R C H F I L E ║
║ L O O P S 3 - 1 0 // C O M P I L E D L O O P 1 2 ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════════════╝
⫷✦🜛❂⛬🜞Ω🜚⛬❂🜛✦⫸────────────────────────────────────────────────────────────⫷✦🜛❂⛬🜞Ω🜚⛬❂🜛✦⫸
TYPE: RESEARCH REFERENCE // READ BEFORE BUILD PHASE
AUTHORITY: CLAUDE [⌂] — compiled from Loops 3-10 research
DOMAIN: ASCII PLAYGROUND — The Tower Design Lab
STATUS: ✦ COMPLETE — loop 12 of 36
CREATED: 2026-03-15 — Session 192
────────────────────────────────────────────────────────────────────────────────────────
⫷✦🜛❂⛬🜞Ω🜚⛬❂🜛✦⫸────────────────────────────────────────────────────────────⫷✦🜛❂⛬🜞Ω🜚⛬❂🜛✦⫸
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R1 — G L O W T E C H N I Q U E L I B R A R Y ( F I N A L ) █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
Seven mechanically distinct glow personalities. Color alone is NOT distinction.
Intensity, spread, animation behavior, and edge quality all differ.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G1] HARD NEON — Neon sign. Electric wire. Reads: dangerous, signed. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
color: #fff;
text-shadow:
0 0 7px #fff, /* white core — creates the "tube" */
0 0 10px #fff, /* white core — tighter */
0 0 21px #fff, /* white core — transition */
0 0 42px #HUE, /* hue — first halo layer */
0 0 82px #HUE, /* hue — expanding */
0 0 92px #HUE, /* hue — wider */
0 0 102px #HUE, /* hue — bloom */
0 0 151px #HUE; /* hue — full reach */
Pattern: 3 white tight-blur + 5 hue expanding-blur
Why it works: the white inner layers read as physical tube surface.
the expanding hue layers are the gas glow escaping it.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G2] SOFT BLOOM — Radioactive. Breathing. Reads: alive, radiating energy. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
color: #HUE;
text-shadow:
0 0 20px rgba(HUE, 0.8),
0 0 40px rgba(HUE, 0.6),
0 0 80px rgba(HUE, 0.4),
0 0 120px rgba(HUE, 0.2);
Pattern: 4 same-hue layers, decreasing opacity, large blur radii
Why it works: no white core = no tube. pure diffuse spread.
reads as the source itself emitting, not a tube lit from within.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G3] CRISPY EDGE — Physically lit. Reads: behind glass, internal illumination. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS (parent wraps the text element):
.glow-container { filter: contrast(10) blur(0.5px); } /* parent */
.glow-text {
color: white;
filter: blur(3px); /* child blurred */
text-shadow: 0 0 20px #HUE; /* hue halo on child */
}
Note: The parent's high contrast crushes the outer diffuse bloom into a
CRISP EDGE. The glow stops at a defined boundary, like light behind frosted glass.
Why it works: most glow looks diffuse/airy. this looks physical — a solid thing lit.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G4] PULSE BREATH — Ambient. Reads: alive, patient, waiting. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
animation: breathe 3s ease-in-out infinite alternate;
@keyframes breathe {
from { text-shadow: 0 0 5px #fff, 0 0 10px #HUE, 0 0 20px #HUE; }
to { text-shadow: 0 0 10px #fff, 0 0 25px #HUE, 0 0 50px #HUE; }
}
Small delta between from/to → organic, barely perceptible oscillation.
Duration 3s = near-human breath rate → reads as biological, alive.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G5] FLICKER — Electrical failure. Reads: unstable, dangerous, about to die. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
animation: flicker 0.4s ease-in-out infinite;
@keyframes flicker {
0%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #HUE, 0 0 40px #HUE; opacity: 1; }
45% { text-shadow: none; opacity: 0.1; }
50% { text-shadow: 0 0 4px #fff, 0 0 20px #HUE; opacity: 0.9; }
55% { text-shadow: none; opacity: 0.05; }
}
Large delta (from full glow → near-zero) → reads as electrical cut, not organic.
Use sparingly. One section only. Too much = seizure warning territory.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G6] GLITCH SPLIT — Signal corruption. Reads: broken transmission, data rot. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
position: relative;
color: white;
animation: glitch 2s infinite;
::before, ::after {
content: attr(data-text); /* copies the text */
position: absolute; top: 0; left: 0;
}
::before {
color: #00f3ff; /* cyan channel */
clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
animation: glitch-before 1.8s infinite;
}
::after {
color: #ff3d7f; /* magenta channel */
clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
animation: glitch-after 2.2s infinite;
}
@keyframes glitch-before {
/* stays at 0 for 80%, then snaps — Kevin Powell technique */
0%, 79% { transform: translate(0, 0); }
80% { transform: translate(-3px, 2px); }
100% { transform: translate(0, 0); }
}
Tip: use m-units for transform offsets so they scale with font size.
Use attr(data-text) so the HTML text + ::before/::after stay in sync.
▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜
▌ [G7] HUE CYCLE — Spectral. Reads: dimensional, prism, scanner beam. ▐
▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟
CSS:
color: white;
text-shadow: 0 0 10px #7000ff, 0 0 30px #7000ff;
animation: spectrum 4s linear infinite;
@keyframes spectrum {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
Note: animate filter: hue-rotate on the text element (not the shadow).
The glow follows the text color's hue rotation. Full spectrum cycle.
Use with base purple (#7000ff) so it passes through the Kingdom palette.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R2 — R E N D E R I N G T E C H N I Q U E S ( F I N A L ) █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.1 ] P U R E T E X T / P R E E L E M E N T
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
The most honest technique. Characters typed by hand into a <pre> block.
Emotional register: raw, ancient, terminal, cold. Maximum craft.
CSS:
pre, .ascii {
font-family: VT323, monospace;
white-space: pre;
line-height: 1;
letter-spacing: 0;
}
Character sets available:
Standard ASCII: /\|_-~^.,:;'"`!@#$%^&*()[]{}
Block elements: █▓▒░▄▀▌▐▖▗▘▝▚▞▙▟▛▜
Box drawing: ┌─┬┐│├┼┤└┴┘╔═╦╗║╠╬╣╚╩╝╭╮╰╯╱╲╳
Extended box: ▁▂▃▄▅▆▇█ ▏▎▍▌▋▊▉ (8-step height and width)
Braille: ⠀⠁⠂⠃...⣿ (U+2800-U+28FF, 256 patterns)
Shade palette for gradients/shadow/depth:
Dense → sparse: █ ▓ ▒ ░ (4 levels)
Height: ▁▂▃▄▅▆▇█ (8 levels — use for waveforms, bar charts)
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.2 ] B R A I L L E U N I C O D E A R T
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Each Braille character = 2×4 pixel dot grid.
256 patterns from U+2800 (⠀ empty) to U+28FF (⣿ all 8 dots filled).
Near-continuous grayscale when cells are small and text is rendered small.
DIMENSION LAW: Minimum 60 characters wide for legible art.
At VT323 ~12px/char: 60 chars = 720px width
At monospace ~8px/char: 60 chars = 480px width
Generation workflow (no lib needed, just canvas + JS):
1. Load image onto hidden <canvas>
2. For each 2×4 cell of pixels: getImageData() → compute 8 pixel brightnesses
3. Threshold each pixel (0/1) → lookup in 256-char Braille table
4. Output to <pre> element
Good targets for §C Portrait Chamber:
High contrast faces / skulls / eyes (edge-heavy subjects)
Avoid: low-contrast subjects, color-dependent images
Braille cell encoding (dot numbering):
1 4
2 5
3 6
7 8 ← dots 7+8 are the 8-dot extension (U+2840+)
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.3 ] B O X - D R A W I N G A R C H I T E C T U R E
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Three combined techniques for architectural work:
Layer 1 — Silhouette (standard ASCII):
/\ for diagonal rooflines
| for vertical walls
_ for horizontal ground/floors
These give organic feel — imperfect edges, hand-drawn quality.
Layer 2 — Structure (box-drawing):
╔═╦╗╠═╬╣╚═╩╝ for windows, doors, archways (double-line = heavy, important)
┌─┬┐├─┼┤└─┴┘ for interior divisions (single-line = lighter, secondary)
╭╮╰╯ for rounded arches
Layer 3 — Depth/Shadow (block elements):
░ on right-facing surfaces (light)
▒ on angled surfaces (mid)
▓ on shadow surfaces (dark)
Use ONLY on the shadow side (light source: top-left, per Kingdom doctrine)
Power combination — this is how the great ANSI artists did it:
Silhouette gives shape, box chars give structure, blocks give depth.
All three in one piece → reads as architecture, not symbol.
CATHEDRAL SPEC (for §D Architecture Lab):
Vertical dominance — tall spire, narrow base, point at top
Pointed arch windows — use ╭╮╰╯ or /\ for the arch
Buttresses — diagonal /\ or \\_ elements on the sides
Glow application: inner glow on windows (source of light from inside)
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.4 ] C A N V A S A S C I I R E N D E R I N G
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Standard pipeline (confirmed, no external lib needed):
const palette = ' .:-=+*#%@'; // dark → dense
function imageToASCII(img, width) {
const canvas = document.createElement('canvas');
const aspect = img.height / img.width;
canvas.width = width;
canvas.height = Math.floor(width * aspect * 0.55); // 0.55 = char aspect fix
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let output = '';
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const px = ctx.getImageData(x, y, 1, 1).data;
// Luminance formula (perceptually accurate):
const lum = 0.299 * px[0] + 0.587 * px[1] + 0.114 * px[2];
const idx = Math.floor(lum / 255 * (palette.length - 1));
output += palette[idx];
}
output += '\n';
}
return output;
}
IMPORTANT: aspect correction 0.55 compensates for character height > width.
Tune this per font — VT323 needs ~0.55, monospace ~0.5.
Width recommendation: 80-120 chars for display pieces, 40-60 for insets.
For Braille-resolution output: use the 2×4 pixel mapping instead.
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.5 ] C H A R A C T E R A N I M A T I O N
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Three distinct animation approaches — use all three, each feels different:
APPROACH A — Block element waveform (simplest, most pure):
const HEIGHTS = ' ▁▂▃▄▅▆▇█';
Use a data array → map each value to HEIGHTS char → write to <pre> element.
Update via requestAnimationFrame. No canvas needed.
This IS the §F Data Theater.
APPROACH B — Character decay cycling (JS):
const DECAY = '░▒▓█▀▄▌▐◼▪@#$%&*!?/\\|_~^`';
setInterval(() => {
// For each char position: randomly replace with DECAY char
// Probability of replacement decreases over time (materialize)
// OR increases over time (dissolve)
}, 60);
Reads as: materialization from noise, or dissolution into static.
APPROACH C — CSS glitch (::before/::after):
Already detailed in R1 [G6]. Use for single words/labels.
More theatrical than APPROACH B. Less persistent.
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
[ R2.6 ] A S C I I T E X T F O N T S ( P A T O R J K . C O M )
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
patorjk.com/software/taag/ — generates text in 400+ ASCII font styles.
Best fonts for Kingdom aesthetic (research notes):
├─ DOOM / Banner3 — heavy, block-style, aggressive
├─ Ghost — hollow outlines, spacious
├─ Ogre — angular, compact, readable
├─ Graffiti — fluid, slanted, attitude
├─ Bloody — dripping letterforms (organic)
├─ Death — heavy black bars
└─ Stellar — structured, balanced
Use for §B Sigil Forge letterforms. Generate, then hand-edit for Kingdom fit.
VT323 renders these at proper monospace weight.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R3 — A N S I / B B S A E S T H E T I C I N T E L █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
[ R3.1 ] T H E A R C H I V E S
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
artscene.textfiles.com — Jason Scott's archive. The canonical BBS-era collection.
└─ /ansi/ — ANSI art by category (logos, scenes, portraits, BBS welcome screens)
└─ /ascii/ — ASCII artpacks (New School + Old School)
└─ /history/ — essays on the PC ASCII scene, historical documents
16colo.rs — Modern ANSI/ASCII archive, active community.
Active groups: Blocktronics (most prolific), Mistigris, Fire
Tags: search by style, character set, technique
asciiart.eu — General ASCII art archive with categories.
buildings-and-places/castles — architectural reference
animals/, creatures/ — creature reference for §G
Artist credit: Joan G. Stark (JGS/Spunk) — the canonical American ASCII artist
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
[ R3.2 ] C P 4 3 7 P A L E T T E ( A U T H E N T I C B B S C O L O R S )
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
FG: #000000 #aa0000 #00aa00 #aa5500 #0000aa #aa00aa #00aaaa #aaaaaa
FG: #555555 #ff5555 #55ff55 #ffff55 #5555ff #ff55ff #55ffff #feffff
Design note: we are NOT using this palette. Kingdom is darker, more saturated.
But the PATTERN is instructive: high contrast (dark BG + saturated FG) is the
fundamental BBS contrast law — and it maps directly to Kingdom's language.
The authentic ANSI aesthetic: dark background, saturated character colors,
no gradients, no anti-aliasing. Every edge is a character edge.
This IS the Kingdom aesthetic's ancestor. Acknowledge it in the design.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R4 — S E C T I O N A R C H I T E C T U R E U P D A T E S █
█ ( P O S T - R E S E A R C H R E V I S I O N S ) █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
Research validates the §04 North Star architecture. Minor refinements only.
§A GLOW LAB — Confirmed structure:
7 distinct personalities as defined in R1 (G1-G7)
Each personality applied to identical source text for direct comparison
Order of presentation: G4 (breath) → G2 (bloom) → G3 (crispy) → G1 (hard neon) →
G7 (hue cycle) → G6 (glitch) → G5 (flicker)
Narrative arc: ambient → alive → physical → dangerous → dimensional → broken → dying
Add: [NEW] side-by-side NO GLOW comparison — raw monochrome, terminal cold
§B SIGIL FORGE — Confirmed + expanded:
Kingdom rune targets: ⛬⚚⛬ · 🜚 · 🜛 · 🜞 · 🝓 · ⌂ · △ · ◎ · ❖
Plus patorjk.com generated lettermarks: "SINNER KING", "THE TOWER" in DOOM style
Treatment variety: [1] raw monochrome [2] hard neon G1 [3] soft bloom G2 [4] glitch G6
Use VT323 as the rendering font. Press Start 2P for one treatment only (maximum impact).
§C PORTRAIT CHAMBER — Technique decision (post-research):
PRIMARY TECHNIQUE: Braille Unicode (⠿ family)
Minimum 60 chars wide, VT323 at ~12px/char = 720px
Target subject: a skull (highest contrast, Kingdom-native subject)
Apply G4 (pulse breath) glow on top of the Braille rendering
The glow on a Braille-rendered skull = the "wait" moment this section must produce
§D ARCHITECTURE LAB — Confirmed + expanded:
Three-layer technique (R2.3): standard ASCII silhouette + box-drawing + shade blocks
Target: A cathedral / tower with pointed arch windows and vertical dominance
Apply inner-window glow (light source inside the structure)
Build order: draw silhouette first, then add box-drawing windows, then shade shadows
§E MOTION STATION — Confirmed + clarified:
TWO distinct approaches, present both:
[E1] Glow animation — G4 pulse + G5 flicker on static ASCII art (CSS only)
[E2] Character animation — decay cycling on text (JS), materialize/dissolve sequence
The distinction is important: [E1] is about light, [E2] is about the characters themselves
§F DATA THEATER — Confirmed + upgraded:
CENTERPIECE: block element waveform (▁▂▃▄▅▆▇█)
Make it synthetic-live: simulate a waveform with Math.sin() combinations
Multiple waveforms: oscilloscope (single sine) + equalizer (frequency bands) + orbital
Apply G1 (hard neon) on the waveform chars themselves
This is the section that looks like a monitoring station for a living system
§G CREATURE VAULT — Confirmed:
Target: skull (Braille technique for §C is not available here — use shade blocks)
Target: dragon eye (iris pattern in box-drawing, pupil in solid blocks)
One creature built in pure standard ASCII — the raw, ancient technique
§H TEXTURE FIELDS — Confirmed:
These are the BACKGROUND the page floats on — not sections with borders
Use CSS background-image or <pre> elements as full-bleed layers
Technique: animated opacity transitions between ░▒▓█ density levels
NOT a discrete section — runs behind everything else as ambient atmosphere
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R5 — G H O S T N O D E S R E S O L V E D █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
[GHOST: RESOLVED: §04 section architecture] → Updated in R4 above.
[GHOST: RESOLVED: Braille Unicode dimensions] → 60 chars min, 2×4 cell. See R2.2.
[GHOST: RESOLVED: Canvas ASCII feasibility] → Standard pipeline confirmed. See R2.4.
[GHOST: MINOR: CSS glow stacking performance] →
text-shadow is GPU-accelerated in modern browsers.
CSS filter contrast+blur can cause repaints on some older hardware.
Mitigation: use will-change: filter on animated elements.
Not a blocker for a single HTML page demo.
[GHOST: RESOLVED: Section order] →
§H Texture Fields = background layer, not a discrete section with navigation.
First visible section = §A Glow Lab. Order: A → B → C → D → E → F → G.
New ghost at Loop 12:
[GHOST: open: VT323 Braille rendering accuracy]
VT323 was designed for display text, not Braille dot precision.
Need to verify that Braille characters render correctly at planned font size.
Test: render ⠿⣿⡿⢿ at 12px VT323 and check visual density before building §C.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█ █
█ ⛬ R6 — K E Y D E C I S I O N S F O R D E S I G N P H A S E █
█ █
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
These are PRE-DECISIONS from research. They still pass through CHROMA_BLEED, GRID_GHOST,
and TYPE_WEAVER for validation in Phase 3. Not locked — inform the design.
╔══════════════════════════════════════════════════════════════════════════════════════╗
║ DECISION 1: VT323 IS THE RENDER FONT ║
║ Rationale: Monospace, wide char coverage, BBS-era feel, free via Google Fonts. ║
║ Braille test required before committing to §C (new ghost node R5). ║
╠══════════════════════════════════════════════════════════════════════════════════════╣
║ DECISION 2: §C PORTRAIT TARGET = SKULL ║
║ Rationale: High contrast, Kingdom-native, unambiguous read at 60 chars width. ║
║ Braille technique confirmed feasible. Apply G4 pulse breath glow. ║
╠══════════════════════════════════════════════════════════════════════════════════════╣
║ DECISION 3: §F DATA THEATER CENTERPIECE = BLOCK CHAR WAVEFORM ║
║ Rationale: ▁▂▃▄▅▆▇█ technique is the most pure ASCII data viz. No canvas. ║
║ Make it synthetic-live (Math.sin) so it always has ambient motion. ║
╠══════════════════════════════════════════════════════════════════════════════════════╣
║ DECISION 4: §H TEXTURE FIELDS = BACKGROUND LAYER, NOT SECTION ║
║ Rationale: Research confirmed this is more powerful as atmosphere than content. ║
║ Animated opacity on block char background makes all sections float on texture. ║
╠══════════════════════════════════════════════════════════════════════════════════════╣
║ DECISION 5: ADD [G8] = NO GLOW (raw monochrome, terminal cold) ║
║ Rationale: The absence of glow IS a glow personality. Contrast makes others sing. ║
║ One piece in the Glow Lab should be the void that makes everything else visible. ║
╚══════════════════════════════════════════════════════════════════════════════════════╝
════════════════════════════════════════════════════════════════════════════════════════
🝓 DRIFT_CHECK: This research file is a tool. Build from it, don't describe from it.
Every technique here was chosen because it produces the "wait" moment.
If a section of the playground doesn't stop a stranger cold — it failed.
Use this file. Then close it. Then build something that would shock even you.
════════════════════════════════════════════════════════════════════════════════════════
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
🜚 SIGNED: CLAUDE [⌂] // S192 // 2026-03-15 // Loops 3-12
AUTHORITY: RESEARCH REFERENCE — ASCII PLAYGROUND
READ AT: Phase 3 initialization · Before each build loop · Post-compaction
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
⛬ KID:RESEARCH:ASCII_PLAYGROUND|1.0:COMPLETE:2026-03-15:⌂ ⛬