feat(brand): add five interactive visual experiments

COPY.md

@@ -9,6 +9,42 @@ The canonical source for skilld's verbal identity. Pages, meta tags and registry
 from here; when a canonical string changes, change it here first, then propagate. A string that
 contradicts this file is a bug.
 
+## Brand kit experiment register
+
+`/brand-kit/experiments` uses exploratory copy. It does not replace the approved tagline or homepage hero.
+Use existing product nouns. Label illustrative states without implying measured results or automatic updates.
+
+- Brand kit: `Explore the visual stories behind skilld.`
+- Experiment link: `Five brand experiments`.
+- Experiment summary: `Session, bloat, freshness, provenance, and portability.`
+- Badge summary: `A small mark that links a README to its Skill or Repository.`
+- Experiment title: `Five ways to show what skilld solves.`
+- Experiment description: `Each experiment starts with a product limit. These are exploratory visuals, not adopted brand assets.`
+- Selectors: `Session`, `Bloat`, `Freshness`, `Provenance`, `Portability`.
+- Theme controls: `Light mode`, `Dark mode`.
+
+| Experiment | Product limit | Review question |
+| --- | --- | --- |
+| Session | Run a Skill without keeping it. | Can the session boundary become a recognisable brand shape? |
+| Bloat | Keep only the Skills you need. | Can a dense weave resolving into one thread show the cost of Skill bloat? |
+| Freshness | The source can change while your copy stays still. | Can a visible change seam give watch its own visual language? |
+| Provenance | Knowledge has a human source. | Can a continuous thread make source ownership visible? |
+| Portability | The Skill stays the same when you change Agents. | Can one stable shape moving across contexts express independence? |
+
+Specimen strings:
+
+| Specimen | Heading and explanation | Controls and labels |
+| --- | --- | --- |
+| Session | `Knowledge for this session.` · `Run a Skill for the current session. Nothing lands in your repository.` | `End session`, `Run again`, `source`, `session`, `no files written`, `SKILL.md` |
+| Bloat | `One task. One Skill.` · `Give this task one Skill. Install only what earns a place.` | `Focus one Skill`, `Show all Skills`, `one task · one Skill`, `what does this task need?`, `SKILL.md` |
+| Freshness | `See when knowledge moves.` · `The source changes. Your local copy stays still. Watch makes the difference visible.` | `Hide differences`, `Show differences`, `Replay`, `Local copy`, `Illustrative source`, `Kept in your project`, `Changed at the source`, `Watch for changes` |
+| Provenance | `Knowledge has an author.` · `A Skill reaches your Agent. The thread leads back to the person who wrote it.` | `Hide source thread`, `Trace the source`, `Replay`, `Your Agent`, `Read the Skill`, `Illustrative source`, `Written by a human.`, `The author keeps the source.`, `Source stays attached.`, `SKILL.md` |
+| Portability | `Same Skill. Your Agent.` · `The Agent changes. The knowledge stays yours.` | `Change Agent`, `Claude Code`, `Codex`, `Cursor`, `One Skill`, `SKILL.md`, `skilld`, `{Agent} selected. Same SKILL.md.` |
+
+Freshness footnote: `Illustration only. Watching reports changes. It does not update your local copy.`
+Provenance footnote: `Illustrative source. The thread represents authorship, not a safety claim.`
+Accessible state descriptions name the same illustrated transition. They make no additional product claim.
+
 ## Canonical assets
 
 Comparison navigation uses “Compare Humanizer, Stop Slop, and No AI Slop” on the homepage, writing track, and featured Skill pages.

DESIGN.md

@@ -68,6 +68,13 @@ components:
 
 ## Design Principles
 
+### Brand kit experiments
+
+`/brand-kit/experiments` explores five product constraints through isolated visual specimens.
+New shapes and motion there are exploratory exceptions, not adopted brand assets.
+Keep warm stone, rose, readable labels, keyboard controls, and reduced-motion alternatives.
+The homepage and shared components retain the existing identity rules.
+
 ### 1. Quiet
 
 **"Confidence is quiet. The interface recedes; the content speaks."**

