Monorepo for Aesthetic.Computer
aesthetic.computer
feat: stage mode text gets cycling color drop shadow
Replace static white text-stroke with an animated text-shadow that
cycles through black, white, cyan, magenta, yellow, green over 6s.
Ensures code text stays readable even when color words sit on
their own background color.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+12
-3
+12
-3
system/public/kidlisp.com/index.html
+12
-3
system/public/kidlisp.com/index.html
···
321
321
background: transparent !important;
322
322
}
323
323
324
-
/* Thin white outline on editor text for readability over animation */
324
+
/* Cycling color drop shadow on editor text for readability over animation */
325
325
body.stage-mode:not(.device-mode) .monaco-editor .view-lines span {
326
-
-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.6);
327
-
paint-order: stroke fill;
326
+
text-shadow: 1px 1px 2px var(--stage-shadow-color, rgba(0,0,0,0.8));
327
+
animation: stage-shadow-cycle 6s linear infinite;
328
+
}
329
+
@keyframes stage-shadow-cycle {
330
+
0% { --stage-shadow-color: rgba(0, 0, 0, 0.8); }
331
+
16% { --stage-shadow-color: rgba(255, 255, 255, 0.9); }
332
+
33% { --stage-shadow-color: rgba(0, 200, 255, 0.8); }
333
+
50% { --stage-shadow-color: rgba(255, 0, 180, 0.8); }
334
+
66% { --stage-shadow-color: rgba(255, 220, 0, 0.8); }
335
+
83% { --stage-shadow-color: rgba(0, 255, 120, 0.8); }
336
+
100% { --stage-shadow-color: rgba(0, 0, 0, 0.8); }
328
337
}
329
338
330
339
/* Hide line numbers in stage mode */