mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-08-04 05:41:29 +00:00
0fa202b110
The owner supplied the final flame render; the hand-retrace is retired. Checkerboard keyed out to real alpha, composited to the Big Sur squircle (824/1024, r185, charcoal #231613) as app/build/icon.png (the electron-builder master, verified legible at 16px), and the flame-only alpha PNG becomes the in-app mark: FlameMark now renders the raster so splash, sidebar, About and dock are pixel-identical. Flicker applies to the whole mark (raster has no separable core). Stale icon.svg removed. Flame suites green in isolation; full suite re-verified before the in-flight quota batch commits.
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { useMemo } from 'react'
|
|
|
|
import { motionEnabled } from '../lib/motion'
|
|
import flame from '../assets/flame.png'
|
|
|
|
/**
|
|
* Brand flame mark: the exact approved icon art (app/build/icon.png minus the
|
|
* squircle), so the splash, sidebar, About dialog and dock icon are literally
|
|
* one image. `live` gives the mark an all-but-imperceptible idle flicker; the
|
|
* 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 }) {
|
|
// 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 flicker = live && motionEnabled()
|
|
|
|
return (
|
|
<img
|
|
className={flicker ? 'flamemark fm-flicker' : 'flamemark'}
|
|
style={flicker ? flickerStyle : undefined}
|
|
src={flame}
|
|
width={size}
|
|
height={size}
|
|
alt=""
|
|
aria-hidden="true"
|
|
draggable={false}
|
|
/>
|
|
)
|
|
}
|