From 0f836db72fdcd23e33409ffe696fcbfbe93b8065 Mon Sep 17 00:00:00 2001 From: iamtoruk Date: Thu, 16 Jul 2026 05:11:10 -0700 Subject: [PATCH] fix(app): flame mark is the real menubar flame MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the rejected hand-traced silhouette with Bootstrap Icons' fire path (MIT, embedded with license note) — the flame.fill-style teardrop with the inner tongue — filled with the menubar BurnFlame's actual Ember gradient from the Swift theme (#f0a070 > #e8774a > #c9521d > #8b3e13, bottom to top), not the brighter accent ramp. Flicker hook moves to the whole mark (single compound path). Also: .splash-word snapped to var(--fs-kpi). --- app/renderer/components/FlameMark.tsx | 55 ++++++++++++++------------- app/renderer/styles/plain.css | 9 ++--- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/app/renderer/components/FlameMark.tsx b/app/renderer/components/FlameMark.tsx index 24c565c..b9fb549 100644 --- a/app/renderer/components/FlameMark.tsx +++ b/app/renderer/components/FlameMark.tsx @@ -1,46 +1,47 @@ import { useId, useMemo } from 'react' -import { motionClass, motionEnabled } from '../lib/motion' +import { motionEnabled } from '../lib/motion' + +// Flame silhouette: Bootstrap Icons `fire` (MIT License, © The Bootstrap Authors, +// https://github.com/twbs/icons/blob/main/icons/fire.svg). A filled teardrop +// flame whose tip curls right, with a small inner negative-space tongue at the +// bottom center -- the closest MIT-licensed match to the menubar's SF Symbol +// `flame.fill`. Path embedded verbatim; only the fill is swapped for the brand +// gradient. +const FLAME_PATH = + 'M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15' /** - * Hand-authored brand flame: an orange body tongue over a lighter inner tongue, - * traced to match the menubar mark. Shared between the launch splash (large) and - * the sidebar (small). `live` gives the inner tongue an extremely subtle idle - * flicker in the sidebar; its phase is randomized once per mount so a row of - * flames never metronomes. All motion is gated by motionEnabled(). + * Brand flame mark, mirroring the menubar's `BurnFlame`. The vertical gradient + * reproduces that view's Ember-preset stops (glow -> light -> base -> deep, from + * base to tip). Shared between the launch splash (large) and the sidebar (small). + * `live` gives the whole mark an all-but-imperceptible idle flicker in the + * sidebar; its phase is randomized once per mount so a row of flames never + * metronomes. All motion is gated by motionEnabled(). */ export function FlameMark({ size = 20, live = false }: { size?: number; live?: boolean }) { const uid = useId() - const body = `fm-body-${uid}` - const core = `fm-core-${uid}` + const grad = `fm-grad-${uid}` // Random negative delay so the loop starts mid-cycle at a different point each // mount. Computed once; only takes effect when the flicker class is present. const flickerStyle = useMemo(() => ({ animationDelay: `-${(Math.random() * 4 + 1).toFixed(2)}s` }), []) - const coreClass = live ? motionClass('fm-core', 'fm-flicker') : 'fm-core' + const flicker = live && motionEnabled() return ( -