Rosée

Overview

Rosée is a light ivory-and-rose-gold Parisian haute-beauté boutique theme — for cosmetics maisons, indie skincare labels, perfumers and beauty editors. It is laid out as a boutique lookbook rather than a shop grid: floating ivory panels on a living silk ground, thin rose hairlines, French display type over Chinese body copy. Built as a faithful hand-port of a client-approved React prototype, with its unsubstantiated claims, broken filters and fake checkout fixed rather than reproduced.

1. A persistent site-wide WebGL2 silk background. One full-viewport canvas, mounted once, never rebuilt per section. It renders a flowing satin surface shaded with a real Kajiya-Kay anisotropic specular BRDF — a genuine tangent-space-aligned highlight over a domain-warped fBm height field, not a layered gradient. Three optional GPU layers ride on the same canvas: rose petals driven by a quasi-steady flat-plate aerodynamic model (the centre of pressure shifts toward the upwind edge, which is what makes them tumble and glide rather than merely fall), nacre points coloured by real Airy thin-film interference at three wavelengths against aragonite’s refractive index, and fine gold motes. Capability-gated: skipped entirely under prefers-reduced-motion, Save-Data, or no WebGL2, with a static gradient that looks intentional.

2. A real colour-science shade matcher. Every shade goes sRGB → linear → CIEXYZ (D65) → CIELAB and is ranked by a complete CIEDE2000 implementation including the R_T hue-rotation term — verified against all 34 published reference pairs from Sharma, Wu & Dalal (2005), matching to four decimal places, with the conformance script shipped in the theme so a buyer can re-run it. Skin depth uses ITA° with the published Chardon (1991) bands; undertone is derived from the CIELAB hue angle with a chroma floor rather than a lookup table. Complexion is ranked by ΔE00 because that is a measurement; lip and cheek shades are ranked by a stated brand heuristic and the interface says so, because “which red suits me” has no published metric and pretending otherwise would be dishonest.

3. Real INCI ingredient tables. Every product carries a full ingredient list of genuine International Nomenclature names mapped to their genuine declared functional classes, with EU Regulation 1223/2009 Annex III fragrance allergens flagged individually and counted per product. An unknown name is reported as unknown rather than guessed at. This is the one thing a beauty shopper can actually verify, and almost no beauty site surfaces it.

Everything is hand-written vanilla JavaScript — zero third-party libraries — across a hero slider with a real pause control, a filterable catalogue with AJAX quick view, a draggable before/after finish comparison with genuine pointer events plus a keyboard-operable range fallback, a shoppable hotspot lookbook, a localStorage vanity, a live no-reload customizer (4 palettes, 3 font pairings, 4 GPU background effects), AJAX search and a server-side like counter. Fonts are self-hosted and subset, each family’s licence verified individually against the google/fonts repository. All 28 photographs are CC0/PD/CC BY from Wikimedia Commons and every one was opened and visually inspected for brand marks, identifiable faces and subject match before shipping — the rejections and substitutions are documented in the credits rather than hidden. The demo copy’s efficacy claims were rewritten from the prototype’s unsubstantiated absolutes (“100% 敏感肌耐受”, “TEWL 骤降 58%”) into attributed brand-panel figures, with a compliance note telling buyers to replace them before publishing. WooCommerce is supported: declare it and the grid reads real Woo products, with silent fallback to the bundled CPT.