`s. The middle one holds the spotlight machinery. ```html

Enter the Field

Guided by Interaction

This space reacts with subtlety rather than instruction, responding to presence instead of force. Movement becomes a signal, gently shifting emphasis as light traces what matters in the moment. Nothing here competes for attention or demands a fixed outcome. Focus forms gradually, shaped by interaction, hesitation, and intent, allowing detail to surface only when it is approached.

The Interaction Ends

``` Use this neutral placeholder copy (no real brand names). The class names `.spotlight`, `.lottie-container`, `.lottie`, `.fire-glow`, `.spotlight-mask` are load-bearing (JS and CSS target them). lottie-web injects its SVG inside `.lottie`. ## Styling Font: **Amarante** (Google Fonts) — a display serif, applied to the whole body. Color tokens (on `:root`): ```css :root { --light: #d0f2c2; /* pale mint green — text */ --dark: #141414; /* near-black — background & the veil */ --mouse-x: 0; /* px, live-updated by JS */ --mouse-y: 0; /* px, live-updated by JS */ } ``` - Global reset: `* { margin:0; padding:0; box-sizing:border-box; user-select:none; }`. - `body { font-family:"Amarante",sans-serif; background-color:var(--dark); color:var(--light); }`. - `h1 { font-size:clamp(3rem, 5vw, 7rem); font-weight:500; letter-spacing:-0.15rem; }`. - `p { font-size:2rem; }`; `.spotlight p { width:60%; text-align:center; }`. - `section { position:relative; width:100%; height:100svh; padding:2rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; }` — every section is a centered full-height column. **Flame container:** - `.lottie-container { position:relative; width:8rem; height:8rem; pointer-events:none; }` — the element JS translates. - `.lottie { width:100%; height:100%; transform:scale(1.25); }` — the SVG flame, slightly enlarged. **Warm glow behind the flame** (pure CSS, independent of JS): - `.fire-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40%; height:100%; z-index:-1; pointer-events:none; filter:blur(20px); opacity:0.25; }` - Background is a radial gradient of warm fire colors: `radial-gradient(circle, rgba(255,0,72,0.75) 0%, rgba(255,145,0,0.6) 30%, rgba(255,242,140,0.25) 50%, transparent 70%)` — hot pink-red core → orange → pale yellow → transparent. - Continuously animated with `animation: firePulse 2s ease-in-out infinite;`: ```css @keyframes firePulse { 0%, 100% { transform:translate(-50%,-50%) scaleY(1); opacity:0.5; } 25% { transform:translate(-50%,-50%) scaleY(1.2); opacity:0.4; } 50% { transform:translate(-50%,-50%) scaleY(0.9); opacity:0.35; } 75% { transform:translate(-50%,-50%) scaleY(1.1); opacity:0.5; } } ``` **The spotlight veil / mask** (the heart of the look): ```css .spotlight-mask { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; background: var(--dark); -webkit-mask: radial-gradient( circle 200px at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 40%, var(--dark) 80%, var(--dark) 100% ); mask: radial-gradient( circle 200px at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 40%, var(--dark) 80%, var(--dark) 100% ); transition: opacity 0.3s ease; opacity: 0; } .spotlight-mask.active { opacity: 0.85; } ``` How this reads: `.spotlight-mask` is a full-section overlay filled with the dark background color. The CSS mask (alpha mask) is a **200px-radius radial gradient centered at `(--mouse-x, --mouse-y)`**: alpha 0 (fully transparent) from the center out to 40% of the radius, ramping to opaque (`var(--dark)` is fully opaque) by 80%. Where the mask is transparent the veil is punched out → the section content shows through **bright**; where it's opaque the veil covers the content → **dimmed**. So the result is an inverted spotlight: a soft ~160px-radius clear circle around the cursor, everything else darkened. The veil is invisible (`opacity:0`) until JS adds `.active` (fades to `opacity:0.85` over 0.3s) when the cursor is inside the section. `--mouse-x/--mouse-y` are set live by JS on the `.spotlight` element and inherited by the mask. Responsive: `@media (max-width:1000px){ .spotlight p { font-size:1.5rem; width:100%; } }`. ## The effect (be exhaustive — this is the whole component) No GSAP timeline. Two synchronized behaviors both run off one `requestAnimationFrame` loop with a **lerp factor of 0.1**: (A) the spotlight hole position (via CSS vars) and (B) the flame container `translate`. Trigger is `mousemove` (plus scroll to keep it aligned). ### Init on load - `new Lenis({ autoRaf: true })` — smooth scroll for the whole page. - Load the flame: `lottie.loadAnimation({ container: .lottie, renderer:"svg", loop:true, autoplay:true, path: "/path/to/fire.json" })`. - Grab `spotlight` (`.spotlight`), `lottieContainer` (`.lottie-container`), `spotlightMask` (`.spotlight-mask`). ### State & position bookkeeping ```js const state = { isTracking: false, cursorDetected: false }; const pos = { mouse: { target:{x:0,y:0}, current:{x:0,y:0}, last:{x:0,y:0} }, lottie: { current:{x:0,y:0}, center:{x:0,y:0} }, }; ``` `init()` (run once via `setTimeout(init, 100)` and again on window `resize`): - `spotlightRect = spotlight.getBoundingClientRect()`, `lottieRect = lottieContainer.getBoundingClientRect()`. - Store the flame's home center **relative to the spotlight section's top-left**: `pos.lottie.center.x = lottieRect.left - spotlightRect.left + lottieRect.width/2`; same for `.y`. - Seed the mouse at the section center: `pos.mouse.current.x = pos.mouse.target.x = spotlightRect.width/2`; same for `.y`. ### Pointer / scroll input → `updateCursor(x, y)` ```js function updateCursor(x, y) { if (!state.cursorDetected) return; pos.mouse.last.x = x; pos.mouse.last.y = y; // remember last screen pos const r = spotlight.getBoundingClientRect(); const inside = x >= r.left && x <= r.right && y >= r.top && y <= r.bottom; if (inside) { pos.mouse.target.x = x - r.left; // target = pointer, relative to section pos.mouse.target.y = y - r.top; state.isTracking = true; spotlightMask.classList.add("active"); // fade the veil in } else { state.isTracking = false; spotlightMask.classList.remove("active"); // fade the veil out } } ``` Wire it up: - `window` `mouseenter` (`{ once:true }`) and `mouseover` (`{ once:true }`): set `state.cursorDetected = true` then `updateCursor(e.clientX, e.clientY)` — first-contact bootstrap so the effect can start. - `document` `mousemove`: `state.cursorDetected = true; updateCursor(e.clientX, e.clientY)` — the main driver. - `window` `scroll`: if `state.cursorDetected`, call `updateCursor(pos.mouse.last.x, pos.mouse.last.y)` — re-evaluates using the last known cursor position so the spotlight stays aligned to the content as it scrolls under a stationary pointer (and correctly deactivates when the section scrolls away from the cursor). - `window` `resize`: `init`. ### The rAF loop (`animate`) — runs forever ```js function animate() { // (A) smooth the spotlight hole toward the pointer (lerp 0.1) pos.mouse.current.x += (pos.mouse.target.x - pos.mouse.current.x) * 0.1; pos.mouse.current.y += (pos.mouse.target.y - pos.mouse.current.y) * 0.1; spotlight.style.setProperty("--mouse-x", `${pos.mouse.current.x}px`); spotlight.style.setProperty("--mouse-y", `${pos.mouse.current.y}px`); // (B) flame target: offset from its home center while tracking, else 0 (return home) const targetX = state.isTracking ? pos.mouse.current.x - pos.lottie.center.x : 0; const targetY = state.isTracking ? pos.mouse.current.y - pos.lottie.center.y : 0; pos.lottie.current.x += (targetX - pos.lottie.current.x) * 0.1; // lerp 0.1 pos.lottie.current.y += (targetY - pos.lottie.current.y) * 0.1; lottieContainer.style.transform = `translate(${pos.lottie.current.x}px, ${pos.lottie.current.y}px)`; requestAnimationFrame(animate); } setTimeout(init, 100); animate(); ``` Behavior that produces: - **Spotlight hole:** `pos.mouse.current` eases toward `pos.mouse.target` at 0.1/frame, and its value is written into `--mouse-x/--mouse-y`, which reposition the mask gradient's center. The hole therefore chases the cursor with a soft trailing lag rather than snapping. - **Flame trail:** while `isTracking`, the flame's target is `current mouse − flame home center`, i.e. the vector from its resting spot to the pointer; lerping `pos.lottie.current` toward that at 0.1/frame drifts the flame toward the cursor. When the pointer leaves the section (`isTracking=false`), the target becomes `0`, so the flame eases back to its home position. The `.fire-glow` keeps pulsing independently via its CSS `firePulse` keyframes the whole time. - Because both use the same 0.1 factor, hole and flame feel unified — a gentle, weighty follow, never instantaneous. ## Assets / images **One Lottie JSON** (no bitmap images): a **looping stylized animated flame** — a small candle/torch-like fire, warm palette (hot red core, orange mid, pale-yellow tips), transparent background, roughly **4:3** source (≈1600×1200), a **seamless ~2s loop at 60fps**. Rendered as inline SVG at `8rem` box, scaled 1.25. Any tasteful animated flame works; do not use branded artwork. Load it from an assets path such as `/path/to/fire.json`. ## Behavior notes - **Desktop / pointer-driven only.** The whole spotlight is `mousemove`-based (plus `scroll` re-alignment); there is no touch/click path. Outside the `.spotlight` section the veil is inactive and the flame sits at home. - Lenis smooth scroll applies to the entire 3-section page; the spotlight/flame effect is scoped to the middle section. - `init` is deliberately delayed 100ms after load (so layout is settled) and re-run on resize to recompute the flame's home center and section geometry. - The rAF loop runs continuously with no reduced-motion branch. Keep `--light #d0f2c2`, `--dark #141414`, the warm glow gradient, and the mask stops (200px radius; transparent 0–40%, opaque 80–100%) at these values for the look to read correctly.