Notes on absence.
A technical supplement — the constraints, the four tricks the page leans on, and what each pass caught that the last one missed.
01
Concept
NOIR is a fictional maison whose Collection Nº14 is called "Absence" — the wager that a fashion site can carry its entire mood on two flat tones, #0A0A0A and #F5F5F3, with every gray produced by opacity rather than a third color value. Bodoni Moda supplies the razor-contrast display sizes (its variable opsz axis is left on auto, so the browser itself chooses a display cut at 20vw and a text cut at 13px); Figtree whispers everything else. Nothing on the page is a photograph — six garments exist only as hand-drawn SVG paths.
02
Outline to fill
Every headline is set twice: once as the real element with color:transparent and -webkit-text-stroke:1px for the outlined look, and once as a ::after pseudo-element whose content is pulled from a data-text attribute, solid-filled and hidden behind a collapsed clip-path: polygon(). Hover — or, once, an IntersectionObserver entering the viewport — expands that polygon to a slightly skewed parallelogram, so the fill sweeps in at an angle rather than a flat wipe. It runs on clip-path, not width, so it never triggers layout.
03
Grain, exactly where the garment is
Each silhouette is one <path> filled with a gradient, run through a shared SVG <filter>: feTurbulence generates fractal noise, a feColorMatrix turns it into white-on-alpha, and feComposite operator="in" intersects that noise with the path's own SourceAlpha — so the grain exists only inside the garment's silhouette, never as a rectangle laid over it. A final feBlend mode="overlay" settles it back onto the gradient. Look 03's "void" is the same trick used structurally: one path, two subpaths, fill-rule="evenodd" — the inner ellipse doesn't sit on top of the dress, it subtracts from it.
04
One inversion, two places
Both signature interactions — the crosshair cursor and a link's invert-rectangle — use the same physics: mix-blend-mode: difference against a near-white source. Difference against ink reads as light, difference against paper reads as dark, so one reticle stays visible over both the ink cover and the paper manifesto without a single conditional. Links wrap their text in a ::after with transform: scaleX(0); on hover it grows from the left edge and, because it paints above the glyphs, differences the letters and the ground beneath them together — a precise rectangle that is genuinely inverted, not just re-colored.
05
The lookbook
Six looks sit in a flex row with scroll-snap-type: x mandatory. A scroll listener throttled to requestAnimationFrame reads every look's getBoundingClientRect() each frame and writes three CSS custom properties — --blur, --scale, --op — as a continuous function of distance from the container's center, so focus sharpens gradually rather than snapping in two states. A wheel handler remaps vertical trackpad intent to scrollLeft and releases back to normal page scroll at either edge, so the shelf never traps the page.
06
Passes
Built and audited the same way the rest of the showcase is: a pass lays down structure and real copy, then a fresh look at 1440×900 and 390×844 screenshots catches what reads as unbalanced, undersized, or dead. The corner registration marks and the running "P. 0X" catalog folio were added once the page felt like a website rather than a printed lookbook; the wheel-remap and the per-frame blur interpolation replaced an earlier version that only toggled a class at the snap point and looked mechanical. A later pass caught the two bottom corner stamps sitting on top of look captions and the manifesto pull-word at ordinary scroll positions, not just the footer — they now frame the cover alone and step aside for everything real underneath. Everything eases on cubic-bezier(0.16,1,0.3,1); nothing bounces. prefers-reduced-motion removes the grain drift, the ticker, the cursor's lerp, and the wipe's transition — but the outline, the fill states, and the layout hold, because restraint was always the point.