AI Chatbot × Y2K
Jul 11, 2026 · 1.5h
My Interpretation
I read "AI Chatbot × Y2K" as a retro desktop toy — a chatty little AI living in a pastel OS window. After trying a colder Windows-95 chrome look, I leaned into the softer vaporwave side of Y2K: an argyle wallpaper, thin black-outlined windows, and periwinkle / pink / peach gradients. I set myself one rule — no emoji at all — so the bot's four-point "AI sparkle" face and every glyph are hand-drawn in pixels. The signature moment is the loading bar that fills before each reply, which makes a fully scripted bot still feel like it's "thinking."
Workflow
- ChallengeMe
- Creative DirectionMe
- PrototypeClaude Code
- Visual RefinementMe
AI Recipe
Build a single self-contained index.html of a retro AI chatbot as a soft-pastel Y2K vaporwave OS window. Palette: near-white base (#e9f0fc), periwinkle title bar gradient (#cdd1f9 to #aeb6ef), pink accents (#ff9ecb), peach (#ffcf8a), everything outlined in a thin near-black (#26263a) with rounded corners and a hard offset drop shadow (sticker look). Use a smooth bold sans (Helvetica/Arial), NOT a pixel font. Window has a title bar 'CHATBOT.EXE' with min/max/close buttons drawn as tiny centered SVG icons, a 'BOT ONLINE' status strip, a white chat log, colored quick-reply chips, a text input and a pink SEND button. Bot bubbles are white; user bubbles are a pink-to-lavender gradient, right-aligned. The bot avatar is a four-point 'AI sparkle' star filled with a pink→lavender→peach gradient, with two dark pixel eyes and a tiny companion sparkle. IMPORTANT: draw every icon (star, warning triangle, window buttons) as inline pixel SVG — no emoji anywhere; write hearts as '<3'.
Make a keyword-scripted chatbot (no API): a rules array of {regex, replies[]} plus a random fallback. On send: append the user bubble, then show a 'THINKING…' tile with a segmented loading bar that fills one block at a time on a setInterval, and only reveal the bot reply when the bar completes — this beat is what sells it. Auto-play two intro messages on load so the screen looks alive. Gotcha for a shared gradient-filled SVG icon used many times: define the <linearGradient> once in a hidden <svg> in the body and reference fill="url(#id)", never inline a <defs> per instance (duplicate IDs break).
For a two-tone argyle (diamond-lattice) wallpaper, do NOT use CSS linear-gradient diamond tricks — they render as chevrons. Instead embed an SVG data-URI tile as background-image: a 96x96 rect base color, a centered <polygon points='48,0 96,48 48,96 0,48'> in the second tone, and a dashed <path d='M0,0 L96,96 M96,0 L0,96'> for the crossing lines; set background-size:96px.