css-composite

CSS composite extraction

Status: battle-tested on the Vercel triangle hero (../vercel-crack/) — a conic rainbow hard-light-blended over a grayscale WebGL shader, masked by a radial vignette pseudo-element, with a wireframe SVG on top. Both defects that made it "look off" lived here, in the CSS coupling — not in the (verbatim-correct) shader.

Make a faithful replica of a component whose look is an emergent composite of CSS layers by extracting the computed runtime state and the layer graph (stacking order, blend modes, isolation boundaries, masks, pseudo-elements) — not by reading the authored stylesheet and not by eyeballing the blended result.

One of a family of per-rendering extraction skills. This one owns the compositional coupling layer: the CSS that sits over and combines other layers. When the pixels of one layer come from a <canvas> or <svg>, extract that layer with the webgl / svg-js-generator sibling, and use this skill for how the layers stack and blend.

Driver: browser-harness (heredoc form, on $PATH). Verify with the verify skill.

---

The one principle

Extract the COMPUTED runtime state and the LAYER GRAPH — never the authored rule. Two traps, both proven on Vercel:

1. Authored ≠ computed. Vercel's shipped stylesheet rule said white bg / pastel / yellow-first; the CSS vars were overridden at runtime to black bg / saturated / blue-first. Reading the source .css lied. Always reconcile against getComputedStyle on the live node — the same "capture runtime, not source" law as live GL uniforms.

2. The look is in the coupling, not the layers. The hard part isn't any single gradient — it's how they blend. A mix-blend-mode layer's appearance depends entirely on what it blends against, which is decided by the stacking / isolation graph. Miss the graph and every individual layer can be byte-correct while the composite is 2.3× off.

Corollary: difficulty is compositional, not modal. Classify a component by how coupled its layers are, not by render type. A lone declarative element is trivial (copy computed style); a blend-coupled stack over an animated canvas is the frontier.

---

⚠️ The headline gotcha: a blend layer is only as right as its backdrop

mix-blend-mode blends an element with its backdrop — the accumulated paint behind it, within the nearest stacking context that isolates. So three things are load-bearing and must be extracted together, as a unit:

1. the blend mode itself (hard-light, screen, …),
2. which exact ancestor owns the stacking context the blend resolves against (the one with isolation:isolate, or a z-index + positioning, or opacity<1, etc.), and
3. that ancestor's background (transparent vs opaque-black changes everything).

Vercel proof. Identical shader + identical conic-rainbow markup. Isolating at the outer .hero (opaque black bg) made hard-light blend against black → composite came out lum 54, sat 0.61 (dark, oversaturated). Isolating one level down at the .gradient wrapper (transparent bg) made it blend against shader-over-transparent → lum 73, sat 0.19, matching live exactly. Same inputs, 2.3× brightness swing, purely from where the stacking context lives. Copying mix-blend-mode without copying the isolation boundary is a silent, large error.

---

Classify first

browser-harness <<'PY'
import json
r = js(r"""(() => {
  const el = document.querySelector('YOUR TARGET SELECTOR');
  const all = [el, ...el.querySelectorAll('*')];
  const blends = all.filter(e=>getComputedStyle(e).mixBlendMode!=='normal').length;
  const masks  = all.filter(e=>getComputedStyle(e).maskImage!=='none' || getComputedStyle(e).webkitMaskImage!=='none').length;
  const grads  = all.filter(e=>/gradient/.test(getComputedStyle(e).backgroundImage)).length;
  const iso    = all.filter(e=>getComputedStyle(e).isolation==='isolate').length;
  return {layers:all.length, blends, masks, grads, isolations:iso,
          hasCanvas:!!el.querySelector('canvas'), hasSvg:!!el.querySelector('svg')};
})()""")
print(r)
PY

• blends/masks/grads > 0, or multiple stacked positioned layers → this skill (the coupling is real).
• A single element, no blend, no mask → not this skill; just copy its computed style.
• hasCanvas/hasSvg → extract that layer with the webgl / svg-js-generator sibling; use this skill for the stack around it.

---

Pipeline

1. Enumerate the FULL layer subtree — including pseudo-elements — with the graph

Don't just dump the target's style. Walk every descendant and its ::before/::after, recording the properties that decide compositing. The defect is usually a layer you didn't know existed.

browser-harness <<'PY'
import json
out = js(r"""(() => {
  const root = document.querySelector('YOUR TARGET SELECTOR');
  const dump = (el,pseudo) => { if(!el) return null; const s=getComputedStyle(el,pseudo||null);
    return {sel:(el.className||el.tagName)+(pseudo||''),
      z:s.zIndex, pos:s.position, opacity:s.opacity, isolation:s.isolation,
      blend:s.mixBlendMode, bg:s.backgroundColor,
      bgImage:s.backgroundImage.slice(0,140),
      mask:(s.maskImage||s.webkitMaskImage), filter:s.filter, transform:s.transform,
      content: pseudo? s.content : undefined}; };
  const rows=[]; const walk=el=>{ rows.push(dump(el));
    for(const p of ['::before','::after']){ const ps=getComputedStyle(el,p);
      if(ps.content && ps.content!=='none' && ps.content!=='normal') rows.push(dump(el,p)); }
    for(const c of el.children) walk(c); };
  walk(root); return rows;
})()""")
print(json.dumps(out, indent=1))
PY

