Skip to content

0.5.12

Choose a tag to compare

View all tags
@hjunhuh hjunhuh released this 08 Oct 05:12
· 55 commits to main since this release
v0.5.12
4b9f46e

cartcut v0.5.12

The centerpiece of this release is the graphic layer: HTML and CSS laid out by Chromium and drawn into the canvas, with 28 built-in typography graphics and inline programs you can write and check from the editor. This release also brings a phone layout for the web demo, rounded corners on image and video clips, and resizable timeline tracks.

Graphic layer

A new element type that renders sanitised HTML into the composition.

Foundations

  • Graphic HTML is sanitised into a node tree and its CSS filtered before anything is drawn.
  • HTML typography laid out by Chromium and drawn into the canvas.
  • parse5 and postcss added as direct dependencies.
  • An html-in-canvas spike measured the approach in this Electron build first.

In the editor

  • The graphic element on the timeline, with programs on effects and transitions.
  • A text clip can be turned into a typography graphic.
  • A graphic inspector, with diagnostics for an inline program.
  • A Graphics tab in the Fx panel, with inline programs and HTML graphic presets.
  • 28 built-in graphics covering the typography matrix.
  • Graphic icons updated, and the preset picker removed for inline programs.

Rendering and playback

  • Programs resolved per element, and graphics drawn by the renderer.
  • A preview session and a graphic probe for live preview.
  • Animation seeking reworked, with a sentinel for completion.
  • Rasterization and painting logic reworked.
  • Graphic preview background adjusted for readability.

Project and tooling

  • Project schema 3 applies only while a graphic exists, alongside graphic files.
  • Programs can be written, checked, placed and saved from Claude Code.
  • Typography and the graphic contract documented in the editing skill, with the graphic layer's invariants recorded in CLAUDE.md.

Rounded corners

  • Rounded corners on image and video clips.
  • A cornerRadius keyframe track.
  • A Corners section in the options panel for image and video.
  • cornerRadius exposed through update_clip and get_clip.
  • cornerRadiusOff added to control the visibility of the rounded corner controls.

Mobile web demo (#63)

  • Phone layout and touch input for the web demo.
  • Path resolution for web builds reworked for demo compatibility.
  • Native context menu guard for web.
  • Play button centered on the transport row.

Timeline

  • Track height management with resizing.
  • Track management functions, with tests.
  • Edge scrolling while dragging clips.
  • Drag handling reworked for both mouse and touch.
  • Lift pulse effect on clips during a hold interaction.
  • Notes on the timeline.
  • New trackedEndMs for an accurate timeline end.

Renderer and effects

  • Shader effects updated and blur reworked across the preview.
  • Rotation added to GrayImage, with re-anchoring.
  • Rotation handle positions and grip sizes adjusted for consistency.
  • Images and videos are now decorated on their box rather than under it.
  • Animator implemented with its controls.

Editor

  • Speed control components unified, with ramp handling extended.
  • Option panel controls for clip manipulation improved.
  • Prompter speed preferences and scrolling.
  • Mute for the audio preview.
  • ended added to MediaHandle, with playback handling extended around it.
  • Extensions panel extended with new features and styling.
  • Dropdown button state in the preview managed with classMap.
  • Silence button reworked in the caption panel.
  • Unused countdown styles removed from the overlay and the countdown simplified.

Fixes

  • Zoom strength ranges adjusted for better depth calculation.
  • Font family and path escaped where ensureFontFace writes them.
  • Demo link corrected in the README files.

Docs

  • README updated.

Full Changelog: v0.5.11...v0.5.12

Assets 11
Loading