The user is asking for "candle fire in HTML" — meaning they want a candle flame rendered in HTML. This is a creative visual task. I should build a beautiful, atmospheric candle flame animation — rich, alive, atmospheric. Let me make a full HTML file that includes: - A realistic candle with a flickering flame (CSS/Canvas animation) - Ambient light that responds to the flicker - Environmental background — warm flickering light in a dark room, drifting sparks/smoke, floating dust particles, etc. - Interactive: blow out the candle (click or button), relight, or tilt on mouse move, click to extinguish with a puff of smoke - Wax dripping, textured candle body, wick - Glow effect, multiple light sources Design direction: candlelight = warm amber, deep warm browns, dark cozy scene. Since it's a candle scene, darkness is natural. Use warm amber/orange with layered warm tones, a warm dark brown/charcoal scene with subtle textures. Typography: pair a distinctive display face with a readable body face. Something like "Cormorant Garamond" would be serif-y... let me pick something distinctive: display "Cinzel Decorative" or "Italiana"? Actually for a candle theme — something like "Cormorant Garamond" display + a small-caps sans body. Let's use Google Fonts: display "Cinzel" (has a ritual/church candle vibe) and body... or "Cormorant Garamond" italic for the poetic line, and a simple sans-serif for UI labels. Keep it elegant. Implementation approach: Canvas-based fire particles would give the most alive flame. But pure CSS flame with blur/turbulence is also lovely. Best is hybrid: - Canvas for flame particles (smooth, organic flicker using noise) - CSS for candle, glow, ambient light - JS for interaction: move mouse to create draft (flame tilts), click to blow out, relight; hold to "blow"? Let me add: flame tilts away from pointer movement (wind), flame relights on click or button. Scene plan: 1. Background: warm dark brown deep gradient, vignette, subtle noise texture, floating dust illuminated by candlelight, faintly flickering wall glow. 2. Candle: cream/beeswax cylinder with gradient, inner glow near top from flame light, wax drips, pool of melted wax at top, wick with glowing ember tip. 3. Flame: Canvas particle system — flame teardrop shaped, particles rising, hues from incandescent core → yellow → orange → transparent; plus a blue base near the wick. Perlin-ish noise for flicker. 4. Glow: large radial gradient synced with flame intensity (flicker multiplier from same noise). 5. Smoke: when blown out, wisps of smoke rise (canvas particles), ember on wick glows briefly then fades. 6. Interactions: - Move mouse: airflow affects the flame's tilt. - Click the candle/flame or press spacebar to blow out → smoke, darkness falls, ambient dims; click again / "Relight" appears and a small match-strike animation? More simply: click again relights with a small flare. - Buttons: Blow out / Relight, and also "Wind" toggle? 7. Extra living elements: occasionally rising sparks/embers; a pool of light on the surface under the candle (table surface); secondary tiny candles? Maybe make it one beautiful candle with a candlestick on a wooden table. Let me think about a single canvas for flame + smoke + sparks, plus a DOM element for glow (or draw glow on canvas too). Actually, doing everything in one fullscreen canvas is simpler: candle drawn as DOM/CSS (crisp and easy gradient), flame/smoke/sparks in a canvas positioned over the candle area, and a glow div animated via JS with the same flicker value. Layout: since it's an app/demo — the candle scene itself opens the page. Top-left or bottom title in small elegant type: "Lumière" or "The Candle" — keep text minimal. A small caption line and a poetic microcopy. Let me decide the structure: ```

...

... maybe a brass holder -->

title

``` Candle with CSS: - Body: cream/beeswax gradient (illuminated side), width ~90px, height ~260px. Lit from above, so top is bright, lower parts darker warm browns. Left-right gradient can also react to flame center. - Top: ellipse with melted pool, radial gradient, slight wobble animation. - Drips: absolutely positioned rounded shapes of varying lengths. - Wick: thin dark stick, charred, with glowing tip (box-shadow orange). Flame canvas particle system: - Emission point at wick tip. Each particle: position, velocity (mostly up), lifetime, size, hue offset, wobble phase. - Update loop uses noise: a global time-varying wind value (target updated occasionally with mouse velocity influence). - Rendering: additive blend ('lighter'), soft radial gradient sprites, or circle drawing with shadowBlur? shadowBlur is slow; instead pre-render a small offscreen sprite (radial gradient white→transparent) and drawImage tinted with globalCompositeOperation? Simpler: pre-render multiple sprites for different hues, or set fillStyle with rgba and use arc while relying on 'lighter' composition. Pre-render a single white soft sprite, then use ctx.globalAlpha + draw scaled with hue... tinting needs per-particle colored sprite; pre-render ~5 sprites: core (incandescent), yellow, orange, red-orange, blue. Draw with 'lighter'. This is performant and pretty. Flame shape: particles emitted within a narrow x-range, upward velocity, size shrinks with lifetime; color progression is a function of lifetime and height: young particles near base = blue/white, middle = yellow, old at tip = orange/red fading. Actually classic technique: color by lifetime fraction: start white-yellow, end deep orange, alpha fade. Plus a separate emitter for blue base (short-lived blue particles near wick). Flicker: global intensity = 0.85 + noise*0.3; modulates glow opacity, flame particle speed, ember brightness. Use sum of sines or a simple pseudo-noise: `flick = 0.75 + 0.25 * (sin(t*7.3)+sin(t*13.7)*0.5+sin(t*3.1)*0.5)/2 ...` normalized. Wind: windX influenced by mouse dx near flame; also gentle idle sway from noise. Particle x velocity += wind; flame rendered tilt. Blow-out: on blow, spawn a burst of smoke particles (gray, slower, expanding, long-lived, rising with turbulence), an ember at wick glows ~2s then fades; glow/room light fades to near dark (CSS transition on a variable driven by JS: `lightLevel` lerps from 1 to 0.06). Show "relight" prompt. Relight: quick flare (intensity overshoot), resume. Also, when blown out the page darkens: set CSS variable --light: 0..1, use it in room-glow opacity, table light opacity, candle brightness (filter brightness), text color subtle. Dust: small divs or canvas particles floating slowly, opacity tied to light level. Can draw on the same canvas behind the flame (draw order: dust first). Dust drifts in a slow sine. Only visible when lit (alpha *= lightLevel). Sparks: occasional small bright particles rising quickly from flame, rare (when intensity high) — every few seconds. Sparks when blown out? No, smoke instead. Sound? Could add optional crackle with WebAudio noise... might be overkill but a nice touch: a subtle toggle for "crackle" audio. Might skip to stay robust... Actually a small optional ambience adds craft. WebAudio: brown noise through bandpass with random gain spikes = candle crackle, very quiet, toggle button, default off (autoplay policy). Add a small sound toggle. Low effort, high payoff. Keep code tidy. Layout/UI: - Top-left: title "la chandelle" hmm, language — user wrote in English ("candel fire in html"), respond in English. Title: "Candlelight" in display face; a small one-liner "a living flame, rendered in pixels". - Bottom bar: hints: "move — the flame feels your breath · click the flame — blow out · space — relight". Plus buttons: Blow out/Relight, Sound on/off. - Right side: maybe a stats line? Keep minimal: a small readout "flame temp ~ 1400°C at the tip" trivia rotating? Could be a nice living element: a small footnote rotating candle facts every 8s. Adds life without clutter. Let me add a small one-liner of rotating trivia in bottom-left. Fonts: display "Cormorant Garamond" 300 italic elegant? Or "Cinzel". Candlelight → "Cormorant" italic feels like candlelit calligraphy; body: "Outfit"? Cormorant Garamond + a sans like "Sora"? For candlelit elegance: display = "Cormorant Garamond" 300 italic; body = "Jost" (geometric, elegant, light). This pair feels candlelit. Use Google Fonts link. Colors: - Background: warm deep brown #14100c → #060404 radial. - Glow amber: #ffb35c, #ff9a3c, core #fff3d6. - Text: warm parchment #e8d9bd, dim #8a7a63. - Table: dark walnut tones. Candle body color: cream wax #f3e2c0 illuminated on top to #ffd9a0, bottom shadow #6b5138. Beeswax tones. Candle shape details: - Slight taper (narrower at top?). Real candles are cylindrical; use border-radius on top ellipse. Use pseudo-elements for top ellipse. - Drips: 3-4 with varying length, color slightly lighter than body, with highlight on the illuminated side. - Bottom brass holder: metallic radial gradient gold ellipse + stem? Candlestick adds character. Yes — brass holder: cup + stem + base, gold-ish gradient. And a table surface line with reflection/pool of light. Pool of light on table: radial gradient ellipse beneath candle, flickering opacity/scale. Vignette overlay for depth. Smoke rendering: gray soft sprite, 'source-over' composition, alpha low, size grows, drifts with wind, slight curl via per-particle phase. Interaction details: - pointermove: compute wind influence proportional to horizontal speed near flame; also parallax: candle group shifts a few pixels (transform translate) opposite to pointer, glow shifts too. Restrained. - Click on canvas near flame (or anywhere on candle area) → if lit: blow out (strong gust triggers blow-out? Fun: very fast mouse swipe across flame also blows out — "the flame feels your breath". Implementation: if |dx| speed exceeds threshold and pointer is near flame x, blow out. That's fun!). If unlit: relight. - Spacebar toggles. - Button toggles. Blow-out animation: quick puff: flame particles pushed sideways + stop emitting after short burst, smoke starts, ember on wick (CSS element with box-shadow, animate opacity via --ember var). Relight: flare: intensity 1.6 → settle over 600ms, smoke stops. Implementation notes: - Canvas is fullscreen, devicePixelRatio aware. - Flame base position: computed from candle element's position (getBoundingClientRect of the wick element) → robust to resize. - Emission: ~6-10 particles per frame while lit, plus blue base 2/frame. - Particle lifetime ~0.6-1.1s, upward velocity 60-110 px/s scaled by size. - Sprite size ~24-40 px at birth, shrinks. Let me write the sprite pre-render: ```js function makeSprite(inner, outer){ // radial gradient stops const s=document.createElement('canvas'); s.width=s.height=64; const g=s.getContext('2d'); const grd=g.createRadialGradient(32,32,0,32,32,32); grd.addColorStop(0, inner); grd.addColorStop(0.4, mid?) ... } ``` Sprites: - core: rgba(255,255,240,1) → rgba(255,220,150,0.6) → transparent - mid: rgba(255,200,90,.95) → rgba(255,140,40,.5) → 0 - outer: rgba(255,120,30,.8) → rgba(230,60,10,.3) → 0 - blue: rgba(120,160,255,.9) → rgba(60,90,220,.35) → 0 - smoke: rgba(120,110,105,.35) center → 0 - ember spark: rgba(255,230,180,1) → rgba(255,120,40,.6) → 0 Particle draw: ctx.globalCompositeOperation='lighter' for flame; smoke is 'source-over'. Flame color by lifetime: t = age/life: t<0.25 core, <0.6 mid, else outer, with alpha curve. Or blend by picking sprite with index = f(t) — discrete but visually fine with many overlapping particles. Alpha via globalAlpha. Wind & tilt: global `wind` value eases toward `windTarget`. windTarget = idleSway (noise ~ small) + mouseImpulse (decays). Particle vx += wind*speed*dt; emitter x-offset also shifts tip more than base (tip tilts more): apply wind force accumulated as particle rises: vx += wind * k * dt * (age factor). Also flame glow element: place a div with radial gradient centered at flame, scale/opacity driven by flicker and lightLevel. Plus a wider "room" glow div similarly. To keep performance, update style.opacity and transform each frame (cheap). Light level: `light` variable lerps to target (1 when lit, 0.05 when unlit). Drive: room-glow opacity, table pool opacity, candle CSS brightness: set `--light` on root: use in brightness of candle wrapper filter and scene brightness: `filter: brightness(calc(0.35 + 0.65*var(--light)))`? filter on a big element each frame is expensive but OK if only wrapper. Or set opacity on a darkness overlay: simplest and performant — a full-screen overlay `#darkness` with background #050302, opacity = (1-light)*0.8, blend normal, sits over scene but under UI. Plus room glow opacity directly. Fine. Candle brightness when blown out: dim the candle too — darkness overlay covers it. Ember on wick should still show → put ember above overlay? The overlay would also darken ember... Ember is small; make ember element z-index above darkness overlay, opacity tied to ember value. OK. Text/UI above overlay too. Table surface: horizontal band at bottom, wooden gradient + subtle plank lines? Simply: dark wood gradient with a highlight ellipse (pool) where candle light hits. Also reflection of candle? Skip. Scene composition: candle right of center? Center is natural for a single candle. Let me place candle slightly left of center, with title in top-left, and a rotating trivia box on the right. Actually, vertical center is good for a single candle, with pool of light at the bottom. Let me put candle in center with baseline at ~78% of height. Hmm — add a second smaller candle too? Could be charming: main candle + optionally... let me keep single hero candle, plus the richness of the dust + sparks + smoke + interactions. Rotating facts (bottom-left, small): - "The blue base burns hottest — around 1400 °C." - "Beeswax candles burn brighter and cleaner than tallow." - "A candle flame flickers at roughly 10–12 times per second." - "Before matches, candles were lit with ember tongs." - "The dark zone around the wick is unburnt vapor." Fade transitions between facts every ~9s. Controls bottom-right: [Blow out] [Sound: off]. Styled as warm-toned thin-border ghost buttons with hover glow, uppercase letter-spaced Jost. Also a "breath" mechanic: hold and press B? Overkill. Mouse-swipe blow-out + click is enough. Show in hint: "sweep your cursor across the flame". Edge cases: touch device — tap = blow/relight; wind from move works via pointermove too. Resize handler recomputes canvas size and flame anchor. Now let me think about the DOM candle in detail. ```html

