From 07158a2b612758512b1f86a03e1e3283dc6c8f0e Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:14:16 +1100
Subject: [PATCH 1/2] feat(home): apply the dot brand to the home page

The home page still carried the noise field, the taste-tested hero and a
featured collections band the new copy deck retires. It now uses the
approved copy and the motifs that real data supports.

- Hero: braille names texture fed this week's trending Skill names,
  the rose dot as the H1 full stop, the claims line and the skilld
  install promo. The rail stops auto scrolling so the texture is the
  band's one moving region.
- Four tiles replace the three doors.
- Trending cards link their source post. A card gets a run chip only
  when its repository holds exactly one Skill.
- Converge is the trending loader and the divider into publishing.
- The collections band, its fetch and its CSS are gone. NoiseField and
  its WebGL guard go with it, since nothing else used them.
- Band edges and heading underlines turn stone, so rose stays the one
  picked dot.

Page title and meta description are unchanged for the SEO experiment.
---
 app/assets/css/main.css              | 517 +++++----------------------
 app/components/NoiseField.client.vue | 405 ---------------------
 app/pages/index.vue                  | 515 ++++++--------------------
 app/utils/webgl-context.ts           |  50 ---
 scripts/lib/production-smoke.ts      |   2 +-
 test/a11y.spec.ts                    |   1 -
 test/unit/production-smoke.test.ts   |   2 +-
 test/unit/webgl-context.test.ts      |  61 +---
 8 files changed, 203 insertions(+), 1350 deletions(-)
 delete mode 100644 app/components/NoiseField.client.vue

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 4191323e..a0590501 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -545,12 +545,6 @@
   }
 }
 
-.home-featured-heading {
-  display: grid;
-  gap: 1.5rem;
-  align-items: end;
-}
-
 .home-community-band {
   background: color-mix(in oklab, var(--ui-bg) 94%, var(--ui-bg-muted));
 }
@@ -599,294 +593,6 @@
   }
 }
 
