Skip to content
ONDA

Media — Image & Video

ONDA draws raster media as first-class scene nodes — composite, grade, blur, matte, and animate them like any other layer. The author layer never decodes: it places a node and resolves a time, and the renderer (or the player) decodes the pixels.

<Image>

Section titled “<Image>”
import { Image } from 'onda-engine/react'


<Image src="/plate.jpg" width={1280} height={720} fit="cover" blur={0} />
  • src — path, URL, or data: URI.
  • width / height — target box in px. The renderer measures the decoded image and fits it into the box per fit, so you don’t pass the intrinsic size. Omit both for the image’s native pixels.
  • fit — 'cover' (default), 'contain', or 'fill'.
  • blur — Gaussian blur (sigma, in source px) applied by the image pass. Animate blur from high → 0 for a soft-focus entrance. Identical on every backend.

The engine right-sizes the decoded image to its display box, so large source files don’t blow the GPU texture budget.

<Video>

Section titled “<Video>”

A video clip on the timeline. At composition frame f it shows the source frame at startFrom + (f / fps) × playbackRate seconds; the renderer draws that frame like an image.

import { Video, Sequence } from 'onda-engine/react'


<Sequence from={0} durationInFrames={120}>
  <Video
    src="/clip.mp4"
    startFrom={2}        // trim 2s into the source
    playbackRate={1}     // 1 = realtime, 2 = 2× fast, 0.5 = slow-mo
    endAt={6}            // stop at 6s
    loop                 // repeat the [startFrom, endAt) span
    width={1920} height={1080} fit="cover"
  />
</Sequence>
  • startFrom — seconds into the source shown at the clip’s frame 0 (trim head). Default 0.
  • playbackRate — source seconds advanced per composition second. Default 1.
  • endAt — seconds into the source to stop at (trim tail); past it the clip holds its last frame unless loop is set.
  • loop — loop the trimmed [startFrom, endAt) span (requires endAt).
  • width / height / fit — as for <Image>.
  • previewFallback — preview-only behaviour when the browser can’t composite a source (a cross-origin video without CORS): 'skip' (default, blank + a one-time hint) or 'element' (overlay a plain <video> so it still plays, display-only). Never affects onda export.

How decoding works

Section titled “How decoding works”
Browser previewNative export (onda export)
<Image>decoded in-pageimage crate
<Video>off-screen <video> / WebCodecsffmpeg (behind the video feature)

See also

Section titled “See also”