// Three BreathingVisualizer variants — each a pure function of
// { amplitude, phase, accentH, size }. Amplitude (0..1) drives "fullness",
// phase is the string label. Shared contract so they're drop-in swappable.
// ── Circle ───────────────────────────────────────────────────────────
// Classic glowing orb. Two layered rings (gas + core) + a soft halo.
// The halo fades on exhale; the core gets a subtle inner shadow on hold.
function VizCircle({ amplitude = 0, phase = 'inhale', accentH = 200, size = 280, dark = true }) {
const min = 0.42, max = 1.0;
const s = min + amplitude * (max - min);
const haloAlpha = 0.18 + amplitude * 0.32;
const ringAlpha = dark ? 0.85 : 0.7;
const coreColor = `oklch(0.78 0.08 ${accentH})`;
const glowColor = `oklch(0.78 0.1 ${accentH})`;
return (
);
}
// ── Geometric (square + orbiting dot) ───────────────────────────────
// A true square that breathes in size with amplitude, and a pacer dot
// that traces its perimeter — one full lap per breathing cycle. The
// phase determines which edge the dot is on, so a user can match the
// dot to their breath. Intended for "focus" patterns.
function VizGeometric({ amplitude = 0, phase = 'inhale', phaseT = 0, accentH = 200, size = 280, dark = true }) {
const min = 0.55, max = 1.0;
const s = min + amplitude * (max - min);
const half = 100 * s;
const stroke = `oklch(0.78 0.08 ${accentH})`;
const strokeFaint = `oklch(0.78 0.08 ${accentH} / 0.2)`;
const fill = `oklch(0.78 0.08 ${accentH} / ${0.06 + amplitude * 0.1})`;
// Dot walks the square perimeter. Map phase → which edge:
// inhale → top edge (left→right)
// holdIn → right edge (top→bottom)
// exhale → bottom edge (right→left)
// holdOut → left edge (bottom→top)
const edges = {
inhale: (t) => [-half + 2 * half * t, -half],
holdIn: (t) => [ half, -half + 2 * half * t],
exhale: (t) => [ half - 2 * half * t, half],
holdOut: (t) => [-half, half - 2 * half * t],
};
const pos = (edges[phase] || edges.inhale)(Math.min(1, Math.max(0, phaseT)));
return (
);
}
// ── Flower ───────────────────────────────────────────────────────────
// Six-petaled bloom. Each petal's length tracks amplitude; petals fan
// slightly on inhale and close on exhale. Soft, organic — default for
// "calm" patterns.
function VizFlower({ amplitude = 0, phase = 'inhale', accentH = 200, size = 280, dark = true }) {
const a = amplitude;
const petalL = 42 + a * 68; // length grows with amplitude
const petalW = 22 + a * 14;
const fan = 0 + a * 6; // extra angular spread
const petalFill = `oklch(0.78 0.08 ${accentH} / ${0.22 + a * 0.22})`;
const petalStroke = `oklch(0.82 0.08 ${accentH} / 0.45)`;
const core = `oklch(0.88 0.06 ${accentH})`;
const petals = [];
const N = 6;
for (let i = 0; i < N; i++) {
const ang = (360 / N) * i + (i % 2 === 0 ? fan : -fan);
petals.push(
);
}
return (
);
}
// ── Balloon (Kids mode) ─────────────────────────────────────────────
// Playful balloon that inflates on inhale and deflates on exhale. The knot
// + string hang below and sway slightly with amplitude. Uses the active
// accent hue for the balloon body with a brighter highlight on one shoulder
// and a faint halo for warmth. Default visualizer when the active profile
// is kind='kid'.
//
// Amplitude drives scale 0.55 → 1.05 (bigger max than other viz so the
// balloon really feels like it fills on a deep inhale). The pear/teardrop
// silhouette comes from a cubic path; it scales uniformly from the knot
// as the anchor so the balloon visually "floats up" as it inflates.
function VizBalloon({ amplitude = 0, phase = 'inhale', phaseT = 0, accentH = 200, size = 280, dark = true }) {
const a = Math.max(0, Math.min(1, amplitude));
const s = 0.55 + a * 0.5; // 0.55 .. 1.05
// Slight bob during holds so a static balloon doesn't look frozen.
const bob = (phase === 'holdIn' || phase === 'holdOut')
? Math.sin(phaseT * Math.PI * 2) * 3
: 0;
const sway = Math.sin((phaseT || 0) * Math.PI) * 2 * (phase === 'holdOut' ? 1 : 0.5);
const body = `oklch(0.78 0.12 ${accentH})`;
const bodyDeep = `oklch(0.62 0.12 ${accentH})`;
const highlight = `oklch(0.96 0.04 ${accentH})`;
const halo = `oklch(0.85 0.12 ${accentH})`;
const stringCol = dark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.55)';
// Anchor: the knot is fixed near y=60 in unscaled coords, so as the body
// scales, the bottom stays put and the top grows upward — feels like the
// balloon is filling, not just zooming.
// Balloon body path: a rounded teardrop. Centered at (0,0) with knot at
// bottom; scaling happens around (0, 60).
return (
);
}
// ── Dragon (kids: Dragon Breath) ───────────────────────────────────────
// Dragon-HEAD silhouette in profile (not the full body — too small to read
// the whole shape). Yellow/orange flames stream from the mouth and react
// to the breath phase:
// - Exhale → flames emerge at the mouth and drift outward, growing
// - Inhale → flames appear far from the mouth and travel back IN,
// shrinking as they approach (air being drawn into the
// dragon — visual reverse of the exhale).
// - HoldIn → no flames (held breath inside the dragon)
// - HoldOut → small fading puff at the far edge
// Body picks up the user's accent so themes still apply, but the flames
// stay warm yellow/orange (oklch hue ~70°) so they read as fire across
// every accent + dark/light combo.
function VizDragon({ amplitude = 0, phase = 'inhale', phaseT = 0, accentH = 200, size = 280, dark = true }) {
const a = Math.max(0, Math.min(1, amplitude));
// Head bobs gently during holds so a static silhouette doesn't look frozen.
const bob = (phase === 'holdIn' || phase === 'holdOut')
? Math.sin(phaseT * Math.PI * 2) * 2
: 0;
const body = `oklch(0.78 0.12 ${accentH})`;
const bodyDeep = `oklch(0.55 0.12 ${accentH})`;
const highlight = `oklch(0.96 0.04 ${accentH})`;
const dark2 = dark ? 'oklch(0.18 0.01 245)' : 'oklch(0.25 0.02 245)';
const flameYel = 'oklch(0.92 0.18 95)'; // bright yellow core
const flameOrng = 'oklch(0.72 0.22 55)'; // orange falloff
// breathT drives the flame trail position 0→1 (mouth→far) and size 0→1.
// exhale : 0→1 (puffing OUT, growing)
// inhale : 1→0 (drawn IN from far, shrinking) — same path, reversed
// holdIn : 0 (held inside, hidden)
// holdOut : 1 (lingering at far edge, fading)
let breathT = 0;
let flameAlpha = 0;
if (phase === 'exhale') { breathT = phaseT; flameAlpha = 1; }
else if (phase === 'inhale') { breathT = 1 - phaseT; flameAlpha = 1; }
else if (phase === 'holdOut') { breathT = 1; flameAlpha = Math.max(0, 1 - phaseT); }
else { breathT = 0; flameAlpha = 0; }
// Three flame puffs trail behind one another. flameOffset shifts each one
// back along the breath axis so they form a stream, not a single blob.
const renderFlame = (flameOffset, baseSize) => {
const t = Math.max(0, Math.min(1, breathT - flameOffset));
const opacity = flameAlpha * (1 - t * 0.4);
if (opacity <= 0.02) return null;
// Mouth at x=58, far edge at x=132. Flame y aligns with mouth (y=14).
const x = 58 + t * 74;
// Size grows with t — small at mouth, big at far edge.
const r = baseSize * (0.4 + t * 0.9);
return (
);
};
return (
);
}
// Dispatcher — one component to drive them by name. Derives the `dark` prop
// from the theme object if a caller didn't pass one explicitly. Keeps
// existing call sites that pass `dark` directly working unchanged, while
// letting most call sites just pass `theme` and have light/dark sort itself.
function BreathingVisualizer({ style = 'circle', dark, theme, ...rest }) {
const resolvedDark = (typeof dark === 'boolean')
? dark
: (typeof window.bfIsLightTheme === 'function' ? !window.bfIsLightTheme(theme) : true);
const props = { ...rest, dark: resolvedDark };
if (style === 'geometric') return ;
if (style === 'flower') return ;
if (style === 'balloon') return ;
if (style === 'dragon') return ;
return ;
}
Object.assign(window, { BreathingVisualizer, VizCircle, VizGeometric, VizFlower, VizBalloon, VizDragon });