Skip to main content
Use Media Overlays to add editable, timeline-driven HUD, flash, light-leak, and freeze-frame dressing around a video or image without baking it into the source pixels.

​
Included Overlays

These are first-party authored blocks. Their Catalog poster/video assets are previews only; the installed result is editable composition source. Unlike Color Grading and Media Effects, overlays are real HTML, CSS, and paused GSAP timelines installed from the HyperFrames Registry. Their final paint order follows authored track placement and CSS z-index.

​
Quick Start

1

Select the media beat

Select the <video> or <img> the overlay should accompany.
2

Insert an overlay

Open Overlays in the Design panel and choose a preview card. Studio installs the composition source and aligns it to the selected beat.
3

Edit and verify

Use Layers, Timeline, Design, or Code to change content, timing, color, animation, or placement, then play through the entrance and exit.
When the selected media has an authored track, Studio starts the overlay on the next track. Otherwise, normal block placement defaults apply. The left Catalog remains the browse-all Registry surface; Overlays is the selected-media shortcut.

​
Agent Guidance

An agent may combine grading, a shader effect, treatment animation, and an overlay when they support one coherent intent. A restrained camcorder treatment can combine a small source correction, tape damage on the media, the camcorder-hud block, and a finite reveal or exit timed to the edit. Use these constraints:
  • Use an overlay when it adds information, motivated light, or useful visual language.
  • Keep text and HUD fields editable.
  • Align finite overlays to a deliberate beat rather than leaving them active for the entire video.
  • Avoid adding decorative overlays automatically to accuracy-sensitive, brand-sensitive, or deliberately clean footage.
  • Verify that the overlay does not obscure captions, faces, product UI, or essential content.

​
Choosing the Right Overlay

​
Camcorder HUD

Use for creator-camera, home-video, recording, or found-footage language. The counter is timeline-driven and the REC behavior is deterministic. Edit the date/label placeholders instead of rendering arbitrary timestamp text into the source media.

​
Editorial Flash

Use as a short cut accent or social reveal. It is finite by design and should land on a motivated edit, capture, pose, or beat. It is not a permanent glow or a replacement for shader Bloom.

​
Organic Light Leak

Use sparingly for memory, warmth, film-language transitions, or a motivated light event. It is a CSS/GSAP overlay rather than a LUT and does not permanently change source color.

​
Freeze-Frame Dressing

Use with a held frame or a subject cutout. The block provides paper, tape, and flash dressing; it does not perform background removal itself. For a transparent subject:
Terminal
See Remove Background for cutout and background plate behavior.

​
How Overlays Combine with Pixel Treatments

The compositing model is:
Color grading does not recolor overlay text or graphics. This is intentional: HUD labels remain crisp and an organic light leak can be adjusted independently from the source grade. Place captions, HUD fields, and other important graphics on the intended track and verify their final stacking in Studio. If an overlay should appear behind a subject, separate the subject into its own transparent media layer and place the overlay between the background and foreground layers.

​
Editing and Reuse

Registry overlays are copied into the project rather than fetched at render time. This keeps rendering deterministic and lets teams:
  • Change the HTML and CSS.
  • Replace labels and colors.
  • Retune the paused GSAP timeline.
  • Reuse the block across multiple compositions.
  • Remove it without changing the media’s data-color-grading payload.
Keep host-specific timing and placement in the host composition when possible. That preserves the Registry block as a reusable visual unit.

​
Next Steps

Color Grading

Correct and grade source media before adding visual dressing.

Media Effects

Apply shader-based optical, retro, print, and art treatments.

Remove Background

Create transparent subject layers and paired background plates.

Keyframes

Edit deterministic overlay and host animation in Studio.