REFERENCE
- Gallery page: https://magpui.com/en/i/live-ascii-wallpaper-theme-picker-b6d71c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/live-ascii-wallpaper-theme-picker-b6d71c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/live-ascii-wallpaper-theme-picker-b6d71c/clip.mp4
- Original post: https://x.com/handsher_NGU/status/2115618341675319417 by @handsher_NGU
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a theme picker for a desktop AI chat app where every theme is a living ASCII wallpaper. Typing /theme in the composer opens a small panel above the input with a row of eight thumbnail cards; hovering or selecting a card switches the background of the whole chat area to that animated scene, which is drawn entirely with small character tiles and keeps moving gently behind the conversation. It should feel cozy, alive and a little nerdy, never distracting from the text.
DESIGN SYSTEM: App shell with a 165px left sidebar (pinned chats list, 13px sans, 28px rows, active row with a translucent pill), a 30px title bar and a centered chat column about 500px wide. Composer: 500x40px, radius 12px, background rgba(20,20,22,0.85) with backdrop blur 12px and a 1px rgba(255,255,255,0.08) border. Theme panel above it: radius 12px, same glass surface, header row with a mono tag '/theme', a gray label 'ASCII wallpapers' and hints '↵ apply · esc close' on the right (11px, 50% white); cards 56x30px thumbnails with 6px radius, 12px caption under each, selected card with a 1.5px white outline and a small check after its name. Wallpapers are grids of tiles (about 9x9px cells, 1px gap) each holding a monospace glyph (@ % # t : . ;) tinted by the scene: default 'Claude Code' (dark #1c1714 with a terracotta #d9775a sun of tiles), Cloud Drift (sky #8ec9f0, white tile clouds), Honu Lagoon (teal #1fb5b0 water, a coral-red turtle, yellow seaweed), Koi Pond (green #2f8a6a, orange and white koi), Jellyfish (navy #0b2a4a, pink translucent jellyfish), Paper Boats (sea green #6fb3a5, white boats), Fireflies (forest #0c1f14, yellow-green glowing dots), Moonlit (indigo #121433, moon and stars). A small pixel mascot sits at the right edge of the chat column.
MOTION: (1) Panel open: on typing /theme the panel rises 8px and fades in over 180ms cubic-bezier(0.22,1,0.36,1), cards stagger in 30ms each. (2) Theme switch: the new wallpaper is revealed with a circular clip-path growing from the pointer or selected card, radius 0 to the farthest corner over 700ms cubic-bezier(0.65,0,0.35,1), with a faint 2px light rim on the expanding edge; the old scene stays underneath until the circle covers it. (3) Wallpaper idle: each scene runs its own loop at 12-20fps for an ASCII feel: sun rays rotate slowly (one turn per 60s) and twinkle glyphs; clouds drift right at 10-20px/s; turtle and koi swim on sine paths (period 6-10s) with tiles popping in and out along their silhouettes; jellyfish pulse (scaleY 0.9 to 1.05, 1600ms ease-in-out) while rising; boats bob plus or minus 4px; fireflies blink with random 1-3s phases; stars flicker. (4) Mascot: bobs 2px every 1200ms. (5) Close: esc fades the panel out in 120ms; the chosen theme persists.
SECTIONS: Sidebar; title bar; chat column (user bubble, assistant message, 'Thinking...' state); theme panel (header, eight cards, selected state); composer (plus button, input, mic); wallpaper layer behind everything. States: closed, panel open, card hovered (live preview), applied, reduced motion.
IMPLEMENTATION: React + Tailwind + Motion for the panel and the clip-path reveal. Render each wallpaper on a single canvas behind the UI: a pre-rendered glyph atlas per color, a tile grid in typed arrays, each scene as a small function that writes tile glyph and color per frame from simple shapes (circles, sine-driven silhouettes, noise). Throttle drawing to about 15fps and pause when the window is hidden. Two canvases (current and next) make the circular reveal cheap. Keyboard: arrows move between cards, Enter applies, Esc closes; cards are radio buttons in a radiogroup with visible focus rings; the canvas is aria-hidden. prefers-reduced-motion: static wallpaper frame and a plain 200ms crossfade instead of the circle.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the scene palettes to the closest existing tokens where possible; never copy logos, brand names, mascots or illustrations from the original; use placeholder scenes and your own mascot.
SUCCESS CHECK:
- Typing /theme opens the panel, arrow keys change the selection and Enter applies the theme with a circular reveal.
- At least four scenes animate continuously and remain readable as their subject while drawn only with character tiles.
- Chat text stays readable over every wallpaper and the canvas costs under 5ms per frame.