app/components/brand-experiments/HumanProvenance.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const traced = ref(true)
+const revision = ref(0)
+</script>
+
+<template>
+  <section class="provenance-experiment">
+    <div class="experiment-heading">
+      <h3>Knowledge has an author.</h3>
+      <p>A Skill reaches your Agent. The thread leads back to the person who wrote it.</p>
+    </div>
+    <div :key="revision" class="provenance-stage" :class="{ 'is-traced': traced }" role="img" :aria-label="traced ? 'An illustrative Skill connects through a continuous thread to its human-written source.' : 'An illustrative Skill appears without its source thread.'">
+      <div class="thread-path" aria-hidden="true">
+        <i class="thread-top" />
+        <i class="thread-turn" />
+        <i class="thread-bottom" />
+        <span class="thread-knot" />
+      </div>
+      <div class="skill-leaf" aria-hidden="true">
+        <span class="leaf-label">Your Agent</span>
+        <strong>SKILL.md</strong>
+        <div class="written-lines">
+          <i /><i /><i /><i />
+        </div>
+        <span class="leaf-end">Read the Skill</span>
+      </div>
+      <div class="source-leaf" aria-hidden="true">
+        <div class="source-mark">
+          ⏶
+        </div>
+        <span class="leaf-label">Illustrative source</span>
+        <strong>Written by a human.</strong>
+        <span class="leaf-end">The author keeps the source.</span>
+      </div>
+      <div class="trace-label" aria-hidden="true">
+        Source stays attached.
+      </div>
+    </div>
+    <div class="experiment-controls">
+      <UButton color="neutral" variant="outline" :aria-pressed="traced" @click="traced = !traced">
+        {{ traced ? 'Hide source thread' : 'Trace the source' }}
+      </UButton>
+      <UButton color="neutral" variant="ghost" @click="revision++">
+        Replay
+      </UButton>
+    </div>
+    <p class="experiment-footnote">
+      Illustrative source. The thread represents authorship, not a safety claim.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.provenance-experiment { container-type: inline-size; color: var(--ui-text); }
+.experiment-heading h3 { font-size: clamp(1.4rem, 4cqi, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 12px; }
+.experiment-heading p { max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); margin: 0; }
+.provenance-stage { position: relative; height: 330px; overflow: hidden; border-block: 1px solid var(--ui-border); margin: 24px 0 16px; }
+.skill-leaf { position: absolute; left: 8%; top: 28px; width: 49%; padding: 16px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); transform: rotate(-3deg); }
+.leaf-label, .leaf-end, .trace-label { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
+.leaf-label { display: block; color: var(--ui-text-muted); margin-bottom: 8px; }
+.skill-leaf strong { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
+.written-lines { display: flex; gap: 7px; flex-direction: column; padding: 16px 0; }
+.written-lines i { border-top: 2px solid var(--ui-border-accented); width: 90%; }
+.written-lines i:nth-child(2) { width: 72%; }
+.written-lines i:nth-child(3) { width: 83%; }
+.written-lines i:nth-child(4) { width: 44%; }
+.leaf-end { display: block; color: var(--ui-text-muted); }
+.source-leaf { position: absolute; left: 36%; right: 5%; bottom: 24px; padding: 16px 0 16px 28px; border-top: 1px solid var(--ui-border-accented); background: var(--ui-bg); }
+.source-leaf strong { display: block; font-size: clamp(17px, 4cqi, 24px); font-weight: 500; margin-bottom: 8px; letter-spacing: -.03em; }
+.source-mark { position: absolute; left: 0; top: 14px; font-size: 22px; color: var(--ui-primary); }
+.thread-path { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms ease-out; }
+.thread-path i { position: absolute; border-color: var(--ui-primary); }
+.thread-top { top: 101px; left: 42%; width: 42%; border-top: 1px solid; }
+.thread-turn { top: 101px; right: 16%; height: 149px; width: 35%; border-right: 1px solid; border-bottom: 1px solid; border-bottom-right-radius: 48px; }
+.thread-bottom { top: 250px; left: 16%; width: 36%; border-top: 1px solid; }
+.thread-knot { position: absolute; top: 246px; left: 16%; width: 9px; height: 9px; border: 1px solid var(--ui-primary); border-radius: 50%; background: var(--ui-bg); }
+.trace-label { position: absolute; top: 220px; left: 7%; color: var(--ui-primary); background: var(--ui-bg); padding: 4px; opacity: 0; transition: opacity 200ms ease-out; }
+.is-traced .thread-path, .is-traced .trace-label { opacity: 1; }
+.is-traced .thread-path { animation: thread-reveal 360ms ease-out; }
+.experiment-controls { display: flex; gap: 8px; flex-wrap: wrap; }
+.experiment-controls :deep(button) { min-height: 44px; }
+.experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
+@keyframes thread-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
+@container (max-width: 400px) { .skill-leaf { left: 5%; width: 62%; padding: 12px; } .source-leaf { left: 23%; right: 4%; padding-left: 24px; } .trace-label { top: auto; bottom: 0; left: 4%; font-size: 14px; } .thread-turn { right: 10%; } .thread-top { width: 48%; } }
+@media (prefers-reduced-motion: reduce) { .thread-path, .trace-label { animation: none !important; transition: none; } }
+</style>

app/components/brand-experiments/KnowledgeFreshness.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const watching = ref(true)
+const revision = ref(0)
+</script>
+
+<template>
+  <section class="freshness-experiment">
+    <div class="experiment-heading">
+      <h3>See when knowledge moves.</h3>
+      <p>The source changes. Your local copy stays still. Watch makes the difference visible.</p>
+    </div>
+    <div :key="revision" class="freshness-stage" :class="{ 'is-watching': watching }" role="img" :aria-label="watching ? 'Illustrative source has changed. Watch highlights differences without changing the local copy.' : 'Illustrative source has changed while the local copy stays still.'">
+      <div class="sheet sheet-local" aria-hidden="true">
+        <span class="sheet-caption">Local copy</span>
+        <div class="dot-matrix">
+          <i v-for="dot in 120" :key="dot" :class="{ 'ink-dot': dot % 11 < 5 }" />
+        </div>
+        <span class="sheet-foot">Kept in your project</span>
+      </div>
+      <div class="sheet sheet-source" aria-hidden="true">
+        <span class="sheet-caption">Illustrative source</span>
+        <div class="dot-matrix">
+          <i v-for="dot in 120" :key="dot" :class="{ 'ink-dot': dot % 11 < 5, 'changed-dot': dot > 48 && dot < 85 }" />
+        </div>
+        <span class="sheet-foot">Changed at the source</span>
+      </div>
+      <div class="change-seam" aria-hidden="true">
+        <span>Watch for changes</span>
+        <i />
+      </div>
+    </div>
+    <div class="experiment-controls">
+      <UButton color="neutral" variant="outline" :aria-pressed="watching" @click="watching = !watching">
+        {{ watching ? 'Hide differences' : 'Show differences' }}
+      </UButton>
+      <UButton color="neutral" variant="ghost" @click="revision++">
+        Replay
+      </UButton>
+    </div>
+    <p class="experiment-footnote">
+      Illustration only. Watching reports changes. It does not update your local copy.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.freshness-experiment { container-type: inline-size; color: var(--ui-text); }
+.experiment-heading h3 { font-size: clamp(1.4rem, 4cqi, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 12px; }
+.experiment-heading p { max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); margin: 0; }
+.freshness-stage { height: 330px; position: relative; overflow: hidden; margin: 24px 0 16px; border-block: 1px solid var(--ui-border); }
+.sheet { position: absolute; width: 48%; height: 226px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
+.sheet-local { left: 8%; top: 68px; transform: rotate(-7deg); }
+.sheet-source { left: 44%; top: 27px; transform: rotate(7deg); animation: source-moves 360ms ease-out both; }
+.sheet-caption, .sheet-foot, .change-seam { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
+.sheet-caption { color: var(--ui-text); }
+.sheet-foot { color: var(--ui-text-muted); }
+.dot-matrix { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; padding-block: 16px; }
+.dot-matrix i { width: 4px; height: 4px; border-radius: 50%; background: var(--ui-border-accented); justify-self: center; }
+.dot-matrix .ink-dot { background: var(--ui-text-muted); }
+.dot-matrix .changed-dot { transform: translateX(3px); }
+.is-watching .dot-matrix .changed-dot { background: var(--ui-primary); }
+.change-seam { position: absolute; left: 6%; right: 6%; top: 173px; color: var(--ui-primary); opacity: 0; transition: opacity 200ms ease-out; }
+.change-seam span { background: var(--ui-bg); padding: 4px 8px; border: 1px solid var(--ui-primary); position: relative; z-index: 1; }
+.change-seam i { position: absolute; top: 9px; left: 0; right: 0; border-top: 1px dashed var(--ui-primary); }
+.is-watching .change-seam { opacity: 1; }
+.experiment-controls { display: flex; gap: 8px; flex-wrap: wrap; }
+.experiment-controls :deep(button) { min-height: 44px; }
+.experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
+@keyframes source-moves { from { transform: rotate(-7deg) translate(-16px, 16px); } to { transform: rotate(7deg); } }
+@container (max-width: 400px) { .sheet { padding: 12px; width: 54%; } .sheet-local { left: 3%; } .sheet-source { left: 41%; } .dot-matrix { gap: 6px; } .sheet-foot { font-size: 14px; } }
+@media (prefers-reduced-motion: reduce) { .sheet-source { animation: none; } .change-seam { transition: none; } }
+</style>