mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00

Files

T

zooqueen 75094e0d60 frames: publish the toolchain as @hanzo/frames

@hanzo/frame is taken by the hero video primitive — one full-bleed video
element — which has held that name on npm since it shipped. This repo is the
video toolchain: a CLI, a renderer, a studio, a player. Plural is what it is,
so the CLI publishes as @hanzo/frames and the workspace packages follow it
(@hanzo/frames-core, @hanzo/frames-engine, and the rest).

The binary stays `frames`, and now actually ships. The manifest mapped it to
bin/frames.mjs while the file on disk was bin/hyperframes.mjs, so a global
install produced no working command.

The paths that name a package to fetch were pointing elsewhere. The update
check read registry.npmjs.org/frames, a different author's package, and the
npm, bun and pnpm installers would have pulled it over the CLI; the render
image installed the upstream hyperframes; scaffolded projects and the docs
pinned the unscoped name. All of them now name @hanzo/frames.

2026-08-13 18:10:14 -07:00

1.2 KiB

Raw Permalink Blame History

@hanzo/frames-studio

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

Install

npm install @hanzo/frames-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 frames 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: frames.hanzo.ai/packages/studio

@hanzo/frames-core — types and parsers used by the editor
frames — CLI that serves the studio via frames preview

1.2 KiB Raw Permalink Blame History