The pseudo-element sweep is not optional. Vercel's whole structural defect was a radial-gradient vignette on .gradient::before (z-index:100) that crushed the upper/side field to black. The prior attempt had checked only the root's ::after, called it "no vignette," and missed it. Enumerate ::before and ::after for every element in the subtree, with z-index — overlays hide on child wrappers' pseudo-elements.

2. Reconcile every value against the live computed style

For each layer, trust getComputedStyle on the live node, not the .css source. Watch for runtime-overridden CSS variables (theme toggles, container queries, JS that rewrites --vars). If a transform/scale only applies at some @container width, capture it at the actual rendered width (Vercel's authored scale(1.7) was none at desktop).

3. Resolve the blend / isolation graph explicitly

For each mix-blend-mode layer, determine which ancestor isolates it and that ancestor's background. Capture isolation, z-index, position, opacity for the chain. Note gradient geometry precisely — conic-gradient(from <angle> at <x> <y>, …) orientation and radial-gradient(<size> at <x> <y>, …) center decide where color vs transparency lands (and therefore which parts the blend lights up vs crushes).

4. Rebuild — match the graph, not just the declarations

Reproduce the same isolation boundary on the same element with the same background, the same z-order, the same pseudo-element overlays. A blend layer placed in a different stacking context is the #1 way a faithful-looking rebuild comes out wrong.

5. Verify → hand off to the verify skill

Static composite → ../verify/scripts/diff_oracle.py. Animated layer underneath (shader/keyframes) → ../verify/scripts/temporal_oracle.py (flicker field). When brightness/color is "a little off" with correct hue, suspect the blend backdrop / isolation boundary and use isolate-and-measure (toggle one stacking property per capture, measure the region mean) — don't derive blend math by hand.

---

Gotchas (field-tested on vercel.com triangle hero)

• Pseudo-elements of NESTED wrappers, not just the root's ::after. The missing layer was .gradient::before. Sweep the whole subtree's pseudo-elements with their z-index.
• mix-blend-mode isolation boundary is load-bearing — extract it as a unit. Which element isolates + that element's bg swung brightness 2.3× and flipped saturation 0.61↔0.19 with identical layer markup. Don't copy the blend mode without the stacking context it resolves against.
• Authored CSS vars are overridden at runtime. Black-not-white bg, saturated-not-pastel, blue-not-yellow-first — all from runtime --var overrides. getComputedStyle, always.
• A background-color on a blend layer is part of the blend. Vercel's rainbow had background-color:#000 under the conic; the opaque-black backing means transparent-gradient regions hard-light as black, not as "show through." Capture the layer's bg, not just its image.
• Gradient geometry is exact, not vibes. conic-gradient(from 180deg at 50% 70%) puts the transparent seam pointing down from a low center; radial-gradient(150% 150% at 50% 150%) centers the bloom below the bottom edge. A few degrees / percent off relocates the whole bright region. Copy the numbers verbatim from computed style.
• An animated underlay makes single-frame diffs lie. If a canvas/shader sits under the CSS stack, you cannot verify the composite from one screenshot — its phase moves. Go temporal (verify skill) before concluding anything about the CSS.
• getComputedStyle reports the requested value, not the rendered one — fonts especially. fontFamily:"SuisseIntl" stays true when the glyphs silently fell back, or when a weight resolves to the wrong file (a -Regular @font-face mapped to weight 300, not 400 — a naming trap that inks ~9% heavier yet looks fine to the eye). Confirm text with a render oracle: measureText advance widths + a glyph ink-column profile vs the live raster (a real fallback shows ~16–130px width gaps; the right file matches to sub-px). Same law as runtime --var overrides — trust the rendered value, not the requested one.
• A visible box / ring / blur can live entirely on ::before/::after. getComputedStyle(el).backgroundColor on the element reads transparent while the pill, the 0 0 0 1px ring, and the backdrop-filter sit on its pseudo-element. Query the pseudo-elements' background/box-shadow/backdrop-filter, not just the element's — and when a source class says …Typing…/…Cursor…, there's animated structure (typed text, blinking caret) the static computed style won't show.

---

Limitations / bail conditions

• Backdrop-filter / browser-specific blend rounding can differ subtly across engines; match the engine you're comparing in.
• The underlay is the hard part (heavy WebGL/canvas): this skill handles the CSS coupling; defer the canvas/SVG layer to its sibling skill and compose.
• Houdini paint worklets / @property-animated gradients ship as JS — read the worklet source (closer to the svg-js-generator playbook) rather than treating it as declarative CSS.

---

Worked examples (instance-specific — kept out of the method above)

• examples/vercel-triangle.md — conic rainbow hard-light over a grayscale WebGL shader
  • .gradient::before radial vignette + wireframe SVG. Both fixes (missing pseudo-element vignette; isolation boundary on .gradient not .hero) and the live-computed value table. Replica + full crack write-up: ../vercel-crack/ (HANDOFF.md).

When you finish a composite extraction, add examples/<site>-<component>.md here instead of threading specifics into this file.