Files
hyperframes/packages/studio
Vance IngallsandClaude Opus 5 c9c300f806 feat(core): name every preset node for the job it is doing
A peaking filter is "Peaking EQ" wherever it appears, so Clean Voice showed the
same two words at node 02 (cutting mud at 250 Hz) and node 04 (lifting clarity
at 3 kHz) with nothing to tell them apart. Reading down the rack, an author
could not follow what had been done for them.

`HfAudioFxNode.label` carries the job name, presets set it per node, and the
rack shows it in place of the effect's own name. Clean Voice now reads: Remove
Rumble, Reduce Mud, Even Out Loudness, Add Clarity, Peak Ceiling.

FIXES A BUG IN a533d1677: `parseAudioFxChain` and `serializeAudioFxChain` were
dropping `fromPreset` entirely — only `fromCarve` survived the attribute. So a
preset could not find its own nodes after a reload: re-applying would stack a
second copy instead of replacing, and the rack would lose the grouping. The
round-trip test compared only node TYPES, so it passed the whole time. It now
compares type, id, fromPreset and label, and fails if any is dropped.

Three tests, all falsified. Re-introducing the fromPreset drop fails the
round-trip; dropping label from the serializer fails it too; and giving two
nodes in one preset the same name fails the no-repeats check, which is the
invariant this whole change exists to hold. Identical CONSECUTIVE nodes are
exempt from that check — a stacked 24 dB/oct pair is one stage built from two
biquads, not two jobs.

Core 1688 -> 1690, studio 3664 -> 3665.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-12 00:47:56 -07:00
..
2026-08-03 22:48:00 -07:00
…

@hyperframes/studio

Browser-based composition editor UI for Hyperframes. Provides a visual timeline, code editor, and live preview for building video compositions.

Install

npm install @hyperframes/studio

What it does

The studio is a React application with:

  • Visual timeline — drag, resize, and arrange elements on tracks
  • Code editor — edit HTML and GSAP scripts with CodeMirror (syntax highlighting, autocomplete)
  • Live preview — see changes in real time as you edit
  • Composition inspector — view and modify element properties

Development

The studio is embedded in the hyperframes preview command. To develop the studio UI itself:

cd packages/studio
bun run dev        # Start Vite dev server
bun run build      # Build for production
bun run typecheck  # Type-check

Tech stack

  • React 18/19, Zustand (state management)
  • CodeMirror 6 (editor)
  • Tailwind CSS (styling)
  • Vite (bundler)
  • Phosphor Icons

Documentation

Full documentation: hyperframes.heygen.com/packages/studio