@drunkcoding/agents-and-skills 0.0.12 → 0.0.14

package/plugins/html-effectiveness/templates/07-prototype-animation.html.tmpl

@@ -0,0 +1,417 @@
+<!--
+template: 07-prototype-animation
+upstream: 07-prototype-animation.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<div class="wrap">
+
+  <header>
+    <div class="eyebrow">Acme / prototype / micro-interaction</div>
+    <h1>{{title}}</h1>
+    <p class="sub">
+      A single click should feel like a tiny win. Circle fills, check draws,
+      label strikes, a small burst, then the row quietly steps back. Click
+      the row to play; click again to reset.
+    </p>
+  </header>
+
+  <div class="bench">
+
+    <div class="stage">
+      <div class="task" id="task">
+        <div class="check">
+          <svg viewBox="0 0 16 16"><path d="M3 8.5 L6.5 12 L13 4.5"/></svg>
+        </div>
+        <span class="label">Send weekly digest</span>
+        <span class="due">Fri</span>
+        <div class="confetti c1"></div>
+        <div class="confetti c2"></div>
+        <div class="confetti c3"></div>
+        <div class="confetti c4"></div>
+        <div class="confetti c5"></div>
+        <div class="confetti c6"></div>
+      </div>
+      <div class="hint">click to toggle</div>
+    </div>
+
+    <aside class="panel">
+      <h2>Easing</h2>
+      <p>Swaps <code>--ease</code> across every transition so you can feel the difference.</p>
+      <button class="ease-btn" data-ease="linear">
+        Linear
+        <code>linear</code>
+      </button>
+      <button class="ease-btn" data-ease="cubic-bezier(0.16, 1, 0.3, 1)">
+        Ease-out
+        <code>cubic-bezier(.16, 1, .3, 1)</code>
+      </button>
+      <button class="ease-btn active" data-ease="cubic-bezier(0.34, 1.56, 0.64, 1)">
+        Spring
+        <code>cubic-bezier(.34, 1.56, .64, 1)</code>
+      </button>
+    </aside>
+
+  </div>
+
+  <section class="timeline">
+    <h2>Keyframes</h2>
+    <div class="track">
+      <div class="key k1"><em>fill</em><span>0ms</span></div>
+      <div class="key k2"><em>check</em><span>80ms</span></div>
+      <div class="key k3"><em>strike</em><span>120ms</span></div>
+      <div class="key k4"><em>confetti</em><span>200ms</span></div>
+      <div class="key k5"><em>collapse</em><span>600ms</span></div>
+    </div>
+  </section>
+
+  <section class="snippet">
+    <h2>Copy-paste CSS</h2>
+<pre><span class="c">/* circle: clay flash, settle to olive with spring overshoot */</span>
+<span class="k">.task.done .check</span> {
+  animation: settle 380ms <span class="v">cubic-bezier(.34,1.56,.64,1)</span> forwards;
+}
+<span class="k">@keyframes settle</span> {
+  0%   { transform: scale(.8);  background: <span class="v">#D97757</span>; }
+  55%  { transform: scale(1.18); }
+  100% { transform: scale(1);   background: <span class="v">#788C5D</span>; }
+}
+
+<span class="c">/* checkmark draws via stroke-dashoffset, 80ms delay */</span>
+<span class="k">.check path</span>        { stroke-dasharray: 20; stroke-dashoffset: 20;
+                     transition: stroke-dashoffset 220ms var(--ease) 80ms; }
+<span class="k">.task.done path</span>    { stroke-dashoffset: 0; }
+
+<span class="c">/* strikethrough grows left → right */</span>
+<span class="k">.label::after</span>      { width: 0; transition: width 240ms var(--ease) 120ms; }
+<span class="k">.task.done .label::after</span> { width: 100%; }
+
+<span class="c">/* row steps back after the celebration */</span>
+<span class="k">.task.done</span>         { max-height: 44px; opacity: .6;
+                     transition-delay: 600ms; }</pre>
+  </section>
+
+</div>
+
+<style>
+* { box-sizing: border-box; }
+.wrap {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding: 48px 32px 64px;
+  }
+header { margin-bottom: 28px; }
+.eyebrow {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+  }
+h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 30px;
+    letter-spacing: -0.01em;
+    margin: 6px 0 4px;
+  }
+.sub {
+    color: var(--gray-500);
+    max-width: 560px;
+  }
+/* ---------- layout ---------- */
+  .bench {
+    display: grid;
+    grid-template-columns: 1fr 240px;
+    gap: 24px;
+    align-items: start;
+  }
+.stage {
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    height: 360px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+.hint {
+    position: absolute;
+    bottom: 14px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+  }
+/* ---------- the task row ---------- */
+  .task {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 18px;
+    border: 1.5px solid var(--gray-200);
+    border-radius: 8px;
+    background: var(--white);
+    width: 360px;
+    max-height: 64px;
+    position: relative;
+    transition: max-height 280ms var(--ease) 600ms,
+                opacity 280ms var(--ease) 600ms,
+                padding 280ms var(--ease) 600ms,
+                border-color 200ms var(--ease);
+    cursor: pointer;
+    user-select: none;
+  }
+.task:hover { border-color: var(--gray-500); }
+.check {
+    flex: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1.5px solid var(--gray-500);
+    background: var(--white);
+    position: relative;
+    transition: background 180ms var(--ease),
+                border-color 180ms var(--ease),
+                transform 260ms var(--ease);
+  }
+.check svg {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 14px;
+    height: 14px;
+  }
+.check path {
+    stroke: var(--white);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    stroke-dasharray: 20;
+    stroke-dashoffset: 20;
+    transition: stroke-dashoffset 220ms var(--ease) 80ms;
+  }
+.label {
+    position: relative;
+    font-size: 15px;
+    color: var(--slate);
+    transition: color 200ms var(--ease) 120ms;
+  }
+.label::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 52%;
+    height: 1.5px;
+    width: 0;
+    background: var(--gray-500);
+    transition: width 240ms var(--ease) 120ms;
+  }
+.due {
+    margin-left: auto;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    background: var(--gray-50);
+    border: 1.5px solid var(--gray-200);
+    padding: 3px 8px;
+    border-radius: 8px;
+    transition: opacity 200ms var(--ease) 120ms;
+  }
+/* confetti — six particles, css-only, driven by .done on the row */
+  .confetti {
+    position: absolute;
+    left: 22px;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
+    opacity: 0;
+    pointer-events: none;
+  }
+.confetti.c1 { background: var(--clay);  }
+.confetti.c2 { background: var(--olive); }
+.confetti.c3 { background: var(--oat);   }
+.confetti.c4 { background: var(--clay);  }
+.confetti.c5 { background: var(--olive); }
+.confetti.c6 { background: var(--gray-800); }
+/* ---------- done state ---------- */
+  .task.done .check {
+    background: var(--olive);
+    border-color: var(--olive);
+    transform: scale(1.12);
+    animation: settle 380ms var(--ease) forwards;
+  }
+@keyframes settle {
+    0%   { transform: scale(0.8); background: var(--clay); border-color: var(--clay); }
+    55%  { transform: scale(1.18); }
+    100% { transform: scale(1); background: var(--olive); border-color: var(--olive); }
+  }
+.task.done .check path { stroke-dashoffset: 0; }
+.task.done .label { color: var(--gray-500); }
+.task.done .label::after { width: 100%; }
+.task.done .due { opacity: 0.35; }
+.task.done {
+    max-height: 44px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    opacity: 0.6;
+  }
+.task.done .confetti { animation: pop 520ms var(--ease) 200ms forwards; }
+.task.done .confetti.c1 { --dx: -28px; --dy: -22px; --rot:  40deg; }
+.task.done .confetti.c2 { --dx:  -6px; --dy: -34px; --rot: -60deg; }
+.task.done .confetti.c3 { --dx:  18px; --dy: -26px; --rot:  90deg; }
+.task.done .confetti.c4 { --dx:  30px; --dy:  -4px; --rot: -30deg; }
+.task.done .confetti.c5 { --dx: -24px; --dy:  14px; --rot:  20deg; }
+.task.done .confetti.c6 { --dx:  12px; --dy:  22px; --rot: -80deg; }
+@keyframes pop {
+    0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.6); }
+    15%  { opacity: 1; }
+    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
+  }
+/* ---------- easing panel ---------- */
+  .panel {
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    padding: 18px;
+  }
+.panel h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 16px;
+    margin: 0 0 4px;
+  }
+.panel p {
+    margin: 0 0 14px;
+    font-size: 12px;
+    color: var(--gray-500);
+  }
+.ease-btn {
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: var(--gray-50);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 8px;
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    font-family: var(--sans);
+    font-size: 13px;
+    color: var(--slate);
+    cursor: pointer;
+  }
+.ease-btn:hover { border-color: var(--gray-500); }
+.ease-btn.active {
+    border-color: var(--clay);
+    background: #FBF1EC;
+  }
+.ease-btn code {
+    display: block;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--gray-500);
+    margin-top: 2px;
+  }
+/* ---------- timeline ---------- */
+  .timeline {
+    margin-top: 28px;
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    padding: 22px 22px 30px;
+  }
+.timeline h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 16px;
+    margin: 0 0 18px;
+  }
+.track {
+    position: relative;
+    height: 2px;
+    background: var(--gray-200);
+    margin: 20px 8px 0;
+  }
+.key {
+    position: absolute;
+    top: -5px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--clay);
+    border: 1.5px solid var(--white);
+    box-shadow: 0 0 0 1.5px var(--clay);
+    transform: translateX(-50%);
+  }
+.key span {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--gray-800);
+  }
+.key em {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    font-style: normal;
+    font-size: 11px;
+    color: var(--gray-500);
+  }
+.k1 { left: 0%;   }
+.k2 { left: 13%;  }
+.k3 { left: 20%;  }
+.k4 { left: 33%;  }
+.k5 { left: 100%; background: var(--olive); box-shadow: 0 0 0 1.5px var(--olive); }
+/* ---------- snippet ---------- */
+  .snippet {
+    margin-top: 28px;
+  }
+.snippet h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 16px;
+    margin: 0 0 10px;
+  }
+pre {
+    background: var(--gray-800);
+    color: var(--gray-50);
+    border-radius: 12px;
+    padding: 18px 20px;
+    font-family: var(--mono);
+    font-size: 12px;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0;
+  }
+pre .c { color: var(--gray-500); }
+pre .k { color: var(--clay); }
+pre .v { color: #B8C99D; }
+</style>
+
+<script>
+var task = document.getElementById('task');
+  task.addEventListener('click', function () {
+    task.classList.toggle('done');
+  });
+
+  var root = document.documentElement;
+  var buttons = document.querySelectorAll('.ease-btn');
+  buttons.forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      buttons.forEach(function (b) { b.classList.remove('active'); });
+      btn.classList.add('active');
+      root.style.setProperty('--ease', btn.dataset.ease);
+    });
+  });
+</script>