---
type: Index
title: Josh Coolman — Design Experiments
description: An agent-queryable knowledge bundle of self-contained frontend design experiments.
resource: https://www.joshcoolman.com/design-experiments
---

# Design Experiments

This is an [Open Knowledge Format](https://github.com/GoogleCloudPlatform/knowledge-catalog/blob/main/okf/SPEC.md) bundle describing the design experiments built in Josh Coolman's sandbox (https://github.com/joshcoolman/sandbox).

Each concept below is a self-contained frontend experiment. Follow a link to read its description, then use its `resource` (live demo) and `source` (GitHub) fields to pull the implementation.

- [Adaptive Grid](./adaptive-grid.md) — A strict Swiss grid poster on a square module — lines, crosshair markings, and color blocks that reflow six columns down to three.
- [War Room](./war-room.md) — A wall of live HUD panels — DEFCON map, spinning globe, target dossiers — running itself like a movie command center.
- [Seismic Mesh](./seismic-mesh.md) — A Fable 5 experiment — click to trigger a quake: the mountain rises, freezes at peak, and telemetry decodes in beside it.
- [Step Sequencer](./step-sequencer.md) — A 16×11 grid across lead, bass, and drum layers — hit generate for an instant techno groove.
- [Slide Gallery](./slide-gallery.md) — A row of slivers; hover one and it opens while the strip glides to keep it centered.
- [Ripple Cycle](./ripple-cycle.md) — Click anywhere — a wave radiates from your finger and pulls the next frame through.
- [Kobold Blaster](./kobold-blaster.md) — A horde shooter where Claude Code wrote the game and GPT-image-1 painted the sprites.
- [Chatroom](./chatroom.md) — Two AI characters trade an opener; you join as the third.
- [Leaderboard](./leaderboard.md) — Gamey leaderboard with cascading rank changes, character profiles, and award animations.
- [ASCII Reveal](./ascii-reveal.md) — Images materialize from ASCII art before the photograph resolves.
- [Monono](./monono.md) — A sparkly J-pop idol AI trapped inside a cheap entertainment device.
- [Camera Rig](./camera-rig.md) — Virtual camera orbit controls that output JSON parameters for image-gen models.
- [Moodboard](./moodboard.md) — Infinite canvas for arranging images, all local-first with no uploads.
- [Image to UI](./image-to-ui.md) — Interactive components reverse-engineered from reference images.
- [Candy Icons](./candy-icons.md) — Ten 3D app icons built from pure CSS and SVG gradients.
- [Card Stack](./card-stack.md) — Scroll-driven stack where cards peel off and zoom to fullscreen.
- [Retro Bento](./retro-bento.md) — Nine fictional hardware modules in a bento grid, where CrossFit Bento meets Retro Tech.
- [Retro Tech Control Panel](./retro-tech.md) — Hardware-inspired control panel rendered entirely in CSS.
- [CrossFit Bento](./crossfit-bento.md) — Dark bento dashboard for CrossFit training data across nine widgets.
- [Sticky Notes](./sticky-notes.md) — A swipeable stack of Post-its rendered from markdown, portable for any page.
- [Contact Sheet](./contact-sheet.md) — Image folder browser for building file lists to share with LLMs.
- [Font Pairings](./font-pairings.md) — Forty curated Google Font pairings, click-to-copy as an LLM prompt.
- [Modular Grid](./modular-grid.md) — Swiss-inspired modular grid system with toggleable overlay and type specimen.
- [Day at a Glance](./day-at-a-glance.md) — Workday timeline with a now-line that tracks real time.
- [CrossFit Design Challenge](./crossfit-challenge.md) — Four AI personas each designed a dark-mode gym homepage.
- [Terminator - Text Scramble](./terminator.md) — Text that scrambles chaotically, then resolves line by line.
- [Brand Guidelines](./brand-guidelines.md) — Interactive brand guidelines with live color and typography customization.
- [Blend](./blend.md) — Swiss modernist gradient specimens with organic mesh gradients via SVG blur.

See [log.md](./log.md) for change history.