Repository source: docs/plans/ui_redesign/mockups/zen/thread.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thread, themed · ZenMemes redesign</title>
<link rel="stylesheet" href="../mockup.css">
<link rel="stylesheet" href="zen.css">
<link rel="stylesheet" href="ma.css">
<script src="../mockup.js" defer></script>
</head>
<body data-skin="ma">
<div class="doc">
<header class="doc-head">
<div>
<a class="doc-crumb" href="../index.html">← All mockups</a>
<h1>T2 · Thread, themed</h1>
<p>A thread takes its sky from the person who started it. Replies are separate glass cards, each lit by its author.</p>
<p class="doc-files">Structure: <a href="../thread.html">03 · Thread</a> · Skin: mockups/zen/zen.css</p>
</div>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<div class="skin-toggle" role="group" aria-label="Skin"><button type="button" data-skin="base">Base</button><button type="button" data-skin="zen">Living Sky</button><button type="button" data-skin="ma">Ma</button></div>
<div class="mode-toggle" role="group" aria-label="Mockup appearance"><button type="button" data-mode="light">Light</button><button type="button" data-mode="dark">Dark</button></div>
</div>
</header>
<section class="stage"></section>
<section class="notes">
<div class="note">
<h2>In Ma</h2>
<ul>
<li><b>At night</b>, the agent becomes a hologram (scanlines over its light), and failures show a split neon edge.</li>
<li><b>The post is text on paper</b>, not a card: a large mincho title and a long reading line.</li>
<li><b>Replies are one sheet</b> with hairlines. Highlighted replies take a seal-ink wash.</li>
<li><b>A like blooms</b> (teamLab): five petals around a filled vermilion star. Here it’s static; in the app it would bloom once on tap.</li>
<li><b>The agent is a field of light</b> (Turrell): its avatar is a glowing disc with no letter, and its reply sits under a soft wash of light. The “Agent” label stays.</li>
<li><b>While it writes</b>, the ensō face closes its eyes and a brush goes round (Fukuda).</li>
</ul>
</div>
<div class="note">
<h2>What the theme adds</h2>
<ul>
<li><b>Context-colored sky:</b> the nebula behind a thread is tinted with the original poster’s color, so every thread feels like its own place.</li>
<li><b>The post is a glass card</b> with a glow in the author’s color; heavy display title.</li>
<li><b>Replies are separate cards</b> with an author-colored glow. Consecutive posts by one person join into one block (onthebus).</li>
<li><b>The agent is light, not a planet.</b> Its avatar is an aurora with shimmering curtains, and its replies have aurora curtains along the top edge. People are planets; the agent is the only thing drawn as light.</li>
<li><b>Ensō loader:</b> while the agent writes, a brush sweeps around a zen circle instead of a spinner (second screen).</li>
<li><b>Likes are glowing gold stars.</b> The reply dock floats on blurred glass with a gradient Send.</li>
</ul>
</div>
<div class="note">
<h2>What it needs from the base</h2>
<ul>
<li><code>data-sky</code> (the poster) on the thread page; <code>--person</code> on posts and replies.</li>
<li>The existing continuation class (<code>.reply.cont</code>) drives the joined blocks.</li>
</ul>
</div>
<div class="note">
<h2>Checks</h2>
<ul>
<li>Author color is never the only signal: name and avatar remain.</li>
<li>The “Agent” label stays; the aurora is a second signal. The shimmer and loader animate only opacity and rotation, and stop under reduced motion (the loader becomes a solid ensō; “Writing a reply…” carries the state).</li>
<li>Error rows keep standard danger styling, never a person’s color.</li>
<li>Gold star: 4.0:1 on light glass (icon minimum 3:1) and 10:1 on dark.</li>
</ul>
</div>
</section>
</div>
<template data-sky="ilyag" data-screen="Default — reading a thread" data-active="board" data-phonebar="inline" data-back="Board" data-trail="i:more" data-tabbar="none">
<div class="page">
<article class="post">
<h1>The Rules of ZenMemes.com</h1>
<div class="byline"><span class="avatar" data-av="ilyag"></span><span><span class="name">ilyag</span> <span class="when">· May 26</span></span><span class="chip">general</span></div>
<div class="body">
<p>1st Rule: You do not overthink the meme.<br>2nd Rule: You DO NOT overthink the meme.<br>3rd Rule: If someone says “breathe,” logs off, or finds inner peace, the thread is over.<br>4th Rule: Only two ideas to a punchline.<br>5th Rule: One meme at a time, friends.<br>6th Rule: No clout, no cringe.<br>7th Rule: Memes will sit in silence as long as they have to.<br>8th Rule: If this is your first time at ZenMemes.com, you have to post.</p>
</div>
<div class="actions" style="margin-left:-10px"><span class="act"><i data-i="reply" class="sm"></i>Reply</span><span class="act on"><i data-i="starfill" class="sm"></i><span style="color:var(--ink-2)">3</span></span><span class="act"><i data-i="more" class="sm"></i></span></div>
</article>
<p class="small faint" style="margin:0;display:flex;gap:6px;align-items:center"><i data-i="pin" class="sm"></i>ilyag pinned this · May 26</p>
<p class="section-label">4 replies</p>
<div class="replies">
<div class="reply"><span class="avatar" data-av="guest"></span><div><div class="head"><span class="name">guest</span><span class="when">Jul 30</span></div><div class="body"><p>test a reply</p></div><div class="actions"><span class="act"><i data-i="reply" class="sm"></i>Reply</span><span class="act"><i data-i="star" class="sm"></i></span><span class="act"><i data-i="more" class="sm"></i></span></div></div></div>
<div class="reply"><span class="avatar" data-av="test-user"></span><div><div class="head"><span class="name">test-user</span><span class="when">Aug 26</span></div><div class="body"><p>I’d like a new reply from the new agent, please.</p></div><div class="actions"><span class="act"><i data-i="reply" class="sm"></i>Reply</span><span class="act"><i data-i="star" class="sm"></i></span><span class="act"><i data-i="more" class="sm"></i></span></div></div></div>
<div class="reply agent"><span class="avatar" data-av="reply-agent"></span><div><div class="head"><span class="name">reply-agent</span><span class="chip agent">Agent</span><span class="when">Aug 26</span></div><div class="body"><p>New agent take: memes thrive on clarity, not cinematic polish. Two ideas per punchline is a real constraint, so treat setup as tension that only the punchline can resolve. Cut the fluff, reward sharp contrasts, and skip clout-chasing jokes that pile on.</p></div><div class="actions"><span class="act"><i data-i="reply" class="sm"></i>Reply</span><span class="act on"><i data-i="starfill" class="sm"></i><span style="color:var(--ink-2)">1</span></span><span class="act"><i data-i="more" class="sm"></i></span></div></div></div>
<div class="reply"><span class="avatar" data-av="onthebus"></span><div><div class="head"><span class="name">onthebus</span><span class="when">Sep 6</span></div><div class="body"><p>Rule 4 is doing a lot of work here.</p></div></div></div>
<div class="reply cont" data-person="onthebus"><span class="avatar" data-av="onthebus"></span><div><div class="body"><p>Also rule 8 should be pinned higher.</p></div><div class="actions"><span class="act"><i data-i="reply" class="sm"></i>Reply</span><span class="act"><i data-i="star" class="sm"></i></span><span class="act"><i data-i="more" class="sm"></i></span></div></div></div>
</div>
<div class="dock">
<div class="dock-box"><span class="grow">Reply to the thread…</span><i data-i="image" style="color:var(--ink-3);margin-bottom:7px"></i><span class="send off"><i data-i="send" class="sm"></i></span></div>
</div>
</div>
</template>
<template data-sky="test-user" data-screen="Replying to a post · agent working" data-active="board" data-phonebar="inline" data-back="Board" data-trail="i:more" data-tabbar="none" data-devices="phone">
<div class="page">
<div class="replies">
<div class="reply highlight"><span class="avatar" data-av="test-user"></span><div><div class="head"><span class="name">test-user</span><span class="when">Aug 26</span></div><div class="body"><p>I’d like a new reply from the new agent, please.</p></div></div></div>
<div class="reply agent"><span class="avatar" data-av="reply-agent"></span><div style="display:grid;gap:6px"><div class="head"><span class="name">reply-agent</span><span class="chip agent">Agent</span></div><div class="status-row agent"><span class="spinner"></span><span class="grow">Writing a reply…</span></div></div></div>
<div class="reply"><span class="avatar" data-av="guest"></span><div style="display:grid;gap:6px"><div class="head"><span class="name">guest</span><span class="when">Sep 2</span></div><div class="body"><p>Can the agent explain rule 3?</p></div><div class="status-row danger"><span class="grow">Agent reply failed. The reply allowance is used up; an operator can raise it.</span></div></div></div>
</div>
<div class="dock" style="margin-top:auto">
<div class="replying">Replying to <b>test-user</b> <i data-i="x" class="sm"></i></div>
<div class="dock-box"><span class="grow typed">Seconded. The new agent is much more concise.</span><span class="send"><i data-i="send" class="sm"></i></span></div>
</div>
</div>
</template>
</body>
</html>