Stories in Light

Canvas & base: Full-viewport hero section, exactly 100vh tall, overflow: hidden, position: relative. Base background color #2b3342 (dark slate blue-grey). All text #f0f0ee (warm off-white). Body margin 0, page background #2b3342. Links #f3f2f2, hover #ffffff, underline offset 3px. Font: Archivo (grotesque sans), used for everything. Zero border radius everywhere except the two pill/circle elements noted below. No shadows, no glassmorphism, no scroll animations.

Background image stack (4 absolute layers, all inset: 0, width/height: 100%, object-fit: cover, object-position: center, GPU-composited via transform: translateZ(0)):

Clean portrait — https://cdn.sceneai.art/Bg%20images/ddfc017a-6d87-42c8-b9d6-c068c2854910.png. A dark, moody studio portrait: a man's face centered in frame, even soft frontal lighting, skin natural and unadorned, surrounded by a deep desaturated dark backdrop with subtle ornamental texture. Low-key cinematic grade, muted shadows, no motion. draggable: false, user-select: none.
Gold layer at 10% — same-size duplicate of https://cdn.sceneai.art/Bg%20images/27a6b99b-8093-439e-be9c-1c96311e8fb8.png: the identical portrait/composition but the face wears an ornate gold filigree mask and the backdrop carries a rich gold damask/ornamental pattern; warm metallic highlights, luxury-campaign lighting. Static at opacity: 0.1, pointer-events: none.
Gold reveal layer — the same gold image again at full resolution, default opacity: 0, transition: opacity 0.4s ease-out, will-change: opacity, pointer-events: none, clipped by a CSS mask: mask-image: radial-gradient(closest-side, #000 62%, transparent 100%), mask-repeat: no-repeat, mask-size: 110px 140px (soft-feathered vertical oval).
Scrim — linear-gradient(180deg, rgba(20,24,32,0.55) 0%, rgba(20,24,32,0.12) 45%, rgba(20,24,32,0.6) 100%), pointer-events: none.
Cursor-reveal interaction (desktop only — gate with matchMedia('(hover: hover) and (pointer: fine)'); touch devices show the static state): mousemove on the hero records target cursor coordinates relative to the section. A single requestAnimationFrame loop lerps current position toward target at factor 0.22 per frame; each frame sets the reveal layer's mask-position to (x − 55px, y − 70px) so the oval stays centered on the gliding point. First movement snaps position and sets reveal opacity to 1. The one oval simultaneously unveils the gold mask over the face and the 100%-opacity damask over the background — one continuous spotlight over the 10% base. On mouseleave, opacity returns to 0 via the 0.4s ease-out transition, restoring clean face + 10% pattern. Never autoplays; no canvas; loop stops when settled (delta < 0.3px).

Content overlay (position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; padding: 44px 64px 40px; pointer-events: none):

Top bar: display: flex; justify-content: space-between; align-items: baseline, 16px, weight 500, letter-spacing 0.02em. Left group (flex, gap 28px): "faruq®" and "visual archive". Center: "©2026" in a pill — border: 1.5px solid #f0f0ee; border-radius: 999px; padding: 4px 20px; font-size: 15px. Right group (flex, gap 14px): "(", "long exposure", "/", "low light", ")".
Headline (margin-top 40px): font-size: clamp(52px, 7.4vw, 104px); font-weight: 500; letter-spacing: -0.02em; line-height: 0.98, lowercase, flush left. Line 1: "stories in light". Line 2: an inline-flex row (gap 24px) of a circled "+" glyph (0.8em square, 1.5px solid #f0f0ee border, border-radius: 50%, centered "+" at 0.45em, weight 400) followed by "motion".
Bottom row (margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px): Left — "night work only", 18px, weight 500, line-height 1.45. Right block (max-width: 560px) — justified paragraph, 15.5px, line-height 1.6, word-spacing 0.15em: "slow shutters, moving light. i make short visual stories after dark — where motion becomes the subject and light does the drawing. no studio, no staging: just time, left open long enough to leave a trace." Below it (margin-top 20px, flex space-between, 14px, letter-spacing 0.02em): "selected work — vol.01" left, "( scroll ↓ )" right.
Hierarchy: oversized lowercase headline dominates; thin editorial metadata at top and bottom edges; imagery carries the drama; the only "animation" on the page is the cursor spotlight. All copy lowercase, flush left, no buttons, no nav links, no emoji, no gradients besides the scrim.