brass -->

...

``` Candle CSS: ```css #candle{ width:92px; height:300px; position:relative; background: linear-gradient(180deg, #ffe9bd 0%, #f5d79e 6%, #d9b077 30%, #9c7448 62%, #4c3620 100%); /* side shading overlay */ border-radius: 10px 10px 6px 6px; } ``` Add side shading via ::before overlay with left-right gradient: left darker? Light source is above center → both sides darker, slightly brighter strip in middle: background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.18) 30%, rgba(255,220,150,.35) 50%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.5)). And a top ellipse: topRim: absolute top:-10px ellipse (width 100%, height 20px) lighter wax color, with pool inset inside: radial gradient #ffdf9e center → #caa05f edge; subtle wobble animation via border-radius morph? Keep static and slight animation with `poolGlow` opacity flicker. Wick: absolute top center above rim, width 5px height 22px, background #1c1310 → black charred top, slightly curved (border-radius + transform rotate(3deg)). Ember: small 6px circle at wick tip, background #ff9d45, box-shadow 0 0 8px 2px #ff7a2a; opacity controlled by JS (emberValue: small pulsating value when lit ~ tied to flicker; 1 → 0 slowly after blow-out). Drips: on right side: width 14px, variable height, border-radius: 8px 8px 10px 10px, background linear-gradient(180deg,#f7dca6,#c79a5f); position top: -2px; left offset; add a droplet bump on bottom via ::after circle. 3 drips (2 on lit side brighter, 1 on shadow side darker). Brass holder: below candle: - cup: 130px wide 26px tall trapezoid-ish ellipse: use border-radius 50% / ... simpler: shallow cup as an oval: background radial gold: #8a5a22 → #f4c869 → #6e4418; plus rim highlight. - stem: 16px wide 70px tall vertical gold gradient with highlight. - base: 190px wide 22px tall ellipse with radial gold. Metal gradient: linear-gradient(90deg,#5d3a12,#c99b4a 25%,#ffe9a8 50%,#b3823c 75%,#4a2d0e). Positioning: stage uses flex centering with candleUnit anchored: place #candleUnit absolute left 50%, bottom: 12vh, translateX(-50%). Compute flame anchor from wick's rect each frame? getBoundingClientRect each frame is OK-ish but let me cache on resize + on parallax change... parallax moves candleUnit slightly → wick moves. Instead, compute base anchor from rect on resize, add current parallax offset (known) + any sway to that. Parallax is small (±6px); apply same offset to glow too, so it looks coherent, flame anchor = base + parallax offset. Good. Table: horizontal surface: `#table` is absolute bottom height 26vh, background linear-gradient(180deg,#2a1b10,#120b06), top edge brighter when lit: box-shadow inset? Plus #tableGlow ellipse radial amber, width 70vw height 22vh positioned below candle, opacity = light*flick*0.5. Wood grain: subtle repeating-linear-gradient of thin dark lines on table with low opacity, rotate 0. Planks: repeating-linear-gradient(90deg, transparent 0 120px, rgba(0,0,0,.25) 120px 122px). Restrained. Vignette: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%) on top of everything except UI. Dust: draw on canvas: 40 particles with random positions, slow drift, alpha = light * (0.05..0.25) * twinkle. Warm-tinted color rgba(255,200,140,a). Draw small 1-2px circles with soft sprite scaled to 6-10px. Cheap. Facts cycler: array, index++, toggle class fade to swap textContent. OK, let me write the actual code carefully now. Sound design (WebAudio): ```js let audio=null, soundOn=false; function buildAudio(){ const ctx=new (window.AudioContext||webkitAudioContext)(); const len=ctx.sampleRate*2; const buf=ctx.createBuffer(1,len,ctx.sampleRate); const d=buf.getChannelData(0); let last=0; for(i...){ const w=Math.random()*2-1; last=(last+0.02*w)/1.02; d[i]=last*3.5;} // brown noise const src=ctx.createBufferSource(); src.buffer=buf; src.loop=true; const filt=ctx.createBiquadFilter(); filt.type='bandpass'; filt.frequency.value=900; filt.Q=0.6; const g=ctx.createGain(); g.gain.value=0; src.connect(filt).connect(g).connect(ctx.destination); src.start(); // schedule random crackle spikes setInterval(()=>{ if(!soundOn) return; const t=ctx.currentTime; const spike=0.02+Math.random()*0.05; g.gain.cancelScheduledValues(t); g.gain.setTargetAtTime(base+spike,t,0.01); g.gain.setTargetAtTime(base,t+0.03,0.08);},120) ``` Hmm simpler: keep base gain 0.015, spikes via setTargetAtTime. Low hiss too? Just crackle + faint bed. OK — code ~30 lines. Toggle button creates/resumes ctx on first enable (user gesture) — fine. Also when blown out, reduce gain to near 0; on relight, back. Now, flicker noise function: ```js function flick(t){ return 0.78 + 0.12*Math.sin(t*9.7) + 0.06*Math.sin(t*23.3+1.7) + 0.05*Math.sin(t*4.1+0.5) + 0.03*Math.sin(t*47.0); } ``` Clamp to ~0.55..1.05. When lit, plus gust effect from wind amplitude slightly boosts flicker. Wind: ```js let wind=0, windTarget=0, gustImpulse=0; on pointermove: const vx=(e.clientX-lastX)/dtms... impulse += clamp(vx*0.02,-2,2) scaled by proximity of pointer to flame (dy within 300px). Set windTarget = clamp(sway + impulse, -3,3). Each frame wind += (windTarget-wind)*dt*3; impulse decays *0.9. ``` Idle sway: 0.4*sin(t*0.6)+0.3*sin(t*0.23). Fast swipe blow-out: track pointer speed; if speed > 1.8 px/ms and pointer passes within 90px of flame center and lit and sign of direction changed? Simpler: speed > 2200 px/s and distance < 100 → blow out, and set windTarget strongly in motion direction. Add small cooldown. Blow-out sequence: ```js function blowOut(){ if(!lit) return; lit=false; blowTime=now; emberVal=1; // decays over ~3s spawn smoke burst over next ~1.2s: while (now-blowTime<1.2) keep emitting smoke at higher rate; also residual few orange particles. update button text; } function relight(){ lit=true; flare=1; // decays, adds to intensity smoke stops. } ``` Light target = lit?1:0; light += (target-light)*dt*2 (slower fade when extinguishing ~ slower maybe: dt*1.5). Flame emission while lit: rate = 140/sec * intensity. Accumulate emitter. Particle struct is array of objects pool-style (simple array, splice by swap-pop). Should be fine at a few hundred particles. Particle update: ```js p.age+=dt; if(p.age>=p.life) remove; p.vy -= (p.buoy*dt) // upward acceleration; store vy negative p.vx += (wind* windForce * dt) * (p.age/p.life+0.2) p.x+=p.vx*dt; p.y+=p.vy*dt; p.x += Math.sin(t*? + p.phase)*p.wobble*dt ``` Rendering: size = p.size * (1 - p.age/p.life*0.85); alpha curve: a = sin(π * min(age/life,1))? For flame: alpha ramps up fast then fades: a = (1-t)*(t<0.15? t/0.15 :1). Sprite selection by t: t<0.3 core, <0.65 mid, else outer. Multiply alpha by intensity (light). Blue base particles are separate type: small size, short life, drawn with blue sprite, alpha 0.5. Draw order in canvas per frame: 1. clear 2. dust (lighter? normal with warm alpha; use lighter for subtle shimmer — OK) 3. smoke (source-over) 4. flame (lighter) 5. sparks (lighter) FlameGlow DOM: position centered at flame anchor, width ~340px, radial gradient rgba(255,170,70,.55)→transparent; opacity = light*(0.55+0.45*flick)*... plus flare boost; scale = 0.9+0.2*flick. transform translate(-50%,-50%) with wind tilt shift x + wind*6 px translate. roomGlow: big ~140vmax div, radial rgba(255,150,60,.16) center at candle position → opacity light*(0.7+0.3*flick). Darkness overlay opacity = (1-light)*0.78 — but when relight flare overshoots, could be negative? Clamp. CSS variables approach: setting style.opacity each frame directly — fine. Parallax: pointer → offset ox=(px-0.5)*14, oy=(py-0.5)*8; candleUnit.style.transform = translate(-50%,0) translate(ox*0.4px, oy*0.3px). And background scene shift: roomGlow background-position? Keep simple: shift tableGlow and flame anchor only; plus a very subtle shift of vignette center? Skip. Actually, add slight tilt: candleUnit rotate(ox*0.15deg)? cute. OK. Frame loop uses requestAnimationFrame with dt clamp 0.033. Resize: canvas w/h = innerWidth/Height * dpr; recompute anchor: after layout, anchor = {x: rect.left+rect.width/2, y: rect.top+4}. Anchor element = #wick. But parallax transform shifts wick — recompute anchor = baseAnchor + current parallax offset (known variable). Good. Now copy/UI text: Top-left: ``` CHANDLERY № 1 (small letter-spaced label) The Living Flame (display serif large, italic maybe) ``` Title font Cormorant Garamond italic 600. Label Jost 11px tracking 0.3em. Top-right: maybe a "lit / extinguished" status with small dot indicator — a living element. Status pill: "● burning" amber pulse / "○ out". Nice. Bottom-left: facts line (italic serif, dim) with fade swap. Bottom-right: hint + buttons. Hints: "sweep across the flame to blow · click to snuff & relight". Buttons: [ Blow out ] [ Sound off ]. Hint centered-bottom? Let me place hints above buttons, small. Mobile: shrink candle via media queries (scale candleUnit 0.8), stack text. Font link: ```html ``` Final colors: - BG base: #0b0705 with radial warm center behind candle. - Text primary: #ecd9b5; dim #97836a. - Accent: #ffb45e. Button style: transparent, 1px border rgba(236,217,181,.28), letter-spacing .18em, uppercase, Jost 11px, padding 9px 16px, hover: border amber, glow shadow, bg rgba(255,170,80,.08). transition .25s. Status dot pulse animation (keyframes) — pause animation when unlit via class. Facts fade: `.facts span{transition:opacity .6s}` swap logic. Edges: on page load, small "ignite" intro? Flame starts lit after 400ms with flare — as if just lit. Good: start with lit=false, light=0.06, then setTimeout(()=>relight(), 600) with flare. The page opens dark, then the candle is lit — a distinctive opening. Yes! Also handle document hidden → skip big dt (clamped anyway). Let me write the sprite pre-render: ```js function makeSprite(inner, outer){ // radial gradient stops ``` Sprites: ```js function sprite(stops){const c=document.createElement('canvas');c.width=c.height=64;const x=c.getContext('2d');const g=x.createRadialGradient(32,32,0,32,32,32);for(const [o,col] of stops)g.addColorStop(o,col);x.fillStyle=g;x.fillRect(0,0,64,64);return c;} const S_CORE=sprite([[0,'rgba(255,255,245,1)'],[0.35,'rgba(255,236,180,.85)'],[1,'rgba(255,190,90,0)']]); const S_MID=sprite([[0,'rgba(255,214,120,.95)'],[0.4,'rgba(255,160,60,.6)'],[1,'rgba(255,110,20,0)']]); const S_OUT=sprite([[0,'rgba(255,140,50,.8)'],[0.5,'rgba(230,80,20,.35)'],[1,'rgba(160,30,5,0)']]); const S_BLUE=sprite([[0,'rgba(150,190,255,.9)'],[0.5,'rgba(80,120,255,.4)'],[1,'rgba(40,60,200,0)']]); const S_SMOKE=sprite([[0,'rgba(150,140,135,.5)'],[0.6,'rgba(120,112,108,.18)'],[1,'rgba(100,95,92,0)']]); const S_EMBER=sprite([[0,'rgba(255,240,200,1)'],[0.4,'rgba(255,160,70,.7)'],[1,'rgba(255,80,20,0)']]); ``` Particle arrays: flames[], smoke[], sparks[], dust[] initialized once. Dust init: 42 particles {x:rand*w, y:rand*h*0.85, r: .6+rand*1.6, sp: 3+rand*8, ph: rand*6.28, tw: .5+rand*1.5}. Update: y-=sp*dt (slow upward drift), x+=sin(t*tw+ph)*4*dt; wrap. Spark emission: if lit && Math.random()0 → rate 40/s for 1.5s; slight smoke when lit? Real candles have minimal smoke; skip. Ember DOM: opacity = lit ? 0.9*flicker : emberVal (decays). ember element is positioned at wick top. Also when blown out, poolGlow dims. Click handling: listen click on stage (not on buttons): if lit → blow out, else relight. But also allow swipe blow-out. Pointer speed: track lastPX, lastPT in pointermove; v=(x-lastX)/(t-lastT)*1000 px/s. Accumulate impulse: windTarget = clamp(vx_px/s *0.0012, -2.5,2.5) plus sway; proximity: compute distance from pointer to flame anchor; if dy>-250 && dy<150 && |dx|<260, scale by proximity factor. Swipe blow-out: if lit && v>2300 && dist<110 && cooldown elapsed → blowOut(); windTarget = sign(vx)*3. dt for speed: use performance.now delta. Relight flare: flare=1 → intensity = flick + flare*0.9; flare*=exp decay: flare += (0-flare)*dt*2.2. Emit more particles when flare. Gust blow: blowOut sets gust=3*sign — big windTarget for 0.4s then decays; remaining flame particles get blown out — since emission stops, existing ones fly off with wind — looks right. Also add slight flame stretch based on intensity: vy multiplier. OK — also a "breath" mechanic: hold and press B? Overkill. Mouse-swipe blow-out + click is enough. Show in hint: "sweep your cursor across the flame". Edge cases: touch device — tap = blow/relight; wind from move works via pointermove too. Resize handler recomputes canvas size and flame anchor. Now writing full HTML. Also include title tag "Candlelight". Also handle prefers-reduced-motion? Could reduce particle count and sway. Add: if reduced motion, lower emission rate and disable parallax. Good touch. Let me write full code carefully checking correctness. Key positions: candleUnit at bottom: 13vh; contains holder + candle stacked. Actually simplest: candleUnit is a flex column align center: [candle][holder]. Candle height 280px, width 90px. Wick positioned at top of candle: left 50%, top -20px height 22px width 5px, translateX(-50%). Anchor measured from wick rect top + 6. topRim ellipse: width 92px height 22px top -11px, background radial-gradient(closest-side, #ffedc0, #e9c78b 60%, #b98d54); border-radius 50%. Pool inside: inset 6px, radial #ffe1a0→#c89a5c; plus glow highlight overlay opacity flicker. Hmm layering: candle body top edge should be hidden by rim ellipse (rounded top of candle). Use body border-radius top 45%/11px? Use border-top-left-radius: 46px 12px; top right same. Then rim ellipse overlays perfectly. Drips placed inside candle on top: top:-6px, right/left offsets. Right side illuminated or centered? Flame centered → both sides illuminated; make slight asymmetry (drips brighter on left, subtle). Use symmetric-ish shading with slight warm bias to middle. Candle gradient: because light from above: top brighter. Compose: background: linear-gradient(90deg, rgba(35,18,6,.55), rgba(255,214,140,.22) 18%, rgba(255,232,180,.38) 50%, rgba(120,70,25,.18) 82%, rgba(20,10,4,.6)), linear-gradient(180deg, #ffe6b4 0%, #f2cf95 10%, #d9ae72 34%, #a97e4b 60%, #59402a 86%, #241708 100%); Wax translucency glow near top: extra div glowTop with radial amber opacity flicker. Candle bottom rests in holder cup; cup overlaps candle bottom by 10px. z-index cup above candle bottom. Holder cup: width 150px; height 34px; border-radius 50%/55%? Let me make the cup a shallow bowl: div with gold background gradient and border-radius: 12px 12px 60px 60px / 10px 10px 46px 46px. Then rim ellipse on top of cup (front lip) — but candle inserts behind front lip. Simplify: stack candle then cup shape and overlap candle bottom via negative margin-top: -12px so candle looks seated. Stem and base below. Gold gradient: linear-gradient(90deg,#3a2408,#8a5a1c 18%,#e8bd6a 45%,#fff3c4 52%,#c8963e 62%,#6b4212 88%,#2a1a06). Base: ellipse 200x26 border-radius 50%, same gradient + shadow to ground it. Add contact shadow: separate div under base: ellipse black blurred (box-shadow), opacity .5*(light .3 + .7) — static is fine. Table glow pool beneath holder: inside stage, absolute, radial amber ellipse 60vw x 18vh, mix-blend? Use 'screen' or 'lighter' with normal opacity. Also candle reflection on table? Subtle vertical streak: skip. Stage background: body background: radial-gradient(120% 100% at 50% 30%, #1b120a 0%, #0d0805 45%, #050302 100%). Plus faint texture: repeating-conic? Add small noise via SVG data URI background at low opacity — nice. Use inline

