mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
ukimsanov
e60bef3f57
Rewrites the pages that survive the restructure so they lead with what a reader can accomplish, and points them at the sections added in the previous commit. Page set and navigation are unchanged here; only content moves. Keeps the skill count in README. CLAUDE.md's catalog-maintenance rule requires the count to live in README and CLAUDE.md, and both now agree with the 19 directories under skills/.
80 lines
2.8 KiB
Plaintext
80 lines
2.8 KiB
Plaintext
---
|
||
title: "Use images and video"
|
||
sidebarTitle: "Images and video"
|
||
description: "Import, place, replace, trim, and review images and footage in a HyperFrames project."
|
||
---
|
||
|
||
Images and footage should enter the project once, remain easy to identify, and
|
||
behave the same in preview and the final render.
|
||
|
||
<Frame caption="Current Studio, changing the real project: inspect the source, change Fit and Position, crop on the canvas, then import another local asset.">
|
||
<video
|
||
autoPlay
|
||
loop
|
||
muted
|
||
playsInline
|
||
preload="metadata"
|
||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-media-edit-loop-v1.jpg"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-media-edit-loop-v1.mp4"
|
||
/>
|
||
</Frame>
|
||
|
||
## Import a file
|
||
|
||
In Studio:
|
||
|
||
1. Open **Assets**.
|
||
2. Choose **Import media**, or drop the file into the panel.
|
||
3. Preview it.
|
||
4. Drag it to the timeline.
|
||
|
||
Studio accepts common image formats, SVG, MP4, WebM, and MOV. Keep the source
|
||
inside the project before the final render.
|
||
|
||
## Place it deliberately
|
||
|
||
- Set the start and duration by watching the surrounding edit.
|
||
- Choose a crop that preserves the important content.
|
||
- Keep source audio only when it belongs in the mix.
|
||
- Avoid stretching low-resolution media beyond what it can support.
|
||
- Use a wrapper when animating the size or position of video; this keeps frame capture reliable.
|
||
|
||
For a source-level change, ask the agent in terms of the visible result:
|
||
|
||
```text
|
||
Use assets/product-tour.mp4 from 00:04 to 00:10.
|
||
Crop around the editor canvas, keep the source muted, and place it beneath
|
||
the existing caption layer.
|
||
```
|
||
|
||
## Change or replace the source
|
||
|
||
Studio’s Media section shows the current project path and controls Fit,
|
||
Position, playback, and audio. Assets imports files and adds new layers. It does
|
||
not currently provide a one-click source replacement in that Inspector.
|
||
|
||
To keep the existing layer, ask the agent to change its `src`, or edit the
|
||
element in Source. Then recheck the crop, clip length, transition, and any
|
||
motion tied to the old dimensions.
|
||
|
||
Replacing a file should not require rebuilding the whole scene. If the new
|
||
content also changes the story or several scenes, ask the agent to make the
|
||
broader revision.
|
||
|
||
## Avoid fragile sources
|
||
|
||
Temporary signed URLs, private browser sessions, and render-time network
|
||
requests can disappear or fail in another environment. Copy required media into
|
||
the project, keep filenames stable, and run `npx hyperframes check` before
|
||
rendering.
|
||
|
||
Continue to [Use Assets and Catalog](/studio/assets-and-blocks) for the Studio
|
||
controls, or [Media effects](/guides/media-effects) when the source needs a
|
||
non-destructive visual treatment.
|
||
|
||
## Related topics
|
||
|
||
- [Use Assets and Catalog in Studio](/studio/assets-and-blocks)
|
||
- [Apply a media effect](/guides/media-effects)
|
||
- [Remove a human background](/guides/remove-background)
|