-.home-featured-title {
-  font-size: clamp(2.5rem, 2.1rem + 1.8vw, 3.5rem);
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 1.02;
-}
-
-.home-featured-layout {
-  display: grid;
-  min-width: 0;
-  gap: 0.75rem;
-}
-
-.home-featured-lead,
-.home-featured-support-card {
-  min-width: 0;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  background: var(--ui-bg);
-}
-
-.home-featured-lead {
-  padding: 1.25rem;
-}
-
-.home-featured-lead__intro {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.home-featured-lead__title {
-  font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem);
-  font-weight: 600;
-  letter-spacing: -0.035em;
-  line-height: 1.08;
-}
-
-.home-featured-curator {
-  display: flex;
-  min-width: 0;
-  flex: none;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.home-featured-avatar,
-.home-featured-skill-avatar,
-.home-featured-support-avatar {
-  flex: none;
-  border: 2px solid var(--ui-bg);
-  border-radius: 9999px;
-  outline: 1px solid var(--ui-border);
-  background: var(--ui-bg-muted);
-  object-fit: cover;
-}
-
-.home-featured-avatar {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-
-.home-featured-rationale {
-  margin-top: 1.25rem;
-  padding-block: 1.25rem;
-  border-block: 1px solid var(--ui-border);
-}
-
-.home-featured-skill-heading {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-top: 1.25rem;
-}
-
-.home-featured-skills {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: minmax(0, 1fr);
-  margin-top: 0.75rem;
-  padding: 0;
-  border-block: 1px solid var(--ui-border);
-  list-style: none;
-}
-
-.home-featured-skills > li {
-  min-width: 0;
-}
-
-.home-featured-skills > li:not(:last-child) {
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.home-featured-skill {
-  display: flex;
-  min-width: 0;
-  min-height: 4.75rem;
-  height: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  overflow-wrap: anywhere;
-  transition: background-color 200ms ease-out;
-}
-
-.home-featured-skill-avatar {
-  width: 2rem;
-  height: 2rem;
-}
-
-.home-featured-skill:focus-visible,
-.home-featured-support-card:focus-visible {
-  outline: 2px solid var(--ui-color-primary-500) !important;
-  outline-offset: -3px !important;
-}
-
-.home-featured-install {
-  min-width: 0;
-  margin-top: 1.5rem;
-}
-
-.home-featured-install__heading {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.home-featured-command {
-  display: grid;
-  min-width: 0;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-
-/* The command wraps rather than scrolls: a horizontal scrollbar inside the
-   lead card is chrome the reader has to operate to finish reading one line. */
-.home-featured-command code {
-  display: block;
-  min-width: 0;
-  max-width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  background: var(--ui-bg-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  user-select: text;
-}
-
-.home-featured-command code:focus-visible {
-  outline: 2px solid var(--ui-color-primary-500);
-  outline-offset: 2px;
-}
-
-.home-featured-copy {
-  width: 100%;
-}
-
-.home-featured-feedback {
-  min-height: 1.5rem;
-  margin: 0;
-  padding-top: 0.5rem;
-}
-
-.home-featured-support {
-  display: grid;
-  min-width: 0;
-  gap: 0.75rem;
-}
-
-.home-featured-support article {
-  min-width: 0;
-  height: 100%;
-}
-
-.home-featured-support-card {
-  display: flex;
-  min-height: 11rem;
-  height: 100%;
-  flex-direction: column;
-  background: color-mix(in oklab, var(--ui-bg-muted) 32%, var(--ui-bg));
-  padding: 1.25rem;
-  transition: background-color 200ms ease-out, border-color 200ms ease-out;
-}
-
-.home-featured-support-avatar {
-  width: 2rem;
-  height: 2rem;
-}
-
-.home-featured-owner-stack {
-  display: flex;
-  flex: none;
-  align-items: center;
-}
-
-.home-featured-owner-stack > * + * {
-  margin-left: -0.5rem;
-}
-
-.home-featured-support-arrow {
-  color: var(--ui-text-muted);
-  transition: color 200ms ease-out, translate 200ms ease-out;
-}
-
-.home-featured-support-meta {
-  margin-top: auto;
-  padding-top: 1rem;
-}
-
-@media (min-width: 40rem) {
-  .home-featured-heading {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .home-featured-lead {
-    padding: 1.5rem;
-  }
-
-  .home-featured-lead__intro {
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  .home-featured-install__heading {
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  .home-featured-command {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .home-featured-copy {
-    width: auto;
-  }
-
-  .home-featured-support {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .home-featured-skills {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .home-featured-skills > li:not(:last-child) {
-    border-bottom: 0;
-  }
-
-  .home-featured-skills > li:nth-child(odd) {
-    border-right: 1px solid var(--ui-border);
-  }
-
-  .home-featured-skills > li:nth-child(n+3) {
-    border-top: 1px solid var(--ui-border);
-  }
-}
-
-@media (min-width: 64rem) {
-  .home-featured-layout {
-    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
-  }
-
-  .home-featured-support {
-    align-self: start;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: repeat(2, auto);
-  }
-
-}
-
-@media (hover: hover) {
-  .home-featured-skill:hover,
-  .home-featured-support-card:hover {
-    background: var(--ui-bg-muted);
-  }
-
-  .home-featured-support-card:hover .home-featured-support-arrow {
-    color: var(--ui-text);
-    translate: 0.125rem -0.125rem;
-  }
-}
-
 .home-freshness-title {
   font-size: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
   letter-spacing: -0.04em;
@@ -1536,6 +1242,95 @@
   }
 }
 
+/* The braille names texture: behind the hero, masked clear of the headline.
+   Phones stack the copy above the rail, so the names sit below the copy. */
+.home-hero-texture {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
+}
+
+@media (min-width: 64rem) {
+  .home-hero-texture {
+    mask-image: linear-gradient(to right, transparent 38%, #000 80%);
+    -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 80%);
+  }
+}
+
+/* The H1 full stop is the brand dot, the hero's rose element. */
+.home-hero-dot {
+  display: inline-block;
+  width: 0.16em;
+  height: 0.16em;
+  margin-inline-start: 0.05em;
+  border-radius: 999px;
+  background: var(--brand-dot);
+}
+
+.home-hero-claims a {
+  color: var(--ui-text);
+  text-decoration-line: underline;
+  text-decoration-color: var(--ui-border-accented);
+  text-underline-offset: 0.2em;
+  transition: text-decoration-color 200ms ease-out;
+}
+
+.home-hero-claims a:hover {
+  text-decoration-color: currentColor;
+}
+
+.home-hero-promo {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  max-width: 36rem;
+}
+
+/* Trending cards: the repository link covers the card, and the run chip and
+   the source link sit above it. */
+.home-trending-card {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 1rem;
+  transition: border-color 200ms ease-out;
+}
+
+.home-trending-card__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.home-trending-card__action {
+  position: relative;
+  z-index: 1;
+}
+
+@media (hover: hover) {
+  .home-trending-card:has(.home-trending-card__link:hover) {
+    border-color: var(--ui-text-muted);
+  }
+}
+
+.home-trending-card:has(.home-trending-card__link:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+.home-trending-card__link:focus-visible {
+  outline: none;
+}
+
 /* the homepage hero: named agent row under the search. Proof of "every agent". */
 .home-hero-agents {
   display: flex;
@@ -1573,62 +1368,6 @@
   column-gap: 0.5rem;
 }
 
-/* "ecosystem" carries the brand: rose ink and the chevron mark in place of a full stop. */
-.home-hero-eco {
-  position: relative;
-  display: inline-block;
-  color: var(--ui-primary);
-  opacity: 0.92;
-}
-
-/* Dot-grid underline: the noise field's grid, frozen, in rose. */
-.home-hero-eco::after {
-  content: '';
-  position: absolute;
-  inset-inline: 0.04em 0.3em;
-  bottom: -0.01em;
-  height: 0.13em;
-  background-image: radial-gradient(circle, var(--ui-primary) 1px, transparent 1.25px);
-  background-size: 0.115em 0.115em;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-
-.home-hero-taste {
-  position: relative;
-  display: inline-block;
-}
-
-/* Emoji wink on the first line: sits on the cap line, clear of the last letter. */
-.home-hero-emoji {
-  position: absolute;
-  top: 0.04em;
-  right: -1.55em;
-  font-size: 0.4em;
-  line-height: 1;
-  transform: rotate(10deg);
-  transform-origin: 50% 80%;
-}
-
-/* A quick wiggle when the headline is hovered: 360ms, inside the motion budget. */
-.home-hero-title:hover .home-hero-emoji {
-  animation: home-emoji-wiggle 360ms ease-in-out;
-}
-
-@keyframes home-emoji-wiggle {
-  0% { transform: rotate(10deg); }
-  30% { transform: rotate(-6deg) scale(1.08); }
-  60% { transform: rotate(16deg) scale(1.04); }
-  100% { transform: rotate(10deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .home-hero-title:hover .home-hero-emoji {
-    animation: none;
-  }
-}
-
 /* The homepage authoring link opens the setup wizard. */
 .home-make-strip {
   display: grid;
@@ -1650,38 +1389,6 @@
   }
 }
 
-/* the homepage rail: fade both ends so a half row reads as depth, not a bug. */
-/* The packet: a rose dot that rides the rail's spine, the CLI ripple as a signal. */
-.home-hero-rail .skill-source-stream__list::after {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(1.125rem - 2.5px);
-  top: 1.75rem;
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: var(--ui-primary);
-  box-shadow: 0 0 6px 1px var(--ui-primary);
-  opacity: 0;
-  animation: home-packet 2.4s ease-in infinite;
-  animation-delay: 1s;
-  pointer-events: none;
-}
-
-@keyframes home-packet {
-  0% { transform: translateY(0); opacity: 0; }
-  8% { opacity: 1; }
-  70% { opacity: 1; }
-  78% { transform: translateY(calc(100% * 1)); opacity: 0; }
-  100% { transform: translateY(0); opacity: 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .home-hero-rail .skill-source-stream__list::after {
-    animation: none;
-  }
-}
-
 .home-hero-rail [class*="stream"] {
   scrollbar-width: none;
 }
@@ -1742,7 +1449,8 @@
    band, so the page reads as one made thing instead of a decorated hero.
    ========================================================================== */
 
-/* Band edges are printed in the dot grid, not drawn as a flat rule. */
+/* Band edges are printed in the dot grid, not drawn as a flat rule. Stone
+   dots: rose is for the one dot a motif picks. */
 .home-page > section,
 .home-page > nav {
   position: relative;
@@ -1756,16 +1464,16 @@
   bottom: 0;
   z-index: 2;
   height: 5px;
-  background-image: radial-gradient(circle, var(--ui-primary) 1.1px, transparent 1.4px);
+  background-image: radial-gradient(circle, var(--ui-text-dimmed) 1.1px, transparent 1.4px);
   background-size: 7px 5px;
-  opacity: 0.28;
+  opacity: 0.5;
   pointer-events: none;
 }
 
-/* One word per heading carries the hero's dot underline. */
+/* One word per heading carries a stone underline. */
 .home-ink {
   text-decoration-line: underline;
-  text-decoration-color: color-mix(in oklab, var(--ui-primary) 65%, transparent);
+  text-decoration-color: var(--ui-border-accented);
   text-decoration-thickness: max(2px, 0.045em);
   text-underline-offset: 0.16em;
   text-decoration-skip-ink: none;
@@ -1799,23 +1507,6 @@
   z-index: 1;
 }
 
-/* The tasted chip: the hero's emoji, reused wherever a person said yes. */
-.home-tasted {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.2rem 0.5rem 0.2rem 0.4rem;
-  border: 1px solid color-mix(in oklab, var(--ui-primary) 32%, transparent);
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--ui-primary) 10%, transparent);
-  color: var(--ui-primary);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
 /* Ecosystem tiles under the authoring strip. Same chip as the agent row. */
 .home-eco-logos {
   display: flex;
@@ -1850,13 +1541,6 @@
   color: var(--ui-text-highlighted);
 }
 
-/* The rail spine carries a rose wash under the packet. */
-.home-hero-rail .skill-source-stream__list::after {
-  width: 7px;
-  height: 7px;
-  box-shadow: 0 0 10px 2px color-mix(in oklab, var(--ui-primary) 70%, transparent);
-}
-
 /* One heading scale for every band on /alt. The page had four before. */
 .home-page .home-h2 {
   font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.625rem);
@@ -1900,10 +1584,6 @@
 }
 
 /* Two h3 steps under the heading scale, not four. */
-.home-page .home-featured-lead__title {
-  font-size: 1.75rem;
-}
-
 .home-page .home-freshness-primary-title,
 .home-page .home-freshness-secondary-title {
   font-size: 1.5rem;
@@ -1977,13 +1657,6 @@
   }
 }
 
-/* "+N more" closes the lead collection's skill list when it is truncated. */
-.home-featured-skill-more {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-}
-
 /* An in-page jump landed the heading flush against the sticky header, with no
    space above it. The header is 4rem; this adds a breath on top of that. */
 .home-page > section[id] {
diff --git a/app/components/NoiseField.client.vue b/app/components/NoiseField.client.vue
deleted file mode 100644
index 6ff531ea..00000000
--- a/app/components/NoiseField.client.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<script setup lang="ts">
-import { useDocumentVisibility, useElementSize, useMouseInElement, useRafFn } from '@vueuse/core'
-import { isSoftwareRenderer, isUsableWebGL2Context, webglRendererName } from '../utils/webgl-context'
-
-const props = withDefaults(defineProps<{
-  opacity?: number
-}>(), {
-  opacity: 0.45,
-})
-
-const colorMode = useColorMode()
-const { prefersReducedMotion } = useMotionA11y()
-const isDark = computed(() => colorMode.value === 'dark')
-
-function djb2(s: string): number {
-  let h = 5381
-  for (let i = 0; i < s.length; i++)
-    h = ((h << 5) + h + s.charCodeAt(i)) >>> 0
-  return h
-}
-
-// Seed hue from device characteristics so each visitor gets a unique color
-const hue = computed(() => {
-  const seed = [
-    navigator.userAgent,
-    `${screen.width}x${screen.height}`,
-    Intl.DateTimeFormat().resolvedOptions().timeZone,
-    navigator.language,
-    `${screen.colorDepth}`,
-  ].join('|')
-  return (djb2(seed) % 360) / 360
-})
-
-const containerRef = ref<HTMLElement>()
-const canvasRef = ref<HTMLCanvasElement>()
-const { width, height } = useElementSize(containerRef)
-const { elementX, elementY, isOutside } = useMouseInElement(containerRef)
-const visibility = useDocumentVisibility()
-
-const VERT = `#version 300 es
-void main() {
-  float x = float((gl_VertexID & 1) << 2) - 1.0;
-  float y = float((gl_VertexID & 2) << 1) - 1.0;
-  gl_Position = vec4(x, y, 0.0, 1.0);
-}`
-
-const FRAG = `#version 300 es
-precision highp float;
-
-uniform float u_time;
-uniform vec2 u_resolution;
-uniform vec2 u_mouse;
-uniform float u_hue;
-uniform float u_opacity;
-uniform float u_dpr;
-uniform float u_dark;
-
-out vec4 fragColor;
-
-const float DOT_RADIUS = 1.5;
-const float GRID_SPACING = 10.0;
-const float GLOW_SIGMA = 4.0;
-
-// Pseudo-random from 3D input for per-cell per-frame variation
-float hash3(vec3 p) {
-  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);
-}
-
-// HSL to RGB
-vec3 hsl2rgb(float h, float s, float l) {
-  float c = (1.0 - abs(2.0 * l - 1.0)) * s;
-  float x = c * (1.0 - abs(mod(h * 6.0, 2.0) - 1.0));
-  float m = l - c * 0.5;
-  vec3 rgb;
-  float hh = h * 6.0;
-  if (hh < 1.0) rgb = vec3(c, x, 0.0);
-  else if (hh < 2.0) rgb = vec3(x, c, 0.0);
-  else if (hh < 3.0) rgb = vec3(0.0, c, x);
-  else if (hh < 4.0) rgb = vec3(0.0, x, c);
-  else if (hh < 5.0) rgb = vec3(x, 0.0, c);
-  else rgb = vec3(c, 0.0, x);
-  return rgb + m;
-}
-
-float rippleBrightness(vec2 gridPos, vec2 center, float t) {
-  float d = distance(gridPos, center);
-  float val = 0.0;
-
-  // 3 expanding ring wavefronts
-  for (int ring = 0; ring < 3; ring++) {
-    float rt = t - float(ring) * 0.5;
-    if (rt <= 0.0) continue;
-    float front = rt * 4.0;
-    float proximity = abs(d - front);
-    val += exp(-proximity * proximity * 0.8) * exp(-rt * 0.4);
-  }
-
-  // Ambient shimmer: fades in after ripples, stays permanently
-  float shimmerOnset = clamp((t - 1.0) * 0.5, 0.0, 1.0);
-  float t4 = t * 4.0;
-  float j1 = hash3(vec3(gridPos, floor(t4)));
-  float j2 = hash3(vec3(gridPos, floor(t4) + 1.0));
-  float jitter = mix(j1, j2, smoothstep(0.0, 1.0, fract(t4)));
-
-  // Shimmer range: 0.2 to 0.8 so dots are clearly visible
-  float shimmer = shimmerOnset * (jitter * 0.6 + 0.2);
-
-  return clamp(val + shimmer, 0.0, 1.0);
-}
-
-void main() {
-  vec2 pixel = gl_FragCoord.xy;
-  float spacing = GRID_SPACING * u_dpr;
-  float radius = DOT_RADIUS * u_dpr;
-  float glowSigma = GLOW_SIGMA * u_dpr;
-
-  // Nearest grid dot center
-  vec2 gridPixel = round(pixel / spacing) * spacing;
-  vec2 gridCoord = gridPixel / spacing;
-  float distToDot = distance(pixel, gridPixel);
-
-  // Ripple center in grid units
-  vec2 center = (u_resolution * 0.5) / spacing;
-
-  float b = rippleBrightness(gridCoord, center, u_time);
-
-  // Mouse proximity: radial glow around cursor
-  if (u_mouse.x >= 0.0) {
-    vec2 mouseGrid = u_mouse / spacing;
-    float md = distance(gridCoord, mouseGrid);
-    b = max(b, exp(-md * md * 0.006) * 1.0);
-  }
-
-  // Skip invisible cells
-  if (b < 0.05) {
-    fragColor = vec4(0.0);
-    return;
-  }
-
-  // Dot core
-  float dot = smoothstep(radius + 0.5, radius - 0.5, distToDot);
-
-  // Soft glow halo around each dot
-  float glow = exp(-distToDot * distToDot / (2.0 * glowSigma * glowSigma));
-
-  // Final intensity: dot is bright center, glow is halo
-  float alpha = (dot + glow * 0.5) * b * u_opacity;
-
-  // Color: adapt to dark/light mode
-  float s, l;
-  if (u_dark > 0.5) {
-    // Dark mode: vivid light dots
-    s = 0.4 + b * 0.2;
-    l = 0.45 + b * 0.25;
-  } else {
-    // Light mode: muted, slightly darker than bg
-    s = 0.15 + b * 0.1;
-    l = 0.65 - b * 0.1;
-    alpha *= 0.5; // softer in light mode
-  }
-  vec3 color = hsl2rgb(u_hue, s, l);
-
-  fragColor = vec4(color, alpha);
-}
-`
-
-function compileShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {
-  const shader = gl.createShader(type)
-  if (!shader)
-    return null
-  gl.shaderSource(shader, source)
-  gl.compileShader(shader)
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error('Shader compile error:', gl.getShaderInfoLog(shader))
-    gl.deleteShader(shader)
-    return null
-  }
-  return shader
-}
-
-function createProgram(gl: WebGL2RenderingContext, vert: string, frag: string): WebGLProgram | null {
-  const vs = compileShader(gl, gl.VERTEX_SHADER, vert)
-  const fs = compileShader(gl, gl.FRAGMENT_SHADER, frag)
-  if (!vs || !fs)
-    return null
-  const program = gl.createProgram()!
-  gl.attachShader(program, vs)
-  gl.attachShader(program, fs)
-  gl.linkProgram(program)
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error('Program link error:', gl.getProgramInfoLog(program))
-    gl.deleteProgram(program)
-    return null
-  }
-  gl.deleteShader(vs)
-  gl.deleteShader(fs)
-  return program
-}
-
-let gl: WebGL2RenderingContext | null = null
-let program: WebGLProgram | null = null
-let vao: WebGLVertexArrayObject | null = null
-const uniforms = {
-  u_time: null as WebGLUniformLocation | null,
-  u_resolution: null as WebGLUniformLocation | null,
-  u_mouse: null as WebGLUniformLocation | null,
-  u_hue: null as WebGLUniformLocation | null,
-  u_opacity: null as WebGLUniformLocation | null,
-  u_dpr: null as WebGLUniformLocation | null,
-  u_dark: null as WebGLUniformLocation | null,
-}
-let startTime = 0
-let intersectionObserver: IntersectionObserver | null = null
-
-// The rings have faded by now and only the ambient shimmer moves. Its jitter
-// steps at 4 Hz, so a capped frame rate keeps it smooth for a fraction of the
-// GPU and main thread work. The cursor glow still runs at the display rate.
-const INTRO_SECONDS = 8
-const AMBIENT_FPS = 15
-
-const CONTEXT_ATTRIBUTES: WebGLContextAttributes = {
-  alpha: true,
-  premultipliedAlpha: false,
-  antialias: false,
-  powerPreference: 'low-power',
-}
-
-/**
- * A browser without GPU acceleration (no GPU, a blocklisted driver, most
- * headless browsers) runs WebGL on the CPU, and each frame of a full-bleed
- * shader becomes a long task on the main thread. Some browsers refuse that
- * context under `failIfMajorPerformanceCaveat`; Chrome hands out SwiftShader
- * anyway, so the renderer name decides too. Either way the field draws one
- * static frame.
- */
-type FieldContext
-  = | { _tag: 'accelerated', gl: WebGL2RenderingContext }
-    | { _tag: 'software', gl: WebGL2RenderingContext }
-
-function createContext(canvas: HTMLCanvasElement): FieldContext | null {
-  const accelerated = canvas.getContext('webgl2', { ...CONTEXT_ATTRIBUTES, failIfMajorPerformanceCaveat: true })
-  if (isUsableWebGL2Context(accelerated))
-    return { _tag: isSoftwareRenderer(webglRendererName(accelerated)) ? 'software' : 'accelerated', gl: accelerated }
-  const software = canvas.getContext('webgl2', CONTEXT_ATTRIBUTES)
-  return isUsableWebGL2Context(software) ? { _tag: 'software', gl: software } : null
-}
-
-const isStatic = ref(false)
-const introDone = ref(false)
-// Software rendering pays per pixel on the CPU, so it draws at 1x.
-let maxDpr = 2
-
-function canvasDpr(): number {
-  return Math.min(window.devicePixelRatio || 1, maxDpr)
-}
-
-function initGL(): FieldContext['_tag'] | null {
-  const canvas = canvasRef.value
-  if (!canvas)
-    return null
-
-  const context = createContext(canvas)
-  if (!context)
-    return null
-  gl = context.gl
-
-  program = createProgram(gl, VERT, FRAG)
-  if (!program)
-    return null
-
-  vao = gl.createVertexArray()
-
-  gl.useProgram(program)
-  for (const name of Object.keys(uniforms) as (keyof typeof uniforms)[]) {
-    uniforms[name] = gl.getUniformLocation(program, name)
-  }
-  startTime = Date.now()
-
-  gl.enable(gl.BLEND)
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
-  gl.clearColor(0, 0, 0, 0)
-
-  return context._tag
-}
-
-function resizeCanvas() {
-  const canvas = canvasRef.value
-  if (!canvas || !gl)
-    return
-  const dpr = canvasDpr()
-  const w = Math.round(width.value * dpr)
-  const h = Math.round(height.value * dpr)
-  if (canvas.width !== w || canvas.height !== h) {
-    canvas.width = w
-    canvas.height = h
-    gl.viewport(0, 0, w, h)
-  }
-}
-
-function drawFrame() {
-  if (!gl || !program || !canvasRef.value)
-    return
-
-  resizeCanvas()
-
-  const dpr = canvasDpr()
-  const t = isStatic.value ? 3.0 : (Date.now() - startTime) / 1000
-  if (t > INTRO_SECONDS)
-    introDone.value = true
-
-  gl.clear(gl.COLOR_BUFFER_BIT)
-  gl.useProgram(program)
-  gl.bindVertexArray(vao)
-
-  gl.uniform1f(uniforms.u_time, t)
-  gl.uniform2f(uniforms.u_resolution, canvasRef.value.width, canvasRef.value.height)
-  gl.uniform1f(uniforms.u_hue, hue.value)
-  gl.uniform1f(uniforms.u_opacity, props.opacity)
-  gl.uniform1f(uniforms.u_dpr, dpr)
-  gl.uniform1f(uniforms.u_dark, isDark.value ? 1.0 : 0.0)
-
-  if (isOutside.value || isStatic.value) {
-    gl.uniform2f(uniforms.u_mouse, -1, -1)
-  }
-  else {
-    gl.uniform2f(uniforms.u_mouse, elementX.value * dpr, (height.value - elementY.value) * dpr)
-  }
-
-  gl.drawArrays(gl.TRIANGLES, 0, 3)
-}
-
-const isVisible = ref(true)
-
-const { pause, resume } = useRafFn(() => {
-  if (visibility.value === 'hidden' || !isVisible.value)
-    return
-  drawFrame()
-}, {
-  immediate: false,
-  fpsLimit: () => introDone.value && isOutside.value ? AMBIENT_FPS : null,
-})
-
-// A static frame has no loop, so it redraws when its box or theme changes.
-watch([width, height, isDark], () => {
-  if (isStatic.value)
-    drawFrame()
-})
-
-let disposed = false
-
-// The field is decoration. It starts once the page has hydrated and the main
-// thread is idle, so it never competes with the first paint or hydration.
-onNuxtReady(() => {
-  if (disposed || gl)
-    return
-
-  const mode = initGL()
-  if (!mode)
-    return
-
-  if (mode === 'software')
-    maxDpr = 1
-  if (mode === 'software' || prefersReducedMotion.value) {
-    isStatic.value = true
-    drawFrame()
-    return
-  }
-
-  if (containerRef.value) {
-    intersectionObserver = new IntersectionObserver(
-      (entries) => { isVisible.value = entries[0]?.isIntersecting ?? false },
-      { threshold: 0 },
-    )
-    intersectionObserver.observe(containerRef.value)
-  }
-
-  resume()
-})
-
-onBeforeUnmount(() => {
-  disposed = true
-  pause()
-  intersectionObserver?.disconnect()
-  if (gl) {
-    if (vao)
-      gl.deleteVertexArray(vao)
-    if (program)
-      gl.deleteProgram(program)
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
-  }
-})
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    class="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
-    aria-hidden="true"
-  >
-    <canvas
-      ref="canvasRef"
-      class="size-full"
-    />
-  </div>
-</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bcb3a7e9..79adb9f3 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { FeaturedCollectionsResponse } from '~~/server/api/collections/featured.get'
 import type { RecentPublishesResponse } from '~~/server/api/feed/recent-publishes.get'
 import type { RecentUpdateCard, RecentUpdatesResponse } from '~~/server/api/feed/recent-updates.get'
-import type { TrendingFeedResponse } from '~~/server/api/feed/trending.get'
-import type { InstallTarget } from '../composables/useInstallCopy'
+import type { TrendingFeedItem, TrendingFeedResponse } from '~~/server/api/feed/trending.get'
 import type { SkillSourceItem } from '../types/skill-source'
 import type { FeaturedPersonSection } from '../utils/homepage-person-skills'
 import { WRITING_COMPARISON_LINK } from '#shared/comparison-navigation'
@@ -51,12 +49,6 @@ function withHomeDataTiming<T>(name: string, request: Promise<T>): Promise<T> {
 }
 
 const [
-  {
-    data: collectionsData,
-    status: collectionsStatus,
-    error: collectionsError,
-    refresh: refreshCollections,
-  },
   {
     data: updatesData,
     status: updatesStatus,
@@ -74,9 +66,6 @@ const [
     status: trendingStatus,
   },
 ] = await Promise.all([
-  withHomeDataTiming('home-featured', useFetch<FeaturedCollectionsResponse>('/api/collections/featured', {
-    key: 'home-featured-collections-v6',
-  })),
   withHomeDataTiming('home-updates', useFetch<RecentUpdatesResponse>('/api/feed/recent-updates', {
     key: 'home-recent-updates-v2',
   })),
@@ -102,27 +91,6 @@ if (import.meta.server) {
   serverTimingHeader.value = homeDataTimings.join(', ')
 }
 
-const featuredCollections = computed(() =>
-  (collectionsData.value?.items ?? []).map(collection => ({
-    ...collection,
-    skills: collection.skills ?? [],
-  })),
-)
-/**
- * The lead card prints "Install all N skills" and a live copy button, so it
- * has to be a collection with skills in it. The API filters members on trust,
- * source and render status, so a featured collection can arrive with a count
- * of zero and nothing to install.
- */
-const leadCollection = computed(() =>
-  featuredCollections.value.find(collection => collection.skills.length > 0) ?? null,
-)
-const featuredSkillTotal = computed(() =>
-  featuredCollections.value.reduce((total, collection) => total + collection.skillCount, 0),
-)
-const supportingCollections = computed(() =>
-  featuredCollections.value.filter(collection => collection !== leadCollection.value).slice(0, 2),
-)
 const recentUpdates = computed(() => updatesData.value?.items ?? [])
 const recentPublishes = computed(() => publishesData.value?.items ?? [])
 
@@ -142,8 +110,23 @@ function trendingShareLabel(authorCount: number): string {
   return authorCount === 1 ? '1 dev shared it' : `${authorCount} devs shared it`
 }
 
-type FeaturedCollectionSkill = FeaturedCollectionsResponse['items'][number]['skills'][number]
-type FeaturedCollection = FeaturedCollectionsResponse['items'][number]
+/**
+ * The one Skill a trending card can offer a run command for. A repository
+ * with several Skills gets none: the posts are about the repository, so
+ * picking one of its Skills would be a guess.
+ */
+function soleTrendingSkill(repo: TrendingFeedItem): TrendingFeedItem['skills'][number] | null {
+  return repo.skillCount === 1 ? repo.skills[0] ?? null : null
+}
+
+const trendingCards = computed(() =>
+  trendingSectionRepos.value.map(repo => ({ repo, runSkill: soleTrendingSkill(repo) })),
+)
+
+/** Real Skill names from this week's trending repositories, for the hero texture. */
+const heroTextureNames = computed(() =>
+  trendingRepos.value.flatMap(repo => repo.skills.map(skill => `${repo.owner}/${repo.repo}/${skill.name}`)),
+)
 
 interface FeaturedPeopleResponse {
   devSections: FeaturedPersonSection[]
@@ -213,37 +196,6 @@ onMounted(() => {
     void loadPeopleSkills()
 })
 
-function featuredCollectionSkillPath(skill: FeaturedCollectionSkill): string {
-  return skill.registryPath
-}
-
-function featuredCollectionSkillLabel(skill: FeaturedCollectionSkill): string {
-  return skill.name ? `/${skill.name}` : skill.repo
-}
-
-/** The avatar stack shows three faces, whatever the collection holds. */
-function collectionSkillOwners(collection: FeaturedCollection): string[] {
-  return [...new Set(collection.skills.map(skill => skill.owner))].slice(0, 3)
-}
-
-/**
- * The label counts every author, then names three. A seven-author collection
- * read as a three-author one before, because the slice above was the only
- * thing the reader saw.
- */
-function collectionSkillOwnerLabel(collection: FeaturedCollection): string {
-  const total = new Set(collection.skills.map(skill => skill.owner)).size
-  const named = collectionSkillOwners(collection).map(owner => `@${owner}`).join(' + ')
-  return total > 3 ? `${named} +${total - 3} more` : named
-}
-
-const installCommand = computed(() => {
-  const collection = leadCollection.value
-  return collection
-    ? collectionInstallCmd(collection.authorLogin, collection.slug)
-    : ''
-})
-
 /**
  * Track order, measured 2026-09-04 rather than assumed.
  *
@@ -293,32 +245,11 @@ const authoringEcosystems = [
  * to fall back to the page that always exists. An anchor to a section that did
  * not render is a link that does nothing.
  */
-const trendingDoorTarget = computed(() => (showTrending.value ? '#discover' : '/skills/trending'))
+const trendingDoorTarget = computed(() => (showTrending.value ? '#trending' : '/skills/trending'))
 
 // Named agent row under the search: proof of "every agent".
 const heroAgentLogos = AGENT_LOGOS
 
-const installTarget = computed<InstallTarget | null>(() => {
-  const collection = leadCollection.value
-  return collection
-    ? { kind: 'collection', handle: collection.authorLogin, slug: collection.slug }
-    : null
-})
-const { copy: copyFeaturedInstall } = useInstallCopy(
-  installCommand,
-  'homepage-featured-collection',
-  'install',
-  installTarget,
-)
-const copyState = refAutoReset<InstallCopyResult | { _tag: 'idle' }>({ _tag: 'idle' }, 2500)
-
-async function copyInstallCommand() {
-  if (!installCommand.value)
-    return
-
-  copyState.value = await copyFeaturedInstall()
-}
-
 const renderNow = useState('render:now', () => Number(new Date()))
 
 function formatRelative(ts: number): string {
@@ -371,34 +302,42 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
       class="editorial-band home-band--hero"
       aria-labelledby="hero-heading"
     >
-      <NoiseField :opacity="0.24" />
-      <div
-        class="editorial-atmosphere"
-        data-palette="rose"
-        data-geometry="sky"
-        data-intensity="ambient"
-        aria-hidden="true"
-      />
+      <!-- The band's one atmosphere and its one moving region. The mask keeps
+           the names clear of the headline. -->
+      <div class="home-hero-texture" aria-hidden="true">
+        <TextureBrailleNames :names="heroTextureNames" />
+      </div>
 
       <!-- The hero runs wider than the editorial bands below it so the proof
            rail sits beside the headline instead of compressing it. -->
       <div class="editorial-band__content mx-auto max-w-6xl px-4 py-10 sm:px-6 md:py-14">
         <div class="home-hero-grid">
           <div class="home-hero-copy min-w-0">
+            <!-- The rose dot is the full stop. Screen readers get a typed one. -->
             <h1 id="hero-heading" class="home-hero-title font-semibold tracking-[-0.045em]">
-              <span class="home-hero-taste">Taste-tested<span class="home-hero-emoji" aria-hidden="true">😋</span></span><br>
-              agent skills<br>
-              <span class="home-hero-eco">ecosystem.</span>
+              Hyped agent skills,<br>
+              no bloat<span class="sr-only">.</span><span class="home-hero-dot" aria-hidden="true" />
             </h1>
             <p class="mt-6 max-w-xl text-base leading-relaxed text-muted text-pretty sm:text-lg">
-              Run a skill for one session without adding files. Fork it when you want an editable copy.
-              Skills written by their maintainers, read by a person before they're listed.
+              Run a skill once and nothing lands on disk. Fork or install the ones you keep.
+              Every skill comes from its maintainer's repo, and a person reads it before it's listed.
             </p>
-            <NuxtLink to="/developers" class="mt-3 inline-flex min-h-11 items-center font-mono text-sm text-muted underline underline-offset-4 hover:text-default">
-              Use the CLI, API, SDK, or MCP
-            </NuxtLink>
+            <p class="home-hero-claims data-label mt-4">
+              <a href="https://github.com/skilld-dev/skilld" target="_blank" rel="noopener">Open-source CLI</a>
+              <span aria-hidden="true"> · </span>
+              <span>Analytics without cookies or IPs</span>
+              <span aria-hidden="true"> · </span>
+              <NuxtLink to="/vs/skills-sh">
+                A skills.sh alternative
+              </NuxtLink>
+            </p>
+
+            <div class="home-hero-promo mt-6">
+              <span class="font-mono text-xs text-muted">Teach your agent skilld</span>
+              <SkilldInstallChip surface="home-hero-promo" />
+            </div>
 
-            <div class="home-hero-slots mt-10">
+            <div class="home-hero-slots mt-8">
               <div class="home-hero-slot">
                 <div class="home-hero-search">
                   <HomeSearch />
@@ -417,10 +356,10 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
           </div>
 
           <div class="home-hero-proof home-hero-rail min-w-0">
+            <!-- No auto scroll: the texture is the band's one moving region. -->
             <SkillSourceList
               :items="heroTrendingCards"
               variant="stream"
-              auto-scroll
               :aria-label="heroShowsTrending ? 'Trending skills this week' : 'Person-authored skills'"
             />
           </div>
@@ -429,28 +368,33 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
     </section>
 
     <nav class="home-doors" aria-label="What you can do here">
-      <div class="mx-auto grid max-w-6xl gap-px px-4 sm:px-6 md:grid-cols-3">
-        <NuxtLink :to="trendingDoorTarget" class="home-door">
-          <UIcon name="i-lucide-flame" class="home-door-mark" aria-hidden="true" />
-          <span class="home-door-title">Trending skills this week<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
-          <span class="home-door-text">The skills devs are posting about right now. Every card names the author and links the source.</span>
+      <div class="mx-auto grid max-w-6xl gap-px px-4 sm:px-6 md:grid-cols-4">
+        <NuxtLink to="/docs/cli#skilld-run" class="home-door">
+          <UIcon name="i-lucide-terminal" class="home-door-mark" aria-hidden="true" />
+          <span class="home-door-title">No more skill bloat<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
+          <span class="home-door-text">Run skills once off, fork, or install.</span>
         </NuxtLink>
-        <NuxtLink to="#outcomes" class="home-door">
-          <UIcon name="i-lucide-route" class="home-door-mark" aria-hidden="true" />
-          <span class="home-door-title">Skills for your work<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
-          <span class="home-door-text">Tracks for review, testing, design, SEO and shipping. A person picked each list.</span>
+        <NuxtLink :to="trendingDoorTarget" class="home-door">
+          <UIcon name="i-lucide-trending-up" class="home-door-mark" aria-hidden="true" />
+          <span class="home-door-title">Stay hyped<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
+          <span class="home-door-text">What devs talk about on X and Bluesky, weekly and monthly.</span>
         </NuxtLink>
         <NuxtLink to="#freshness" class="home-door">
           <UIcon name="i-lucide-eye" class="home-door-mark" aria-hidden="true" />
-          <span class="home-door-title">Keep up with skill changes<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
-          <span class="home-door-text">Maintainers ship often. Watch the repos you rely on. One digest lists what changed.</span>
+          <span class="home-door-title">Keep updated<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
+          <span class="home-door-text">Watch repos and get a digest when their skills change.</span>
+        </NuxtLink>
+        <NuxtLink to="/developers" class="home-door">
+          <UIcon name="i-lucide-blocks" class="home-door-mark" aria-hidden="true" />
+          <span class="home-door-title">Built to be built on<UIcon name="i-lucide-arrow-right" class="home-door-arrow" aria-hidden="true" /></span>
+          <span class="home-door-text">CLI, API, SDK and MCP.</span>
         </NuxtLink>
       </div>
     </nav>
 
     <section
       v-if="showTrending || trendingStatus === 'pending'"
-      id="discover"
+      id="trending"
       class="home-wm"
       aria-labelledby="trending-heading"
     >
@@ -462,7 +406,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
               <span class="home-ink">Trending skills</span> this week.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
-              Devs are posting about these skill repos. We count how many separate devs shared each one. Every card links the author's source.
+              Devs posted about these skills this week. We count each dev once, and every card links the source.
             </p>
             <p v-if="trendingSectionRepos.length" class="data-label mt-3">
               {{ trendingSectionRepos.length }} {{ trendingSectionRepos.length === 1 ? 'repository' : 'repositories' }}
@@ -482,21 +426,14 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
           </nav>
         </header>
 
-        <div v-if="trendingStatus === 'pending'" class="mt-8 grid gap-4 sm:grid-cols-2" aria-busy="true">
-          <div v-for="i in 4" :key="i" class="rounded-lg border border-default p-4">
-            <USkeleton class="h-4 w-2/3" />
-            <USkeleton class="mt-3 h-3 w-full" />
-            <USkeleton class="mt-2 h-3 w-4/5" />
-          </div>
+        <div v-if="trendingStatus === 'pending'" class="relative mt-8 h-10">
+          <TextureConverge loading label="Loading trending skills" />
         </div>
 
         <ol v-else class="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2">
-          <li v-for="repo in trendingSectionRepos" :key="`${repo.owner}/${repo.repo}`" class="min-w-0">
-            <NuxtLink
-              :to="repoHubPath(repo.owner, repo.repo)"
-              class="group flex h-full min-w-0 flex-col rounded-lg border border-default p-4 transition-colors hover:border-inverted"
-            >
-              <span class="flex min-w-0 items-center gap-2">
+          <li v-for="{ repo, runSkill } in trendingCards" :key="`${repo.owner}/${repo.repo}`" class="min-w-0">
+            <article class="home-trending-card">
+              <div class="flex min-w-0 items-center gap-2">
                 <img
                   :src="githubAvatarProxyUrl(repo.owner, 64)"
                   alt=""
@@ -506,19 +443,43 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
                   loading="lazy"
                   decoding="async"
                 >
-                <span class="min-w-0 flex-1 truncate font-medium text-default">{{ repo.owner }}/{{ repo.repo }}</span>
+                <NuxtLink
+                  :to="repoHubPath(repo.owner, repo.repo)"
+                  class="home-trending-card__link min-w-0 flex-1 truncate font-medium text-default"
+                >
+                  {{ repo.owner }}/{{ repo.repo }}
+                </NuxtLink>
                 <span class="shrink-0 font-mono text-xs text-muted tabular-nums">
                   {{ repo.skillCount }} {{ repo.skillCount === 1 ? 'skill' : 'skills' }}
                 </span>
-              </span>
-              <span v-if="repo.evidence" class="mt-2 line-clamp-2 text-sm leading-relaxed text-muted">
+              </div>
+              <p v-if="repo.evidence" class="mt-2 line-clamp-2 text-sm leading-relaxed text-muted">
                 {{ repo.evidence.text }}
-              </span>
-              <span class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
+              </p>
+              <RunChip
+                v-if="runSkill"
+                :owner="repo.owner"
+                :repo="repo.repo"
+                :skill="runSkill.name"
+                surface="home-trending-card"
+                variant="compact"
+                class="home-trending-card__action mt-3"
+              />
+              <p class="mt-auto flex flex-wrap items-center gap-x-3 gap-y-1 pt-3 text-xs text-muted">
                 <span>{{ trendingShareLabel(repo.authorCount) }}</span>
                 <span v-if="repo.evidence" class="font-mono">@{{ repo.evidence.authorHandle }}</span>
-              </span>
-            </NuxtLink>
+                <a
+                  v-if="repo.evidence"
+                  :href="repo.evidence.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="home-trending-card__action inline-flex min-h-6 items-center gap-1 font-mono underline underline-offset-4 hover:text-default"
+                >
+                  Source
+                  <UIcon name="i-lucide-arrow-up-right" class="size-3.5 shrink-0" aria-hidden="true" />
+                </a>
+              </p>
+            </article>
           </li>
         </ol>
       </div>
@@ -771,278 +732,6 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
       </div>
     </section>
 
-    <section
-      id="featured-focus"
-      class="home-wm editorial-band home-featured-band"
-      aria-labelledby="featured-focus-heading"
-    >
-      <span class="home-watermark" aria-hidden="true">Picks</span>
-      <div
-        class="editorial-atmosphere"
-        data-palette="ember"
-        data-geometry="wash"
-        data-intensity="subtle"
-        aria-hidden="true"
-      />
-
-      <div class="editorial-band__content mx-auto max-w-6xl px-4 py-12 sm:px-6 md:py-16">
-        <div class="home-featured-heading">
-          <div class="min-w-0">
-            <h2 id="featured-focus-heading" class="home-h2 text-balance">
-              Install a collection in <span class="home-ink">one command</span>.
-            </h2>
-            <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
-              A collection gathers the skills one project needs. A curator picked every one. Install the set, then watch it.
-            </p>
-            <p v-if="featuredCollections.length" class="data-label mt-3">
-              {{ featuredCollections.length }} {{ featuredCollections.length === 1 ? 'collection' : 'collections' }} · {{ featuredSkillTotal }} {{ featuredSkillTotal === 1 ? 'skill' : 'skills' }}
-            </p>
-          </div>
-          <UButton
-            to="/community"
-            label="All curators"
-            color="neutral"
-            variant="ghost"
-            trailing-icon="i-lucide-arrow-right"
-            class="min-h-11 shrink-0 self-start"
-          />
-        </div>
-
-        <div v-if="collectionsStatus === 'pending'" class="home-featured-layout mt-8" aria-busy="true">
-          <div class="home-featured-lead p-5 sm:p-6">
-            <USkeleton class="h-8 w-3/5" />
-            <USkeleton class="mt-4 h-4 w-full" />
-            <USkeleton class="mt-2 h-4 w-4/5" />
-            <USkeleton class="mt-7 h-52 w-full" />
-          </div>
-          <div class="home-featured-support">
-            <div class="home-featured-support-card">
-              <USkeleton class="h-5 w-1/2" />
-              <USkeleton class="mt-4 h-20 w-full" />
-            </div>
-            <div class="home-featured-support-card">
-              <USkeleton class="h-5 w-2/5" />
-              <USkeleton class="mt-4 h-20 w-full" />
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-else-if="collectionsError"
-          class="mt-10 rounded-lg border border-default bg-default p-6"
-          role="alert"
-        >
-          <p class="font-medium">
-            Could not load collections.
-          </p>
-          <p class="mt-1 text-base text-muted">
-            Check your connection and try again. The rest of the registry is still available.
-          </p>
-          <UButton
-            label="Try collections again"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            class="mt-4 min-h-11"
-            @click="() => refreshCollections()"
-          />
-        </div>
-
-        <div
-          v-else-if="leadCollection"
-          class="home-featured-layout mt-8"
-        >
-          <article class="home-featured-lead lead-emphasis">
-            <div class="home-featured-lead__intro">
-              <div class="min-w-0">
-                <h3 class="home-featured-lead__title text-balance">
-                  {{ leadCollection.name }}
-                </h3>
-              </div>
-              <div class="home-featured-curator">
-                <img
-                  :src="githubAvatarProxyUrl(leadCollection.authorLogin, 112)"
-                  alt=""
-                  width="56"
-                  height="56"
-                  class="home-featured-avatar"
-                  loading="lazy"
-                  decoding="async"
-                >
-                <div class="min-w-0">
-                  <p class="data-label">
-                    Curated by
-                  </p>
-                  <p class="mt-1 truncate font-mono text-sm font-medium">
-                    @{{ leadCollection.authorLogin }}
-                  </p>
-                  <!-- A pick under a person's name ages invisibly without this. -->
-                  <p class="data-label mt-1">
-                    Updated {{ formatRelative(leadCollection.updatedAt) }}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="leadCollection.preamble" class="home-featured-rationale">
-              <p class="data-label">
-                Why this collection
-              </p>
-              <p class="mt-2 max-w-2xl text-base leading-relaxed text-muted text-pretty">
-                {{ leadCollection.preamble }}
-              </p>
-            </div>
-
-            <div class="home-featured-skill-heading">
-              <p class="data-label">
-                Inside this collection
-              </p>
-              <p class="data-label">
-                {{ leadCollection.skillCount }} {{ leadCollection.skillCount === 1 ? 'skill' : 'skills' }}
-              </p>
-            </div>
-
-            <ul v-if="leadCollection.skills.length" class="home-featured-skills">
-              <li
-                v-for="skill in leadCollection.skills.slice(0, 6)"
-                :key="`${skill.owner}/${skill.repo}/${skill.name ?? 'repo'}`"
-              >
-                <NuxtLink
-                  :to="featuredCollectionSkillPath(skill)"
-                  class="home-featured-skill group"
-                  :aria-label="`${featuredCollectionSkillLabel(skill)} by ${skill.owner}`"
-                >
-                  <img
-                    :src="githubAvatarProxyUrl(skill.owner, 64)"
-                    alt=""
-                    width="32"
-                    height="32"
-                    class="home-featured-skill-avatar"
-                    loading="lazy"
-                    decoding="async"
-                  >
-                  <span class="min-w-0">
-                    <span class="block font-mono text-sm font-medium">
-                      {{ featuredCollectionSkillLabel(skill) }}
-                    </span>
-                    <span class="mt-1 block text-sm text-muted">
-                      {{ skill.owner }}/{{ skill.repo }}
-                    </span>
-                  </span>
-                </NuxtLink>
-              </li>
-              <li v-if="leadCollection.skillCount > 6" class="home-featured-skill-more">
-                <span class="data-label">
-                  +{{ leadCollection.skillCount - 6 }} more in the collection
-                </span>
-              </li>
-            </ul>
-
-            <div class="home-featured-install">
-              <div class="home-featured-install__heading">
-                <div>
-                  <p class="data-label">
-                    Install all {{ leadCollection.skillCount }} skills
-                  </p>
-                  <p class="mt-2 text-base leading-relaxed text-muted">
-                    One command installs every skill in the collection.
-                  </p>
-                </div>
-                <UButton
-                  :to="`/@${leadCollection.authorLogin}/${leadCollection.slug}`"
-                  label="Open collection"
-                  color="neutral"
-                  variant="ghost"
-                  trailing-icon="i-lucide-arrow-up-right"
-                  class="min-h-11 shrink-0"
-                />
-              </div>
-              <div class="home-featured-command">
-                <InstallCommand
-                  id="featured-install-command"
-                  :command="installCommand"
-                  wrap
-                  tabindex="0"
-                />
-                <UButton
-                  :icon="copyState._tag === 'copied' ? 'i-lucide-check' : 'i-lucide-copy'"
-                  :label="copyState._tag === 'copied' ? 'Copied' : 'Copy install command'"
-                  color="neutral"
-                  variant="outline"
-                  class="home-featured-copy min-h-11 justify-center"
-                  @click="copyInstallCommand"
-                />
-              </div>
-              <p
-                class="home-featured-feedback text-sm"
-                :class="copyState._tag === 'error' ? 'text-error' : 'text-muted'"
-                aria-live="polite"
-              >
-                <template v-if="copyState._tag === 'copied'">
-                  Install command copied.
-                </template>
-                <template v-else-if="copyState._tag === 'error'">
-                  {{ copyState.message }}
-                </template>
-                <template v-else>
-                  Check the collection before you run the command.
-                </template>
-              </p>
-            </div>
-          </article>
-
-          <div v-if="supportingCollections.length" class="home-featured-support">
-            <article
-              v-for="collection in supportingCollections"
-              :key="`${collection.authorLogin}/${collection.slug}`"
-              class="min-h-0"
-            >
-              <NuxtLink
-                :to="`/@${collection.authorLogin}/${collection.slug}`"
-                class="home-featured-support-card group"
-              >
-                <div class="flex items-center justify-between gap-3">
-                  <div class="flex min-w-0 items-center gap-3">
-                    <span class="home-featured-owner-stack" aria-hidden="true">
-                      <img
-                        v-for="owner in collectionSkillOwners(collection)"
-                        :key="owner"
-                        :src="githubAvatarProxyUrl(owner, 64)"
-                        alt=""
-                        width="32"
-                        height="32"
-                        class="home-featured-support-avatar"
-                        loading="lazy"
-                        decoding="async"
-                      >
-                    </span>
-                  </div>
-                  <UIcon name="i-lucide-arrow-up-right" class="home-featured-support-arrow size-4 shrink-0" aria-hidden="true" />
-                </div>
-                <h3 class="mt-4 text-lg font-semibold tracking-tight">
-                  {{ collection.name }}
-                </h3>
-                <p v-if="collection.preamble" class="mt-3 text-base leading-relaxed text-muted line-clamp-2 sm:line-clamp-3">
-                  {{ collection.preamble }}
-                </p>
-                <p class="home-featured-support-meta font-mono text-xs text-muted">
-                  {{ collection.skillCount }} {{ collection.skillCount === 1 ? 'skill' : 'skills' }} · by {{ collectionSkillOwnerLabel(collection) }}
-                </p>
-              </NuxtLink>
-            </article>
-          </div>
-        </div>
-
-        <div v-else class="mt-10 rounded-lg border border-default bg-default p-6">
-          <p class="font-medium">
-            No collections are featured right now.
-          </p>
-          <p class="mt-1 text-base text-muted">
-            The link above lists every curator on the site.
-          </p>
-        </div>
-      </div>
-    </section>
     <section
       id="publish"
       class="home-wm"
@@ -1050,13 +739,17 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
     >
       <span class="home-watermark" aria-hidden="true">Make</span>
       <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:py-16">
+        <!-- Many Skills in, one out: the divider into making your own. -->
+        <div class="relative mb-10 h-10">
+          <TextureConverge />
+        </div>
         <div class="home-make-strip">
           <div class="min-w-0">
             <h2 id="publish-heading" class="home-h2 text-balance">
               <span class="home-ink">Write a skill</span> for your project.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
-              Choose a package you publish or a project you maintain. Get the steps to draft a Skill, review it, and ship it in your repository.
+              Pick a package you publish or a project you maintain. Get the steps to draft a skill, review it, and ship it from your repo.
             </p>
             <p class="mt-3 max-w-2xl text-base leading-relaxed text-muted">
               Start with a
diff --git a/app/utils/webgl-context.ts b/app/utils/webgl-context.ts
index 8663bffd..6a919825 100644
--- a/app/utils/webgl-context.ts
+++ b/app/utils/webgl-context.ts
@@ -1,53 +1,3 @@
-const requiredWebGL2Methods = [
-  'attachShader',
-  'bindVertexArray',
-  'blendFunc',
-  'clear',
-  'clearColor',
-  'compileShader',
-  'createProgram',
-  'createShader',
-  'createVertexArray',
-  'deleteProgram',
-  'deleteShader',
-  'deleteVertexArray',
-  'drawArrays',
-  'enable',
-  'getExtension',
-  'getProgramInfoLog',
-  'getProgramParameter',
-  'getShaderInfoLog',
-  'getShaderParameter',
-  'getUniformLocation',
-  'linkProgram',
-  'shaderSource',
-  'uniform1f',
-  'uniform2f',
-  'useProgram',
-  'viewport',
-] as const
-
-const requiredWebGL2Constants = [
-  'BLEND',
-  'COLOR_BUFFER_BIT',
-  'COMPILE_STATUS',
-  'FRAGMENT_SHADER',
-  'LINK_STATUS',
-  'ONE_MINUS_SRC_ALPHA',
-  'SRC_ALPHA',
-  'TRIANGLES',
-  'VERTEX_SHADER',
-] as const
-
-export function isUsableWebGL2Context(value: unknown): value is WebGL2RenderingContext {
-  if (typeof value !== 'object' || value === null)
-    return false
-
-  const candidate = value as Record<string, unknown>
-  return requiredWebGL2Methods.every(name => typeof candidate[name] === 'function')
-    && requiredWebGL2Constants.every(name => typeof candidate[name] === 'number')
-}
-
 /**
  * Renderers that run WebGL on the CPU: Chrome's SwiftShader fallback, Mesa's
  * llvmpipe and softpipe, and Windows without a GPU driver. On these, every
diff --git a/scripts/lib/production-smoke.ts b/scripts/lib/production-smoke.ts
index 9bf97a1e..8fc1a850 100644
--- a/scripts/lib/production-smoke.ts
+++ b/scripts/lib/production-smoke.ts
@@ -94,7 +94,7 @@ export const ASSET_COHERENCE_PATH = '/skills/trending'
 export const PRODUCTION_SMOKE_EXPECTATIONS: SmokeExpectation[] = [
   // The hero words are asserted, not just an h1: the error branch renders an
   // h1 too, so a homepage that lost its data would otherwise pass.
-  { path: '/', status: 200, bodyContains: ['<h1', 'Taste-tested'] },
+  { path: '/', status: 200, bodyContains: ['<h1', 'Hyped agent skills'] },
   { path: '/alt', status: 301, location: '/' },
   { path: '/skills', status: 200, bodyContains: ['<h1'] },
   { path: '/community', status: 200, bodyContains: ['<h1'] },
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index c4994b81..343948bd 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -569,7 +569,6 @@ describe('accessibility: component coverage', () => {
   const SKIPPED_COMPONENTS = [
     'OutcomeClusterGrid', // Content section (fetches /api/clusters), tested at page level
     'KeyboardShortcutsModal.client', // Client-only modal requires full app context
-    'NoiseField.client', // Decorative client-only canvas
     'TextureBrailleNames.client', // Decorative client-only canvas, hidden from screen readers
     'TextureConverge.client', // Client-only canvas; its loading state is one role="status" with a text label
     'TextureFileMinimap.client', // Decorative client-only canvas, hidden from screen readers
diff --git a/test/unit/production-smoke.test.ts b/test/unit/production-smoke.test.ts
index f9599990..a69d7b69 100644
--- a/test/unit/production-smoke.test.ts
+++ b/test/unit/production-smoke.test.ts
@@ -12,7 +12,7 @@ describe('production smoke contract', () => {
     expect(PRODUCTION_SMOKE_EXPECTATIONS).toEqual(expect.arrayContaining([
       // The homepage asserts its own hero words, because the page's error
       // branch renders an h1 too.
-      { path: '/', status: 200, bodyContains: ['<h1', 'Taste-tested'] },
+      { path: '/', status: 200, bodyContains: ['<h1', 'Hyped agent skills'] },
       { path: '/alt', status: 301, location: '/' },
       { path: '/skills', status: 200, bodyContains: ['<h1'] },
       { path: '/community', status: 200, bodyContains: ['<h1'] },
diff --git a/test/unit/webgl-context.test.ts b/test/unit/webgl-context.test.ts
index 021e43f2..5031e16b 100644
--- a/test/unit/webgl-context.test.ts
+++ b/test/unit/webgl-context.test.ts
@@ -1,62 +1,5 @@
-import { describe, expect, it, vi } from 'vitest'
-import { isSoftwareRenderer, isUsableWebGL2Context } from '../../app/utils/webgl-context'
-
-const requiredMethodNames = [
-  'attachShader',
-  'bindVertexArray',
-  'blendFunc',
-  'clear',
-  'clearColor',
-  'compileShader',
-  'createProgram',
-  'createShader',
-  'createVertexArray',
-  'deleteProgram',
-  'deleteShader',
-  'deleteVertexArray',
-  'drawArrays',
-  'enable',
-  'getExtension',
-  'getProgramInfoLog',
-  'getProgramParameter',
-  'getShaderInfoLog',
-  'getShaderParameter',
-  'getUniformLocation',
-  'linkProgram',
-  'shaderSource',
-  'uniform1f',
-  'uniform2f',
-  'useProgram',
-  'viewport',
-] as const
-
-function contextStub(): Record<string, unknown> {
-  return {
-    ...Object.fromEntries(requiredMethodNames.map(name => [name, vi.fn()])),
-    BLEND: 1,
-    COLOR_BUFFER_BIT: 2,
-    COMPILE_STATUS: 3,
-    FRAGMENT_SHADER: 4,
-    LINK_STATUS: 5,
-    ONE_MINUS_SRC_ALPHA: 6,
-    SRC_ALPHA: 7,
-    TRIANGLES: 8,
-    VERTEX_SHADER: 9,
-  }
-}
-
-describe('isUsableWebGL2Context', () => {
-  it('rejects a partial context missing getShaderParameter', () => {
-    const context = contextStub()
-    delete context.getShaderParameter
-
-    expect(isUsableWebGL2Context(context)).toBe(false)
-  })
-
-  it('accepts a context that exposes every operation used by NoiseField', () => {
-    expect(isUsableWebGL2Context(contextStub())).toBe(true)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { isSoftwareRenderer } from '../../app/utils/webgl-context'
 
 describe('isSoftwareRenderer', () => {
   it.each([

From a529f1765e5d4d8dc5543a6825ee5fb452c1dc67 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:18:43 +1100
Subject: [PATCH 2/2] fix(home): keep the hero texture clear of the copy

The first mask let braille names show behind the claims line, the promo
chip and the search. Desktop now fades in past the copy column, and
phones pin the texture behind the rail.
---
 app/assets/css/main.css | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index a0590501..97ba1bfa 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1243,20 +1243,24 @@
 }
 
 /* The braille names texture: behind the hero, masked clear of the headline.
-   Phones stack the copy above the rail, so the names sit below the copy. */
+   Below 64rem the copy stacks above the rail, so the names sit behind the rail. */
 .home-hero-texture {
   position: absolute;
-  inset: 0;
+  inset-inline: 0;
+  bottom: 0;
   z-index: 0;
+  height: 22rem;
   pointer-events: none;
-  mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
-  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
+  mask-image: linear-gradient(to bottom, transparent, #000 40%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
 }
 
 @media (min-width: 64rem) {
   .home-hero-texture {
-    mask-image: linear-gradient(to right, transparent 38%, #000 80%);
-    -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 80%);
+    top: 0;
+    height: auto;
+    mask-image: linear-gradient(to right, transparent 57%, #000 80%);
+    -webkit-mask-image: linear-gradient(to right, transparent 57%, #000 80%);
   }
 }