---
-description: Creator project setup: how you work at this level, then the dashboard becomes your home (P-1116)
+description: Creator project setup: how you work at this level, then the dashboard becomes your home (P-1116); the animation (P-1206): you, the designer agent, docs that write themselves, tests going green
tags: onboarding, inherited, wip
---
…
```embedhtml
<style>
+body{margin:0}
+.w{--c:#4fb3a9;--ink:#e8e6e1;--mute:#9aa0a6;--line:#2e343c;--card:#1b1f24;--ok:#4caf6a;background:#121417;border-radius:14px;padding:20px 18px;font:13px/1.35 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);display:grid;grid-template-columns:auto 34px auto 34px minmax(0,1fr) minmax(150px,auto);align-items:center;gap:10px;overflow:hidden}
+@media (max-width:640px){.w{display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px}.w .lk{width:28px;flex:none}.w .lk.l2{display:none}.w .docs,.w .tests{flex:1 1 100%}}
+.who{display:grid;justify-items:center;gap:6px;text-align:center}
+.av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px}
+.you .av{border:2px solid var(--c);color:var(--c);background:#1b1f24}
+.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
+.bub{max-width:150px;min-height:34px;background:color-mix(in srgb,var(--c) 22%,#1b1f24);border-radius:12px 12px 12px 4px;padding:6px 9px;font-size:12px;text-align:left}
+.bub i{display:inline-block;width:1px;height:12px;background:var(--ink);vertical-align:-2px;animation:blink .8s steps(1) infinite}
+@keyframes blink{50%{opacity:0}}
+/* the designer: an agent circle */
+.ag .av{position:relative;width:62px;height:62px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff) 0,var(--c) 45%,color-mix(in srgb,var(--c) 45%,#000) 100%);color:#0d1a19;font-size:22px;box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent);transition:box-shadow .4s}
+.ag .av::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--c) 70%,transparent);opacity:.25;transition:opacity .4s}
+.ag.busy .av{box-shadow:0 0 22px 4px color-mix(in srgb,var(--c) 45%,transparent)}
+.ag.busy .av::after{opacity:1;animation:spin 3s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.dots{height:12px;display:flex;gap:3px;justify-content:center}.dots b{width:5px;height:5px;border-radius:50%;background:var(--c);opacity:0}
+.ag.busy .dots b{animation:dot 1s infinite}.ag.busy .dots b:nth-child(2){animation-delay:.15s}.ag.busy .dots b:nth-child(3){animation-delay:.3s}
+@keyframes dot{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
+/* the links between them: a pulse runs along */
+.lk{position:relative;height:2px;background:var(--line);border-radius:2px}
+.lk::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--c);opacity:0}
+.lk.go::after{animation:run .7s ease-in forwards}
+@keyframes run{0%{left:0;opacity:1}100%{left:calc(100% - 8px);opacity:1}}
+/* the docs write themselves */
+.docs{display:flex;gap:10px;min-width:0}
+.doc{flex:1 1 0;min-width:0;max-width:130px;background:#f4f1ea;color:#2a2a28;border-radius:4px 12px 4px 4px;padding:8px 9px 10px;box-shadow:0 3px 10px rgba(0,0,0,.35);opacity:.3;transform:translateY(6px);transition:opacity .4s,transform .4s;position:relative}
+.doc.on{opacity:1;transform:none}
+.doc h4{margin:0 0 6px;font:800 11px system-ui;letter-spacing:.05em;text-transform:uppercase;color:#1f6f68}
+.doc .ln{height:5px;border-radius:3px;background:#c9c3b6;margin:5px 0;width:0;transition:width .35s ease-out}
+.doc .ln.h{background:#7fb9b3;height:6px}
+.pen{position:absolute;width:10px;height:10px;font-size:11px;opacity:0;transition:top .3s,left .3s,opacity .2s}
+.doc.writing .pen{opacity:1}
+.app{background:#1b1f24;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:0 0 8px;overflow:hidden}
+.app .bar{display:flex;gap:3px;padding:5px 6px;background:#232830}.app .bar b{width:6px;height:6px;border-radius:50%;background:#4a515b}
+.app h4{color:var(--c);margin:6px 8px 4px}
+.tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 8px}
-body{margin:0}.w{background:#121417;border-radius:14px;padding:18px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:14px system-ui,sans-serif;color:#e8e6e1}
-.d{padding:6px 12px;border-radius:999px;background:#2b3139;border:1px solid #2e343c;opacity:.35;transition:opacity .5s}
-.d.on{opacity:1}.y{border-color:#4fb3a9;color:#4fb3a9}.a{background:color-mix(in srgb,#4fb3a9 25%,#2b3139)}.ar{color:#6b7178;opacity:.35;transition:opacity .5s}.ar.on{opacity:1}
+.tiles span{height:20px;border-radius:5px;background:color-mix(in srgb,var(--c) 35%,#232830);transform:scale(.4);opacity:0;transition:transform .3s cubic-bezier(.3,1.6,.6,1),opacity .3s}
+.tiles span.on{transform:none;opacity:1}
+/* tests: a checklist that goes green */
+.tests{background:#1b1f24;border:1px solid var(--line);border-radius:10px;padding:9px 11px;opacity:.3;transition:opacity .4s}
+.tests.on{opacity:1}
+.tests h4{margin:0 0 6px;font:800 11px system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
+.tests ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
+.tests li{display:flex;gap:7px;align-items:center;color:var(--mute);transition:color .3s;white-space:nowrap}
+.tests li .bx{width:15px;height:15px;flex:none;border-radius:4px;border:1.5px solid #4a515b;display:grid;place-items:center;font-size:11px;font-weight:900;color:transparent;transition:all .3s}
+.tests li.ok{color:var(--ink)}
+.tests li.ok .bx{background:var(--ok);border-color:var(--ok);color:#0b1a0f;transform:scale(1.15)}
+.tests li.ok .bx{animation:pop .35s}
+@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
+.tests .sum{margin-top:7px;font-size:11px;color:var(--ok);opacity:0;transition:opacity .4s}.tests.done .sum{opacity:1}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
+ <div class="who you"><div class="bub" id="bub"><span id="say"></span><i></i></div><div class="av">you</div></div>
+ <div class="lk l1" id="l1"></div>
-<div class="w" id="w"><span class="d y">you</span><span class="ar">→</span><span class="d a">designer</span><span class="ar">→</span><span class="d">spec</span><span class="d">design</span><span class="d">app</span><span class="d">tests</span></div>
+ <div class="who ag" id="ag"><div class="av">✦</div><div class="dots"><b></b><b></b><b></b></div><div class="lbl">your designer</div></div>
+ <div class="lk l2" id="l2"></div>
+ <div class="doc" id="d1"><span class="pen">✎</span><h4>Spec</h4><div class="ln h"></div><div class="ln"></div><div class="ln"></div><div class="ln h"></div><div class="ln"></div><div class="ln"></div></div>
+ <div class="doc" id="d2"><span class="pen">✎</span><h4>Design</h4><div class="ln h"></div><div class="ln"></div><div class="ln"></div><div class="ln"></div><div class="ln h"></div><div class="ln"></div></div>
+ <div class="doc app" id="d3"><div class="bar"><b></b><b></b><b></b></div><h4>App</h4><div class="tiles"><span></span><span></span><span></span><span></span></div></div>
+ </div>
+ <div class="tests" id="ts"><h4>Tests</h4><ul>
+ <li><span class="bx">✓</span>products have a price</li>
+ <li><span class="bx">✓</span>an order lists its items</li>
+ <li><span class="bx">✓</span>paid takes it off stock</li>
+ <li><span class="bx">✓</span>shows what runs low</li>
+ </ul><div class="sum">4 of 4 passing</div></div>
+</div>
<script>
+// you ask → your designer works → Spec and Design write themselves → the app assembles → the tests go green; then again
+const $=id=>document.getElementById(id),W=[0.92,0.7,0.84,0.6,0.88,0.5],T=[];
+const at=(ms,f)=>T.push(setTimeout(f,ms));
+const say="Make me a shop app: products, orders, stock.";
+function write(d,t0){const ls=[...d.querySelectorAll('.ln')],pen=d.querySelector('.pen');
+ at(t0,()=>d.classList.add('on','writing'));
+ ls.forEach((l,k)=>at(t0+200+k*170,()=>{const w=W[k%W.length]*100;l.style.width=w+'%';pen.style.top=(l.offsetTop-6)+'px';pen.style.left='calc('+w+'% - 2px)'}));
+ at(t0+200+ls.length*170+150,()=>d.classList.remove('writing'))}
+function run(){T.splice(0).forEach(clearTimeout);
+ const w=$('w');w.querySelectorAll('.on,.ok,.go,.busy,.done,.writing').forEach(e=>e.classList.remove('on','ok','go','busy','done','writing'));
+ w.querySelectorAll('.ln').forEach(l=>l.style.width='0');$('say').textContent='';
+ [...say].forEach((c,k)=>at(80+k*32,()=>$('say').textContent+=c));
+ const t1=80+say.length*32+200;
+ at(t1,()=>$('l1').classList.add('go'));
+ at(t1+600,()=>$('ag').classList.add('busy'));
-const els=[...document.querySelectorAll('#w>*')];let i=0;
+ at(t1+1100,()=>$('l2').classList.add('go'));
-function step(){if(i<els.length){els[i].classList.add('on');i++;setTimeout(step,450)}else{setTimeout(()=>{els.forEach(e=>e.classList.remove('on'));i=0;step()},2600)}}step();
+ write($('d1'),t1+1500);write($('d2'),t1+2600);
+ const ta=t1+3700;at(ta,()=>$('d3').classList.add('on'));
+ $('d3').querySelectorAll('.tiles span').forEach((s,k)=>at(ta+250+k*180,()=>s.classList.add('on')));
+ const tt=ta+1200;at(tt,()=>$('ts').classList.add('on'));
+ $('ts').querySelectorAll('li').forEach((li,k)=>at(tt+350+k*420,()=>li.classList.add('ok')));
+ at(tt+350+4*420,()=>{$('ts').classList.add('done');$('ag').classList.remove('busy')});
+ at(tt+350+4*420+3200,run)}
+if(matchMedia('(prefers-reduced-motion: reduce)').matches){$('say').textContent=say;document.querySelectorAll('.doc,.tests,.tiles span').forEach(e=>e.classList.add('on'));document.querySelectorAll('.ln').forEach((l,k)=>l.style.width=W[k%W.length]*100+'%');document.querySelectorAll('.tests li').forEach(l=>l.classList.add('ok'));$('ts').classList.add('done')}
+else run();
</script>
```
…