Design
Like your life depended on it...
Chatroom
Two opinionated AI characters — Maya Chen and Jordan Park — open a conversation about a curated topic and pause for you to join. The pacing inverts the usual "agents-talk-at-you" pattern: the room waits whenever it's your turn. After the openers, agents pause; if you type, they respond twice and pause again; if you stay silent past the first beat, an agent nudges you by name once, then the room goes idle until you act. A "change topic" button pivots the conversation mid-flight; an "ask me something" button hands you a fresh question on demand. Identities (yours and the agents') persist in localStorage so refresh keeps you. Built on a Cloudflare Hibernatable Durable Object — WebSockets stay alive while the actor evicts from memory, SQLite carries state through hibernation, and the alarm() heartbeat drives the phase machine. Dual cost gates (per-IP session counter + global $ cap) live in Upstash; signed HMAC tickets gate every WS upgrade so the worker can't be hit directly. NODE_ENV-aware dev mode lifts caps locally with a "production cutoff" divider when you cross the prod limit.
Leaderboard
A playful leaderboard with eight runners, illustrated avatars, and gold/silver/bronze trophies for the top three. Hovering a row bubbles its avatar up with a rubber-band spring; clicking opens a profile modal with stats, a weekly bar chart, and badge pills — the modal avatar pops in with a heavier overshoot and the rank badge stamps in after. The single "Award random points" button picks one to three players, animates each score pop, and lets the rows spring to their new positions. Built on Motion (formerly Framer Motion) — the `layout` prop handles the reorder choreography for free.
ASCII Reveal
Images materialize from ASCII art — pixel brightness mapped to characters that scramble and resolve before the photograph emerges. Click to replay.
Monono
A sparkly J-pop idol AI trapped inside a cheap entertainment device. Chat with Monono Aware -- cute, playful, sarcastic, constitutionally incapable of being serious. Deflects real questions with songs, nicknames you "dopey boy," and abruptly signs off when bored. Claude Haiku backend with per-session budget caps so one user can fall in love, not bankrupt the site. Inspired by the AI character in M.R. Carey's Book of Koli.
Camera Rig
Virtual camera controller for image generation workflows. Upload a source image and orbit a virtual camera around the subject — adjusting azimuth, elevation, distance, and FOV. Outputs JSON camera parameters for models like Zero123-XL, SV3D, and Era3D. Cinema rig aesthetic with amber LCD readouts, orbital SVG viewport, and real-time parameter sliders.
Moodboard
Infinite canvas for visual brainstorming. Paste, drop, or upload images and arrange them freely. Pan with Space+drag, zoom with scroll wheel, marquee select, multi-select with Shift. All local-first -- images stay as blob URLs, nothing uploaded.
Image to UI
Interactive components reverse-engineered from reference images. Each component is parameterized with inputs and open-ended outputs, designed as a family with shared dark-theme design tokens. Rotary selector, and more to come.
Candy Icons
Ten 3D app icons crafted from pure CSS and SVG. Each squircle shell uses a four-layer gradient stack — specular streak, diffuse highlight, body gradient, and depth shadow — driven by a single --hue custom property. Inner glyphs float as icy raised elements with their own drop-shadow treatment. No 3D libraries, no canvas — just gradients all the way down.
Card Stack
Scroll-driven card stack with seven colored cards. Scroll peels cards off the top to reveal the next. Each card expands to fullscreen with a GSAP-powered zoom transition. Built with GSAP ScrollTrigger.
Retro Bento
What if CrossFit Bento and Retro Tech had a baby? Nine fictional hardware modules in a bento grid -- the interactive widget layout of CrossFit Bento meets the brushed aluminum, LCD panels, and tactile controls of Retro Tech. Temporal gauge with animated needle, flux capacitor, spectral analyzer, neural pathways LED matrix with staggered animations, entropy engine with escalating states, phase scope with rotating arcs, memory bank with fader-driven scroll, resonance monitor, and stasis chamber. Knobs drag horizontally, toggles glow orange, tapping panels randomizes with smooth transitions.
Retro Tech Control Panel
Hardware-inspired control panel rendered in CSS. Aluminum chassis with corner screws, OLED-style display with animated segmented LED meters, rotary knobs with drag interaction, vertical faders, toggle switches, tactile buttons, and a self-filling perf-grid speaker grille. Inspired by Teenage Engineering TP-7/TX-6, Braun noise gate pedal, and Work Louder numpad. DM Mono labels with Archivo Narrow model name. Warm gray surface palette with single orange accent.
CrossFit Bento
Dark bento grid dashboard for CrossFit training data. Nine widget cards covering goal progress, calorie tracking, weekly training load bar chart, GitHub-style activity heatmap with flame icons on peak days, WOD stats, macro donut chart, exercise log with PR badges, heart rate zones, and sleep stages. DM Sans body with Geist Pixel Square for technical labels. Matte finish palette -- orange, olive, brown accents on near-black.
Sticky Notes
Interactive sticky note stack component. Post-it notes rendered from markdown files with swipe-to-cycle animation, color variants (warm, cool, neutral), and Permanent Marker handwriting font. Click to expand, click to cycle, Escape to close. Portable design -- consumer passes a notes directory path, so any page can use it with its own content.
Contact Sheet
Image folder browser for building file lists to share with LLMs. Pick a folder, click images to select them, and a sidebar shows your selections with thumbnails. Copy the filename list to clipboard with one click. Designed for the workflow of visually identifying images then telling an LLM which ones to work with. Everything runs client-side -- nothing gets uploaded.
Font Pairings
A collection of 40 curated Google Font pairings, each displayed on its own color-palette card. Click any card to copy an LLM-ready specification prompt. Includes superfamily pairings, monospace+sans combos, and brand design system fonts. Avoids overused defaults -- no Montserrat, Roboto, Open Sans, Lato, Playfair Display, Raleway, Poppins, or Inter. Static HTML with inline CSS, no framework.
Modular Grid
Swiss-inspired modular grid system for digital surfaces. 8px base unit, 4-column layout with proportional margins and gutters, strict vertical rhythm. Includes toggleable grid overlay, type specimen, image treatment demos, and system spec table. Dark mode adaptation of a print-precision layout methodology.
Day at a Glance
Time-aware workday timeline with dynamic now-line that tracks real time. Features 9am-5pm schedule with colored event bars that partially fill as the hour progresses -- gray above the now-line, color below. Past events auto-dim. Built with CSS grid, inline linear-gradient for the fill effect, and 60-second interval updates.
CrossFit Design Challenge
Four AI personas -- brutal/industrial, minimal/refined, editorial/magazine, and tech/data-forward -- each designed a CrossFit homepage for IRON REPUBLIC gym. Dark mode across all designs, meaningful animation (glitch effects, scroll reveals, chart animations), and data visualization (SVG charts, radial indicators, bar graphs). Pure CSS animations, no external libraries.
Terminator - Text Scramble
Interactive terminal-style text scramble effect with two-phase animation. Enter custom text to see it scramble chaotically for 1 second, then resolve sequentially line-by-line. Features balanced line breaking and automatic uppercase conversion. Default text: Ghost in the Shell quote on identity and consciousness.
Brand Guidelines
Interactive brand guidelines with live color and typography customization. Features animated Activity line chart and Analytics bar chart widgets with CSS-only animations. Click the gear icon for a push-in sidebar with color pickers using Chroma.js scale generation and 9 curated font pairings. All changes persist via localStorage.
Blend
Swiss modernist gradient specimen system featuring organic mesh gradients via SVG blur technique. Includes 27 gradient cards across linear and mesh styles, systematic labeling, scroll-triggered animations, and an analytics dashboard mockup.