mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-10-31 19:40:54 +00:00
d81a86dd02
Measured design audit fixes, one type ladder and header, zero clipping at 900 to 1680, light-theme contrast, Lucide icons, shared Escape, plurals and provider names, motion tokens with zero refresh shift, black frame with rounded content card, grouped monochrome sidebar with collapse, two-layer card system on every screen, Overview gauge, sparkline cards and chart grid, wallpaper onboarding, Windows fixes. Every number diffed identical to main on a fixed range; 1,032 app tests passing.
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { useMemo } from 'react'
|
|
|
|
import { motionEnabled } from '../lib/motion'
|
|
import flame from '../assets/onboarding-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}
|
|
height={size}
|
|
alt=""
|
|
aria-hidden="true"
|
|
draggable={false}
|
|
/>
|
|
)
|
|
}
|