Skip to main content
Help and updates
Troubleshooting
Fix common HyperFrames problems by what you see: in the Studio app, in the preview and browser editor, and when a render fails or looks wrong.
Find what you see. Problems sit in three places:
For lower-level failures, continue to general troubleshooting.
A short animation timeline can make a project end before the underlying media. Extend the authored root duration or timeline using the correct pattern for that composition.
Discovery checks ports 4567–4666. If this project has a saved preview on another
port outside that range, only that saved port is checked separately. When moving
an existing managed preview to the requested port, add This checks the runtime, browser, FFmpeg, and other local requirements.
For selection, canvas, timeline, autosave, and editor-only failures, use
Browser editor troubleshooting.
Or compare the current source with Compositions.
Verify with
The lines after it say what HyperFrames checked. If they say your user is not in
the
If the GPU is still not used, render from Windows instead. Copy the project to
a Windows drive (for example
Run it from a normal Windows folder, not a
Then search GitHub issues or open a report with:
The rating is from 0 to 10. The comment is optional, but a specific example is usually more useful than a score alone.
A comment with no rating is a report with no score, for something you needed that HyperFrames cannot do yet. It never counts in the rating:
HyperFrames then opens a prepared GitHub issue in your browser. Review it before submitting; the issue is not posted automatically.
You can also open a GitHub issue directly.
That also stops the feedback prompt and takes the install out of any
canary rollout — nothing that reports nothing
is ever picked for a staged release.
Studio feedback is controlled separately from the CLI setting.
- In the Studio app: updates, sign-in, usage limits, blocked steps, API keys.
- In the preview and browser editor: a stale preview, something you can’t select, missing media, wrong animation.
- Renders and setup: a render that fails, looks different or is slow, and setup errors.
In the Studio app
Most problems in the app come from the agent it works with (Claude Code, Codex and the others), not from HyperFrames.How updates arrive
The app checks for a new version when it opens and every few minutes after that. When one is ready, you get a notification, a round update button appears in the bottom-right corner, and Framey points at it: There’s a new update. Click here.- Click the update button. It fills up as the update downloads.
- The app restarts by itself as soon as nothing is running: no agent run, export, or setup in progress. It reopens the project you had open, and you do not lose anything.
The app asks me to sign in to HyperFrames
Sending a request needs your HeyGen account. Choose Continue with HeyGen and finish in your browser within 10 minutes. If it says Couldn’t renew your sign-in or Couldn’t finish signing in, check your internet (and that a VPN or proxy covers all apps). If it says Sign-in timed out, Your sign-in expired or HeyGen didn’t sign you in, choose Try again.You’re signed out of Claude Code
The chat shows a sign-in card. Your message is kept. Choose Sign in, finish in your browser, and the message sends as soon as you are back. Choose Use Codex instead to send it with Codex if Codex is ready. For Codex, the chat says Codex is not signed in. Choose Copy sign-in command, run it in a terminal, then choose Try again.My agent hit its usage limit
The chat says, for example, Claude Code hit its usage limit. It resets at a time. This is your agent’s own plan limit, not a HyperFrames one. Wait until it resets and choose Try again, or choose Switch to Codex (or Switch to Claude Code) if the other agent is set up. If the chat says the agent had a problem on its side, the agent’s service is busy or down. Try again in a few minutes.Claude Code blocked a step
Agent access in Settings > Agent decides what Claude Code may do:- Auto, the default: it works in your project and blocks risky steps on its own.
- Full access: it can install, use the internet, and run anything, with no checks.
The agent is not installed or won’t start
The chat says Claude Code is not installed. Choose Try again and the app sets it up for you. If Claude Code is installed but will not start, choose Reinstall in Settings > Permissions. See Connect your agent for the manual commands.Other messages
Where your work is kept
- Your projects: the hidden
.hyperframes-studiofolder in your home folder. - Exported videos: your Downloads folder.
- App settings and sign-in:
Library/Application Support/HyperFramesin your home folder on a Mac,%APPDATA%\HyperFrameson Windows, and.config/HyperFramesin your home folder on Linux.
In the preview and browser editor
I cannot select the right element
- Pause on a frame where it is visible.
- Choose it from Layers.
- Check whether it belongs to a group or nested composition.
- Look for an off-canvas indicator.
A direct edit is unavailable
The selected element may be generated, nested, or unsupported for that operation. Try the inspector, open the nested composition, copy context to the agent, or make a focused source edit.A canvas move became animation
Check whether auto-keyframing is enabled. Undo the edit, turn it off, and make the layout change again.The timeline edit landed at the wrong time
Undo, zoom in, place the playhead more precisely, and retry. Check whether snapping moved the boundary to a nearby clip or beat.The preview did not update
- Preview’s Code editor and visual controls save automatically. If the change came from another editor or an agent, confirm that the external file was saved.
- Wait for the project refresh.
- Check the terminal running
hyperframes preview. - Reload the browser editor if the preview process is still healthy.
- Restart
npx hyperframes previewwhen the server stopped.
Media is missing or slow
Confirm that the file exists inside the project and that its path is correct. Large media may need time to prepare a preview. Remote files can fail because of access or cross-origin restrictions.An edit failed to save
Keep the error visible, avoid stacking more edits on top of it, and undo if available. Copy the issue to your agent with the action that caused it.A render failed
Keep the complete error. Run the project checks, confirm FFmpeg and source media are available, then retry:Video is black in preview but renders
The browser may not decode the source codec even though FFmpeg can. HyperFrames normally creates and uses a compatible preview proxy. If the frame remains black:- confirm automatic proxying is not disabled;
- run
npx hyperframes doctor; - run
npx hyperframes lint --verboseto identify affected files; - confirm the source file exists and can be read.
Video, image, or audio is missing
Prefer a local project asset. Confirm its path, filename capitalization, and whether it was moved or renamed. Remote media can fail because of permissions, expiring URLs, or cross-origin restrictions.Preview stutters
Common causes:- very large source images;
- several large
backdrop-filterblurs; - expensive shadows or filters on animated elements;
- too many large overlapping layers.
A video freezes while its box animates
Do not animatewidth, height, top, or left directly on a <video> element.
Put the video inside a wrapper and animate the wrapper:
Media plays out of sync
Do not callplay(), pause(), or set currentTime from composition scripts.
HyperFrames owns media playback. Use timing and media attributes to describe when the file should play.
The composition ends too early
Check the resolved composition duration:A timed element is always visible
Timed visible elements needclass="clip" as well as their timing attributes.
npx hyperframes lint normally catches this.
Animation is static
Check that the animation is paused and registered using the exact composition ID.my-video must match data-composition-id="my-video".
Changing root duration from a variable does nothing
The root render length is determined before composition scripts run. Author or generate the intended rootdata-duration directly.
Clip durations can still vary. See Variables for what may be changed safely.
Preview checks an unexpected port range
When starting a managed background preview, choose the discovery range with an explicit port:--force-new to stop and
replace it. Without --port, discovery starts at the saved preview’s port.
preview --status --port 4567 uses the same discovery range and checks an
out-of-range saved port separately. Among previews for this project, status
prefers the exact requested port, then the saved preview’s port, then another
match. The saved log path appears only when the selected server is verified as
that background preview. If the listener PID cannot be determined, JSON reports
pid: null and text output omits the PID.
preview --stop checks only this project’s saved port when a session exists,
even with an explicit --port. Without a saved session, --stop --port 4567
discovers previews in ports 4567–4666. Shutdown waits check only the port being
stopped.
Renders and setup
Check the basics first
1
Check the machine
2
Check the project
3
Inspect the visible result
Open the browser editor or capture important frames:
4
Give the agent useful context
Copy the complete error and add what you did, what you expected, and what must not change.
”No composition found”
The project needs anindex.html containing a valid composition root with data-composition-id, width, and height.
Create a new project:
”FFmpeg not found”
FFmpeg is required for local video encoding.ffmpeg -version, then rerun npx hyperframes doctor.
Docker render will not start
Rundocker info.
Confirm Docker is installed, its daemon is running, your user has permission, and the first image download can reach the registry.
”HyperFrames runtime failed”
When a startup error includes[thrown at: ...], use those script locations to find the failing code. The short trace shows where the error started and, when identifiable, where your composition called it. Locations come from the browser and may point to bundled code.
The render looks different from preview
Check fonts, remote media, browser-specific effects, and the actual exported file. Use Docker when you need a pinned rendering environment:Repeated scene fonts make export HTML very large
Before embedding local font files, the render compiler removes duplicate top-level@font-face declarations from active, unconditional styles. The last copy stays in place, so its order relative to other font faces is kept. Conditional rules and alternate styles are left alone, and your source scene files are not changed.
Only declarations with the same family, src, and descriptors count as duplicates. If the export is still large, make repeated scene font rules match exactly, or declare the font once in a shared root style.
Every render takes about 45 seconds longer than expected
A composition that never registers a GSAP timeline still makes the producer wait for one. The producer pollswindow.__timelines[<id>] until the composition
player reports ready, then gives up after player-ready-timeout (45 s by
default). The wait is a fixed cost paid on every render, so it does not shrink
when you lower quality or resize media.
Declare that the composition has no timeline:
npx hyperframes lint reports the missing attribute as
missing_data_no_timeline. Compositions that do register a timeline are
unaffected: the poll returns as soon as the timeline appears, long before the
timeout.
To register a timeline instead of skipping the wait, see
GSAP animation.
The render is slow
The causes below scale with the project. For a constant penalty on every render, check the timeline poll above first. During iteration:- use draft quality;
- inspect snapshots before starting another full render;
- resize large source media;
- simplify expensive filters;
- avoid increasing resolution or frame rate before needed.
npx hyperframes benchmark when tuning worker settings.
The render is slow under WSL2
WSL2 can expose a graphics card to Linux, but headless Chrome may not be able to use it. The render then falls back to software rendering, which can be several times slower on a long or effect-heavy video. The render log says so:render group, add yourself, restart WSL, and render again:
C:\Users\you\renders\my-video) and run the same
command from PowerShell, where Chrome uses the graphics card through Direct3D:
\\wsl.localhost\... path.
Expected HDR but received SDR
HDR needs a supported output and correct source color metadata. MP4 is the normal HDR output path; WebM and MOV may fall back to SDR. Use--hdr only when the whole source and delivery workflow is intended for HDR. Read HDR rendering before delivery.
Still stuck
Run:- the exact error;
- steps to reproduce;
- HyperFrames version and operating system;
- whether the issue occurs in preview, checks, or render;
- a small shareable project when possible.
Share feedback
Useful feedback explains the outcome you wanted and what stopped you from reaching it.Talk with the HyperFrames team
Building something with HyperFrames? We would love to understand what you are creating, where you got stuck, and what feels harder than it should. Book a casual 30-minute conversation with the HyperFrames team. No preparation is required, and this is product research—not a sales call.Send feedback from the command line
From a HyperFrames project, run:Report a reproducible bug
Use--file-issue when the project can be shared publicly:
Include enough evidence
A useful report includes:- what you were trying to make;
- the action or command you used;
- what you expected;
- what happened instead;
- the exact error message;
- whether it happens every time;
- a screenshot or short recording for a visual problem;
- a small project when it is safe to share.
About feedback data
HyperFrames may occasionally show a short rating prompt after a render or during a Studio session. You can ignore or dismiss it. Feedback can include the rating, an optional comment, and basic environment information used to understand the problem. It does not include your composition HTML, video files, project names, file paths, or environment-variable values beyond the short agent and app names listed undertelemetry, such as client=example-app/1.2.3/stable when another app launched the CLI. When an app launches it for a signed-in person, the report can also carry that person’s email, set by the app through HYPERFRAMES_FEEDBACK_EMAIL, and whether a person or an agent wrote it.
To turn off CLI telemetry:
