Export: PNG, video and HTML

#PNG

A PNG is the quickest way to get a static ad out, and the format every ad platform accepts for image placements.

• Export Active Scene saves the scene you are on.
• Export Linked Scenes (ZIP) saves the scene you are on and its linked scenes, in every format the scene has on. The editor steps through the formats while it works and returns to yours.
• Export All Scenes (ZIP) saves one PNG per scene in a single ZIP, in the active format.

Both ZIPs keep one folder per scene, numbered in project order and named after the scene, for example 01 Summer Sale/. A scene's linked scenes go in its folder. Characters a folder name cannot hold, such as /, are replaced, and a scene with no name is called Scene 3.

Stills are saved at twice the format's size for crisp results on high-density screens, so a 9:16 ad comes out at 2160 x 3840. Very large formats are capped at 4096 pixels on the long side, and custom formats export at exactly the size you typed. Files are named after the project, the format and the scene number, for example summer-sale-vertical-02.png.

Which moment is captured

An animated scene has many frames, so the PNG takes one of them. In Canvas mode it is the moment shown for the selected layer's keyframe, which is the middle of the scene by default. Elsewhere it follows the scene's Start, Mid or End setting. What you see in the preview is what you get: set the moment you want, then export.

#Video

Video renders the ad exactly as the preview plays it, at 30 frames per second, as an MP4 you can upload anywhere. The work happens in the cloud, so your computer stays free.

• Render Scene renders the active scene at its own length, without its linked scenes.
• Render Linked Scenes renders the active scene and its linked scenes, in order, as one video. Each linked scene plays with its own picture and Background, as in the preview. A picture layer that holds a video, a Background video and a layered Background gradient keep the first scene's.
• Render Timeline renders every scene in Selects, in Selects order, each followed by its linked scenes, and joins them into one video. If you have not changed Selects, that is every scene in the project. It is the same as Render timeline in Canvas: a scene that has not changed since its last render is reused rather than rendered again.

Before you render

• Include sound (shown when the project has sound design) bakes the voices into the MP4 so it carries what the preview plays. It is on by default. Timeline music and scene audio are added as their own tracks.
• Export loops (1 to 8) repeats a Render Scene or Render Linked Scenes video back to back (Render Timeline is always one pass). The panel shows the total, for example "Exports 3 x 4.0s = 12.0s". The pass is rendered once and repeated, so a looped export costs the same as one pass. If the scene is not a perfect loop, the panel warns that the picture will jump where one pass meets the next.

During and after

A progress bar counts the frames. You can leave Output mode or reload the page and the render keeps going; Cancel render stops it and returns the credits. One render runs at a time.

Renders spend credits, priced on the number of frames and the size. When it finishes, the panel shows the Render cost and a Download MP4 link, and the file is also sent to your cloud export folder if you have one. Download it soon: the link expires after an hour, although you can render again at any time.

Per-scene clip fades still play only in the preview, and the panel says so when a scene uses them.

Worked example

A 9:16 story ad that loops a 4-second particle logo reveal three times.

1. Make the scene a perfect loop in Keyframes.
2. In Output, set Export loops to 3. The panel reads 12.0s.
3. Press Render Scene, wait for the progress bar, then Download MP4.

#HTML

Export HTML (ZIP) packages the ad as web pages that animate in any browser, with no Wildfield account and no internet connection needed.

Inside the ZIP:

• one page per scene (scene-01.html and so on). Scenes that are linked together are joined into one page, named for the run, such as scenes-02-04.html, so a linked sequence plays as it does in the app;
• an index.html overview with every scene as a live, animated card;
• an assets/ folder with the images, video, fonts and animation scripts, and every address rewritten to point at them.

Scenes play and loop as soon as they open. If an asset cannot be fetched while packing, it is skipped rather than failing the export, and the panel tells you how many were skipped.

HTML is the right choice for handing a developer an animation to build from, for presenting in a meeting without a network, or for keeping an archive of a campaign that still plays years later.

#HyperFrames

HyperFrames renders the video on your own computer, for free. It suits people comfortable in a terminal, batch work, and anyone who would rather not spend credits on drafts.

Export Scene packages the active scene and Export Timeline the whole project. The ZIP holds a folder with an index.html (the name matters, so do not rename it) and a README.txt with the steps. Sound design is baked in before the ZIP is made.

Render it

1. Install Node 22 or newer and FFmpeg, if you have not already.
2. Unzip the file and open a terminal in the folder.
3. Run npx hyperframes doctor once to check your setup.
4. Run npx hyperframes render . -o video.mp4.

The README lists the options: -f for the frame rate (24, 30 or 60, default 30), -q for quality (draft, standard or high, default standard) and --docker for a render that is identical on every machine (it needs Docker running). Fonts are fetched on the first render, so be online for that.

A local render is a single pass. If you set Export loops above 1, the README includes the commands to repeat it.