# Glass letterforms over film — a scrubbed wordmark marquee

Learned 2026-08-21 replicating the milkinside.com home hero (the first
`.lqnaq5` section, document y 0–3144, serialized from the live DOM over
CDP at 1920×1048). Rendered and seen in both media before this entry:
the HTML build and the Figma board, screenshots in
`references/milkinside/sections/`.

- **The letters are windows, not type.** Each giant letter is a `<div>`
  carrying three properties at once: `background: rgba(255,255,255,0.2)`,
  `backdrop-filter: blur(1.042vw)` (20 @1920) and
  `clip-path: url(#letter-n)` where the clipPath uses
  `clipPathUnits="objectBoundingBox"` — every coordinate a 0..1 fraction
  of the letter's own box. Judged by its own fill the element is a flat
  20% white; judged by its effect on the video behind it, it is the
  dominant element of the section. This is failure mode 4 in the flesh:
  serialize what the material does to its background, never its own fill.
- **Why objectBoundingBox matters for the recipe.** Normalized paths mean
  one path serves the letter at every viewport size, so the letter box can
  be sized by a pure `calc()` and the outline follows. Extracting them
  from a woff2 is a three-line fontTools job — `BoundsPen` for the tight
  bbox, a `Transform().scale(1/w, -1/h).translate(-x0, -y1)` to normalize
  and flip to SVG's y-down, then `SVGPathPen`.
- **Figma reproduces it exactly.** `BACKGROUND_BLUR` is `backdrop-filter`;
  `createNodeFromSvg` with `viewBox="0 0 1 1"` and explicit width/height
  scales a normalized path at parse time, so the same outline data serves
  both media with no second source of truth.
- **The pin.** `300svh` section holding a `100svh` sticky child, so two
  viewports of scroll carry no new content — they are the scrub distance.
  The section renders one frozen frame while its tracks move inside it.
- **One master progress, no second clock.**
  `u = clamp((scrollY − 101) / (2·svh − 101), 0, 1)`, every track a
  fraction of it. The 101px dead zone measured constant at three
  viewports, which is worth noticing: fluid everywhere else, px here.
- **101% is one constant on two tracks.** The row travels 101% of its own
  width; the bottom bar rests 101% of its own height below its place.
  Measured 1.01000 / 1.01002 / 1.01000 / 1.01000 at four viewports.
  Writing both as percentages rather than solved pixels is what lets a
  replica carry a different letter count and typeface and still execute
  the rule with nothing recomputed — the single most transferable line
  in this entry.
- **The letter scale is the one two-term rule.** Type on that site rides
  pure vw; the letters do not. `k = (3·vw + 2·vh) / 7680`, exact at five
  viewports, applied to each letter's own outline units.
- **Ease**: `1 − (1 − q)²` (easeOutQuad / GSAP `power2.out`) on three
  tracks; the bottom bar is linear. The block opacity is the *square of
  the remaining progress*, not the eased progress applied to opacity,
  which reads as the text leaving faster than it started.
- **Scrubbed, not timed — and the test is a parked page.** Held at one
  scroll position and sampled fourteen times over 4.6 s, not one value
  moved. That is the inverse of the sibling fold, whose trigger fires a
  timeline that then runs on its own clock. Run this test before naming
  the mechanism; the two are indistinguishable from two samples.
- **Lenis lag will fake a measurement.** With smooth scroll running, a
  programmatic `scrollTo` needs ~2 s to converge. Two sweeps of the same
  positions disagreed on opacity (0.8123 vs 0.8376) while agreeing on
  every transform — the shorter wait was reading a value still in flight.
  Transforms settle first, so agreement on transforms is not evidence the
  page is settled.
- **A classic scrollbar is worth 15px of layout width.** The reference
  declares `scrollbar-width: none`; without it the replica's content box
  measured 1809 against 1824 and every horizontal figure was off by the
  same 15. It is a computed property of the reference, so copying it is
  fidelity rather than a workaround — and it is exactly the class of
  difference that reads as "close" and measures wrong.
- **Connotes**: a hero whose name is a window rather than a mark says the
  studio is a lens on the work rather than an author over it — for a
  brand built on the word *inside*, the figure is literal. Letters larger
  than the screen make the name unreadable at rest, so reading requires
  scrolling and the visitor becomes a participant before becoming a
  reader; the gesture of scrolling *is* the gesture of reading. The
  ground is near-black at the corners so the film is the only thing
  emitting light — the page does not illuminate the work, it darkens
  everything else. The written claim leaves in the first third while the
  work is still arriving, which ranks showing over telling; and the bar
  that rises late, naming the film and its running time, converts the
  cover into a player and is the only line on the fold that negotiates
  with the viewer's time.