Night Grid cyberpunk style guide

Spec, stylesheet, glitch script, Claude Code skill and the design
canvas source.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bgrollemanandClaude Opus 5.5 committed 2026-11-01 09:21:37 +01:00
commit 94832d861b
8 files changed
+845

No files matched your search

+15
View File
@@ -0,0 +1,15 @@
// Night Grid: glitch one random .ng-glitch element every 6–14s (~10s average).
(() => {
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const next = () => setTimeout(tick, 6000 + Math.random() * 8000);
const tick = () => {
const els = document.querySelectorAll('.ng-glitch');
const el = els[Math.floor(Math.random() * els.length)];
if (el) {
el.classList.add('is-glitching');
el.addEventListener('animationend', () => el.classList.remove('is-glitching'), { once: true });
}
next();
};
next();
})();