---
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)