{"id":50606975,"url":"https://github.com/arach/preframe","last_synced_at":"2026-06-06T00:02:50.892Z","repository":{"id":357214317,"uuid":"1235662903","full_name":"arach/preframe","owner":"arach","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-11T19:59:11.000Z","size":27801,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T21:39:23.490Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-11T14:34:47.000Z","updated_at":"2026-05-11T19:59:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/arach/preframe","commit_stats":null,"previous_names":["arach/preframe"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/arach/preframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arach%2Fpreframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arach%2Fpreframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arach%2Fpreframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arach%2Fpreframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arach","download_url":"https://codeload.github.com/arach/preframe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arach%2Fpreframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33964367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-06T00:02:50.280Z","updated_at":"2026-06-06T00:02:50.886Z","avatar_url":"https://github.com/arach.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preframe\n\n**[preframe.dev](https://preframe.dev/)** · stage the prompt, review the cut, ship the frame.\n\nPreframe is a Hudson-shelled creative workspace for staging prompts, reviewing cuts, and rendering product videos before the final frame. Mark up a take, write what you want changed, and the agent rewrites the source — whether it's a Remotion video, a Hyperframe motion graphic, a music track, or an animated logo.\n\n## What it is\n\nThree parts:\n\n- **Catalog** — every capture indexed with scenes, transcripts, vision tags, and storyboard frames. Audio tracks, animated logos, and rendered Hyperframes live alongside the videos.\n- **Reviewer** — annotate frames with timestamped rects, zooms, and general feedback. Leave feedback on music tracks and motion graphics the same way.\n- **Composer** — two engines: **Remotion** for programmatic video (TSX), and **Hyperframes** for single-file HTML/CSS/JS motion graphics. Music tracks generate from prompts. Logos animate from an SVG drop. All of it lives in the repo as source.\n\nThe agent runs the revise loop in two stages: `revise-brief` reads your notes plus the source and writes a small plan; you confirm or edit; `revise-render` rewrites the source and queues the new take. The same loop drives `logo-brief` / `logo-render` for animated logos and the music-revise flow for tracks.\n\nCompositions are text, not a timeline.\n\n## The cycle\n\n1. **Capture.** Drop a screen recording in `public/inbox/` or render a fresh composition with `bun run studio`. The catalog scanner picks it up on next build.\n2. **Review.** Open the take in the catalog detail view or the full-screen review modal. Drop annotations on the frames that need changes. Leave general notes for anything that isn't a single moment.\n3. **Revise.** Submit the notes. `revise-brief` proposes a change plan; you confirm or edit. `revise-render` rewrites the composition and queues a new job.\n4. **Ship.** Compare takes side-by-side. The catalog stages live moves: `source` → `wip` → `final`. Hand off the final MP4 or the source TSX — they always agree.\n\n## Quick start\n\n```sh\ngit clone github.com/arach/preframe \u0026\u0026 cd preframe\nbun install\nbun run dev              # catalog studio at http://localhost:3100\nbun run studio           # Remotion studio with live preview + render queue\n```\n\n## Project layout\n\n```\napp/                 Next.js app router — the catalog studio\ncatalog/             Provider + slots that fill the Hudson shell\n  PlayerContext.tsx  thin adapter over hudsonkit/player\n  slots/             LogoStudio, MusicView, VideoDetail, ReviewPlayer, etc.\nservices/jobs/       Job worker + LLM dispatch (revise-brief, revise-render,\n                     logo-brief, logo-render, generate, render)\nsrc/                 Remotion compositions, intros, project folders\n  intros/            Bundled motion intros\n  projects/          Per-project composition trees\n  Root.tsx           registers compositions for the main Studio\n  studio.logos.ts    `bun run studio:logos` — focused loadout\n  studio.templates.ts `bun run studio:templates` — focused loadout\nlib/                 Shared types and helpers\nscripts/             Catalog build + composition registry generator\npublic/              Static assets, demos, tracks, inbox, brand\ndocs/                Landing page (deployed to GitHub Pages)\nhyperframes/         Per-project Hyperframe reels (codex, evidence, work)\ntools/\n  hyperframes-toolkit/  Brand-native HTML/CSS motion-effect library\n```\n\n## Key features that landed recently\n\n- **Full media player** (`hudsonkit/player`) — single `\u003cvideo\u003e` element owned by `PlayerProvider`, plays audio too, queue with shuffle/repeat, position persistence, OS media keys via Media Session, element + Document Picture-in-Picture, global keyboard shortcuts. Extracted to `hudsonkit/player` so other apps consume the same primitive.\n- **Logo composition framework** — drag-and-drop SVG (or prompt-only), `logo-brief` synthesizes a motion plan, `logo-render` writes a complete Hyperframe HTML document. Same review-and-revise loop as video.\n- **Two-stage revise** — `revise-brief` proposes the change plan in markdown before regenerating, so you approve intent before burning render cycles.\n- **Generated compositions registry** — `bun run scripts/generate-compositions-registry.ts` scans `.compositions/\u003cid\u003e/Composition.tsx` and exposes them under a `Generated` folder in the main Remotion studio.\n\n## Stack\n\n- **Remotion** — programmatic video as React\n- **Hyperframes** — single-file HTML/CSS/JS motion graphics; the output is also the deliverable\n- **Hudson** ([hudsonkit](https://github.com/arach/hudson)) — chrome, slots, app shell, and the media player\n- **Next.js 16** — the catalog studio runtime\n- **Bun** — install, scripts, render workers\n- **Anthropic / AI SDK** — the revise loop runs against your model of choice\n\n## License\n\nPersonal project; see [LICENSE](./LICENSE) if present, otherwise rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farach%2Fpreframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farach%2Fpreframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farach%2Fpreframe/lists"}