@dopaminefx/effect-heartburst 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Heartburst (the love / like / favorite success effect) — the DATA-DRIVEN
+ * panel factory shim.
+ *
+ * Everything that isn't the shader or the Canvas2D draw is DATA in
+ * heartburst.dope.json, interpreted by the shared backbone:
+ *   - the mood→params mapping + the warm OKLCH golden-angle palette (the loader),
+ *   - the per-frame lub-dub/burst logic (`tempo.frame` — amp + the
+ *     presence/beat/burst/flash extras, delta-0 with the old hand hooks),
+ *   - the shadow height (`render.shadowHeightFrac`), the dpr-scaled halftone
+ *     cell (`render.pass`), the panel wiring (`render.panel`), the no-snap
+ *     clock (`render.config.stepping: "none"`), and `tempo.reducedMotion`,
+ *   - the uniform `binding` contract (the `u<Name>` list + exceptions).
+ *
+ * The genuinely code-shaped parts that stay JS are the GLSL
+ * (heartburst-shader.ts — the single source the MSL + Kotlin shaders are
+ * generated from) and the Canvas2D panel draw (heartburst-renderer.ts).
+ */
+export type { HeartburstRenderParams } from "./heartburst-renderer.js";
+export declare const heartburst: import("@dopaminefx/core").EffectFactory<import("@dopaminefx/core").PassParams>;
+export default heartburst;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAUH,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAMvE,eAAO,MAAM,UAAU,iFAItB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,28 @@
+/**
+ * Heartburst (the love / like / favorite success effect) — the DATA-DRIVEN
+ * panel factory shim.
+ *
+ * Everything that isn't the shader or the Canvas2D draw is DATA in
+ * heartburst.dope.json, interpreted by the shared backbone:
+ *   - the mood→params mapping + the warm OKLCH golden-angle palette (the loader),
+ *   - the per-frame lub-dub/burst logic (`tempo.frame` — amp + the
+ *     presence/beat/burst/flash extras, delta-0 with the old hand hooks),
+ *   - the shadow height (`render.shadowHeightFrac`), the dpr-scaled halftone
+ *     cell (`render.pass`), the panel wiring (`render.panel`), the no-snap
+ *     clock (`render.config.stepping: "none"`), and `tempo.reducedMotion`,
+ *   - the uniform `binding` contract (the `u<Name>` list + exceptions).
+ *
+ * The genuinely code-shaped parts that stay JS are the GLSL
+ * (heartburst-shader.ts — the single source the MSL + Kotlin shaders are
+ * generated from) and the Canvas2D panel draw (heartburst-renderer.ts).
+ */
+import { HEARTBURST_FRAGMENT_SRC, HEARTBURST_VERTEX_SRC, } from "./heartburst-shader.js";
+import { drawHeartburstFrame } from "./heartburst-renderer.js";
+import { parseDope, registerDopePanelEffect } from "@dopaminefx/core";
+import doc from "./heartburst.dope.json";
+const DOPE = parseDope(doc);
+// Registers the EffectFactory AND the bundled "heartburst" program (so
+// loadEffect() can bind a host-authored heartburst variant with no code).
+export const heartburst = registerDopePanelEffect(DOPE, { vertex: HEARTBURST_VERTEX_SRC, fragment: HEARTBURST_FRAGMENT_SRC }, drawHeartburstFrame);
+export default heartburst;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAIzC,MAAM,IAAI,GAAG,SAAS,CAAC,GAAa,CAAC,CAAC;AAEtC,uEAAuE;AACvE,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,uBAAuB,CAC/C,IAAI,EACJ,EAAE,MAAM,EAAE,qBAAqB,EAAE,QAAQ,EAAE,uBAAuB,EAAE,EACpE,mBAAmB,CACpB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@dopaminefx/effect-heartburst",
+  "version": "0.1.0",
+  "description": "Heartburst — a lub-dub heart-burst love/favorite effect for Dopamine.",
+  "keywords": [
+    "dopamine-effect"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "./src/index.ts",
+    "./dist/index.js"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@dopaminefx/core": "^0.1.0"
+  },
+  "license": "MIT",
+  "author": "10in30",
+  "homepage": "https://github.com/10in30/dopamine#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/10in30/dopamine.git",
+    "directory": "effects/heartburst/web"
+  },
+  "bugs": {
+    "url": "https://github.com/10in30/dopamine/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/heartburst-renderer.ts

@@ -0,0 +1,289 @@
+/**
+ * Heartburst Canvas2D PANEL drawing.
+ *
+ * The crisp, vector-y parts of Heartburst — the big swelling hero heart and the
+ * flurry of little hearts that fly out on the burst — are drawn into an OFFSCREEN
+ * Canvas2D each frame (cheap: a couple dozen filled paths) and uploaded as the
+ * "panel" texture; the fragment shader (heartburst-shader.ts) adds the soft warm
+ * bloom, the gloss highlight, the halftone blush, the noir↔pop styling, the beat
+ * flash and casts the warm light + soft shadow.
+ *
+ * Both the hero and the little hearts are a single parametric HEART CURVE (the
+ * classic `16sin³t` cardioid-ish heart) traced as a Canvas2D path, so the form
+ * is true vector geometry the GPU can't easily do.
+ *
+ * Panel channel encoding consumed by the shader:
+ *   R = hero heart FILL   ·  G = INK (outline) + gloss seed  ·  B = burst hearts FILL
+ */
+
+import { easeOutCubic, clamp01, mulberry32, type PanelDraw } from "@dopaminefx/core";
+
+// ---------------------------------------------------------------------------
+// DRAW-side tempo. The per-frame UNIFORM logic (amp/presence/beat/burst/flash)
+// is DATA — `tempo.frame` in heartburst.dope.json, evaluated by the core
+// frame-expr evaluator (pinned delta-0 against these functions by the tests).
+// The same curves are ALSO needed by the panel GEOMETRY (the hero swells with
+// the beat, the little hearts fly out with the burst), and panel geometry is
+// code by design — so the draw-side copies live here, next to the draw.
+//
+//   life 0.00 .. 0.30  : LUB-DUB — two beats; the second tucked behind the first
+//   life 0.30 .. 1.00  : BURST + AFTERGLOW — little hearts fly out, hero fades
+// ---------------------------------------------------------------------------
+
+/** Fraction of life occupied by the lub-dub beat phase before the burst. */
+export const HEARTBEAT_PHASE = 0.3;
+
+/**
+ * A single soft beat pulse centred at `center` (in life units) with half-width
+ * `width`: rises fast, eases back down. Returns 0..1 (peak 1 at `center`).
+ */
+function beatPulse(t: number, center: number, width: number): number {
+  const x = (t - center) / width;
+  if (x <= -1 || x >= 1) return 0;
+  const lobe = 0.5 + 0.5 * Math.cos(x * Math.PI);
+  return x < 0 ? Math.pow(lobe, 0.7) : Math.pow(lobe, 1.4);
+}
+
+/**
+ * Heart SCALE multiplier over normalized life. A resting 1.0 with two beats
+ * superimposed, then it settles to rest through the burst and gently shrinks as
+ * it fades. `strength` scales beat swell; `doubleBeat` blends single → lub-dub.
+ */
+export function heartbeatScale(life: number, strength = 1, doubleBeat = 1): number {
+  const t = clamp01(life);
+  const lub = beatPulse(t, 0.1, 0.1);
+  const dub = beatPulse(t, 0.21, 0.075) * 0.62 * clamp01(doubleBeat);
+  const beat = Math.max(lub, dub);
+  const sag = t > HEARTBEAT_PHASE ? 0.06 * easeOutCubic((t - HEARTBEAT_PHASE) / (1 - HEARTBEAT_PHASE)) : 0;
+  return 1 + beat * 0.42 * strength - sag;
+}
+
+/**
+ * The amplitude/energy envelope (→ uAmp + shadow strength). Tracks the beats
+ * during the lub-dub then a bright flare at the burst, decaying through the
+ * afterglow. NOTE: shipped as DATA (`tempo.frame.amp`); this copy exists only
+ * so the tests can pin the data delta-0 against the readable formula.
+ */
+export function heartburstEnvelope(life: number, strength = 1, doubleBeat = 1): number {
+  const t = clamp01(life);
+  if (t <= 0 || t >= 1) return 0;
+  const lub = beatPulse(t, 0.1, 0.1);
+  const dub = beatPulse(t, 0.21, 0.075) * 0.62 * clamp01(doubleBeat);
+  const beats = Math.max(lub, dub) * 0.9 * strength;
+  const b = burstProgress(life);
+  const flare = b * Math.pow(1 - b, 1.1) * 2.4;
+  return clamp01(Math.max(beats, flare * (0.7 + 0.3 * strength)));
+}
+
+/**
+ * Burst progress 0..1 over the post-beat phase: 0 until the dub finishes, then
+ * eases out to 1 as the little hearts fly out and fade.
+ */
+export function burstProgress(life: number): number {
+  const t = clamp01(life);
+  if (t <= HEARTBEAT_PHASE) return 0;
+  return easeOutCubic((t - HEARTBEAT_PHASE) / (1 - HEARTBEAT_PHASE));
+}
+
+/**
+ * Overall panel presence over normalized life: a quick snap-in, a proud hold
+ * through the beats + burst, then a clean fade at the tail so the panel clears.
+ */
+export function heartPresence(life: number): number {
+  const t = life < 0 ? 0 : life > 1 ? 1 : life;
+  if (t < 0.04) return t / 0.04;
+  if (t < 0.8) return 1;
+  const fade = 1 - (t - 0.8) / 0.2;
+  return Math.pow(Math.max(0, fade), 1.4);
+}
+
+/** Resolved render params Heartburst's panel + shader consume. */
+export interface HeartburstRenderParams {
+  durationMs: number;
+  palette: unknown;
+  style: number;            // = whimsy (photoreal heart 0 -> flat cel sticker 1)
+  heartburstSeed: number;   // per-fire scatter offset
+  heartScale: number;       // hero heart size as fraction of min canvas dim
+  burstCount: number;       // number of little hearts in the flurry
+  burstSpread: number;      // how far the little hearts fly (fraction of min dim)
+  inkWeight: number;        // outline weight (device-independent base)
+  beatStrength: number;     // beat swell magnitude (intensity)
+  doubleBeat: number;       // 0 single gentle pulse -> 1 full lub-dub
+  dotSize: number;          // halftone cell size (dpr-scaled in the shader pass)
+  exposure: number;         // cast-light gain (shader uniform)
+  glow: number;             // soft bloom (shader uniform)
+  gloss: number;            // specular gloss (shader uniform)
+  halftone: number;         // halftone blush strength (shader uniform)
+  saturation: number;       // panel saturation (shader uniform)
+}
+
+/**
+ * Trace a parametric heart of half-size `s` centred at the current origin into
+ * the given context's current path. `rot` rotates it (radians). The classic
+ * heart curve, normalized so its bounding extent ≈ `s` and the cusp points UP.
+ */
+/** Hero-heart size relative to the targeted element box (≈1.5×). See the Swift
+ * `HEARTBURST_TARGET_FILL` — keep the two in sync. */
+const HEARTBURST_TARGET_FILL = 3.6;
+
+function traceHeart(ctx: CanvasRenderingContext2D, s: number, rot: number): void {
+  const steps = 48;
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const t = (i / steps) * Math.PI * 2;
+    // x in [-16,16], y in roughly [-17,12] for the standard curve.
+    const x = 16 * Math.pow(Math.sin(t), 3);
+    const y =
+      13 * Math.cos(t) -
+      5 * Math.cos(2 * t) -
+      2 * Math.cos(3 * t) -
+      Math.cos(4 * t);
+    // Normalize to ~[-1,1] and flip Y so the lobes are at the top (canvas y-down).
+    const nx = (x / 17) * s;
+    const ny = (-y / 17) * s;
+    const cx = nx * Math.cos(rot) - ny * Math.sin(rot);
+    const cy = nx * Math.sin(rot) + ny * Math.cos(rot);
+    if (i === 0) ctx.moveTo(cx, cy);
+    else ctx.lineTo(cx, cy);
+  }
+  ctx.closePath();
+}
+
+/**
+ * Draw the offscreen panel for this frame.
+ *  - the hero heart at the current beat scale, fill in RED, outline in GREEN,
+ *    plus a gloss-highlight blob painted into GREEN that sits ON the fill (the
+ *    shader reads ink∩fill as the specular seed),
+ *  - the little burst hearts flying outward along seeded arcs, fill in BLUE.
+ *
+ * `heartScaleMul` is the lub-dub beat multiplier on the hero (1 at rest).
+ * `presence` fades the whole panel in/out.
+ */
+/**
+ * The per-frame panel draw in the generic `PanelDraw` shape — the ONE
+ * code-shaped hook the data-driven factory wires (`registerDopePanelEffect`).
+ * Computes the draw-side tempo (beat scale, presence, target span) and hands
+ * off to {@link drawHeartburstPanel}.
+ */
+export const drawHeartburstFrame: PanelDraw = (pctx, w, h, params, info) => {
+  const p = params as unknown as HeartburstRenderParams;
+  const scale = heartbeatScale(info.life, p.beatStrength, p.doubleBeat);
+  const presence = heartPresence(info.life);
+  const span = Math.min(info.targetPx.width, info.targetPx.height);
+  drawHeartburstPanel(pctx, w, h, p, scale, info.life, presence, info.dpr, info.centerPx, span);
+};
+
+export function drawHeartburstPanel(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  params: HeartburstRenderParams,
+  heartScaleMul: number,
+  life: number,
+  presence: number,
+  dpr: number,
+  center: { x: number; y: number },
+  span: number,
+): void {
+  ctx.clearRect(0, 0, w, h);
+  if (presence <= 0.001) return;
+
+  // Position the hearts on the targeted element (centre) and size them to its box
+  // (`span`), so the centrepiece matches the page element instead of the canvas.
+  const cx = center.x;
+  const cy = center.y;
+  // The hero heart reads at ~150% of the targeted element (heartScale ~0.22 ⇒
+  // heart extent ≈ 1.5× the box), clamped to the canvas so a full-page fire
+  // (target == canvas) keeps its original size. Sync w/ HeartburstPanel.swift.
+  const minDim = Math.min(span * HEARTBURST_TARGET_FILL, Math.min(w, h));
+  const seed = (params.heartburstSeed * 1000) >>> 0;
+  const rng = mulberry32(seed);
+
+  const ink = Math.max(1, params.inkWeight * dpr);
+
+  // ---------- HERO HEART (R fill, G outline + gloss seed) ------------------
+  const heroS = minDim * params.heartScale * heartScaleMul;
+  // a tiny per-fire tilt so it feels hand-placed.
+  const tilt = ((params.heartburstSeed % 1) - 0.5) * 0.12;
+
+  // As the burst takes over, the hero heart shrinks/cracks open a touch so the
+  // little hearts read as having spilled OUT of it.
+  const b = burstProgress(life);
+  const heroPresence = presence * (1 - 0.65 * b);
+
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.globalCompositeOperation = "lighter"; // additive into channels
+
+  if (heroPresence > 0.002) {
+    const heroFillA = Math.round(255 * heroPresence);
+    // FILL -> RED.
+    traceHeart(ctx, heroS, tilt);
+    ctx.fillStyle = `rgba(${heroFillA},0,0,1)`;
+    ctx.fill();
+
+    // OUTLINE -> GREEN.
+    traceHeart(ctx, heroS, tilt);
+    ctx.lineJoin = "round";
+    ctx.lineWidth = ink * 1.6;
+    ctx.strokeStyle = `rgba(0,${heroFillA},0,1)`;
+    ctx.stroke();
+
+    // GLOSS SEED -> GREEN, painted ON the fill (upper-left lobe). The shader
+    // reads ink∩fill as the specular highlight, so a soft blob here becomes the
+    // gel-heart shine. Clip to the heart so it never bleeds past the silhouette.
+    ctx.save();
+    traceHeart(ctx, heroS, tilt);
+    ctx.clip();
+    const gx = -heroS * 0.34;
+    const gy = -heroS * 0.42;
+    const gr = heroS * 0.42;
+    const grad = ctx.createRadialGradient(gx, gy, 0, gx, gy, gr);
+    grad.addColorStop(0, `rgba(0,${heroFillA},0,1)`);
+    grad.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.arc(gx, gy, gr, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
+  ctx.restore();
+
+  // ---------- BURST HEARTS (B fill) ----------------------------------------
+  // A flurry of little hearts fly outward along seeded directions, arc under a
+  // little "gravity", spin, and shrink as they go. Fully crisp vector hearts.
+  if (b > 0.001) {
+    const count = Math.max(0, Math.round(params.burstCount));
+    const maxDist = minDim * params.burstSpread;
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    for (let i = 0; i < count; i++) {
+      // deterministic per-heart launch params.
+      const ang = (i / count) * Math.PI * 2 + (rng() - 0.5) * 0.9;
+      const speed = 0.55 + rng() * 0.45;       // some fly farther
+      const spin = (rng() - 0.5) * 2.0;
+      const littleS = minDim * (0.035 + rng() * 0.04) * params.heartScale * 1.6;
+      // staggered launch so they don't all leave at once.
+      const stagger = rng() * 0.25;
+      const lp = Math.max(0, Math.min(1, (b - stagger) / (1 - stagger)));
+      if (lp <= 0) continue;
+      const dist = maxDist * speed * lp;
+      // arc: a parabola so they rise then fall slightly.
+      const arc = minDim * 0.10 * speed * (lp - lp * lp) * 4.0;
+      const px = cx + Math.cos(ang) * dist;
+      const py = cy + Math.sin(ang) * dist - arc;
+      // fade + shrink late in the flight.
+      const fade = 1 - Math.pow(lp, 2.2);
+      if (fade <= 0.01) continue;
+      const a = Math.round(255 * presence * fade);
+      const s = littleS * (0.6 + 0.4 * (1 - lp));
+      ctx.save();
+      ctx.translate(px, py);
+      traceHeart(ctx, s, spin * lp * Math.PI);
+      ctx.fillStyle = `rgba(0,0,${a},1)`;
+      ctx.fill();
+      ctx.restore();
+    }
+    ctx.restore();
+  }
+}

package/src/heartburst-shader.ts

@@ -0,0 +1,223 @@
+/**
+ * GLSL ES 3.00 source for **Heartburst** — Dopamine's love / like / favorite
+ * moment: a heart swells with a double-beat (lub-dub) then BURSTS into a flurry
+ * of small hearts that fly outward, arc, and fade.
+ *
+ * This is a HYBRID (Canvas2D-panel) effect. The crisp vector hearts — the big
+ * hero heart and the little burst hearts — are drawn with a parametric heart
+ * curve into an OFFSCREEN Canvas2D each frame (heartburst-renderer.ts) and
+ * handed to this shader as a single "panel" texture. The shader then does
+ * everything that wants to be procedural / screen-space:
+ *   - a soft warm BLOOM behind the heart (the love glow),
+ *   - a tight GLOSS / specular highlight on the hero heart at the photoreal end,
+ *   - the NOIR ↔ POP styling: a moody near-monochrome heart with one warm spot
+ *     color (noir) → a flat saturated cel "sticker" heart with a hard rim and
+ *     halftone blush (pop), keyed off uStyle/uSaturation,
+ *   - a hot beat FLASH that throws warm light onto the page (the cast).
+ *
+ * Everything is summed as light (canvas is black, composited via
+ * `mix-blend-mode: screen`, so black == no change, bright == cast light).
+ *
+ * Panel texture channel encoding (see heartburst-renderer.ts):
+ *   R = hero heart FILL mask  (the big swelling heart's interior)
+ *   G = INK / contour mask    (heart outline + the gloss seed highlight)
+ *   B = burst hearts FILL     (all the little flying hearts)
+ *   A = unused
+ *
+ * Pure function of uniforms → frame-perfect & cheap under SwiftShader.
+ */
+
+import {
+  GLSL_CONSTANTS,
+  GLSL_DITHER,
+  GLSL_HALFTONE,
+  GLSL_HASH,
+  GLSL_ROT2,
+  GLSL_TONEMAP_ACES,
+} from "@dopaminefx/core";
+
+export const HEARTBURST_VERTEX_SRC = /* glsl */ `#version 300 es
+out vec2 vUv;
+void main() {
+  vec2 pos = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  vUv = pos;
+  gl_Position = vec4(pos * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+export const HEARTBURST_FRAGMENT_SRC = /* glsl */ `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uPanel;     // R=heartFill G=ink B=burstFill
+uniform vec2  uResolution;    // device pixels
+uniform vec2  uOrigin;        // heart centre (the anchor), device px
+uniform float uLife;          // whole-effect progress 0..1
+uniform float uTimeS;         // elapsed seconds
+uniform float uPresence;      // panel opacity / presence 0..1
+uniform float uBeat;          // 0..1 current beat amplitude (lub-dub thump)
+uniform float uBurst;         // 0..1 burst progress (little hearts flying out)
+uniform float uFlash;         // 0..1 warm beat/burst flash amount
+uniform float uExposure;      // cast-light gain
+uniform float uGlow;          // 0..1 soft bloom radius/strength behind the heart
+uniform float uGloss;         // 0..1 specular gloss on the hero heart (photoreal)
+uniform float uHalftone;      // 0..1 Ben-Day blush dot strength (pop)
+uniform float uDotSize;       // halftone cell size in device px
+uniform float uSaturation;    // 0..1 panel color saturation (noir->pop)
+uniform float uSeed;          // per-fire hash
+uniform float uStyle;         // 0..1 photoreal/noir -> flat cel sticker (whimsy)
+uniform float uShadow;        // 0 = light pass (screen), 1 = shadow pass (multiply)
+uniform vec2  uShadowOffset;  // device-px offset of the cast silhouette
+uniform float uShadowSoft;    // penumbra softness in device px
+uniform float uShadowStrength;// 0..1 max darkening of the multiply layer
+uniform vec3  uC0;            // hero heart core color (warm red)
+uniform vec3  uC1;            // heart shade / burst color (pink/coral)
+uniform vec3  uC2;            // accent / glow / blush color
+
+${GLSL_CONSTANTS}
+${GLSL_HASH}
+${GLSL_ROT2}
+${GLSL_HALFTONE}
+${GLSL_TONEMAP_ACES}
+${GLSL_DITHER}
+
+void main(){
+  vec2 frag = vUv * uResolution;
+  vec2 res = uResolution;
+  float minDim = min(res.x, res.y);
+
+  // ---- SHADOW PASS (multiply layer) ---------------------------------------
+  // Cheap occlusion: the panel's solid forms (hero + burst fills) sampled at an
+  // offset toward the implied key light, with a small ring blur for a penumbra.
+  // White = no shadow (multiply identity); darker = cast shadow. Presence fades
+  // it with the effect.
+  if (uShadow > 0.5) {
+    vec2 px = 1.0 / res;
+    vec2 souv = vUv - uShadowOffset * px;
+    float occ = 0.0;
+    for (int i = 0; i < 8; i++) {
+      float a = float(i) / 8.0 * TAU;
+      vec2 o = vec2(cos(a), sin(a)) * uShadowSoft * px;
+      vec2 tuv = souv + o;
+      vec2 inb = step(vec2(0.0), tuv) * step(tuv, vec2(1.0));
+      float mask = inb.x * inb.y;
+      vec4 s = texture(uPanel, tuv);
+      occ += clamp(s.r + s.b, 0.0, 1.0) * mask;
+    }
+    occ /= 8.0;
+    float dark = clamp(occ * uShadowStrength, 0.0, 1.0);
+    fragColor = vec4(vec3(1.0 - dark), 1.0);
+    return;
+  }
+
+  vec2 fromC = frag - uOrigin;
+  float rad = length(fromC);
+
+  vec4 panel = texture(uPanel, vUv);
+  float heartFill = panel.r;
+  float ink = panel.g;
+  float burstFill = panel.b;
+
+  vec3 col = vec3(0.0);
+
+  // ---- SOFT BLOOM behind the heart (the love glow) ------------------------
+  // A warm radial glow centred on the heart, pulsing with the beat + flaring on
+  // the burst. Sampled as a smooth falloff so it reads as light blooming behind
+  // the form, not a hard disc. Warmer (toward uC2) as it goes pop.
+  float glowR = minDim * (0.18 + 0.30 * uGlow) * (1.0 + 0.25 * uBeat);
+  float bloom = exp(-rad / glowR);
+  float bloomAmp = (0.35 + 0.65 * uBeat) * (0.6 + 0.8 * uBurst * (1.0 - uBurst) * 3.0);
+  vec3 glowCol = mix(uC0, uC2, 0.45 + 0.3 * uSaturation);
+  col += glowCol * bloom * bloomAmp * uPresence * uGlow * uExposure * 0.9;
+
+  // ---- HERO HEART ---------------------------------------------------------
+  // The big swelling heart. A rich warm body with a vertical light->shade
+  // gradient (top catches the key light). Photoreal end: smooth gradient + a
+  // tight gloss highlight. Pop end: flatter, more saturated, with a halftone
+  // blush and a crisp rim.
+  // Vertical shading term: 1 at the top of the panel, 0 at the bottom.
+  float vshade = clamp(1.0 - vUv.y, 0.0, 1.0);
+  vec3 bodyLit  = mix(uC1, uC0, 0.35 + 0.65 * uSaturation);          // mid body
+  vec3 bodyHi   = clamp(bodyLit * 1.5 + 0.18, 0.0, 1.6);             // lit top
+  vec3 bodyLow  = bodyLit * 0.55;                                     // shaded base
+  // Photoreal: smooth top->bottom gradient. Cel: snap to two flat zones.
+  float g = smoothstep(0.15, 0.95, vshade);
+  float gCel = step(0.5, vshade);
+  float grad = mix(g, gCel, uStyle);
+  vec3 heartCol = mix(bodyLow, bodyHi, grad);
+
+  // Soft inner-rim self-shadow toward the silhouette so the form reads round
+  // (photoreal); fades out toward the flat cel sticker.
+  // (We approximate the rim from how isolated the fill is via a small blur.)
+  float edge = 0.0;
+  {
+    vec2 px = 1.0 / res;
+    for (int i = 0; i < 6; i++){
+      float a = float(i) / 6.0 * TAU;
+      edge += texture(uPanel, vUv + vec2(cos(a), sin(a)) * px * 3.0).r;
+    }
+    edge /= 6.0;
+  }
+  float rimDark = clamp((heartFill - edge), 0.0, 1.0); // bright near the outline
+  heartCol *= 1.0 - rimDark * 0.5 * (1.0 - uStyle);
+
+  // Halftone blush on the heart toward the pop end (printed sticker shading).
+  float blush = benday(frag, uDotSize, mix(0.35, 0.6, uHalftone), radians(20.0) + uSeed);
+  heartCol += (uC2 - heartCol) * blush * uHalftone * uStyle * 0.28;
+
+  col += heartCol * heartFill * uPresence * uExposure * 1.6;
+
+  // GLOSS: a tight specular highlight near the upper-left of the heart at the
+  // photoreal end (a glassy gel-heart). Seeded by the ink-channel highlight blob
+  // the renderer paints, modulated up by the beat (the heart "shines" as it
+  // thumps). Vanishes toward the flat cel end.
+  float gloss = ink * heartFill;          // ink highlight that sits ON the fill
+  float glossAmt = uGloss * (1.0 - uStyle) * (0.6 + 0.6 * uBeat);
+  col += vec3(1.0) * gloss * glossAmt * uPresence * 1.4;
+
+  // ---- BURST: the flurry of little hearts ---------------------------------
+  // Drawn fully in the panel (positions/arc/scale computed in JS for crisp
+  // vector hearts). Here we just light them — saturated warm fills with a soft
+  // self-glow, fading as they fly out (uBurst late => dimmer).
+  float burstFade = 1.0 - smoothstep(0.55, 1.0, uBurst);
+  vec3 littleCol = mix(uC1, uC2, 0.3 + 0.4 * uSaturation);
+  littleCol = clamp(littleCol * 1.25 + 0.1, 0.0, 1.5);
+  col += littleCol * burstFill * uPresence * burstFade * uExposure * 1.5;
+  // a soft sparkle bloom around the little hearts so they twinkle as they go.
+  col += littleCol * burstFill * 0.4 * burstFade * (0.5 + 0.5 * sin(uTimeS * 30.0 + uSeed));
+
+  // ---- INK / CONTOUR ------------------------------------------------------
+  // Bold outline. On a screen-blend canvas ink is the ABSENCE of light, so the
+  // contour CARVES the lit shapes (reads as a dark outline) — strongest toward
+  // the flat cel sticker (a clean black keyline), softer at the photoreal end.
+  // The gloss seed (ink ON the fill) is NOT carved (handled above as highlight).
+  float contour = ink * (1.0 - heartFill);  // outline pixels only
+  float carve = contour * uPresence * mix(0.45, 0.95, uStyle);
+  col *= (1.0 - carve);
+
+  // ---- BEAT / BURST FLASH -------------------------------------------------
+  // A warm flash that throws colored light onto the page on each thump and at
+  // the burst. Fast spike (driven by uFlash), warm core.
+  float flashFall = exp(-rad / (minDim * 0.40));
+  vec3 flashCol = mix(uC0, vec3(1.0, 0.85, 0.8), 0.4 + 0.25 * uStyle);
+  col += flashCol * flashFall * uFlash * uExposure * 1.2;
+  // tiny white-hot core at the very centre on the strongest beats.
+  float core = exp(-rad / (minDim * 0.08));
+  col += vec3(1.0, 0.92, 0.9) * core * uFlash * uBeat * 1.3;
+
+  // ---- TONE + FINISH ------------------------------------------------------
+  col = tonemapACES(col * 0.9);
+
+  // Cel posterize toward the pop/sticker end (flat printed color); leaves the
+  // dark page untouched so we don't shatter it.
+  if (uStyle > 0.001) {
+    float lit = smoothstep(0.02, 0.2, max(max(col.r, col.g), col.b));
+    vec3 q = floor(col * 4.0 + 0.5) / 4.0;
+    col = mix(col, mix(col, q, lit), uStyle * 0.7);
+  }
+
+  // Ordered dither to kill banding the screen blend reveals (faded toward cel).
+  col = ditherAdd(col, frag, uTimeS, 1.0 - uStyle * 0.7);
+
+  fragColor = vec4(max(col, 0.0), 1.0);
+}`;