artlu.ai
100 days. 100 features.
Just AI and an internet connection.
day 113/100 · 100 shipped · 0 to go
← all projects
day 65 · may 21, 2026 · launched

mobile stack view mockup — artlu.ai v3

Design handoff/mockup for the mobile stack view: tech grid, project drilldown, inline demos, updates, series, and episodes.

The desktop stack view is a pannable ComfyUI-style canvas — great on a wide screen, broken on a phone. This is a purpose-built mobile screen for the same /stack route: a continuous 4-column grid of every tech in the build (28 of them, ordered front-end → back-end), with per-tile metadata showing how many projects use that tech, the most recently shipping project, and the date of the last update.

Tap a tile and a panel zooms up from the tile position. Inside: a list of project pills that use that tech. Tap any project pill (anywhere — header or body) and its children expand inline. Demos appear first with live iframe embeds — the actual deployed apps (vsmockup-d.pages.dev, costintel-automator-demo.pages.dev, artluai.github.io/context-gate-ai-hallucination/, etc.) running inside the stack view on your phone. Then non-series updates. Then each series, with its episodes nested under it with a slight indent. Episodes link out to the existing short / long video guidebook pages (which also got mobile-responsive CSS in the same pass).

A few hard-won design decisions baked in: tiles flow continuously across the 5 categories with only a thin label row + dot color change as the transition — no row break, no overlapping supertext. The hero "projects" text is plain floating top-aligned text, not a card. Connector wires are one per parent→children group, never between siblings — the indent and grouping carry the rest. Dark-theme bg darkened and surface lightened so tiles read as visibly raised against the page (matches the contrast light mode already had). ComfyUI-style subtle grid background on both themes, dialed way down on light.

The handoff package at mockups/astro-ui-handoff/ includes the mockup file plus a STACK-MOBILE.md brief for Codex, which is mostly a list of designs we tried and explicitly did not end up shipping — so the next agent doesn't re-derive them.

stack

AstroHTMLCSSJavaScript