html-effectiveness-proto

04-proto — Prototypes

"Motion and interaction can't be described, only felt. A throwaway page with the real easing curve or the real click-through tells you in five seconds what a paragraph of prose never could."

When to use

User says	Which paradigm to use	Template
"Try out this transition / easing / duration — does it feel right?"	Animation sandbox	`../../templates/animation.html`
"Which feels right, spring vs cubic-bezier?"	Same as above	Same as above
"Want to feel this flow / a 4-screen onboarding"	Clickable flow	Build it yourself (see below)

Paradigm 4.1 · Animation sandbox

Spatial layout: animation in the center + sliders controlling duration / easing + Play button. The user tunes it until it's right.

HTML skeleton：

<div class="stage">
  <div class="ball"></div>
</div>
<div class="controls">
  <label>Duration
    <input type="range" id="dur" min="100" max="2000" value="600" step="50">
    <output>600ms</output>
  </label>
  <label>Easing
    <select id="ease">
      <option>cubic-bezier(.4, 0, .2, 1)</option>
      <option>cubic-bezier(.34, 1.56, .64, 1)</option>
      <option>cubic-bezier(.68, -0.55, .27, 1.55)</option>
      <option>linear</option>
      <option>ease-in-out</option>
    </select>
  </label>
  <button id="play" class="btn primary">Play</button>
  <button id="copy" class="btn ghost">Copy CSS</button>
</div>

Key JS：

const ball = document.querySelector('.ball');
const dur = document.querySelector('#dur');
const ease = document.querySelector('#ease');
const out = dur.parentElement.querySelector('output');

dur.oninput = () => { out.textContent = dur.value + 'ms'; };

document.querySelector('#play').onclick = () => {
  ball.style.transition = `transform ${dur.value}ms ${ease.value}`;
  const at = ball.style.transform === 'translateX(400px)' ? '0' : '400px';
  ball.style.transform = `translateX(${at})`;
};

document.querySelector('#copy').onclick = async (e) => {
  await navigator.clipboard.writeText(`transition: transform ${dur.value}ms ${ease.value};`);
  e.target.textContent = 'Copied ✓';
  setTimeout(() => e.target.textContent = 'Copy CSS', 1500);
};

.stage { position: relative; height: 120px; padding: 40px;
         background: var(--gray-100); border-radius: var(--r-md);
         margin-bottom: var(--sp-5); }
.ball { width: 40px; height: 40px; border-radius: 50%;
        background: var(--clay); }

Export loop: always include a "Copy CSS" button so that once the user has tuned it, they cantake it away directly— the final transition string.

Ready-to-use template：../../templates/animation.html — includes duration / distance sliders, an 8-option dropdown of common easings, loop mode, 5 one-click presets (Material / iOS spring / Snappy / Bouncy / Gentle), live CSS output, and a Copy CSS button.

Paradigm 4.2 · Clickable flow

Spatial layout: the critical path of 4-6 screens, one <section>per screen, buttons jump to the next screen.Use :target instead of JS routing — simpler.

HTML skeleton：

<section id="screen-1" class="screen">
  <h1>Welcome to Acme</h1>
  <p>Get organized in three steps.</p>
  <a href="#screen-2" class="btn primary">Get started →</a>
</section>

<section id="screen-2" class="screen">
  <h1>Create your first project</h1>
  <input placeholder="Project name" />
  <a href="#screen-3" class="btn primary">Continue →</a>
  <a href="#screen-1" class="btn ghost">← Back</a>
</section>

<section id="screen-3" class="screen">...</section>
<section id="screen-4" class="screen">
  <h1>You're all set 🎉</h1>
  <a href="#screen-1" class="btn ghost">Start over</a>
</section>

Key CSS（:target routing):

.screen { display: none; min-height: 100vh; padding: 60px 80px;
          flex-direction: column; gap: 24px;
          align-items: center; justify-content: center; }
.screen:target { display: flex; }

/* 默认显示第一屏 */
#screen-1 { display: flex; }
/* 当任何 :target 命中时隐藏 #screen-1 */
.screen:target ~ #screen-1 { display: none; }
/* 简单粗暴的版本：用 JS 也行，但 :target 零脚本 */

Or use <a> + JS to toggle display：

window.addEventListener('hashchange', () => {
  document.querySelectorAll('.screen').forEach(s =>
    s.style.display = ('#' + s.id) === location.hash ? 'flex' : 'none'
  );
  if (!location.hash) document.querySelector('#screen-1').style.display = 'flex';
});

No standalone template.

Shared principles

Real clickable buttons + real visuals— no "placeholder UI"; it should look like the next version of the product
The animation sandbox must have a Copy CSS outlet— the parameters the user tunes can go straight into the code
Flow screens ≤ 6— any more and the user won't make it through
The flow must have a "back to previous screen"— let the user compare back and forth

About this skill

When to use

Paradigm 4.1 · Animation sandbox

Paradigm 4.2 · Clickable flow

Shared principles