Cumulative Layout Shift - playhead movement - performance improvement

[PlkMarudny]

What does this PR do?

Uses css transform() to move the playhead to improve CLS instead of .left - as per browser reported metrics/

Closes #

Type of change

• Bug fix
• New feature (transition / preset / text anim / effect / API)
• Docs
• Refactor / internal

How was it verified?

• npm test passes (CI runs it on Node 18 / 20 / 22)
• Added or updated a test in test/ if this touches the MCP surface, the REST API, or the SVG library
• Opened the editor and confirmed the change in preview
• Confirmed the change in an export (fast or realtime), if it affects rendering
• Updated CLAUDE.md / README.md if the schema, props, or API changed

Checklist

• No new runtime dependencies added
• Preview and export render identically (single compositor)
• Commits are focused and messages are descriptive

[ronak-create]

Heads up — this branch carries #70's keyframe work, not just the playhead change:

$ git log --oneline main..pr-71
6a058eb feat: use transform() for playhead movement
98bc4d8 feat: remove keyframe on label Shift+Click
32ab1e5 feat: allow keyframe value editing

98bc4d8 and 32ab1e5 are the first two commits of #70, before its five follow-ups. #70 is now merged, so this will conflict in app.js, index.html, style.css and README.md — and taking this branch's side would regress:

• playheadOverClip(), the guard that refuses keyframe writes when the playhead is off the clip (79f9fa5, 62fa68f)
• the inspSyncStamp / inspPropGen gate. This branch calls syncInspectorPlayhead() unconditionally every rAF tick (app.js:6140), and that function does two querySelectorAll sweeps over the inspector. Merged Editable keyframes #70 gates it on a stamp so it only runs when something actually changed. Worth calling out here specifically, given the PR is about per-frame layout cost.
• refreshAudioHoldFor() on volume / pan / speed writes
• the refusal return values on setAnimProp / toggleKfAtPlayhead
• test/keyframes.test.js (660 lines) — this branch has no tests

The playhead change itself is good and fully independent. 6a058eb is 17 lines across app.js, index.html and style.css, and it cherry-picks onto current main cleanly — I tried it, npm test gives 94/94.

Could you reset the branch to main and cherry-pick just 6a058eb? That also drops live.json, which is runtime cache rather than source (.gitignore covers it as of #70).

[PlkMarudny]

Done, sorry for that

[ronak-create]

Thanks — but I don't think the push landed. The branch head here is still 6a058eb with all three commits:

6a058eb feat: use transform() for playhead movement
98bc4d8 feat: remove keyframe on label Shift+Click
32ab1e5 feat: allow keyframe value editing

and live.json is still in the diff. GitHub still reports the branch as conflicting with main.

If you reset locally but haven't force-pushed, this should do it:

git checkout playhead-fix
git fetch origin
git reset --hard origin/main
git cherry-pick 6a058eb
git push --force-with-lease

That should leave a single 17-line commit across app.js, index.html and style.css, and drop live.json. Ping me once it's up and I'll take another look.