docs: links point at hyperframes.studio, the app's new home (#6585)

* docs: links point at hyperframes.studio, the app's new home

* docs: the registry guide publishes to hyperframes.studio

* chore: format README table, regenerate the skills manifest

* docs: leave the browser editor's card wording for its own change
This commit is contained in:
Ular Kimsanov
2026-10-27 20:08:22 +00:00
committed by GitHub
parent 7fea875ede
commit 6ae7c7688c
15 changed files with 61 additions and 61 deletions
+33 -33
View File
@@ -17,10 +17,10 @@
<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
<p align="center">
<a href="https://www.hyperframes.dev/studio">Studio</a> |
<a href="https://hyperframes.studio/studio">Studio</a> |
<a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> |
<a href="https://hyperframes.heygen.com/showcase">Showcase</a> |
<a href="https://www.hyperframes.dev/">Playground</a> |
<a href="https://hyperframes.studio/">Playground</a> |
<a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> |
<a href="https://hyperframes.heygen.com/introduction">Docs</a> |
<a href="https://discord.gg/EbK98HBPdk">Discord</a>
@@ -148,57 +148,57 @@ The output is a `DESIGN.md` superset your whole toolchain can read. Atoms stay s
<table>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/biennale-yellow">Biennale Yellow</a></b>
<a href="https://hyperframes.studio/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/biennale-yellow">Biennale Yellow</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/blockframe">BlockFrame</a></b>
<a href="https://hyperframes.studio/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/blockframe">BlockFrame</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/blue-professional">Blue Professional</a></b>
<a href="https://hyperframes.studio/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/blue-professional">Blue Professional</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/bold-poster">Bold Poster</a></b>
<a href="https://hyperframes.studio/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/bold-poster">Bold Poster</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/broadside">Broadside</a></b>
<a href="https://hyperframes.studio/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/broadside">Broadside</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/capsule">Capsule</a></b>
<a href="https://hyperframes.studio/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/capsule">Capsule</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/cartesian">Cartesian</a></b>
<a href="https://hyperframes.studio/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/cartesian">Cartesian</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/cobalt-grid">Cobalt Grid</a></b>
<a href="https://hyperframes.studio/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/cobalt-grid">Cobalt Grid</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/coral">Coral</a></b>
<a href="https://hyperframes.studio/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/coral">Coral</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/creative-mode">Creative Mode</a></b>
<a href="https://hyperframes.studio/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/creative-mode">Creative Mode</a></b>
</td>
</tr>
</table>
Browse and remix them all at [hyperframes.dev/design](https://www.hyperframes.dev/design).
Browse and remix them all at [hyperframes.studio/design](https://hyperframes.studio/design).
## How It Works
@@ -242,16 +242,16 @@ Preview instantly in the browser. Render locally or in Docker. The renderer seek
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
| Piece | Status | What it does |
| ----------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------- |
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
| [hyperframes.dev](https://www.hyperframes.dev/) | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
| [frame.md](https://www.hyperframes.dev/design) | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
| Piece | Status | What it does |
| ------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------- |
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
| [hyperframes.studio](https://hyperframes.studio/) | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
| [frame.md](https://hyperframes.studio/design) | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
## Catalog
+1 -1
View File
@@ -202,7 +202,7 @@ Include:
- the item directory;
- the matching entry in `registry/registry.json`;
- regenerated Catalog output;
- a `hyperframes.dev` preview from `npx hyperframes publish`;
- a `hyperframes.studio` preview from `npx hyperframes publish`;
- when to use it, its useful duration range, and any known pitfalls.
External contributors should attach the preview MP4. A maintainer will publish
+2 -2
View File
@@ -1031,7 +1031,7 @@
},
{
"label": "Download the Studio app",
"href": "https://hyperframes.dev/studio/download?src=docs-footer"
"href": "https://hyperframes.studio/studio/download?src=docs-footer"
},
{
"label": "GitHub",
@@ -1051,7 +1051,7 @@
"primary": {
"type": "button",
"label": "Download Studio",
"href": "https://hyperframes.dev/studio/download?src=docs-navbar"
"href": "https://hyperframes.studio/studio/download?src=docs-navbar"
}
},
"redirects": [
+2 -2
View File
@@ -1,4 +1,4 @@
// Studio download links name this visitor's PostHog id (`ph_id`), so hyperframes.dev counts the download under the
// Studio download links name this visitor's PostHog id (`ph_id`), so hyperframes.studio counts the download under the
// same person as these docs' pageviews. Both sites send to one PostHog project, but each domain has its own cookie,
// so the download site cannot read this one. Mintlify runs every .js file in docs/ on every page
// (mintlify.com/docs/customize/custom-scripts). The id is added at click time only, so a copied link never carries it,
@@ -10,7 +10,7 @@
// default, in a cookie when a site configures that, so both are read.
var OPT_OUT = "__ph_opt_in_out_" + TOKEN;
// The one download address the docs link to (docs.json navbar and footer, quickstart.mdx).
var DOWNLOAD = { protocol: "https:", hostname: "hyperframes.dev", pathname: "/studio/download" };
var DOWNLOAD = { protocol: "https:", hostname: "hyperframes.studio", pathname: "/studio/download" };
var UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
function cookie(name) {
+2 -2
View File
@@ -1012,7 +1012,7 @@ editor, just playback. Same flags, `--port` defaults to 3003, plus `--proxy` /
### `publish`
Upload the project and get back a stable `hyperframes.dev` URL.
Upload the project and get back a stable `hyperframes.studio` URL.
```bash
npx hyperframes publish [dir]
@@ -1034,7 +1034,7 @@ content — so it keeps working after the CLI exits. No local server stays alive
and no tunnel is opened.
You can publish while signed out. The printed URL then carries a claim token:
whoever opens it on `hyperframes.dev` can sign in, claim the project, and keep
whoever opens it on `hyperframes.studio` can sign in, claim the project, and keep
editing in the web app.
Sign in with `npx hyperframes auth login` first when you want an owned, stable
+1 -1
View File
@@ -30,7 +30,7 @@ drawing. For Mac (Apple Silicon or Intel), Windows (64-bit Intel and AMD; not Wi
<Steps>
<Step title="Download and install">
<a href="https://hyperframes.dev/studio/download?src=docs-quickstart">Download the Studio app</a>, open it, and
<a href="https://hyperframes.studio/studio/download?src=docs-quickstart">Download the Studio app</a>, open it, and
sign in with a free HeyGen account. [Install the Studio app](/studio-app) has the steps for each system.
</Step>
<Step title="Ask for the video">
+1 -1
View File
@@ -73,7 +73,7 @@ Watch the exported file once from start to end before you send it.
- **The video was made but could not be saved to your Downloads folder**: free up space or check that the Downloads
folder exists, then export again.
- **HyperFrames could not start its built-in FFmpeg**: the app may be damaged. Reinstall it from
[hyperframes.dev/studio](https://hyperframes.dev/studio).
[hyperframes.studio/studio](https://hyperframes.studio/studio).
## Related topics
+3 -3
View File
@@ -30,7 +30,7 @@ green guide, points you to the next step along the way.
<Tab title="Mac">
<Steps>
<Step title="Download">
Go to [hyperframes.dev/studio](https://hyperframes.dev/studio) and choose **Download for macOS** (in Safari or Firefox the button is **Apple Silicon**, with an **Intel** link next to it).
Go to [hyperframes.studio/studio](https://hyperframes.studio/studio) and choose **Download for macOS** (in Safari or Firefox the button is **Apple Silicon**, with an **Intel** link next to it).
</Step>
<Step title="Install">
Open the downloaded disk image and double-click **Install HyperFrames**. The installer copies the app into
@@ -46,7 +46,7 @@ green guide, points you to the next step along the way.
<Tab title="Windows">
<Steps>
<Step title="Download">
Go to [hyperframes.dev/studio](https://hyperframes.dev/studio) and choose **Download for Windows**. You get
Go to [hyperframes.studio/studio](https://hyperframes.studio/studio) and choose **Download for Windows**. You get
`Install-HyperFrames.exe`.
</Step>
<Step title="Install it and open it">
@@ -58,7 +58,7 @@ green guide, points you to the next step along the way.
<Tab title="Linux">
<Steps>
<Step title="Download">
Go to [hyperframes.dev/studio](https://hyperframes.dev/studio) and choose **Download** next to Linux (.deb).
Go to [hyperframes.studio/studio](https://hyperframes.studio/studio) and choose **Download** next to Linux (.deb).
You get `HyperFrames-amd64.deb` for 64-bit Intel and AMD computers on Debian, Ubuntu and their
relatives.
</Step>
+1 -1
View File
@@ -313,7 +313,7 @@ export default defineCommand({
console.log(` ${c.dim("Access")} ${c.accent("Sign in required to claim")}`);
console.log();
console.log(
` ${c.dim("Open the claim URL on hyperframes.dev, sign in, and claim the project to continue editing.")}`,
` ${c.dim("Open the claim URL on hyperframes.studio, sign in, and claim the project to continue editing.")}`,
);
console.log();
const visibilityTip =
+1 -1
View File
@@ -118,7 +118,7 @@ import type { Example } from "./commands/_examples.js";
const ROOT_EXAMPLES: Example[] = [
["Create a new project", "hyperframes init my-video"],
["Start the live preview studio", "hyperframes preview"],
["Publish to hyperframes.dev", "hyperframes publish"],
["Publish to hyperframes.studio", "hyperframes publish"],
["Render to MP4", "hyperframes render -o out.mp4"],
["Transparent WebM overlay", "hyperframes render --format webm -o out.webm"],
["Validate your composition", "hyperframes lint"],
@@ -69,7 +69,7 @@ describe("open-in-desktop routes", () => {
"/api/open-in-desktop",
)
).json();
const downloadUrl = "https://hyperframes.dev/studio/download?os=windows&src=browser-editor";
const downloadUrl = "https://hyperframes.studio/studio/download?os=windows&src=browser-editor";
expect(await get(false)).toEqual({
available: true,
handoff: false,
@@ -91,7 +91,7 @@ describe("open-in-desktop routes", () => {
expect(await get(false)).toEqual({
available: true,
handoff: false,
downloadUrl: "https://hyperframes.dev/studio/download?src=browser-editor",
downloadUrl: "https://hyperframes.studio/studio/download?src=browser-editor",
os: "darwin",
installed: false,
});
+6 -6
View File
@@ -22,7 +22,7 @@ import {
} from "./desktopApp.js";
const LIVE = { ready: true, platform: "darwin" as const, env: {}, installed: () => true };
const MAC_DOWNLOAD = "https://hyperframes.dev/studio/download?src=cli";
const MAC_DOWNLOAD = "https://hyperframes.studio/studio/download?src=cli";
const MAC_HINT = `Keep editing by chatting with Framey in the HyperFrames desktop app → ${MAC_DOWNLOAD}`;
const FILM = resolve("films", "a");
const never = () => {
@@ -136,7 +136,7 @@ describe("openInDesktop", () => {
).toEqual({
opened: false,
reason: "unsupported-platform",
downloadUrl: "https://hyperframes.dev/studio",
downloadUrl: "https://hyperframes.studio/studio",
});
});
});
@@ -167,7 +167,7 @@ describe("openInDesktop on Windows", () => {
expect(missing).toEqual({
opened: false,
reason: "not-installed",
downloadUrl: "https://hyperframes.dev/studio/download?os=windows&src=cli",
downloadUrl: "https://hyperframes.studio/studio/download?os=windows&src=cli",
});
const failed = openInDesktop(FILM, { ...WIN, exists: () => true, launch: () => false });
expect(failed).toMatchObject({ opened: false, reason: "open-failed" });
@@ -211,7 +211,7 @@ describe("openInDesktop on Linux", () => {
const gone = { ...LINUX, read: (p: string) => moved[p] ?? null, exists: () => false };
expect(openInDesktop(FILM, { ...gone, launch: never })).toMatchObject({
reason: "not-installed",
downloadUrl: "https://hyperframes.dev/studio/download?os=linux&src=cli",
downloadUrl: "https://hyperframes.studio/studio/download?os=linux&src=cli",
});
expect(openInDesktop(FILM, { ...LINUX, read: () => "{", launch: never })).toMatchObject({
reason: "not-installed",
@@ -353,9 +353,9 @@ describe("desktopHint", () => {
it("offers the Linux and Windows builds there, and nothing where there is no build", () => {
expect(desktopHint(process.cwd(), { env: {}, platform: "linux", installed: false })).toBe(
`Keep editing by chatting with Framey in the HyperFrames desktop app → https://hyperframes.dev/studio/download?os=linux&src=cli`,
`Keep editing by chatting with Framey in the HyperFrames desktop app → https://hyperframes.studio/studio/download?os=linux&src=cli`,
);
const windowsHint = `Keep editing by chatting with Framey in the HyperFrames desktop app → https://hyperframes.dev/studio/download?os=windows&src=cli`;
const windowsHint = `Keep editing by chatting with Framey in the HyperFrames desktop app → https://hyperframes.studio/studio/download?os=windows&src=cli`;
expect(desktopHint(process.cwd(), { env: {}, platform: "win32", installed: false })).toBe(
windowsHint,
);
+1 -1
View File
@@ -11,7 +11,7 @@ import { writeRecord } from "./projectRecords.js";
const DESKTOP_BUNDLE_IDS = ["dev.hyperframes.desktop", "dev.hyperframes.desktop.canary"] as const;
const DESKTOP_APP_NAMES = ["HyperFrames.app", "HyperFrames Canary.app"];
const APP_NAMES = ["HyperFrames", "HyperFrames Canary"] as const;
const STUDIO_PAGE = "https://hyperframes.dev/studio";
const STUDIO_PAGE = "https://hyperframes.studio/studio";
const DOWNLOADS: Partial<Record<NodeJS.Platform, string>> = {
darwin: `${STUDIO_PAGE}/download`,
linux: `${STUDIO_PAGE}/download?os=linux`,
+1 -1
View File
@@ -14,7 +14,7 @@
"files": 13
},
"hyperframes-registry": {
"hash": "221af9e7fbffe732",
"hash": "c70325ad4ad08849",
"files": 13
},
"media-use": {
@@ -120,7 +120,7 @@ hyperframes render -o preview.mp4
# Snapshot for visual QA
hyperframes snapshot --at "1.0,3.0,5.0,7.0"
# Publish to hyperframes.dev for review
# Publish to hyperframes.studio for review
npx hyperframes publish
```
@@ -152,7 +152,7 @@ npx tsx scripts/generate-registry-items.ts
# 4. Generate catalog docs page
npx tsx scripts/generate-catalog-pages.ts
# 5. Publish to hyperframes.dev so reviewers can preview
# 5. Publish to hyperframes.studio so reviewers can preview
npx hyperframes publish
# 6. Stage everything
@@ -161,9 +161,9 @@ git add registry/{kind}/{name}/ registry/registry.json docs/catalog/
# 7. Commit
git commit -m "feat(registry): add {name} — {one sentence}"
# 8. Push and open PR with hyperframes.dev link
# 8. Push and open PR with hyperframes.studio link
git push origin feat/registry-{name}
gh pr create --title "feat(registry): {name}" --body "preview: {hyperframes.dev-url}"
gh pr create --title "feat(registry): {name}" --body "preview: {hyperframes.studio-url}"
```
**If you don't have a GitHub account:** you need one to open a PR. Sign up at https://github.com/signup, then run `gh auth login`.