No. 01 — Beeswax & Wick

The Living
Flame

``` h1 Cormorant, size clamp(34px, 5vw, 58px), weight 500, em italic amber-tinted. Top-right status: ```

burning

``` dot 8px, burning: amber + pulse; out: gray. Bottom-left facts: `

…

` italic Cormorant 15px dim. Bottom-right: ```

sweep your cursor across the flame — or click it — to blow it out

``` Hint above buttons right-aligned. Media queries for small screens: hide one line of hint, shrink h1, candle scale .78, controls bottom-right smaller. OK, time to write JS fully. Let me draft: ```js const cv=document.getElementById('fx'),ctx=cv.getContext('2d'); let W,H,DPR; function resize(){DPR=Math.min(devicePixelRatio||1,2);W=innerWidth;H=innerHeight;cv.width=W*DPR;cv.height=H*DPR;cv.style.width=W+'px';cv.style.height=H+'px';ctx.setTransform(DPR,0,0,DPR,0,0);computeAnchor();} ``` Anchor: ```js const wickEl=document.getElementById('wick'); let anchor={x:0,y:0}, baseAnchor={x:0,y:0}; function computeAnchor(){const r=wickEl.getBoundingClientRect();baseAnchor={x:r.left+r.width/2,y:r.top+4};} ``` Then per frame anchor = base + parallax (parallax transform shifts wick too, so rect changes; but calling getBoundingClientRect each frame causes layout read → fine performance-wise for single element? It forces layout only if styles changed... we do change style each frame (transforms) → each read would flush. Avoid: compute base once on resize (no transform), then add known parallax offset: px*0.4 etc. Let's do that: reset transform? Simpler: after resize, temporarily set transform to none and measure. Since parallax offset known: anchor.x=baseAnchor.x+ox*0.4 (same as unit translate). Rotate is negligible. Good. Note: candleUnit has transform translate(-50%,0) + parallax; the measurement includes translate(-50%) baked in the rect — fine at time of measure. Also intro animation? candleUnit fade-in: CSS animation on load fadeUp 1s. Now main loop: ```js let t=0,last=performance.now(); let lit=false,light=0.05,flare=0,ember=0,smokeT=0,gust=0; let wind=0,impulse=0; let emitAcc=0,smokeAcc=0; const flames=[],smokes=[],sparks=[],dust=[]; ``` Init dust on resize (depends on W,H) — lazy-init once after first resize. pointermove: ```js let pX=null,pY=null,pT=0,vel=0; addEventListener('pointermove',e=>{ const now=performance.now(); if(pX!==null){const dtm=Math.max(now-pT,1);const vx=(e.clientX-pX)/dtm*1000; // px/s vel=Math.abs(vx); // proximity factor const dx=e.clientX-anchor.x, dy=e.clientY-anchor.y; const near=Math.max(0,1-Math.hypot(dx,dy*0.8)/320); impulse+= vx*0.0009*near; // accumulates impulse=Math.max(-3,Math.min(3,impulse)); if(lit&&Math.abs(vx)>2100&&Math.hypot(dx,dy)<120&&now-blowCooldown>600){blowOut(Math.sign(vx));} } pX=e.clientX;pY=e.clientY;pT=now; // parallax target tx=(e.clientX/W-0.5); ty=(e.clientY/H-0.5); }); ``` blowCooldown timestamp variable. blowOut(dir): ```js function blowOut(dir=1){ if(!lit)return; lit=false; ember=1; smokeT=1.6; gust=dir*3.2; blowCooldown=performance.now(); statusUI(false); btnBlow.textContent='Relight'; soundFade(false); } function relight(){ if(lit)return; lit=true; flare=1; smokeT=0; statusUI(true); btnBlow.textContent='Blow out'; soundFade(true);} ``` Space key: toggle. Click stage: if target is button, ignore; lit?blowOut():relight(). Status: dot class + text. Update loop: ```js function frame(now){ const dt=Math.min((now-last)/1000,0.05);last=now;t+=dt; // flicker let flick=0.8+0.10*Math.sin(t*9.4)+0.05*Math.sin(t*23.1+1.3)+0.05*Math.sin(t*3.7+0.6)+0.03*Math.sin(t*41.0); flick+=Math.min(Math.abs(wind)*0.05,0.1); const intensity=Math.max(0.15,flick)+flare*0.9; flare*=Math.exp(-dt*2.4); // wind gust*=Math.exp(-dt*3.0); impulse*=Math.exp(-dt*2.2); const sway=0.35*Math.sin(t*0.7)+0.25*Math.sin(t*0.23+2); const windTarget=(lit?sway*0.5:sway*0.15)+impulse+gust; wind+=(windTarget-wind)*Math.min(1,dt*5); // light const target=lit?1:0; light+=(target-light)*Math.min(1,dt*(lit?4:1.6)); if(lit&&!wasLit?)... skip // ember decay ember=lit?0.55+0.45*flick:ember*Math.exp(-dt*0.55); // wait after blow-out ember should glow ~1 then slowly fade: exp(-dt*0.55) halves every ~1.26s — visible for ~5s. But ember is also used for glow when lit. ``` Hmm, when lit ember opacity ~0.9*flick; use ember variable only for after-extinguish, compute opacity separately: `emberOp = lit ? (0.35+0.5*flick)*light+flare*0.5 : ember;` with ember decaying. Set ember=1.25 on blowout to start bright. Emission: ```js if(lit){ emitAcc+=dt*(120+90*flare)* (0.8+0.4*flick); while(emitAcc>=1){emitAcc--;spawnFlame();} // blue base emitBlue... include in spawnFlame type. if(Math.random()0){smokeT-=dt;smokeAcc+=dt*46;while(smokeAcc>=1){smokeAcc--;spawnSmoke();}} ``` spawnFlame(): ```js const blue=Math.random()<0.22; flames.push({x:anchor.x+(Math.random()-0.5)*10,y:anchor.y+(blue?4:0)+(Math.random()-0.5)*4, vx:(Math.random()-0.5)*8, vy:-(blue?26:52)-Math.random()*46*(0.7+0.6*flick), life:blue?0.32+Math.random()*0.2:0.55+Math.random()*0.5, age:0,size:blue?9+Math.random()*6:16+Math.random()*14, blue, ph:Math.random()*6.28}); ``` Update flames: ```js for i... p.age+=dt; if dead remove; const prog=p.age/p.life; p.vx+= (wind*140*dt)*(0.25+prog) ; // stronger tilt higher up p.vy-= 60*dt*(p.blue?0.4:1)*intensity? // buoyancy accelerates: vy grows more negative p.x+=p.vx*dt+Math.sin(t*10+p.ph)*6*dt*(1-prog); p.y+=p.vy*dt; ``` vy starts -52..-98; acceleration -60*dt → after 0.8s adds -48 → good. Flame draw: ```js ctx.globalCompositeOperation='lighter'; for(p of flames){const prog=p.age/p.life;let spr; if(p.blue)spr=S_BLUE; else spr= prog<0.3?S_CORE:prog<0.68?S_MID:S_OUT; let a=(1-prog);a*= prog<0.12?prog/0.12:1; a*= p.blue?0.55:(0.75*light+0.25)+flare*0.3; // flame barely visible during blow-out? actually when blown, emission stops; remaining flame should render fully: use Math.max(light, lit?0:0.9) while lit? Simplest: alphaScale = lit? (0.6+0.4*flick) : 1. const s=p.size*(p.blue?(1-prog*0.6):(1-prog*0.72))*(1+flare*0.3); ctx.globalAlpha=Math.min(1,a)*alphaScale; ctx.drawImage(spr,p.x-s,p.y-s,s*2,s*2); } ``` alphaScale: `lit ? 0.75+0.35*flick : 1`. Smoke spawn: ```js smokes.push({x:anchor.x+(Math.random()-0.5)*6,y:anchor.y-4,vx:(Math.random()-0.5)*10,vy:-28-Math.random()*22,life:1.8+Math.random()*1.6,age:0,size:10+Math.random()*10,ph:Math.random()*6.28}); ``` Update: vy slight up accel -8*dt; vx+=wind*90*dt*(0.3+prog); x+= vx*dt + Math.sin(t*2.2+ph)*14*dt*prog (curl grows); size grows: drawSize=size*(1+prog*2.6). Alpha: 0.5*(1-prog)*min(1,prog/0.08+0.2)... smoke visible even in darkness? After blow-out room dark; smoke faintly visible against residual — render with alpha*(0.35+0.65*light)+0.15 to keep visible. Composite 'source-over'. Sparks: ```js sparks.push({x:anchor.x+(Math.random()-0.5)*8,y:anchor.y-10,vx:(Math.random()-0.5)*30+wind*40,vy:-140-Math.random()*120,life:0.5+Math.random()*0.5,age:0,size:2+Math.random()*2.5}); ``` Update: vy+=140*dt (gravity pulls back), vx+=wind*200*dt. Draw S_EMBER, small size, 'lighter', alpha (1-prog). Dust: ```js for(d of dust){d.y-=d.sp*dt; d.x+=Math.sin(t*d.tw+d.ph)*3*dt + wind*2*dt; if(d.y<-10){d.y=H+10;d.x=Math.random()*W;} } draw: alpha=(0.10+0.16*Math.sin(t*d.tw*1.7+d.ph)**2)*light; draw S_MID? Use small warm sprite: reuse S_EMBER with small size → warm dot. ok draw size d.r*3. ``` Draw dust first (lighter) under smoke. DOM updates each frame: ```js const fl=document.getElementById('flameGlow'); fl.style.opacity=(light*(0.5+0.5*flick)+flare*0.5)*0.9; fl.style.transform=`translate(-50%,-50%) translate(${anchor.x+wind*10}px, ${anchor.y-30}px) scale(${0.85+0.25*flick+flare*0.5})`; ``` Set left/top 0 in CSS and transform translate to coords — but translate(-50%) plus px offset: order: translate(px,py) translate(-50%,-50%). Fine. roomGlow: ```js rg.style.opacity=light*(0.55+0.45*flick); ``` tableGlow same *0.8. Darkness: `dark.style.opacity=(1-light)*0.8 - flare*0.2` clamp 0..0.8. Ember DOM: ```js emberEl.style.opacity=emberOp; emberEl.style.transform=translate(anchor.x, anchor.y+2)... emberEl.style.boxShadow? Keep static style, opacity only; also scale ember size when blown: keep simple. ``` Ember with CSS: width 7px height 7px border-radius 50%, background radial, box-shadow 0 0 10px 3px rgba(255,110,30,.8), plus an outer glow via pseudo. When lit opacity small → acts as bright wick tip — but wick tip already covered by flame glow; fine. poolGlow (wax top highlight): opacity via CSS variable? Set style.opacity=light*(0.5+0.5*flick). Parallax: ox=tx*16, oy=ty*9 with easing: px+=(ox-px)*dt*4. candleUnit.style.transform=`translate(-50%,0) translate(${px}px,${py}px) rotate(${px*0.06}deg)`. Anchor add px. Reduced motion: skip parallax. wasLit transitions handled by functions. Init: resize(); initDust; setTimeout(relight, 900). Initial button text 'Blow out' but disabled until lit? Relight() sets. Initial lit=false, button text initially 'Relight'? At t=900ms relight() sets 'Blow out'. Initial textContent '· · ·' or just 'Relight'. Fine: start with 'Relight' but auto-relight at 0.9s. Space key: e.code==='Space' → preventDefault, toggle. Sound implementation: ```js let AC,master,crackTimer,soundOn=false; function setupAudio(){AC=new (AudioContext||webkitAudioContext)(); const len=AC.sampleRate*2,buf=AC.createBuffer(1,len,AC.sampleRate),ch=buf.getChannelData(0);let l=0; for(let i=0;i{ if(!soundOn||!lit)return; const g=master.gain,tt=AC.currentTime; const base=0.012; g.setTargetAtTime(base+0.02+Math.random()*0.05,tt,0.008); g.setTargetAtTime(base,tt+0.03+Math.random()*0.05,0.09); },110); } function soundFade(on){ if(!AC)return; master.gain.setTargetAtTime(on&&soundOn?0.012:0,AC.currentTime,0.4);} btnSound.onclick=()=>{soundOn=!soundOn;if(!AC)setupAudio();AC.resume();soundFade(lit);btnSound.textContent='Sound · '+(soundOn?'on':'off');}; ``` Base hiss stays 0.012 constant; crackles spike. Also on blow-out soundFade(false). Also call soundFade from blowOut/relight. Facts array cycler: ```js const facts=[...];let fi=0;const factEl=...; setInterval(()=>{factEl.style.opacity=0;setTimeout(()=>{fi=(fi+1)%facts.length;factEl.textContent=facts[fi];factEl.style.opacity=1;},600);},9000); ``` CSS transition on opacity .6s. Grain overlay: ```css .grain{position:fixed;inset:-50%;width:200%;height:200%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.05;pointer-events:none;mix-blend-mode:overlay;animation:grain 9s steps(6) infinite;} @keyframes grain{0%{transform:translate(0,0)}...} ``` Keep restrained; steps animation for filmic feel. Check z-index and pointer-events: canvas pointer-events none; buttons clickable: canvas above candles but pointer-events none so clicks fall through to stage. Stage listens to click. Buttons in footer with higher z-index, and clicking on buttons — button click does not bubble to stage handler? Buttons inside footer; attach click to document? Attach to #stage, footer is sibling → safe. And guard in click handler: `if(e.target.closest('button'))return;` anyway. Prevent text selection: user-select none on body. Cursor: crosshair? Custom cursor could be cute — default is fine; maybe `cursor: none` over flame? No — keep default. Fonts sizes/weights: h1 clamp; eyebrow Jost 10-11px ls .32em uppercase color dim amber. Status top-right: Jost 12px ls .2em uppercase; dot amber #ffb45e, pulse keyframe (scale/opacity) when .burning, else gray #6b625a. Another living background element: distant soft warm gradient breathing? The roomGlow flicker covers it. Plus grain + dust + flame + facts + status pulse = plenty of living elements. Intro fade: `.brand,.footer{animation:rise 1.2s .3s both}` keyframes translateY(12px)→0 opacity. Candle visual check: candle height 300 + holder ~140 → total ~440px; at bottom 12vh works at 800px height; small screens scale. transform-origin of candleUnit bottom center for rotate. Media queries <560px: h1 smaller; hide second hint line? Keep, controls bottom-right smaller; candle scale .8: `#candleUnit{transform-origin:bottom; }` but transform set by JS overrides... Include scale in JS transform? Simpler: wrap: outer #candlePos (positioned, JS transforms) and inner #candleScale (CSS scale via media query). Anchor measurement: wick rect accounts for scale automatically. But parallax offset added to baseAnchor computed pre-scale? baseAnchor measured after full layout incl scale — good. JS transform on outer only; scale static → offset consistent. Structure: ```html

…wick…

cup, stem, base, contact shadow

``` candlePos absolute left:50% bottom:11vh; JS: transform=`translateX(-50%) translate(px,py) rotate(...)`. baseAnchor measured with transform translateX(-50%) applied — rect OK. rotate small; ignore. Wick: child of #candle at top: -24px, left:50%, margin-left:-2.5px, width 5, height 26, background linear-gradient(180deg,#0d0805 30%, #241812), border-radius 3px, transform: rotate(4deg); transform-origin bottom. topRim and pool inside #candle top. Glow overlay on candle: #candle::after? Use a separate div .candleLight overlay with radial from top: radial-gradient(120% 60% at 50% 0%, rgba(255,190,90,.5), transparent 60%); opacity via JS (variable lightFlick). Assign id=candleSheen. Wax pool shimmer: #pool with small animated gradient? Add ::after highlight ellipse opacity flicker via same JS var (set CSS var on document root: `--flick`). Then pure CSS uses var: poolGlow.opacity: var(--glow). Set root style property each frame: `root.style.setProperty('--glow', (light*(0.55+0.45*flick)).toFixed(3))`. Use for sheen, pool highlight, and holder specular highlight. Nice. Drips: 3 divs: d1: left:14px;top:-8px;width:13px;height:64px; d2: right:18px;top:-8px;width:11px;height:38px; d3: left:38px;top:-8px;width:9px;height:22px; (front middle short) Each: background linear-gradient(180deg,#f8e0ae,#d3a768 60%,#b98a4e); border-radius:6px 6px 9px 9px; box-shadow: inset -2px 0 3px rgba(80,40,10,.35), inset 2px 1px 2px rgba(255,240,200,.5); ::after droplet: bottom:-4px;left:50%;translate;width:calc(100%+2px);height:10px;border-radius:50%;same bg darker. Drip shadows on candle? skip. Holder CSS: ```css #holder{display:flex;flex-direction:column;align-items:center;margin-top:-8px;} .cup{width:148px;height:36px;background:linear-gradient(90deg,#2e1c07,#7a4f16 14%,#d9ab55 40%,#ffedb0 50%,#c08c36 60%,#5c3a10 86%,#241505);border-radius:10px 10px 46px 46px/10px 10px 30px 30px;box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 -6px 8px rgba(0,0,0,.35);} .cuplip{width:156px;height:16px;margin-top:-30px? ...} ``` Simpler: cup + rim ellipse above: .cuprim{width:156px;height:18px;border-radius:50%;background:linear-gradient(90deg,#513410,#caa04c 30%,#ffe9a8 50%,#b98a3c 70%,#3c2609);margin-bottom:-9px;z-index:2;} candle bottom sits behind rim: candle z-index:1; rim z-index:2 with negative margin pulling candle down so candle bottom hidden behind rim. Order: candle, then holder column [rim, cup, stem, base] with rim pulled up via margin-top:-14px so candle bottom hidden behind rim. Candle z-index 1, rim z-index 2. stem{width:18px;height:64px;background:linear-gradient(90deg,#3a2408,#a87b2e 30%,#ffe6a0 50%,#9a6d24 70%,#2e1c06);border-radius:8px;} Add bead: .bead{width:34px;height:14px;border-radius:50%;gold background;margin:-4px 0;} base{width:200px;height:24px;border-radius:50%;gold background;box-shadow:0 6px 14px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,240,200,.5);} Ground shadow: .groundShadow{width:260px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);margin-top:-14px;} Table: separate fixed div, bottom:0;height:30vh;background:linear-gradient(180deg,#241609,#150d06 40%,#0a0603); plus top edge line highlight: box-shadow: inset 0 1px 0 rgba(255,200,120,.12); wood grain: repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 160px)? Plank seam vertical lines subtle: repeating-linear-gradient(90deg, transparent 0 210px, rgba(0,0,0,.35) 210px 213px). Low opacity. But candle bottom:11vh sits within table area → on top. Good. tableGlow: absolute; left:50%; bottom:2vh; width:min(70vw,760px); height:26vh; translate -50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,170,80,.32), rgba(255,120,40,.12) 55%, transparent 75%); mix-blend: screen; opacity via JS. roomGlow: fixed; inset:-20%; background: radial-gradient(55% 45% at 50% 42%, rgba(255,150,60,.20), rgba(180,90,30,.07) 45%, transparent 70%); opacity via JS. flameGlow: fixed; width:420px;height:420px;left:0;top:0; background: radial-gradient(closest-side, rgba(255,200,110,.55), rgba(255,140,50,.22) 40%, transparent 72%); mix-blend:screen; pointer-events none. OK time to write out the final HTML. Also include title tag "Candlelight". Also handle prefers-reduced-motion? Add: if reduced motion, lower emission rate and disable parallax. Finalize flame emission rate and appearance: ~150/s at lifetime ~0.75 → ~110 particles alive. Plus blue 22% inside same pool. OK. Let me verify flame draw sizes: base size 16-30 → drawImage at ~2× size 32-60px, overlapping → decent teardrop with upward accel and shrinking. Add slight horizontal narrowing: vx pulled toward centerline: p.vx += (anchor.x+windOffset - p.x)*1.2*dt? Gives cohesion: attraction toward axis that shifts with height due to wind: axisX = anchor.x + wind*prog*prog*46; p.vx += (axisX-p.x)*3*dt. That creates leaning flame shape. Let's use this instead of pure wind force; the axis shift handles wind, plus a small wind force on smoke/sparks. So flame update: ```js const axis=anchor.x+wind*prog*prog*44; p.vx+=(axis-p.x)*3.4*dt; p.vx*=Math.exp(-dt*1.6); // damp p.vy-= (70+60*intensity)*dt*(p.blue?0.3:1); p.x+=p.vx*dt + Math.sin(t*11+p.ph)*4*dt*(1-prog); p.y+=p.vy*dt; ``` Blue particles: axis same, small vy → stays at base. Should look like cohesive flame. Smoke axis drift: use wind directly. Recheck: when blown with gust, wind max ~3 → axis shift 44*3=132px — dramatic flick/bend. Remaining particles bend and vanish (emission stopped) — good with gust decay. OK, also when blown out, spawn a last burst of orange "scattered" particles? A remnant of flame with strong wind reads as a blown flame. Add: on blowOut spawn 10 fast sideways flame particles. Cute: ```js for(let i=0;i<12;i++)flames.push({x:anchor.x,y:anchor.y-6,vx:dir*(120+Math.random()*160)+(Math.random()-0.5)*60,vy:-(20+Math.random()*70),life:0.3+Math.random()*0.3,age:0,size:12+Math.random()*10,blue:false,ph:0}); ``` Their axis attraction pulls back though... axis attraction 3.4*dt, lifetime .4 is short → mostly fly. OK. Sparks on blow-out too? No, smoke instead. Also add subtle heat shimmer over flame? skip. Also `will-change: transform,opacity` on glow? Add sparingly. Edge cases: pointermove anchor uses baseAnchor + parallax px — but px is applied to candlePos which contains scale wrapper; wick moves by exactly px, py (before rotate). rotate ~1deg small, negligible. computeAnchor in resize uses current transform of wick getBoundingClientRect: on resize, candlePos transform may include px offset → slight error; reset px=py=0 on resize before measuring. Fine: in resize(): px=py=0; apply transform; computeAnchor(). Also font load shifts layout? candle not affected. Dust init after W/H known. Let me write the facts: facts = [ "The blue base of a flame is its hottest district — close to 1,400 °C.", "A candle flame flickers around ten times a second, stirred by rising heat.", "Beeswax burns cleaner and brighter than any other traditional wax.", "The dark halo around the wick is vaporised wax, waiting to ignite.", "Until the 1820s, every candle was poured or dipped by hand.", "A single candle gives roughly one candela — the unit is named for it." ]; Great, thematic. Hints: "Sweep your cursor through the flame to blow it out · click anywhere to snuff or relight" Buttons: Blow out / Relight toggle; Sound · off/on. Space shortcut note in title attribute. OK let me write everything out as a single HTML file. I'll keep a short intro line before the code and the code block. Double-check pitfalls: - ctx.setTransform with DPR; draws in CSS pixels. ✔ - Sprites drawn with globalAlpha and composite; don't forget to reset globalAlpha=1 and composite to 'source-over' before clearing? clearRect works with any composite but alpha compositing on clearRect? clearRect ignores composite. ✔ - Smoke drawn before flame but smoke uses source-over → set per section. - flameGlow transform: translate(px) then translate(-50%,-50%): order matters: `translate(${x}px,${y}px) translate(-50%,-50%)` → element centered at x,y. ✔ - darkness overlay should not block clicks? It covers screen: pointer-events none. ✔ - stage click target: attach click to window? If footer button clicked, bubbles to window → guard with closest('button'). Also click on header area would blow out candle — acceptable ("click anywhere"). Attach to window with guard. - Space triggers click on focused button → also blur button after click to avoid double toggle. iOS: pointermove works; audio resume on gesture ok. Let me write CSS carefully with nice type scale and spacing. Also include ``. Final check on performance: 3 DOM opacity writes per frame + transforms — fine. Also add subtle CSS flame fallback? Not needed. Now generate code. Careful with data URI grain quotes (single quotes inside url("...")). Use %23 for #. Grain keyframes: shift by small amount. Let me write: ```css *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ background:#0a0605 radial-gradient(120% 90% at 50% 34%, #1c120a 0%, #0d0805 48%, #050302 100%); color:#ecd9b5; font-family:'Jost',sans-serif; overflow:hidden; user-select:none; } ``` overflow hidden — it's a scene, so hidden is fine here. Brand: ```css .brand{position:fixed;top:34px;left:40px;z-index:30;animation:rise 1.4s .4s both} .eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#a08a67;font-weight:400} h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.02;color:#f0dfbd;letter-spacing:.01em;margin-top:10px} h1 em{font-style:italic;color:#ffbe72;font-weight:600} ``` Status: ```css .status{position:fixed;top:40px;right:42px;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#b39c78;z-index:30;animation:rise 1.4s .55s both} .dot{width:9px;height:9px;border-radius:50%;background:#5c5248;transition:.4s} .status.burning .dot{background:#ffb45e;box-shadow:0 0 10px 2px rgba(255,150,60,.8);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{50%{opacity:.55;transform:scale(.8)}} ``` Footer bottom-left facts: ```css .facts{position:fixed;left:40px;bottom:36px;max-width:380px;z-index:30;animation:rise 1.4s .7s both} #fact{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:#bda887;transition:opacity .6s;line-height:1.5} ``` Controls bottom-right: ```css .controls{position:fixed;right:42px;bottom:34px;text-align:right;z-index:30;animation:rise 1.4s .8s both} .hint{font-size:11px;letter-spacing:.14em;color:#8d7a5f;max-width:320px;margin-left:auto;line-height:1.7;text-transform:uppercase?} ``` Hint uppercase with tracking might be too shouty; use normal case 12px letter-spacing .04em. OK normal. Buttons: ```css .btnrow{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} button{font-family:'Jost';font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#e6d3ac;background:rgba(255,180,90,.04);border:1px solid rgba(230,200,150,.25);padding:10px 18px;border-radius:2px;cursor:pointer;transition:.3s} button:hover{border-color:rgba(255,190,110,.75);color:#ffd9a0;background:rgba(255,170,80,.1);box-shadow:0 0 18px rgba(255,150,60,.18)} ``` Sharp 2px radius. Scene layer CSS as planned. Vignette: ```css #vignette{position:fixed;inset:0;pointer-events:none;z-index:22;background:radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0,0,0,.62) 100%)} ``` Darkness z-index 20; vignette 22; canvas z 12; flameGlow z 14 (above canvas, under darkness) — flameGlow mix-blend screen. Ember z 21 (above darkness 20, under vignette). UI z 30. Table z 2; roomGlow z 1; candlePos z 6; grain z 3; tableGlow z 4? tableGlow above table below candle: z 4; candle z 6. Grain above table, below candle? Filmic grain over everything (below darkness). Set z 8 (above candle) with blend overlay — affects candle too — good. Now JS constants: candle bottom 11vh; flame anchor near top of candle, ~ H - 11vh - (~420px). At 900 height: 900-99-420=381 → flame at y~381, roughly center — good. For short screens (laptop 700): 700-77-420=203, flame y~203 fine. Mobile 640h: candleScale .75 → height ~315 → 640-70-315=255 ok. Now let me finalize the JS code fully, mindful of syntax. I'll write ~230 lines of JS. Also `const root=document.documentElement;` for --glow. Reduced motion: ```js const RM=matchMedia('(prefers-reduced-motion: reduce)').matches; ``` If RM: no grain animation, lower emission, no parallax, no dust drift? Keep dust static. Simple tweaks. Let me write the spawn functions using the global anchor. One more: click to relight also flare; blow-out cooldown so immediate swipe doesn't immediately re-blow? blowCooldown used for swipe; click toggle free. Space handler: `if(e.code==='Space'){e.preventDefault(); lit?blowOut():relight();}` blowOut signature (dir) — click no dir: default random sign. statusUI(on): statusEl.classList.toggle('burning',on); statusText.textContent=on?'burning':'out'; btnBlow click → toggle; blur(). Initial: statusUI(false). Initial darkness opacity .8; roomGlow 0. Then relight at 1s. Now write flame axis attraction using anchor.x — but if parallax moves, anchor.x=baseAnchor.x+px ✔ matches wick. Also flame y anchor: anchor.y = wick top +2. Ember position: anchor.x, anchor.y+3. OK, and small detail: `#candleSheen` and pool highlight use var(--glow): ```css #candleSheen{opacity:calc(var(--glow)*1)} .pool::after{opacity:var(--glow)} ``` Set --glow each frame. Also holder specular: .cuprim::after highlight opacity var(--glow). Finalize numbers and write code. Also don't forget canvas pointer-events:none so hover works over buttons. Dust draw color: use S_EMBER sprite low alpha → warm dot. Size 4-9. Potential issue: `mix-blend-mode:screen` on flameGlow over dark background — works. Grain data URI: construct carefully: ``` background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); ``` OK. Write everything. Also `aria` labels on buttons, role none. Add `

and <link>. Let me write out the code block, mentally compiling as I go for syntax errors. JS gotchas: template literals inside style strings fine. Ensure no stray `<` in JS inside HTML (comparison operators fine in HTML5 but avoid `</script` pattern). Write it. ```js (function(){ "use strict"; const cv=document.getElementById('fx'),ctx=cv.getContext('2d'); const flameGlow=document.getElementById('flameGlow'), roomGlow=document.getElementById('roomGlow'), tableGlow=document.getElementById('tableGlow'), dark=document.getElementById('darkness'), emberEl=document.getElementById('emberDot'), sheen... (use --glow instead), candlePos=document.getElementById('candlePos'), wickEl=document.getElementById('wick'), statusBox=document.getElementById('status'), statusText=document.getElementById('statusText'), btnBlow=document.getElementById('btnBlow'), btnSound=document.getElementById('btnSound'), factEl=document.getElementById('fact'); const root=document.documentElement; const RM=matchMedia('(prefers-reduced-motion: reduce)').matches; let W=0,H=0,DPR=1; let baseAnchor={x:0,y:0},anchor={x:0,y:0}; let px=0,py=0,tx=0,ty=0; function resize(){ DPR=Math.min(window.devicePixelRatio||1,2); W=innerWidth;H=innerHeight; cv.width=W*DPR;cv.height=H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0); px=py=0; candlePos.style.transform='translateX(-50%)'; const r=wickEl.getBoundingClientRect(); baseAnchor={x:r.left+r.width/2,y:r.top+3}; initDust(); } ``` initDust clears and refills. Sprites as functions. State variables; loop. Full code will be written in the answer directly; keep an eye on variable ordering. Blow cooldown variable blowCD=0. pointermove handler as planned, with `anchor` (updated each frame). Swipe blow uses performance.now(). Let me write frame(): ```js function frame(now){ requestAnimationFrame(frame); const dt=Math.min((now-last)/1000,0.05); last=now; t+=dt; ... } requestAnimationFrame(n=>{last=n;requestAnimationFrame(frame)}); ``` Simpler: initialize last=performance.now() and start rAF(frame). Compute flick, intensity, wind, light, emberOp, --glow, DOM writes, emission, particle update, render. Render order: ```js ctx.clearRect(0,0,W,H); // dust ctx.globalCompositeOperation='lighter'; each dust draw // smoke ctx.globalCompositeOperation='source-over'; smoke // flame + sparks ctx.globalCompositeOperation='lighter'; flames, sparks ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over'; ``` OK. Let me write the answer now. No mention of iframe. Short intro sentence. One more consideration: click anywhere toggles — also when user clicks Sound button, guard via closest('button'). ✔ Also add keydown listener for Space. Facts initial textContent = facts[0]. Status pulse: `.status.burning .dot` animation. Let me write the final CSS media queries: @media(max-width:640px){ .brand{left:22px;top:22px} h1{font-size:34px} .status{right:22px;top:26px} .facts{left:22px;bottom:20px;max-width:52vw} #fact{font-size:14px} .controls{right:22px;bottom:18px} .hint{display:none}? Keep small: max-width:40vw;font-size:10px #candleScale{transform:scale(.72);transform-origin:bottom center} } candleScale default no transform. Bottom of candle: candlePos{bottom:10vh}. Table height 26vh; candle within table region visually (base at 10vh, table top at 26vh) → candle base above table top line → rests on surface ✔. Ground shadow below base. OK — I think we're ready. Also include title "Candlelight — a living flame". Double check flame emission while flare big: emission up to (120+90*1)=210/s ok. Also intensity used in flameGlow scale. Let me write it all. </think> Here's a living candle — the flame is a real particle simulation that flickers, leans away from your cursor, and can be blown out (sweep across it, click it, or press Space). Relight it and the room warms back up, complete with smoke, drifting embers, and dust in the light. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Candlelight — a living flame</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet"> <style> *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ background:#050302 radial-gradient(120% 90% at 50% 34%, #1c120a 0%, #0d0805 48%, #050302 100%); color:#ecd9b5;font-family:'Jost',sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none; } /* ---------- room ---------- */ #roomGlow{position:fixed;inset:-20%;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(55% 45% at 50% 42%, rgba(255,150,60,.20), rgba(180,90,30,.07) 45%, transparent 70%);} #table{position:fixed;left:0;right:0;bottom:0;height:26vh;z-index:2; background:linear-gradient(180deg,#241609,#150d06 40%,#0a0603); box-shadow:inset 0 1px 0 rgba(255,200,120,.12);} #table::after{content:'';position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(90deg, transparent 0 208px, rgba(0,0,0,.38) 208px 211px);} #tableGlow{position:fixed;left:50%;bottom:1vh;transform:translateX(-50%);z-index:4;pointer-events:none; width:min(72vw,780px);height:24vh;mix-blend-mode:screen;opacity:0; background:radial-gradient(50% 50% at 50% 52%, rgba(255,170,80,.34), rgba(255,120,40,.12) 55%, transparent 75%);} /* ---------- candle ---------- */ #candlePos{position:absolute;left:50%;bottom:10vh;z-index:6;transform:translateX(-50%);transform-origin:bottom center;will-change:transform} #candleScale{display:flex;flex-direction:column;align-items:center} #candle{position:relative;width:92px;height:292px;z-index:1; border-radius:46px 46px 8px 8px / 14px 14px 6px 6px; background: linear-gradient(90deg, rgba(30,15,5,.6), rgba(255,214,140,.20) 18%, rgba(255,236,190,.34) 50%, rgba(110,62,22,.22) 82%, rgba(15,8,3,.65)), linear-gradient(180deg,#ffe6b4 0%,#f2cf95 9%,#d9ae72 32%,#a97e4b 60%,#59402a 86%,#241708 100%); box-shadow:inset 0 -18px 26px rgba(0,0,0,.55);} #candleSheen{position:absolute;inset:-4px -8px;border-radius:inherit;pointer-events:none;opacity:var(--glow,0); background:radial-gradient(130% 55% at 50% -6%, rgba(255,196,104,.55), rgba(255,170,80,.12) 45%, transparent 65%);} .rim{position:absolute;top:-11px;left:0;width:92px;height:22px;border-radius:50%; background:radial-gradient(closest-side,#ffeec4,#ecc98e 58%,#b98d54 92%,#8f6a3c);} .pool{position:absolute;top:-7px;left:7px;width:78px;height:14px;border-radius:50%;overflow:hidden; background:radial-gradient(closest-side,#ffe1a0,#e0b271 62%,#b3874c);} .pool::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:var(--glow,0); background:radial-gradient(42% 60% at 50% 40%, rgba(255,244,200,.9), rgba(255,190,100,.25) 60%, transparent 75%);} .wick{position:absolute;top:-25px;left:50%;width:5px;height:27px;margin-left:-2.5px; background:linear-gradient(180deg,#080503 55%,#241812);border-radius:3px 3px 2px 2px; transform:rotate(4deg);transform-origin:bottom center;} .drip{position:absolute;top:-9px;border-radius:6px 6px 9px 9px;z-index:2; background:linear-gradient(180deg,#f8e0ae,#d3a768 62%,#b98a4e); box-shadow:inset -2px 0 3px rgba(80,40,10,.4), inset 2px 1px 2px rgba(255,240,200,.45);} .drip::after{content:'';position:absolute;bottom:-4px;left:-1px;width:calc(100% + 2px);height:10px;border-radius:50%; background:linear-gradient(180deg,#ecc78d,#c39557);} .d1{left:13px;width:13px;height:66px} .d2{right:16px;width:11px;height:38px} .d3{left:40px;width:9px;height:20px;opacity:.9} /* brass holder */ #holder{display:flex;flex-direction:column;align-items:center;margin-top:-10px} .cuprim{width:158px;height:18px;border-radius:50%;z-index:3;position:relative; background:linear-gradient(90deg,#513410,#caa04c 28%,#ffe9a8 50%,#b98a3c 72%,#3c2609); box-shadow:0 2px 4px rgba(0,0,0,.45);} .cuprim::after{content:'';position:absolute;left:22%;top:2px;width:34%;height:5px;border-radius:50%; background:rgba(255,246,214,.85);filter:blur(1px);opacity:var(--glow,0);} .cup{width:146px;height:34px;margin-top:-8px; border-radius:10px 10px 48px 48px / 10px 10px 26px 26px; background:linear-gradient(90deg,#2e1c07,#7a4f16 14%,#d9ab55 40%,#ffedb0 50%,#c08c36 62%,#5c3a10 86%,#241505); box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 -7px 9px rgba(0,0,0,.38);} .bead{width:36px;height:15px;border-radius:50%;margin-top:-3px; background:linear-gradient(90deg,#3a2408,#a87b2e 30%,#ffe6a0 50%,#9a6d24 72%,#2e1c06);} .stem{width:18px;height:60px;margin-top:-3px; background:linear-gradient(90deg,#3a2408,#a87b2e 30%,#ffe6a0 50%,#9a6d24 72%,#2e1c06);border-radius:8px;} .base{width:204px;height:24px;border-radius:50%;margin-top:-6px; background:linear-gradient(90deg,#241505,#6e4514 18%,#d5a552 42%,#ffedb0 50%,#bd8c3a 62%,#5c3a10 86%,#1c1004); box-shadow:inset 0 2px 3px rgba(255,240,200,.5);} .groundShadow{width:270px;height:26px;border-radius:50%;margin-top:-13px; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent);} /* ---------- light & atmosphere ---------- */ #fx{position:fixed;inset:0;z-index:21;pointer-events:none} #flameGlow{position:fixed;left:0;top:0;width:430px;height:430px;z-index:14;pointer-events:none; mix-blend-mode:screen;opacity:0;will-change:transform,opacity; background:radial-gradient(closest-side, rgba(255,200,110,.55), rgba(255,140,50,.22) 42%, transparent 72%);} #darkness{position:fixed;inset:0;z-index:20;pointer-events:none;background:#030509;opacity:.8} #emberDot{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:50%;z-index:23;pointer-events:none;opacity:0; background:radial-gradient(circle,#fff3d0,#ff8a2a 70%); box-shadow:0 0 10px 3px rgba(255,110,30,.85), 0 0 26px 8px rgba(255,80,10,.35);} #vignette{position:fixed;inset:0;z-index:22;pointer-events:none; background:radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0,0,0,.66) 100%);} .grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:45;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); animation:grain 8s steps(6) infinite;} @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}} /* ---------- type & UI ---------- */ .brand{position:fixed;top:34px;left:40px;z-index:30;animation:rise 1.4s .45s both} .eyebrow{font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:#a08a67} h1{font-family:'Cormorant Garamond',serif;font-weight:500;margin-top:10px;line-height:1.02;letter-spacing:.01em; font-size:clamp(34px,4.6vw,60px);color:#f0dfbd} h1 em{font-style:italic;font-weight:600;color:#ffbe72} .status{position:fixed;top:42px;right:42px;z-index:30;display:flex;align-items:center;gap:10px; font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#b39c78;animation:rise 1.4s .6s both} .dot{width:9px;height:9px;border-radius:50%;background:#57503f;transition:background .5s, box-shadow .5s} .status.burning .dot{background:#ffb45e;box-shadow:0 0 12px 3px rgba(255,150,60,.85);animation:pulse 1.5s ease-in-out infinite} @keyframes pulse{50%{opacity:.5;transform:scale(.78)}} .facts{position:fixed;left:40px;bottom:36px;z-index:30;max-width:400px;animation:rise 1.4s .75s both} #fact{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;line-height:1.5;color:#bda887;transition:opacity .6s} .controls{position:fixed;right:42px;bottom:32px;z-index:30;text-align:right;animation:rise 1.4s .9s both} .hint{font-size:12px;font-weight:300;letter-spacing:.05em;line-height:1.7;color:#8d7a5f;max-width:330px;margin-left:auto} .btnrow{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} button{font-family:'Jost',sans-serif;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase; color:#e6d3ac;background:rgba(255,180,90,.04);border:1px solid rgba(230,200,150,.25);border-radius:2px; padding:10px 18px;cursor:pointer;transition:border-color .3s,color .3s,background .3s,box-shadow .3s} button:hover{border-color:rgba(255,190,110,.8);color:#ffd9a0;background:rgba(255,170,80,.1);box-shadow:0 0 20px rgba(255,150,60,.2)} button:active{transform:translateY(1px)} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(max-width:640px){ .brand{left:22px;top:22px} .status{right:22px;top:26px} .facts{left:22px;bottom:18px;max-width:46vw} #fact{font-size:13px} .controls{right:22px;bottom:16px} .hint{max-width:44vw;font-size:10px} #candleScale{transform:scale(.72);transform-origin:bottom center} } </style> </head> <body>  <div id="roomGlow"></div> <div id="table"></div> <div id="tableGlow"></div>  <div id="candlePos"> <div id="candleScale"> <div id="candle"> <div id="candleSheen"></div> <div class="rim"></div> <div class="pool"></div> <div class="drip d1"></div> <div class="drip d2"></div> <div class="drip d3"></div> <div class="wick" id="wick"></div> </div> <div id="holder"> <div class="cuprim"></div> <div class="cup"></div> <div class="bead"></div> <div class="stem"></div> <div class="base"></div> <div class="groundShadow"></div> </div> </div> </div>  <div id="flameGlow"></div> <div id="darkness"></div> <canvas id="fx"></canvas> <div id="emberDot"></div> <div id="vignette"></div> <div class="grain"></div>  <header class="brand"> <div class="eyebrow">No. 01 · Beeswax & Wick</div> <h1>The Living<br><em>Flame</em></h1> </header> <div class="status" id="status"><span class="dot"></span><span id="statusText">unlit</span></div> <footer> <div class="facts"><p id="fact"></p></div> <div class="controls"> <p class="hint">Sweep your cursor through the flame to blow it out — click anywhere, or press space, to snuff & relight.</p> <div class="btnrow"> <button id="btnBlow" aria-label="Blow out or relight the candle">Relight</button> <button id="btnSound" aria-label="Toggle crackle sound">Sound · off</button> </div> </div> </footer> <script> (function(){ "use strict"; var cv=document.getElementById('fx'), ctx=cv.getContext('2d'); var flameGlow=document.getElementById('flameGlow'), roomGlow=document.getElementById('roomGlow'), tableGlow=document.getElementById('tableGlow'), dark=document.getElementById('darkness'), emberDot=document.getElementById('emberDot'), candlePos=document.getElementById('candlePos'), wickEl=document.getElementById('wick'), statusBox=document.getElementById('status'), statusText=document.getElementById('statusText'), btnBlow=document.getElementById('btnBlow'), btnSound=document.getElementById('btnSound'), factEl=document.getElementById('fact'), root=document.documentElement; var RM=window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ---------- sprites ---------- */ function sprite(stops){ var c=document.createElement('canvas'); c.width=c.height=64; var g=c.getContext('2d'), gr=g.createRadialGradient(32,32,0,32,32,32); for(var i=0;i<stops.length;i++) gr.addColorStop(stops[i][0],stops[i][1]); g.fillStyle=gr; g.fillRect(0,0,64,64); return c; } var S_CORE =sprite([[0,'rgba(255,255,245,1)'],[.35,'rgba(255,236,180,.85)'],[1,'rgba(255,190,90,0)']]), S_MID =sprite([[0,'rgba(255,214,120,.95)'],[.4,'rgba(255,160,60,.6)'],[1,'rgba(255,110,20,0)']]), S_OUT =sprite([[0,'rgba(255,140,50,.8)'],[.5,'rgba(230,80,20,.35)'],[1,'rgba(160,30,5,0)']]), S_BLUE =sprite([[0,'rgba(150,190,255,.9)'],[.5,'rgba(80,120,255,.4)'],[1,'rgba(40,60,200,0)']]), S_SMOKE=sprite([[0,'rgba(152,142,136,.5)'],[.6,'rgba(122,114,110,.18)'],[1,'rgba(100,95,92,0)']]), S_EMBER=sprite([[0,'rgba(255,240,200,1)'],[.4,'rgba(255,160,70,.7)'],[1,'rgba(255,80,20,0)']]); /* ---------- state ---------- */ var W=0,H=0,DPR=1, t=0,last=performance.now(); var lit=false, light=.05, flare=0, ember=0, smokeT=0, gust=0; var wind=0, impulse=0, blowCD=0; var emitAcc=0, smokeAcc=0; var px=0,py=0,tx=0,ty=0; var baseAnchor={x:0,y:0}, anchor={x:0,y:0}; var flames=[], smokes=[], sparks=[], dust=[]; function resize(){ DPR=Math.min(window.devicePixelRatio||1,2); W=window.innerWidth; H=window.innerHeight; cv.width=W*DPR; cv.height=H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0); px=py=0; candlePos.style.transform='translateX(-50%)'; var r=wickEl.getBoundingClientRect(); baseAnchor={x:r.left+r.width/2, y:r.top+3}; dust.length=0; var n=RM?18:42; for(var i=0;i<n;i++) dust.push({ x:Math.random()*W, y:Math.random()*H*.85, sp:3+Math.random()*8, tw:.5+Math.random()*1.5, ph:Math.random()*6.28, r:.6+Math.random()*1.6 }); } window.addEventListener('resize',resize); resize(); /* ---------- fire logic ---------- */ function blowOut(dir){ if(!lit) return; lit=false; ember=1.25; smokeT=1.7; gust=(dir||((Math.random()<.5)?-1:1))*3.2; blowCD=performance.now(); for(var i=0;i<12;i++) flames.push({ x:anchor.x, y:anchor.y-6, vx:gust*(55+Math.random()*70)+(Math.random()-.5)*60, vy:-(20+Math.random()*70), life:.3+Math.random()*.3, age:0, size:12+Math.random()*10, blue:false, ph:0 }); ui(false); soundBed(false); } function relight(){ if(lit) return; lit=true; flare=1; smokeT=0; ui(true); soundBed(true); } function ui(on){ statusBox.classList.toggle('burning',on); statusText.textContent=on?'burning':'out'; btnBlow.textContent=on?'Blow out':'Relight'; } /* ---------- input ---------- */ var pX=null,pT=0; window.addEventListener('pointermove',function(e){ tx=e.clientX/W-.5; ty=e.clientY/H-.5; var now=performance.now(); if(pX!==null){ var dtm=Math.max(now-pT,4), vx=(e.clientX-pX)/dtm*1000; var dx=e.clientX-anchor.x, dy=e.clientY-anchor.y; var near=Math.max(0,1-Math.hypot(dx,dy*.8)/320); impulse=Math.max(-3,Math.min(3, impulse+vx*0.0009*near)); if(lit && Math.abs(vx)>2100 && Math.hypot(dx,dy)<120 && now-blowCD>650) blowOut(Math.sign(vx)); } pX=e.clientX; pT=now; }); window.addEventListener('click',function(e){ if(e.target.closest('button')) return; lit?blowOut():relight(); }); window.addEventListener('keydown',function(e){ if(e.code==='Space'){ e.preventDefault(); lit?blowOut():relight(); } }); btnBlow.addEventListener('click',function(){ lit?blowOut():relight(); this.blur(); }); /* ---------- optional crackle sound ---------- */ var AC=null, master=null, soundOn=false; function setupAudio(){ AC=new (window.AudioContext||window.webkitAudioContext)(); var len=AC.sampleRate*2, buf=AC.createBuffer(1,len,AC.sampleRate), ch=buf.getChannelData(0), l=0; for(var i=0;i<len;i++){ l=(l+0.02*(Math.random()*2-1))/1.02; ch[i]=l*3.2; } var src=AC.createBufferSource(); src.buffer=buf; src.loop=true; var f=AC.createBiquadFilter(); f.type='bandpass'; f.frequency.value=760; f.Q.value=.7; master=AC.createGain(); master.gain.value=0; src.connect(f); f.connect(master); master.connect(AC.destination); src.start(); setInterval(function(){ if(!soundOn||!lit||!AC) return; var tt=AC.currentTime, g=master.gain; g.setTargetAtTime(.012+.02+Math.random()*.05, tt, .008); g.setTargetAtTime(.012, tt+.03+Math.random()*.05, .09); },110); } function soundBed(on){ if(!AC) return; master.gain.setTargetAtTime(on&&soundOn?.012:0, AC.currentTime, .4); } btnSound.addEventListener('click',function(){ soundOn=!soundOn; if(!AC) setupAudio(); if(AC.state==='suspended') AC.resume(); soundBed(lit); this.textContent='Sound · '+(soundOn?'on':'off'); this.blur(); }); /* ---------- facts ---------- */ var facts=[ "The blue base of a flame is its hottest district — close to 1,400 °C.", "A candle flame flickers around ten times a second, stirred by its own rising heat.", "Beeswax burns cleaner and brighter than any other traditional wax.", "The dark halo around the wick is vaporised wax, waiting to ignite.", "Until the 1820s, nearly every candle was poured or dipped by hand.", "A single steady candle gives roughly one candela — the unit is named for it." ]; var fi=0; factEl.textContent=facts[0]; setInterval(function(){ factEl.style.opacity=0; setTimeout(function(){ fi=(fi+1)%facts.length; factEl.textContent=facts[fi]; factEl.style.opacity=1; },620); },9000); /* ---------- particles ---------- */ function spawnFlame(){ var blue=Math.random()<.22; flames.push({ x:anchor.x+(Math.random()-.5)*10, y:anchor.y+(blue?4:0)+(Math.random()-.5)*4, vx:(Math.random()-.5)*8, vy:-(blue?26:52)-Math.random()*46, life:blue?.32+Math.random()*.2:.55+Math.random()*.5, age:0, size:blue?9+Math.random()*6:16+Math.random()*14, blue:blue, ph:Math.random()*6.28 }); } function spawnSmoke(){ smokes.push({ x:anchor.x+(Math.random()-.5)*6, y:anchor.y-4, vx:(Math.random()-.5)*10, vy:-28-Math.random()*22, life:1.8+Math.random()*1.6, age:0, size:10+Math.random()*10, ph:Math.random()*6.28 }); } /* ---------- main loop ---------- */ function frame(now){ requestAnimationFrame(frame); var dt=Math.min((now-last)/1000,.05); last=now; t+=dt; /* flicker & wind */ var flick=.8+.10*Math.sin(t*9.4)+.05*Math.sin(t*23.1+1.3)+.05*Math.sin(t*3.7+.6)+.03*Math.sin(t*41); flick+=Math.min(Math.abs(wind)*.05,.1); var intensity=Math.max(.15,flick)+flare*.9; flare*=Math.exp(-dt*2.4); gust*=Math.exp(-dt*3); impulse*=Math.exp(-dt*2.2); var sway=.35*Math.sin(t*.7)+.25*Math.sin(t*.23+2); var windT=(lit?sway*.5:sway*.15)+impulse+gust; wind+=(windT-wind)*Math.min(1,dt*5); /* light level */ light+=((lit?1:0)-light)*Math.min(1,dt*(lit?4:1.6)); var glow=light*(.55+.45*flick)+flare*.4; root.style.setProperty('--glow',Math.min(1,glow).toFixed(3)); /* ember */ if(!lit) ember*=Math.exp(-dt*.55); var emberOp=lit?(.3+.55*flick)*Math.min(1,light*2)+flare*.4:ember; /* parallax */ if(!RM){ px+=((tx*16)-px)*Math.min(1,dt*4); py+=((ty*9)-py)*Math.min(1,dt*4); } candlePos.style.transform='translateX(-50%) translate('+px.toFixed(2)+'px,'+py.toFixed(2)+'px) rotate('+(px*.05).toFixed(2)+'deg)'; anchor.x=baseAnchor.x+px; anchor.y=baseAnchor.y+py; /* emission */ if(lit){ emitAcc+=dt*(120+90*flare)*(.8+.4*flick)*(RM?.6:1); while(emitAcc>=1){ emitAcc--; spawnFlame(); } if(Math.random()<dt*1.1 && !RM) sparks.push({ x:anchor.x+(Math.random()-.5)*8, y:anchor.y-10, vx:(Math.random()-.5)*30+wind*40, vy:-140-Math.random()*120, life:.5+Math.random()*.5, age:0, size:2+Math.random()*2.5 }); } if(smokeT>0){ smokeT-=dt; smokeAcc+=dt*46; while(smokeAcc>=1){ smokeAcc--; spawnSmoke(); } } /* update dust */ for(var i=dust.length-1;i>=0;i--){ var d=dust[i]; d.y-=d.sp*dt; d.x+=Math.sin(t*d.tw+d.ph)*3*dt+wind*2*dt; if(d.y<-10){ d.y=H+10; d.x=Math.random()*W; } } /* update smoke */ for(i=smokes.length-1;i>=0;i--){ var s=smokes[i]; s.age+=dt; if(s.age>=s.life){ smokes.splice(i,1); continue; } var sp=s.age/s.life; s.vy-=8*dt; s.vx+=wind*90*dt*(.3+sp); s.x+=s.vx*dt+Math.sin(t*2.2+s.ph)*14*dt*sp; s.y+=s.vy*dt; } /* update flames */ for(i=flames.length-1;i>=0;i--){ var p=flames[i]; p.age+=dt; if(p.age>=p.life){ flames.splice(i,1); continue; } var pr=p.age/p.life; var axis=anchor.x+wind*pr*pr*44; p.vx+=(axis-p.x)*3.4*dt; p.vx*=Math.exp(-dt*1.6); p.vy-=(70+60*intensity)*dt*(p.blue?.3:1); p.x+=p.vx*dt+Math.sin(t*11+p.ph)*4*dt*(1-pr); p.y+=p.vy*dt; } /* update sparks */ for(i=sparks.length-1;i>=0;i--){ var k=sparks[i]; k.age+=dt; if(k.age>=k.life){ sparks.splice(i,1); continue; } k.vy+=140*dt; k.vx+=wind*200*dt; k.x+=k.vx*dt; k.y+=k.vy*dt; } /* ---- render ---- */ ctx.clearRect(0,0,W,H); var j,q,a,sz; ctx.globalCompositeOperation='lighter'; /* dust */ for(j=0;j<dust.length;j++){ q=dust[j]; a=(.10+.16*Math.pow(Math.sin(t*q.tw*1.7+q.ph),2))*light; if(a<=.004) continue; ctx.globalAlpha=a; sz=q.r*3; ctx.drawImage(S_EMBER,q.x-sz,q.y-sz,sz*2,sz*2); } ctx.globalCompositeOperation='source-over'; /* smoke */ for(j=0;j<smokes.length;j++){ s=smokes[j]; sp=s.age/s.life; a=.5*(1-sp)*Math.min(1,s.age/.12); a*=.25+.75*Math.max(light,.18); ctx.globalAlpha=a; sz=s.size*(1+sp*2.6); ctx.drawImage(S_SMOKE,s.x-sz,s.y-sz,sz*2,sz*2); } ctx.globalCompositeOperation='lighter'; /* flame */ var aScale=lit?.75+.35*flick:1; for(j=0;j<flames.length;j++){ p=flames[j]; pr=p.age/p.life; var spr=p.blue?S_BLUE:(pr<.3?S_CORE:pr<.68?S_MID:S_OUT); a=(1-pr)*(pr<.12?pr/.12:1)*(p.blue?.55:1); ctx.globalAlpha=Math.min(1,a)*aScale; sz=p.size*(p.blue?1-pr*.6:1-pr*.72)*(1+flare*.3); ctx.drawImage(spr,p.x-sz,p.y-sz,sz*2,sz*2); } for(j=0;j<sparks.length;j++){ /* sparks */ k=sparks[j]; ctx.globalAlpha=Math.max(0,1-k.age/k.life)*light; sz=k.size*2.4; ctx.drawImage(S_EMBER,k.x-sz,k.y-sz,sz*2,sz*2); } ctx.globalAlpha=1; ctx.globalCompositeOperation='source-over'; /* ---- DOM light layers ---- */ flameGlow.style.opacity=Math.min(1,light*(.5+.5*flick)+flare*.5)*.9; flameGlow.style.transform='translate('+(anchor.x+wind*10)+'px,'+(anchor.y-34)+'px) translate(-50%,-50%) scale('+(0.85+.25*flick+flare*.5).toFixed(3)+')'; roomGlow.style.opacity=light*(.55+.45*flick); tableGlow.style.opacity=light*(.45+.55*flick)*.85; dark.style.opacity=Math.max(0,(1-light)*.8-flare*.15); emberDot.style.opacity=Math.min(1,emberOp); emberDot.style.transform='translate('+(anchor.x-3.5)+'px,'+(anchor.y-1)+'px)'; } requestAnimationFrame(function(n){ last=n; requestAnimationFrame(frame); }); /* light the candle shortly after arrival */ setTimeout(relight, 900); })();

The LivingFlame

The Living
Flame

candel fire test