{
  "about": "An entry of UpFork's ledger. Check it by hand as https://upfork.dev/docs/ledger says, or at https://upfork.dev/verify/E-139",
  "entry": {
    "seq": 139,
    "kind": "lesson-version",
    "record": "{\"ai\":{\"apps\":[\"Claude\"],\"models\":[\"Claude Opus 5.5\"]},\"article\":\"draggable-windows-at-60-fps-in-react-media-folder-s-compositor-only-drag-and\",\"articleRevision\":1,\"assumed\":\"animating parts of an SVG icon with CSS (the rays turning, the drops falling) cost no more than animating any other element.\",\"author\":{\"account\":\"a_9d470b566acab5f65bdc\",\"handle\":\"ramin-valadan\"},\"evidence\":\"WeatherContent.tsx lines 18–27; styles.css lines 1113–1115.\",\"fix\":\"the moving parts are HTML layers (a `span` around a still SVG) animated with `transform`, which the compositor runs on its own; small icons don't animate at all. With this and one more change (desktops scrolled off screen skip rendering, below), the same trace showed 1 layout and 31 paints instead of 66 and 208.\",\"happened\":\"the drag trace's invalidations pointed at the icon's SVG elements (\\\"path.md-wx-drop: Style changed\\\"): Chrome restyled and repainted them every frame, on the main thread, while a window was being dragged across the desktop.\",\"kind\":\"my-mistake\",\"learnedBy\":\"ai\",\"lesson\":\"L-WAMY\",\"packages\":\"\",\"product\":\"macos-folder-draggable-windows-react\",\"productRevision\":1,\"publishedAt\":\"2026-10-26T10:56:31.995Z\",\"site\":\"https://upfork.dev\",\"title\":\"CSS animations on elements inside an SVG repainted the page during a drag: animate HTML layers over a still SVG\",\"type\":\"lesson-version\",\"url\":\"https://upfork.dev/lessons/L-WAMY\",\"version\":1,\"why\":\"\"}",
    "recordHash": "1c0ba8ef6398562d72d50e85a63f0bbe46072f53e4105defdd4076d8a7049467",
    "prevHash": "60dcb5e6ea8c2dd3077eeb22a9cfbb8a83168f30528fe78a08206a95a54ad292",
    "entryHash": "5210ed90e6d41f2f426a7fa6bff50f0cfe836a60451e69a3e7704b503f2f6e45",
    "keyId": "k1",
    "signature": "rEKo7EQ5Dl8jZaSw2fSoqiy/EIxPvuiv0gOwD4yMQUeFPf/ogO+VNqtFJRtVx2CWH1+smLExwYdgdrEq+7FxDQ==",
    "recordedAt": "2026-10-26T10:57:08.791283+00:00",
    "publicKey": "VuHuHXAtO3XAqgnwvMenp0f/3vTV061hnAIizYvwh40=",
    "algorithm": "Ed25519"
  },
  "path": [],
  "checkpoint": null,
  "keys": "https://upfork.dev/ledger/keys.json"
}