24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:T74b,// A track keys readings and view depths at moments; thermalAt folds it into the // one moment a frame draws. Scrub the moment: the chip heats, the fans spin up, // the view goes inside, then the fans bring the heat back down. The frame draws // exactly what the moment says, so a scrub, a play and a film are the same frame. const TRACK: ThermalKey[] = [ { at: 0, depth: 1, reading: { parts: { cpu: 46, gpu: 42, battery: 30 }, surface: 29, fans: [0], }, }, { at: 3000, reading: { parts: { cpu: 92, gpu: 78, battery: 33 }, surface: 34, fans: [0.15], }, }, { at: 3500, depth: 2 }, { at: 6000, reading: { parts: { cpu: 88, gpu: 74, battery: 34 }, surface: 33, fans: [1], }, }, { at: 10000, reading: { parts: { cpu: 61, gpu: 55, battery: 32 }, surface: 30, fans: [0.6], }, }, ] const END = 10000 function Scrub() { const [ms, setMs] = React.useState(4500) const moment = thermalAt(TRACK, ms) if (!moment) throw new Error("thermal demo: the track has a reading at 0") return (

setMs(Number(e.target.value))} aria-label="moment on the track" className="w-full" />

{(ms / 1000).toFixed(2)}s · cpu {moment.parts.cpu?.toFixed(1)} °C · skin{" "} {moment.surface?.toFixed(1)} °C · fans{" "} {Math.round((moment.fans[0] ?? 0) * 100)}% · depth{" "} {moment.depth.toFixed(2)}

) } 26:T5042,

// A track keys readings and view depths at moments; thermalAt folds it into the
// one moment a frame draws. Scrub the moment: the chip heats, the fans spin up,
// the view goes inside, then the fans bring the heat back down. The frame draws
// exactly what the moment says, so a scrub, a play and a film are the same frame.
const TRACK: ThermalKey[] = [
  {
    at: 0,
    depth: 1,
    reading: {
      parts: { cpu: 46, gpu: 42, battery: 30 },
      surface: 29,
      fans: [0],
    },
  },
  {
    at: 3000,
    reading: {
      parts: { cpu: 92, gpu: 78, battery: 33 },
      surface: 34,
      fans: [0.15],
    },
  },
  { at: 3500, depth: 2 },
  {
    at: 6000,
    reading: {
      parts: { cpu: 88, gpu: 74, battery: 34 },
      surface: 33,
      fans: [1],
    },
  },
  {
    at: 10000,
    reading: {
      parts: { cpu: 61, gpu: 55, battery: 32 },
      surface: 30,
      fans: [0.6],
    },
  },
]
const END = 10000

function Scrub() {
  const [ms, setMs] = React.useState(4500)
  const moment = thermalAt(TRACK, ms)
  if (!moment) throw new Error("thermal demo: the track has a reading at 0")
  return (
    <div className="space-y-4">
      <MacbookFrame thermal={{ ...moment, t: ms / 1000 }}>
        <div className="size-full bg-zinc-900" />
      </MacbookFrame>
      <input
        type="range"
        min={0}
        max={END}
        step={50}
        value={ms}
        onChange={(e) => setMs(Number(e.target.value))}
        aria-label="moment on the track"
        className="w-full"
      />
      <p className="font-mono text-xs text-muted-foreground">
        {(ms / 1000).toFixed(2)}s · cpu {moment.parts.cpu?.toFixed(1)} °C · skin{" "}
        {moment.surface?.toFixed(1)} °C · fans{" "}
        {Math.round((moment.fans[0] ?? 0) * 100)}% · depth{" "}
        {moment.depth.toFixed(2)}
      </p>
    </div>
  )
}

<Scrub />

20:["$","div","track",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]