SOMOS

Cursor-as-Light Interaction

• · A lit copy of the stone is layered in exact register over a dark one, and a radial-gradient mask tracking the pointer reveals only what the light touches.
• · Radius responds to both how central the pointer is and how fast it moves; an interpolation coefficient makes the light arrive a beat late, giving it the weight of a hand-held torch. Up to sixteen afterglows trail the path at 48ms intervals.

Trail Rendering Optimisation — 27.2 → 39.7fps

• · The original approach created and destroyed a trail element every 48ms; it was replaced with a pool of sixteen reused spans driven by WAAPI.
• · The real cost was a Gaussian blur re-applied every frame to sixteen circles up to 600px wide. The gradient already resolves to transparent at 72%, so removing it left no visible difference and returned 46% more frames during pointer movement — the choreography constants (48ms, 16 trails, radius coefficients) were left untouched.

Scroll-driven World Sequence

• · Hero (320svh) and world (1400svh) run over position:sticky stages, with scroll converted to a 0–1 progress value driving the entry, glow and exit of the four ingredients and the transition into the carved relief.
• · When the client reported the interaction passed too quickly, none of the animation values were altered — only the scroll distance, redistributing the same sequence over 3.6–4.7× more travel.

Allocation Waitlist System

• · RLS blocks anonymous access to the source table outright; the public board reads a separate view exposing only queue number, masked name and timestamp.
• · Submissions pass validation, a 300-character limit, consent and rate limiting before storage, then notify the team through Resend. An admin area — unlisted path, double-gated by middleware and per-action checks, with idle auto-logout — handles status management and CSV export.

Performance & Korean SEO

• · 21MB of source imagery was cut into per-resolution AVIF/WebP served through a <picture> fallback chain, bringing first paint on mobile down to 0.85MB.
• · Meta, OG, JSON-LD (@graph: Organization + WebSite, carrying all three brand spellings as alternateName), sitemap and robots, plus Google and Naver site verification.

Monolith in the Dark

Most of the screen is left black, with only mint (#68C7BA), tan (#C9A67A) and ivory surviving. Rather than presenting information first, the dark screen itself is the first impression — something the visitor has to move a light across to read.

Vector-first Header

The wordmark is SVG pulled from the original AI file and the navigation is real text. It began as a single 2048px bitmap stretched to 100vw, which scaled up to 2.5× on high-resolution displays and turned the lettering to mush; the vector holds at any zoom.

Allocation as Ritual

In place of a buy button sit "join the waitlist" and a live public queue, making the waiting itself part of the brand experience. Names are masked while queue number and time stay visible — credibility and privacy in the same table.

Accessibility Guardrails

Visitors with prefers-reduced-motion never get the inertial scroll or the light choreography at all, and touch devices disable the cursor light so no pointless computation runs on mobile.