onda-engine 0.1.0

package/dist/react.d.ts

@@ -0,0 +1,2141 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+type EasingFn = (t: number) => number;
+/** Easing presets + factories. Remotion-compatible: use a preset as an `EasingFn`
+ *  (`Easing.linear`, `Easing.cubic`, …) or call the `Easing.bezier(x1,y1,x2,y2)`
+ *  factory. The Remotion-named curves (`quad`/`cubic`/`sin`/`ease`/`bezier`) exist
+ *  so components authored against Remotion port without rewriting their easing. */
+declare const Easing: {
+    linear: (t: number) => number;
+    quad: (t: number) => number;
+    cubic: (t: number) => number;
+    sin: (t: number) => number;
+    ease: EasingFn;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    smoothStep: (t: number) => number;
+    easeInBack: (t: number) => number;
+    easeOutBack: (t: number) => number;
+    /** CSS cubic-bézier factory — Remotion's `Easing.bezier(x1,y1,x2,y2)`. */
+    bezier: (x1: number, y1: number, x2: number, y2: number) => EasingFn;
+};
+/** A CSS-style cubic-bézier ease with control points `(x1,y1)`, `(x2,y2)` and
+ *  fixed endpoints `(0,0)`–`(1,1)`. Matches `onda-animation`'s `CubicBezier`. */
+declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): EasingFn;
+interface InterpolateOptions {
+    easing?: EasingFn;
+    /** How to handle inputs below the range. Default `'clamp'`. */
+    extrapolateLeft?: 'clamp' | 'extend';
+    /** How to handle inputs above the range. Default `'clamp'`. */
+    extrapolateRight?: 'clamp' | 'extend';
+}
+/**
+ * Map `input` from `inputRange` to `outputRange` (both ascending, equal length
+ * ≥ 2). Out-of-range inputs clamp by default. Example:
+ * `interpolate(frame, [0, 30], [0, 1])` fades in over 30 frames.
+ */
+declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number;
+
+interface Vec2 {
+    x: number;
+    y: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+/** Straight-alpha sRGB, components in 0..1. `a` defaults to 1 on the Rust side. */
+interface Color {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+interface Transform {
+    translate?: Vec2;
+    scale?: Vec2;
+    /** Clockwise rotation in degrees about `origin` (default the local origin). */
+    rotate?: number;
+    /** Pivot for scale + rotation in local space (CSS transform-origin). Default (0,0). */
+    origin?: Vec2;
+}
+/** A drop shadow / glow behind a shape (mirrors onda-scene's `Shadow`). */
+interface Shadow {
+    color: Color;
+    /** Gaussian blur std-dev in px. */
+    blur: number;
+    /** Shadow offset from the shape; default (0,0) = a centered glow. */
+    offset?: Vec2;
+    /** Grow the shadow box by this many px on every side. Default 0. */
+    spread?: number;
+}
+interface Stroke {
+    color: Color;
+    width: number;
+    /** End-cap style (CSS stroke-linecap). Default 'butt'. */
+    cap?: 'butt' | 'round' | 'square';
+    /** Corner-join style (CSS stroke-linejoin). Default 'miter'. */
+    join?: 'miter' | 'round' | 'bevel';
+    /** Dash pattern: alternating on/off lengths in px. Omit for a solid stroke. */
+    dash?: number[];
+    /** Phase offset into the dash pattern (px) — animate for a draw-on reveal. */
+    dash_offset?: number;
+    /** Trim paths: draw only the [start, end] arc-length slice of the stroke (0..1),
+     *  rotated by offset. Animate end 0→1 for a line-draw. */
+    trim?: {
+        start?: number;
+        end?: number;
+        offset?: number;
+    };
+}
+interface Composition$1 {
+    width: number;
+    height: number;
+    fps: number;
+    duration_in_frames: number;
+    /** Opt-in cinematic LINEAR + ACES finishing pipeline (gpu/export only). */
+    linear?: boolean;
+    /** Composition-level cinematic finish: a linear-HDR finishing chain + ACES tone-map
+     *  run after the comp rasterizes (gpu/export only). */
+    finish?: Finish;
+}
+/** Composition-level cinematic finish (linear HDR + ACES). See {@link Composition.finish}. */
+interface Finish {
+    /** Linear exposure multiplier before the tone-map (1 = neutral). */
+    exposure?: number;
+    /** Comp-level bloom in linear HDR. */
+    bloom?: {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    };
+    /** Warm halation around highlights (0 = off). */
+    halation?: number;
+    /** Grade: white-balance (+ warm / − cool; 0 = neutral). */
+    temperature?: number;
+    /** Grade: contrast around mid-grey (1 = identity). */
+    contrast?: number;
+    /** Grade: saturation (1 = identity, 0 = greyscale). */
+    saturation?: number;
+    /** Vignette: radial edge darkening (0 = off). */
+    vignette?: number;
+    /** Film-grain intensity, added in linear (0 = off). */
+    grain?: number;
+    /** Grain animation seed (the reconciler injects the current frame). */
+    grain_seed?: number;
+    /** A cinematic 3D color LUT (`.cube`-style lookup table) applied as the FINAL
+     *  finish step, in DISPLAY space (after the grade + ACES tone-map + sRGB encode),
+     *  as a trilinear lookup. `table` holds `size³` RGB triples in 0..1, **red varying
+     *  fastest, then green, then blue** (the entry for grid cell (r,g,b) is at
+     *  `((b*size + g)*size + r) * 3`). Omitted = no LUT (identity). Honored by both the
+     *  GPU (3D texture) and the CPU reference (software trilinear). */
+    lut?: {
+        size: number;
+        table: number[];
+    };
+}
+type ShapeGeometry = {
+    shape: 'rect';
+    size: Size;
+    corner_radius?: number;
+} | {
+    shape: 'ellipse';
+    size: Size;
+} | {
+    shape: 'path';
+    data: string;
+} | {
+    shape: 'boolean';
+    op: BooleanOp;
+    operands: BooleanOperand[];
+};
+/** Boolean (merge-paths) operation for a {@link ShapeGeometry} of `shape: 'boolean'`. */
+type BooleanOp = 'union' | 'difference' | 'intersect' | 'xor';
+/** One input to a boolean geometry: a sub-geometry + the transform placing it. */
+interface BooleanOperand {
+    geometry: ShapeGeometry;
+    transform: Transform;
+}
+/** A color stop of a {@link Gradient}: a color at offset 0..1. */
+interface GradientStop {
+    offset: number;
+    color: Color;
+}
+/** A gradient paint, in the shape's local coordinate space. */
+type Gradient = {
+    gradient: 'linear';
+    start: Vec2;
+    end: Vec2;
+    stops: GradientStop[];
+} | {
+    gradient: 'radial';
+    center: Vec2;
+    radius: number;
+    stops: GradientStop[];
+} | {
+    gradient: 'fbm';
+    stops: GradientStop[];
+    scale?: number;
+    time?: number;
+    warp?: number;
+};
+/** One styled run of rich text (mirrors onda-scene's `TextRun`). */
+interface SceneTextRun {
+    text: string;
+    color?: Color;
+    font_size?: number;
+    font_family?: string;
+    weight?: number;
+    italic?: boolean;
+}
+type NodeKind = {
+    type: 'group';
+} | {
+    type: 'text';
+    content: string;
+    font_size?: number;
+    color?: Color;
+    font_family?: string;
+    weight?: number;
+    italic?: boolean;
+    letter_spacing?: number;
+    runs?: SceneTextRun[];
+} | {
+    type: 'image';
+    src: string;
+    width?: number;
+    height?: number;
+    fit?: ImageFit;
+    blur?: number;
+} | {
+    type: 'video';
+    src: string;
+    /** Source position in seconds of the frame to display. */
+    time?: number;
+    width?: number;
+    height?: number;
+    fit?: ImageFit;
+    /** Preview-only hint (ignored by renderers + export): how the player should
+     *  preview a source it can't composite (cross-origin without CORS).
+     *  `'skip'` (default) leaves it blank + warns; `'element'` overlays a plain
+     *  `<video>`. Never affects `onda export`. */
+    previewFallback?: 'skip' | 'element';
+} | {
+    /** A non-visual audio clip (renderers skip it; the player plays it). */
+    type: 'audio';
+    src: string;
+    /** Composition time (seconds) the clip begins at. */
+    start?: number;
+    /** Seconds into the source to begin from (trim the head). */
+    start_at?: number;
+    /** Linear gain 0..1. */
+    volume?: number;
+} | {
+    type: 'shape';
+    geometry: ShapeGeometry;
+    fill?: Color;
+    gradient?: Gradient;
+    stroke?: Stroke;
+    shadow?: Shadow;
+} | {
+    type: 'svg';
+    src?: string;
+    markup?: string;
+};
+/** How a bitmap is fitted into its `width`×`height` box (mirrors onda-scene's
+ *  `ImageFit`). The renderer measures the decoded image to compute the scale. */
+type ImageFit = 'fill' | 'cover' | 'contain';
+/** Flex layout for a node's direct children (mirrors onda-scene's `Layout`).
+ *  Resolved to absolute child transforms by the engine's layout pass. */
+interface Layout {
+    direction?: 'row' | 'column';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+    align?: 'start' | 'center' | 'end';
+    gap?: number;
+    padding?: number;
+    /** Wrap children onto multiple lines when they overflow the main axis
+     *  (CSS `flex-wrap`). Needs a fixed main-axis size (`width`/`height`). */
+    wrap?: boolean;
+    width?: number;
+    height?: number;
+}
+/** An ordered, screen-space effect applied to a node + its subtree via
+ *  render-to-texture (mirrors onda-scene's internally-tagged `Effect` enum).
+ *  The subtree renders to an offscreen surface, the chain runs, then the result
+ *  composites back at the node's transform/opacity/blend/clip. */
+type Effect = 
+/** Isolate / precomp: flatten the subtree to one layer (render-to-texture) so the
+ *  node's opacity/blend apply to the composited result, not per-child. */
+{
+    effect: 'isolate';
+}
+/** Gaussian blur; `sigma` = std-dev in OUTPUT px (CSS `blur()`). */
+ | {
+    effect: 'blur';
+    sigma: number;
+}
+/** Directional (motion) blur: a 1D blur of std-dev `sigma` (px) smeared along
+ *  `angle` (radians, 0 = horizontal) — the cinematic "in-motion" tell. */
+ | {
+    effect: 'directional_blur';
+    sigma: number;
+    angle: number;
+}
+/** Chromatic aberration: R/B split by `amount` px radially from centre. */
+ | {
+    effect: 'chromatic_aberration';
+    amount: number;
+}
+/** Vignette: radial edge-darkening, `amount` (0..1) over `softness` (0..1). */
+ | {
+    effect: 'vignette';
+    amount: number;
+    softness: number;
+}
+/** Posterize: quantize each channel to `levels` (≥2) steps. */
+ | {
+    effect: 'posterize';
+    levels: number;
+}
+/** Duotone: luma → gradient from `shadow` to `highlight` (RGB, 0..1). */
+ | {
+    effect: 'duotone';
+    shadow: [number, number, number];
+    highlight: [number, number, number];
+}
+/** Chroma key: alpha-cut pixels within `threshold` of `key` (RGB 0..1), ramping
+ *  over `smoothness`. */
+ | {
+    effect: 'chroma_key';
+    key: [number, number, number];
+    threshold: number;
+    smoothness: number;
+}
+/** Glow / bloom: bright regions (luminance above `threshold`, scaled by
+ *  `intensity`) are blurred with `sigma` and composited *additively* over the
+ *  sharp subtree — a bright accent glows a soft halo. */
+ | {
+    effect: 'bloom';
+    threshold: number;
+    intensity: number;
+    sigma: number;
+}
+/** Cinematic color grade: a per-pixel remap (no blur) — the "land AI media"
+ *  wedge. `exposure` (linear gain, 0 = identity), `contrast` (1 = identity),
+ *  `saturation` (1 = identity, 0 = grayscale), `temperature` (warm/cool on R/B,
+ *  0 = neutral) and `tint` (green/magenta on G, 0 = neutral). */
+ | {
+    effect: 'color_grade';
+    exposure: number;
+    contrast: number;
+    saturation: number;
+    temperature: number;
+    tint: number;
+}
+/** Gooey / liquid / metaball morph: the subtree is blurred with `sigma`, then
+ *  its alpha is sharpened around `threshold` (0..1 cutoff) so overlapping shapes
+ *  fuse into solid forms joined by smooth necks (the "drops coalescing" look). */
+ | {
+    effect: 'goo';
+    sigma: number;
+    threshold: number;
+}
+/** Film grain — luminance-banded, animated monochrome noise added late over the
+ *  subtree (the compositing "glue" that unifies mismatched sources, and the dither
+ *  that hides 8-bit banding on dark gradients). Peaks in the midtones, clean at
+ *  pure black/white. `intensity` ~0.04–0.1 is filmic, `size` is the grain scale in
+ *  px (~1 = fine), `seed` an animation offset — pass the frame for living grain. */
+ | {
+    effect: 'grain';
+    intensity: number;
+    size: number;
+    seed: number;
+}
+/** Frosted glass (CSS `backdrop-filter`). The ODD ONE OUT: instead of capturing
+ *  this node's OWN subtree, it samples the already-composited BACKDROP *behind*
+ *  the node, blurs it by `sigma` (output px, like CSS `blur()`), scales its
+ *  `brightness`/`saturation` (CSS-style, `1` = identity), and tints it toward
+ *  `tint` by that color's ALPHA (alpha 0 = no tint). The blurred backdrop is
+ *  drawn as the node's backing; the node's own content composites on top. */
+ | {
+    effect: 'backdrop_blur';
+    sigma: number;
+    tint: Color;
+    brightness: number;
+    saturation: number;
+}
+/** Light-wrap — the #1 "integrated vs pasted" compositing tell. Like
+ *  `backdrop_blur` it samples the already-composited BACKDROP *behind* the node,
+ *  but instead of laying it under the node it bleeds that blurred light onto the
+ *  node's own FEATHERED EDGES (a real lens spilling a bright background a few px
+ *  onto a foreground subject), so a cut-out plate reads as *shot in* the scene.
+ *  `sigma` is the backdrop blur / rim width, `strength` scales the added light
+ *  (0 = off). Export/native only — the web preview draws the node un-wrapped. */
+ | {
+    effect: 'light_wrap';
+    sigma: number;
+    strength: number;
+};
+/** Which channel of a {@link Matte}'s rendered `source` subtree drives the reveal
+ *  (CSS `mask-mode`). `'alpha'` (the default): content alpha ×= matte alpha — the
+ *  signature media-through-type matte. `'luminance'`: content alpha ×= luma(matte
+ *  rgb) × matte alpha (white reveals, black hides — gradient wipes / luma keys). */
+type MatteMode = 'alpha' | 'luminance';
+/** Compositing blend mode (CSS `mix-blend-mode`). Vello renders the full set;
+ *  the CPU reference composites `normal` only. */
+type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+interface SceneNode {
+    id?: number;
+    transform?: Transform;
+    opacity?: number;
+    /** Clip this node and its subtree to a geometry (local space). */
+    clip?: ShapeGeometry;
+    /** Matte (track matte / mask): reveal this node's content only through the
+     *  `source` subtree's alpha — or luminance, per `mode` — multiplying the
+     *  content's alpha by it. The strictly-more-powerful sibling of `clip` (a
+     *  static geometry); `source` is a fully rendered subtree (animated text, a
+     *  gradient, an image) — the "media-through-type" move. Omitted when absent. */
+    matte?: {
+        mode: MatteMode;
+        source: SceneNode;
+    };
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode). */
+    blend?: BlendMode;
+    /** Ordered screen-space effects applied to this node + subtree (render-to-texture). */
+    effects?: Effect[];
+    /** 3D SCENE ROOT: makes this node's direct children 3D layers, placed in one
+     *  shared 3D world by their `transform3d` and rendered through this perspective
+     *  camera (depth-sorted, composited as one layer). GPU runs true perspective;
+     *  the CPU reference degrades to a 2.5D depth-sorted composite. */
+    camera3d?: Camera3D;
+    /** This node's placement as a 3D layer (only meaningful inside a 3D scene). */
+    transform3d?: Transform3D;
+    /** Extrude this layer's 2D outline into a lit 3D solid (GPU only; CPU draws flat). */
+    extrude?: Extrude;
+    /** Flex-lay-out this node's direct children. */
+    layout?: Layout;
+    kind: NodeKind;
+    children?: SceneNode[];
+}
+/** Extrude a 3D layer's 2D outline into a lit solid — the "3D logo / title" move
+ *  (mirrors scene-rs `Extrude`). Shape/text layer inside a `<Scene3D>` only. */
+interface Extrude {
+    /** Thickness along z, in world units (the solid spans ±depth/2 about the plane). */
+    depth: number;
+}
+/** A perspective camera for a 3D scene (mirrors scene-rs `Camera3D`). World units
+ *  are composition pixels (x→right, y→down); `+z` points away from the camera, into
+ *  the screen (larger z = farther = smaller), the After Effects convention. Leaving
+ *  fields default frames the `z = 0` plane to fill the comp, so a layer at `z = 0`
+ *  with no rotation matches its 2D placement. */
+interface Camera3D {
+    /** Eye position `[x, y, z]`. Omit to derive from `fov` (centered, looking at +z). */
+    position?: [number, number, number];
+    /** Look-at point `[x, y, z]`. Omit ⇒ comp center at z = 0. */
+    target?: [number, number, number];
+    /** Up vector. Omit ⇒ `[0, -1, 0]` (screen up). */
+    up?: [number, number, number];
+    /** Vertical field of view, degrees. Default 50. */
+    fov?: number;
+    near?: number;
+    far?: number;
+}
+/** The 3D placement of a layer inside a 3D scene (mirrors scene-rs `Transform3D`). */
+interface Transform3D {
+    /** World position of the anchor `[x, y, z]` in comp pixels. z = 0 is the framing
+     *  plane; larger z is farther into the screen (smaller), negative z nearer the camera. */
+    position?: [number, number, number];
+    /** Degrees about each axis (Z·Y·X order): X pitch, Y yaw, Z roll. */
+    rotation?: [number, number, number];
+    /** Pivot within the layer's content plane (comp px). Omit ⇒ layer center. */
+    anchor?: [number, number];
+}
+interface Scene {
+    composition: Composition$1;
+    root: SceneNode;
+}
+
+/** A color as a hex string (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) or an
+ *  explicit 0..1 {@link Color}. */
+type ColorInput = string | Color;
+/** Normalize a {@link ColorInput} into the engine's 0..1 sRGB {@link Color}. */
+declare function parseColor(input: ColorInput): Color;
+/**
+ * Interpolate between colors — like {@link interpolate}, but each output is a
+ * {@link ColorInput}. Channels are mixed in 0..1 sRGB and returned as a hex
+ * string (`#rrggbb`, or `#rrggbbaa` when any stop has alpha). Out-of-range
+ * inputs clamp by default. Mirrors Remotion's `interpolateColors`.
+ *
+ * @example `interpolateColors(frame, [0, 30], ['#d96b82', '#2974f2'])`
+ */
+declare function interpolateColors(input: number, inputRange: readonly number[], outputRange: readonly ColorInput[], options?: InterpolateOptions): string;
+
+/** A clip region as authored: a rect (optionally rounded), ellipse, or path. */
+type ClipInput = {
+    type: 'rect';
+    width: number;
+    height: number;
+    cornerRadius?: number;
+} | {
+    type: 'ellipse';
+    width: number;
+    height: number;
+} | {
+    type: 'path';
+    d: string;
+};
+/** Normalize a {@link ClipInput} into the engine's {@link ShapeGeometry}. */
+declare function parseClip(input: ClipInput): ShapeGeometry;
+/** A rounded/square rectangle clip. */
+declare function clipRect(width: number, height: number, cornerRadius?: number): ClipInput;
+/** An ellipse clip inscribed in `width`×`height`. */
+declare function clipEllipse(width: number, height: number): ClipInput;
+/** An arbitrary clip from SVG path data. */
+declare function clipPath(d: string): ClipInput;
+
+/** A point as an `{ x, y }` or a `[x, y]` tuple. */
+type Point = Vec2 | [number, number];
+/** A color stop: a color at a normalized position 0..1 along the gradient. */
+interface GradientStopInput {
+    offset: number;
+    color: ColorInput;
+}
+/** A gradient as authored: hex/`Color` stops and tuple-or-`Vec2` points. */
+type GradientInput = {
+    type: 'linear';
+    start: Point;
+    end: Point;
+    stops: GradientStopInput[];
+} | {
+    type: 'radial';
+    center: Point;
+    radius: number;
+    stops: GradientStopInput[];
+} | {
+    /** Fractal-noise ("expensive") gradient — fBm over Simplex noise. The field
+     *  value 0..1 samples the stops; `scale` ~0.8–1.2 + `warp` ~0.4–0.6 gives the
+     *  soft Stripe/Linear register (higher = busier turbulence). Animate `time`
+     *  per frame for a living gradient. Rendered natively (full quality on
+     *  `onda export`); the browser preview degrades to a smooth gradient. */
+    type: 'fbm';
+    stops: GradientStopInput[];
+    scale?: number;
+    time?: number;
+    warp?: number;
+};
+/** Normalize a {@link GradientInput} into the engine's {@link Gradient} JSON. */
+declare function parseGradient(input: GradientInput): Gradient;
+/** Build a linear gradient input from two points and color stops. */
+declare function linearGradient(start: Point, end: Point, stops: GradientStopInput[]): GradientInput;
+/** Build a radial gradient input from a center, radius, and color stops. */
+declare function radialGradient(center: Point, radius: number, stops: GradientStopInput[]): GradientInput;
+/** Build an fBm fractal-noise ("expensive") gradient — the soft, flowing
+ *  Stripe/Linear backdrop. `scale` ~0.8–1.2 + `warp` ~0.4–0.6 reads premium;
+ *  animate `time` (e.g. `frame / fps * speed`) for a living gradient. */
+declare function fbmGradient(stops: GradientStopInput[], opts?: {
+    scale?: number;
+    time?: number;
+    warp?: number;
+}): GradientInput;
+
+interface MorphOptions {
+    /** Subdivide segments longer than this (user units) for a smoother morph.
+     *  Lower = smoother + slower to build. Default `2`. */
+    maxSegmentLength?: number;
+    /** Wind both shapes the same way before interpolating (flubber default `true`). */
+    single?: boolean;
+}
+/**
+ * The in-between SVG path `d` morphing `from` → `to` at progress `t` (0..1).
+ * Pass two `<Path>` `d` strings (or any flubber-acceptable shape) and an animated
+ * `t`; feed the result to a `<Path d=...>`.
+ *
+ * @example
+ *   const d = morphPath(CIRCLE, RULE, ramp(frame, 70, 95))
+ *   return <Path d={d} fill="#fff" />
+ */
+declare function morphPath(from: string, to: string, t: number, options?: MorphOptions): string;
+/**
+ * Morph through an ordered list of shapes as `t` runs 0..1 — `[A, B, C]` spends
+ * the first half on A→B and the second on B→C. Useful for a multi-stage magic
+ * move under one progress value.
+ */
+declare function morphPathSequence(shapes: string[], t: number, options?: MorphOptions): string;
+
+/** Properties shared by every scene node: identity, placement, opacity, clip. */
+interface NodeProps {
+    /** Stable id, required to target the node from an animation timeline. */
+    id?: number;
+    /** Translation in pixels. */
+    x?: number;
+    y?: number;
+    /** Scale factor (1 = identity). */
+    scaleX?: number;
+    scaleY?: number;
+    /** Clockwise rotation in degrees, about the transform origin (default (0,0)).
+     *  Renders on the GPU (Vello) backend; the CPU reference rasterizer ignores it. */
+    rotation?: number;
+    /** Pivot for scale + rotation in local px (CSS transform-origin). Default (0,0).
+     *  For "about the center", pass half the node's width/height. */
+    originX?: number;
+    originY?: number;
+    /** Opacity, 0..1. */
+    opacity?: number;
+    /** DEPTH (z) of this layer for depth-of-field, in the same arbitrary units as
+     *  `<Composition dof={{ focus }}>`. Layers at the focus depth stay sharp; the
+     *  farther a layer's `depth` is from `focus`, the more it defocuses (a blur the
+     *  reconciler computes from the camera aperture). Animate the comp's `focus` for a
+     *  rack-focus pull. No effect unless the comp sets `dof`. */
+    depth?: number;
+    /** 3D LAYER position `[x, y, z]` in world pixels — meaningful only inside a
+     *  `<Scene3D>`. `z = 0` is the framing plane (matches the 2D placement); larger
+     *  `z` is farther into the screen (smaller), negative `z` nearer the camera (After
+     *  Effects convention). Animate for fly-throughs / parallax / exploded views. */
+    position3d?: [number, number, number];
+    /** 3D LAYER rotation `[x, y, z]` in degrees (Z·Y·X): X pitch (tilt toward/away),
+     *  Y yaw (swing), Z roll (in-plane spin). Inside `<Scene3D>` only. GPU-only — the
+     *  CPU reference degrades to a flat depth-sorted composite (no out-of-plane tilt). */
+    rotation3d?: [number, number, number];
+    /** Pivot within this layer's content plane (px) that `position3d`/`rotation3d`
+     *  act about. Default: the layer's center. */
+    anchor3d?: [number, number];
+    /** EXTRUDE this layer's 2D outline into a lit 3D SOLID (the "3D logo / title"):
+     *  inside a `<Scene3D>`, a shape or text layer becomes a mesh with `depth`
+     *  thickness + side walls, shaded by a directional light so it catches the light
+     *  as it rotates. GPU only — the CPU reference + live preview draw the flat outline. */
+    extrude?: number | {
+        depth: number;
+    };
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode).
+     *  GPU/Vello-rendered (e.g. `'screen'`, `'multiply'`, `'overlay'`). */
+    blendMode?: BlendMode;
+    /** Clip this node and its subtree to a region (local space). */
+    clip?: ClipInput;
+    /** Matte (track matte / mask): a stencil SUBTREE, passed as a React element,
+     *  through which this node's content is revealed. The matte's alpha — or its
+     *  luminance, per `matteMode` — multiplies the content's alpha, so the content
+     *  (this node's children) shows only where the matte covers. The
+     *  strictly-more-powerful sibling of `clip`: the matte is a fully rendered,
+     *  animatable subtree (giant text, a gradient, a shape) — the signature
+     *  "media-through-type" move (a photo seen only through animated type). */
+    matte?: ReactElement;
+    /** Which channel of the {@link NodeProps.matte} subtree drives the reveal (CSS
+     *  `mask-mode`). `'alpha'` (default): content alpha ×= matte alpha. `'luminance'`:
+     *  content alpha ×= luma(matte) × matte alpha (white reveals, black hides). */
+    matteMode?: MatteMode;
+    /** Ordered, low-level screen-space effects on this node + subtree (render-to-texture). */
+    effects?: Effect[];
+    /** Gaussian blur std-dev in output px; sugar for `effects: [{ effect: 'blur', sigma }]`.
+     *  Honored by Vello AND the CPU reference once Phase 1 lands. */
+    blur?: number;
+    /** Directional (motion) blur sugar for `effects: [{ effect: 'directional_blur', … }]`:
+     *  a 1D blur of std-dev `sigma` (px) along `angle` (radians, default 0 = horizontal) —
+     *  the cinematic "in-motion" smear. Honored by Vello AND the CPU reference. */
+    directionalBlur?: {
+        sigma: number;
+        angle?: number;
+    };
+    /** Chromatic-aberration sugar: R/B split by `amount` px radially from centre. */
+    chromaticAberration?: number;
+    /** Vignette sugar — radial edge darkening. `amount` 0..1; `softness` 0..1 (default 0.5). */
+    vignette?: number | {
+        amount: number;
+        softness?: number;
+    };
+    /** Posterize sugar: quantize each channel to `levels` (≥2) discrete steps. */
+    posterize?: number;
+    /** Duotone sugar: map luminance to a gradient from `shadow` to `highlight`. */
+    duotone?: {
+        shadow: ColorInput;
+        highlight: ColorInput;
+    };
+    /** Chroma-key sugar: knock out `color`; `threshold` (default 0.4) + `smoothness`
+     *  (default 0.1) shape the soft matte edge. */
+    chromaKey?: {
+        color: ColorInput;
+        threshold?: number;
+        smoothness?: number;
+    };
+    /** Glow / bloom sugar for `effects: [{ effect: 'bloom', ... }]`: bright regions
+     *  (luminance above `threshold`, default 0.7; scaled by `intensity`, default 1)
+     *  blur with `sigma` and composite additively over the sharp subtree. Honored by
+     *  Vello AND the CPU reference. */
+    bloom?: number | {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    };
+    /** Cinematic color-grade sugar for `effects: [{ effect: 'color_grade', ... }]` —
+     *  the "land AI media" wedge: one grade unifies mismatched clips into a single
+     *  look. All five fields are optional and default to the neutral identity
+     *  (`exposure` 0, `contrast` 1, `saturation` 1, `temperature` 0, `tint` 0), so
+     *  `{}` is a no-op. Honored by Vello AND the CPU reference. */
+    grade?: {
+        /** Linear exposure gain (`2^exposure`); 0 = identity. */
+        exposure?: number;
+        /** Contrast around a 0.5 pivot; 1 = identity. */
+        contrast?: number;
+        /** Saturation; 1 = identity, 0 = grayscale, >1 = punchier. */
+        saturation?: number;
+        /** Warm/cool shift (R up / B down for positive); 0 = neutral. */
+        temperature?: number;
+        /** Green/magenta shift on G (positive = green); 0 = neutral. */
+        tint?: number;
+    };
+    /** Gooey / liquid / metaball-morph sugar for `effects: [{ effect: 'goo', ... }]`:
+     *  the subtree is blurred with `sigma`, then its alpha is sharpened around
+     *  `threshold` (the 0..1 cutoff, default 0.5) so overlapping shapes fuse into
+     *  solid forms joined by smooth necks (the "drops of liquid coalescing" look).
+     *  A bare number is the `sigma`. Honored by Vello AND the CPU reference. */
+    goo?: number | {
+        sigma: number;
+        threshold?: number;
+    };
+    /** Film-grain sugar for `effects: [{ effect: 'grain', ... }]`: luminance-banded,
+     *  animated monochrome noise added late over the subtree — the compositing "glue"
+     *  that makes mismatched sources read as one photographed image, and the dither
+     *  that hides 8-bit banding on dark gradients. A bare number is the `intensity`
+     *  (~0.04–0.1 is filmic); the object form adds `size` (grain scale in px, default
+     *  1) and `seed` (animation offset — pass the current frame for *living* grain,
+     *  default 0 = static). Honored by Vello AND the CPU reference. */
+    grain?: number | {
+        intensity: number;
+        size?: number;
+        seed?: number;
+    };
+    /** Frosted-glass sugar for `effects: [{ effect: 'backdrop_blur', ... }]`: samples
+     *  the already-composited BACKDROP *behind* this node (not its own subtree),
+     *  blurs it by `sigma` (output px), and draws it as the node's backing — then the
+     *  node's own content (e.g. a translucent panel `fill`) composites on top. A bare
+     *  number is just the `sigma`; the object form adds a `tint` (its alpha = tint
+     *  strength), a `brightness` and a `saturation` (CSS-style, `1` = identity).
+     *  Honored by Vello AND the CPU reference. */
+    backdropBlur?: number | {
+        sigma: number;
+        tint?: ColorInput;
+        brightness?: number;
+        saturation?: number;
+    };
+    /** Light-wrap sugar for `effects: [{ effect: 'light_wrap', ... }]`: bleeds the
+     *  blurred BACKDROP behind this node onto its own feathered EDGES — the #1
+     *  "shot in, not pasted on" compositing tell for a cut-out plate. A bare number
+     *  is the `sigma` (the backdrop blur / rim width); the object form adds a
+     *  `strength` (0 = off, ~1 = a natural spill). EXPORT/NATIVE only — the live
+     *  preview draws the node un-wrapped. */
+    lightWrap?: number | {
+        sigma: number;
+        strength?: number;
+    };
+    children?: ReactNode;
+}
+/** Paint props shared by shapes: a solid fill, a gradient (which takes
+ *  precedence), and a stroke. */
+interface PaintProps {
+    fill?: ColorInput;
+    gradient?: GradientInput;
+    stroke?: ColorInput;
+    strokeWidth?: number;
+    /** Stroke end-cap (CSS stroke-linecap). Default 'butt'. */
+    strokeCap?: 'butt' | 'round' | 'square';
+    /** Stroke corner-join (CSS stroke-linejoin). Default 'miter'. */
+    strokeJoin?: 'miter' | 'round' | 'bevel';
+    /** Dash pattern: alternating on/off px (e.g. [12, 8]). Omit for solid. */
+    strokeDash?: number[];
+    /** Phase offset into the dash pattern (px) — animate for a draw-on reveal. */
+    strokeDashOffset?: number;
+    /** TRIM PATHS (mograph line-draw): draw only a slice of the stroked outline.
+     *  `trimStart`/`trimEnd` are fractions 0..1 of the path's length (default 0 / 1);
+     *  `trimOffset` rotates the visible window around the path. Animate `trimEnd` 0→1
+     *  for a draw-on reveal. Needs a `stroke`; length is measured by the engine. */
+    trimStart?: number;
+    trimEnd?: number;
+    trimOffset?: number;
+    /** Drop shadow / glow behind the shape (CSS box-shadow). `blur` is the gaussian
+     *  std-dev; `(0,0)` offset reads as a centered glow. GPU/Vello-rendered. */
+    shadow?: {
+        color: ColorInput;
+        blur: number;
+        offsetX?: number;
+        offsetY?: number;
+        spread?: number;
+    };
+}
+interface CompositionProps {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    /** Opt into the cinematic LINEAR + ACES finishing pipeline (correct bloom/light,
+     *  light-wrap, halation). GPU/export only; off by default (gamma). */
+    linear?: boolean;
+    /** Composition-level cinematic FINISH: a linear-HDR finishing chain run after the
+     *  comp rasterizes — bloom bleeding REAL light (highlights exceed 1.0 and roll off),
+     *  warm halation — ending in one ACES film tone-map. The correct "looks shot" output
+     *  transform (unlike per-node effects, no HDR is lost between passes). GPU/export only. */
+    finish?: {
+        /** Linear exposure multiplier before the tone-map (1 = neutral; >1 brightens). */
+        exposure?: number;
+        /** Comp-level bloom in linear HDR. `sigma` = halo blur radius (px). */
+        bloom?: {
+            sigma: number;
+            threshold?: number;
+            intensity?: number;
+        };
+        /** Warm red/orange halation around highlights (0 = off, ~0.6 filmic). */
+        halation?: number;
+        /** Grade — white balance: + warm (boost red/cut blue), − cool. 0 = neutral. */
+        temperature?: number;
+        /** Grade — contrast around mid-grey. 1 = identity, >1 punchier. */
+        contrast?: number;
+        /** Grade — saturation. 1 = identity, 0 = greyscale, >1 richer. */
+        saturation?: number;
+        /** Vignette — radial edge darkening of the finished frame. 0 = off. */
+        vignette?: number;
+        /** Film grain intensity added in linear light (luminance-banded). 0 = off; the
+         *  current frame is used as the animation seed automatically. */
+        grain?: number;
+        /** A cinematic 3D color LUT applied as the FINAL finish step (after grade + ACES
+         *  + sRGB), as a trilinear lookup. `table` holds `size³` RGB triples in 0..1 with
+         *  RED varying fastest, then green, then blue. Honored by BOTH backends. */
+        lut?: {
+            size: number;
+            table: number[];
+        };
+    };
+    /** Per-object MOTION BLUR via temporal supersampling: each output frame is the
+     *  average of `samples` sub-frames spread across the shutter window, so anything
+     *  that MOVES smears by its own motion and static elements stay sharp — the
+     *  shutter-angle blur every pro comp ships with. `true` = a 180° shutter, 16
+     *  samples. Cost is `samples`× the render, so it's an EXPORT feature (the live
+     *  preview shows the sharp frame). */
+    motionBlur?: boolean | {
+        /** Shutter angle in degrees: how much of the frame the shutter is open. 180 =
+         *  half a frame (the film default); 360 = full-frame (heavier blur). */
+        shutter?: number;
+        /** Sub-frames averaged per output frame. More = smoother smear, linearly costlier. */
+        samples?: number;
+    };
+    /** DEPTH OF FIELD (2.5D rack focus): with this set, any layer carrying a `depth`
+     *  prop defocuses by how far its `depth` is from `focus` — sharp at the focus plane,
+     *  blurrier away from it. Animate `focus` for a focus pull. Resolved as a per-layer
+     *  blur (reuses the blur effect), so it works on both backends. */
+    dof?: {
+        /** The `depth` value that is in sharp focus. */
+        focus: number;
+        /** How fast blur grows with depth distance (px of blur per unit of depth past the
+         *  in-focus band). Bigger = shallower depth of field. Default 0.04. */
+        aperture?: number;
+        /** A sharp band (± in depth units) around `focus` that stays unblurred. Default 0. */
+        range?: number;
+        /** Clamp the blur σ (px) so far layers don't blur to mush. Default 40. */
+        maxBlur?: number;
+    };
+    children?: ReactNode;
+}
+/** The root of every ONDA tree: resolution + timing, like Remotion's. */
+declare function Composition(props: CompositionProps): react.DOMElement<CompositionProps, Element>;
+type GroupProps = NodeProps;
+/** A transform/opacity container with no visual of its own. */
+declare function Group(props: GroupProps): react.DOMElement<NodeProps, Element>;
+/** Props for {@link Repeater} (After Effects' shape "Repeater"). */
+interface RepeaterProps {
+    /** Number of copies (including the original). */
+    count: number;
+    /** Per-copy translation, applied cumulatively (copy i is offset i×). */
+    offsetX?: number;
+    offsetY?: number;
+    /** Per-copy rotation in degrees, applied cumulatively (a radial array / spiral). */
+    rotation?: number;
+    /** Per-copy scale factor, applied cumulatively (copy i is `scale**i`). 1 = none. */
+    scale?: number;
+    /** Pivot for the per-copy rotation/scale (local px). Default (0,0). */
+    originX?: number;
+    originY?: number;
+    /** Opacity of the first / last copy; the rest interpolate (a fade-out trail). */
+    startOpacity?: number;
+    endOpacity?: number;
+    children?: ReactNode;
+}
+/** REPEATER — stamp `children` `count` times, each copy COMPOUNDING one more step of
+ *  the transform (offset / rotation / scale) and a step of the opacity ramp: grids,
+ *  radial arrays, spirals, motion trails. Mirrors After Effects' shape Repeater.
+ *
+ *  Implemented as `count` nested transform groups (each adds one increment on top of
+ *  the previous, so the transforms truly compound into a spiral rather than a naive
+ *  `i×` fan), with a copy of `children` drawn at every level. Pure composition — it
+ *  renders identically on every backend. */
+declare function Repeater({ count, offsetX, offsetY, rotation, scale, originX, originY, startOpacity, endOpacity, children, }: RepeaterProps): ReactElement;
+/** Props for {@link Merge} (After Effects' shape "Merge Paths"). */
+interface MergeProps extends PaintProps, Omit<NodeProps, 'children'> {
+    /** Boolean operation over the SHAPE children: `union` (add) / `difference` (the
+     *  first minus the rest) / `intersect` (common area) / `xor` (symmetric difference).
+     *  Default `union`. */
+    op?: 'union' | 'difference' | 'intersect' | 'xor';
+    children?: ReactNode;
+}
+/** MERGE PATHS — combine the SHAPE children into ONE outline via a boolean `op`
+ *  (union / difference / intersect / xor). A ring = circle − circle; a lens =
+ *  circle ∩ circle; a speech bubble = rect ∪ triangle. The children are folded into
+ *  the result (not drawn separately), so fill/stroke the `<Merge>` itself. Curve
+ *  outlines are flattened before the boolean; resolved on both backends (i_overlay). */
+declare function Merge(props: MergeProps): react.DOMElement<MergeProps, Element>;
+type PrecompProps = NodeProps;
+/** PRECOMP — flatten this subtree to a SINGLE layer (render-to-texture) before its
+ *  `opacity` / `blendMode` / effects apply, the way After Effects' precomp /
+ *  collapse-transformations does. Reach for it when you fade or blend-mode a GROUP of
+ *  overlapping layers and don't want the overlaps to double-up, or to treat a group as
+ *  one unit. (It's a `<Group>` carrying the `isolate` effect.) */
+declare function Precomp(props: PrecompProps): react.FunctionComponentElement<NodeProps>;
+/** Flex layout props for {@link Flex} / {@link AbsoluteFill} (CSS-flexbox subset). */
+interface FlexProps extends NodeProps, Layout {
+}
+/** A flex container: lays out its direct children (row/column, with
+ *  justify/align/gap/padding) instead of requiring absolute x/y. Resolved to
+ *  absolute positions by the engine's layout pass. */
+declare function Flex(props: FlexProps): react.DOMElement<{
+    layout: Layout;
+    /** Stable id, required to target the node from an animation timeline. */
+    id?: number;
+    /** Translation in pixels. */
+    x?: number;
+    y?: number;
+    /** Scale factor (1 = identity). */
+    scaleX?: number;
+    scaleY?: number;
+    /** Clockwise rotation in degrees, about the transform origin (default (0,0)).
+     *  Renders on the GPU (Vello) backend; the CPU reference rasterizer ignores it. */
+    rotation?: number;
+    /** Pivot for scale + rotation in local px (CSS transform-origin). Default (0,0).
+     *  For "about the center", pass half the node's width/height. */
+    originX?: number;
+    originY?: number;
+    /** Opacity, 0..1. */
+    opacity?: number;
+    /** DEPTH (z) of this layer for depth-of-field, in the same arbitrary units as
+     *  `<Composition dof={{ focus }}>`. Layers at the focus depth stay sharp; the
+     *  farther a layer's `depth` is from `focus`, the more it defocuses (a blur the
+     *  reconciler computes from the camera aperture). Animate the comp's `focus` for a
+     *  rack-focus pull. No effect unless the comp sets `dof`. */
+    depth?: number;
+    /** 3D LAYER position `[x, y, z]` in world pixels — meaningful only inside a
+     *  `<Scene3D>`. `z = 0` is the framing plane (matches the 2D placement); larger
+     *  `z` is farther into the screen (smaller), negative `z` nearer the camera (After
+     *  Effects convention). Animate for fly-throughs / parallax / exploded views. */
+    position3d?: [number, number, number];
+    /** 3D LAYER rotation `[x, y, z]` in degrees (Z·Y·X): X pitch (tilt toward/away),
+     *  Y yaw (swing), Z roll (in-plane spin). Inside `<Scene3D>` only. GPU-only — the
+     *  CPU reference degrades to a flat depth-sorted composite (no out-of-plane tilt). */
+    rotation3d?: [number, number, number];
+    /** Pivot within this layer's content plane (px) that `position3d`/`rotation3d`
+     *  act about. Default: the layer's center. */
+    anchor3d?: [number, number];
+    /** EXTRUDE this layer's 2D outline into a lit 3D SOLID (the "3D logo / title"):
+     *  inside a `<Scene3D>`, a shape or text layer becomes a mesh with `depth`
+     *  thickness + side walls, shaded by a directional light so it catches the light
+     *  as it rotates. GPU only — the CPU reference + live preview draw the flat outline. */
+    extrude?: number | {
+        depth: number;
+    };
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode).
+     *  GPU/Vello-rendered (e.g. `'screen'`, `'multiply'`, `'overlay'`). */
+    blendMode?: BlendMode;
+    /** Clip this node and its subtree to a region (local space). */
+    clip?: ClipInput;
+    /** Matte (track matte / mask): a stencil SUBTREE, passed as a React element,
+     *  through which this node's content is revealed. The matte's alpha — or its
+     *  luminance, per `matteMode` — multiplies the content's alpha, so the content
+     *  (this node's children) shows only where the matte covers. The
+     *  strictly-more-powerful sibling of `clip`: the matte is a fully rendered,
+     *  animatable subtree (giant text, a gradient, a shape) — the signature
+     *  "media-through-type" move (a photo seen only through animated type). */
+    matte?: ReactElement;
+    /** Which channel of the {@link NodeProps.matte} subtree drives the reveal (CSS
+     *  `mask-mode`). `'alpha'` (default): content alpha ×= matte alpha. `'luminance'`:
+     *  content alpha ×= luma(matte) × matte alpha (white reveals, black hides). */
+    matteMode?: MatteMode;
+    /** Ordered, low-level screen-space effects on this node + subtree (render-to-texture). */
+    effects?: Effect[];
+    /** Gaussian blur std-dev in output px; sugar for `effects: [{ effect: 'blur', sigma }]`.
+     *  Honored by Vello AND the CPU reference once Phase 1 lands. */
+    blur?: number;
+    /** Directional (motion) blur sugar for `effects: [{ effect: 'directional_blur', … }]`:
+     *  a 1D blur of std-dev `sigma` (px) along `angle` (radians, default 0 = horizontal) —
+     *  the cinematic "in-motion" smear. Honored by Vello AND the CPU reference. */
+    directionalBlur?: {
+        sigma: number;
+        angle?: number;
+    };
+    /** Chromatic-aberration sugar: R/B split by `amount` px radially from centre. */
+    chromaticAberration?: number;
+    /** Vignette sugar — radial edge darkening. `amount` 0..1; `softness` 0..1 (default 0.5). */
+    vignette?: number | {
+        amount: number;
+        softness?: number;
+    };
+    /** Posterize sugar: quantize each channel to `levels` (≥2) discrete steps. */
+    posterize?: number;
+    /** Duotone sugar: map luminance to a gradient from `shadow` to `highlight`. */
+    duotone?: {
+        shadow: ColorInput;
+        highlight: ColorInput;
+    };
+    /** Chroma-key sugar: knock out `color`; `threshold` (default 0.4) + `smoothness`
+     *  (default 0.1) shape the soft matte edge. */
+    chromaKey?: {
+        color: ColorInput;
+        threshold?: number;
+        smoothness?: number;
+    };
+    /** Glow / bloom sugar for `effects: [{ effect: 'bloom', ... }]`: bright regions
+     *  (luminance above `threshold`, default 0.7; scaled by `intensity`, default 1)
+     *  blur with `sigma` and composite additively over the sharp subtree. Honored by
+     *  Vello AND the CPU reference. */
+    bloom?: number | {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    };
+    /** Cinematic color-grade sugar for `effects: [{ effect: 'color_grade', ... }]` —
+     *  the "land AI media" wedge: one grade unifies mismatched clips into a single
+     *  look. All five fields are optional and default to the neutral identity
+     *  (`exposure` 0, `contrast` 1, `saturation` 1, `temperature` 0, `tint` 0), so
+     *  `{}` is a no-op. Honored by Vello AND the CPU reference. */
+    grade?: {
+        /** Linear exposure gain (`2^exposure`); 0 = identity. */
+        exposure?: number;
+        /** Contrast around a 0.5 pivot; 1 = identity. */
+        contrast?: number;
+        /** Saturation; 1 = identity, 0 = grayscale, >1 = punchier. */
+        saturation?: number;
+        /** Warm/cool shift (R up / B down for positive); 0 = neutral. */
+        temperature?: number;
+        /** Green/magenta shift on G (positive = green); 0 = neutral. */
+        tint?: number;
+    };
+    /** Gooey / liquid / metaball-morph sugar for `effects: [{ effect: 'goo', ... }]`:
+     *  the subtree is blurred with `sigma`, then its alpha is sharpened around
+     *  `threshold` (the 0..1 cutoff, default 0.5) so overlapping shapes fuse into
+     *  solid forms joined by smooth necks (the "drops of liquid coalescing" look).
+     *  A bare number is the `sigma`. Honored by Vello AND the CPU reference. */
+    goo?: number | {
+        sigma: number;
+        threshold?: number;
+    };
+    /** Film-grain sugar for `effects: [{ effect: 'grain', ... }]`: luminance-banded,
+     *  animated monochrome noise added late over the subtree — the compositing "glue"
+     *  that makes mismatched sources read as one photographed image, and the dither
+     *  that hides 8-bit banding on dark gradients. A bare number is the `intensity`
+     *  (~0.04–0.1 is filmic); the object form adds `size` (grain scale in px, default
+     *  1) and `seed` (animation offset — pass the current frame for *living* grain,
+     *  default 0 = static). Honored by Vello AND the CPU reference. */
+    grain?: number | {
+        intensity: number;
+        size?: number;
+        seed?: number;
+    };
+    /** Frosted-glass sugar for `effects: [{ effect: 'backdrop_blur', ... }]`: samples
+     *  the already-composited BACKDROP *behind* this node (not its own subtree),
+     *  blurs it by `sigma` (output px), and draws it as the node's backing — then the
+     *  node's own content (e.g. a translucent panel `fill`) composites on top. A bare
+     *  number is just the `sigma`; the object form adds a `tint` (its alpha = tint
+     *  strength), a `brightness` and a `saturation` (CSS-style, `1` = identity).
+     *  Honored by Vello AND the CPU reference. */
+    backdropBlur?: number | {
+        sigma: number;
+        tint?: ColorInput;
+        brightness?: number;
+        saturation?: number;
+    };
+    /** Light-wrap sugar for `effects: [{ effect: 'light_wrap', ... }]`: bleeds the
+     *  blurred BACKDROP behind this node onto its own feathered EDGES — the #1
+     *  "shot in, not pasted on" compositing tell for a cut-out plate. A bare number
+     *  is the `sigma` (the backdrop blur / rim width); the object form adds a
+     *  `strength` (0 = off, ~1 = a natural spill). EXPORT/NATIVE only — the live
+     *  preview draws the node un-wrapped. */
+    lightWrap?: number | {
+        sigma: number;
+        strength?: number;
+    };
+    children?: ReactNode;
+}, Element>;
+interface CenterProps extends Omit<NodeProps, 'children'> {
+    /** Top of the centering row (px). Default 0. */
+    y?: number;
+    /** Height of the row the content is centered within (px). Omit to size to content. */
+    height?: number;
+    children?: ReactNode;
+}
+/** Horizontally CENTER children across the composition width at vertical position `y` —
+ *  sugar for a full-width `<Flex justify="center">`. The reliable way to center text:
+ *  the layout pass measures the real glyph width natively, so you never hand-compute an
+ *  `x` (which mis-centers the moment the text, font, or size changes). */
+declare function Center(props: CenterProps): react.FunctionComponentElement<FlexProps>;
+type AbsoluteFillProps = Omit<FlexProps, 'width' | 'height'>;
+/** A full-canvas flex container (like Remotion's `<AbsoluteFill>`): fills the
+ *  composition and lays children out (column by default) — ideal for centering
+ *  or stacking. Combine with `justify`/`align` to center content. */
+declare function AbsoluteFill(props: AbsoluteFillProps): react.DOMElement<{
+    layout: Layout;
+    /** Stable id, required to target the node from an animation timeline. */
+    id?: number;
+    /** Translation in pixels. */
+    x?: number;
+    y?: number;
+    /** Scale factor (1 = identity). */
+    scaleX?: number;
+    scaleY?: number;
+    /** Clockwise rotation in degrees, about the transform origin (default (0,0)).
+     *  Renders on the GPU (Vello) backend; the CPU reference rasterizer ignores it. */
+    rotation?: number;
+    /** Pivot for scale + rotation in local px (CSS transform-origin). Default (0,0).
+     *  For "about the center", pass half the node's width/height. */
+    originX?: number;
+    originY?: number;
+    /** Opacity, 0..1. */
+    opacity?: number;
+    /** DEPTH (z) of this layer for depth-of-field, in the same arbitrary units as
+     *  `<Composition dof={{ focus }}>`. Layers at the focus depth stay sharp; the
+     *  farther a layer's `depth` is from `focus`, the more it defocuses (a blur the
+     *  reconciler computes from the camera aperture). Animate the comp's `focus` for a
+     *  rack-focus pull. No effect unless the comp sets `dof`. */
+    depth?: number;
+    /** 3D LAYER position `[x, y, z]` in world pixels — meaningful only inside a
+     *  `<Scene3D>`. `z = 0` is the framing plane (matches the 2D placement); larger
+     *  `z` is farther into the screen (smaller), negative `z` nearer the camera (After
+     *  Effects convention). Animate for fly-throughs / parallax / exploded views. */
+    position3d?: [number, number, number];
+    /** 3D LAYER rotation `[x, y, z]` in degrees (Z·Y·X): X pitch (tilt toward/away),
+     *  Y yaw (swing), Z roll (in-plane spin). Inside `<Scene3D>` only. GPU-only — the
+     *  CPU reference degrades to a flat depth-sorted composite (no out-of-plane tilt). */
+    rotation3d?: [number, number, number];
+    /** Pivot within this layer's content plane (px) that `position3d`/`rotation3d`
+     *  act about. Default: the layer's center. */
+    anchor3d?: [number, number];
+    /** EXTRUDE this layer's 2D outline into a lit 3D SOLID (the "3D logo / title"):
+     *  inside a `<Scene3D>`, a shape or text layer becomes a mesh with `depth`
+     *  thickness + side walls, shaded by a directional light so it catches the light
+     *  as it rotates. GPU only — the CPU reference + live preview draw the flat outline. */
+    extrude?: number | {
+        depth: number;
+    };
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode).
+     *  GPU/Vello-rendered (e.g. `'screen'`, `'multiply'`, `'overlay'`). */
+    blendMode?: BlendMode;
+    /** Clip this node and its subtree to a region (local space). */
+    clip?: ClipInput;
+    /** Matte (track matte / mask): a stencil SUBTREE, passed as a React element,
+     *  through which this node's content is revealed. The matte's alpha — or its
+     *  luminance, per `matteMode` — multiplies the content's alpha, so the content
+     *  (this node's children) shows only where the matte covers. The
+     *  strictly-more-powerful sibling of `clip`: the matte is a fully rendered,
+     *  animatable subtree (giant text, a gradient, a shape) — the signature
+     *  "media-through-type" move (a photo seen only through animated type). */
+    matte?: ReactElement;
+    /** Which channel of the {@link NodeProps.matte} subtree drives the reveal (CSS
+     *  `mask-mode`). `'alpha'` (default): content alpha ×= matte alpha. `'luminance'`:
+     *  content alpha ×= luma(matte) × matte alpha (white reveals, black hides). */
+    matteMode?: MatteMode;
+    /** Ordered, low-level screen-space effects on this node + subtree (render-to-texture). */
+    effects?: Effect[];
+    /** Gaussian blur std-dev in output px; sugar for `effects: [{ effect: 'blur', sigma }]`.
+     *  Honored by Vello AND the CPU reference once Phase 1 lands. */
+    blur?: number;
+    /** Directional (motion) blur sugar for `effects: [{ effect: 'directional_blur', … }]`:
+     *  a 1D blur of std-dev `sigma` (px) along `angle` (radians, default 0 = horizontal) —
+     *  the cinematic "in-motion" smear. Honored by Vello AND the CPU reference. */
+    directionalBlur?: {
+        sigma: number;
+        angle?: number;
+    };
+    /** Chromatic-aberration sugar: R/B split by `amount` px radially from centre. */
+    chromaticAberration?: number;
+    /** Vignette sugar — radial edge darkening. `amount` 0..1; `softness` 0..1 (default 0.5). */
+    vignette?: number | {
+        amount: number;
+        softness?: number;
+    };
+    /** Posterize sugar: quantize each channel to `levels` (≥2) discrete steps. */
+    posterize?: number;
+    /** Duotone sugar: map luminance to a gradient from `shadow` to `highlight`. */
+    duotone?: {
+        shadow: ColorInput;
+        highlight: ColorInput;
+    };
+    /** Chroma-key sugar: knock out `color`; `threshold` (default 0.4) + `smoothness`
+     *  (default 0.1) shape the soft matte edge. */
+    chromaKey?: {
+        color: ColorInput;
+        threshold?: number;
+        smoothness?: number;
+    };
+    /** Glow / bloom sugar for `effects: [{ effect: 'bloom', ... }]`: bright regions
+     *  (luminance above `threshold`, default 0.7; scaled by `intensity`, default 1)
+     *  blur with `sigma` and composite additively over the sharp subtree. Honored by
+     *  Vello AND the CPU reference. */
+    bloom?: number | {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    };
+    /** Cinematic color-grade sugar for `effects: [{ effect: 'color_grade', ... }]` —
+     *  the "land AI media" wedge: one grade unifies mismatched clips into a single
+     *  look. All five fields are optional and default to the neutral identity
+     *  (`exposure` 0, `contrast` 1, `saturation` 1, `temperature` 0, `tint` 0), so
+     *  `{}` is a no-op. Honored by Vello AND the CPU reference. */
+    grade?: {
+        /** Linear exposure gain (`2^exposure`); 0 = identity. */
+        exposure?: number;
+        /** Contrast around a 0.5 pivot; 1 = identity. */
+        contrast?: number;
+        /** Saturation; 1 = identity, 0 = grayscale, >1 = punchier. */
+        saturation?: number;
+        /** Warm/cool shift (R up / B down for positive); 0 = neutral. */
+        temperature?: number;
+        /** Green/magenta shift on G (positive = green); 0 = neutral. */
+        tint?: number;
+    };
+    /** Gooey / liquid / metaball-morph sugar for `effects: [{ effect: 'goo', ... }]`:
+     *  the subtree is blurred with `sigma`, then its alpha is sharpened around
+     *  `threshold` (the 0..1 cutoff, default 0.5) so overlapping shapes fuse into
+     *  solid forms joined by smooth necks (the "drops of liquid coalescing" look).
+     *  A bare number is the `sigma`. Honored by Vello AND the CPU reference. */
+    goo?: number | {
+        sigma: number;
+        threshold?: number;
+    };
+    /** Film-grain sugar for `effects: [{ effect: 'grain', ... }]`: luminance-banded,
+     *  animated monochrome noise added late over the subtree — the compositing "glue"
+     *  that makes mismatched sources read as one photographed image, and the dither
+     *  that hides 8-bit banding on dark gradients. A bare number is the `intensity`
+     *  (~0.04–0.1 is filmic); the object form adds `size` (grain scale in px, default
+     *  1) and `seed` (animation offset — pass the current frame for *living* grain,
+     *  default 0 = static). Honored by Vello AND the CPU reference. */
+    grain?: number | {
+        intensity: number;
+        size?: number;
+        seed?: number;
+    };
+    /** Frosted-glass sugar for `effects: [{ effect: 'backdrop_blur', ... }]`: samples
+     *  the already-composited BACKDROP *behind* this node (not its own subtree),
+     *  blurs it by `sigma` (output px), and draws it as the node's backing — then the
+     *  node's own content (e.g. a translucent panel `fill`) composites on top. A bare
+     *  number is just the `sigma`; the object form adds a `tint` (its alpha = tint
+     *  strength), a `brightness` and a `saturation` (CSS-style, `1` = identity).
+     *  Honored by Vello AND the CPU reference. */
+    backdropBlur?: number | {
+        sigma: number;
+        tint?: ColorInput;
+        brightness?: number;
+        saturation?: number;
+    };
+    /** Light-wrap sugar for `effects: [{ effect: 'light_wrap', ... }]`: bleeds the
+     *  blurred BACKDROP behind this node onto its own feathered EDGES — the #1
+     *  "shot in, not pasted on" compositing tell for a cut-out plate. A bare number
+     *  is the `sigma` (the backdrop blur / rim width); the object form adds a
+     *  `strength` (0 = off, ~1 = a natural spill). EXPORT/NATIVE only — the live
+     *  preview draws the node un-wrapped. */
+    lightWrap?: number | {
+        sigma: number;
+        strength?: number;
+    };
+    children?: ReactNode;
+}, Element>;
+interface CameraProps {
+    /** The world — children laid out in absolute WORLD-pixel coordinates. */
+    children?: ReactNode;
+    /** World x (px) to center in the viewport. Default: viewport center (no pan). */
+    focusX?: number;
+    /** World y (px) to center in the viewport. Default: viewport center (no pan). */
+    focusY?: number;
+    /** Zoom about the focus point. 1 = neutral, >1 = pushed in. */
+    zoom?: number;
+    /** Camera roll in degrees (2D rotation about the focus point). GPU-only. */
+    rotate?: number;
+    /** Viewport size; defaults to the composition canvas. */
+    viewportWidth?: number;
+    viewportHeight?: number;
+}
+/**
+ * A 2D camera: frames an oversized "world" (its children, laid out in world-pixel
+ * coordinates) by centering a world point in the viewport at a given zoom + roll —
+ * pans across a grid larger than the canvas, push-in fly-overs, focus moves.
+ *
+ * Pure translate/scale/rotate — a STACK OF {@link Group}s, no new scene node:
+ * `translate(vw/2,vh/2) ∘ [scale·rotate about origin] ∘ translate(-focus)`, so the
+ * world point `focus` lands at the viewport center, scaled by `zoom`. (`rotate`
+ * renders on the GPU/Vello backend only, like {@link NodeProps.rotation}.) Animate
+ * focus/zoom per frame ({@link useCurrentFrame} + interpolate) for a moving camera.
+ */
+declare function Camera(props: CameraProps): react.FunctionComponentElement<NodeProps>;
+interface Scene3DProps extends Omit<NodeProps, 'children'> {
+    /** The perspective camera for this 3D world. Omit fields to derive a default that
+     *  frames the `z = 0` plane to fill the comp (so layers at `z = 0` match their 2D
+     *  placement). Animate `position`/`target` per frame for camera moves. */
+    camera?: Camera3D;
+    /** The 3D LAYERS — direct children, each placed by its `position3d` / `rotation3d`
+     *  / `anchor3d`. Layers without a `position3d` sit at `z = 0` (their 2D spot). */
+    children?: ReactNode;
+}
+/**
+ * A 3D SCENE: its direct children become 3D LAYERS in one shared 3D world, viewed
+ * through a perspective `camera`. Each layer is a flat plane (its rendered 2D
+ * content) placed by `position3d` (world x/y/z) and tilted by `rotation3d`, then
+ * depth-sorted and composited as a single layer. The mograph core of "3D" —
+ * camera fly-throughs, card walls, parallax, exploded UI, billboard text.
+ *
+ * GPU (Vello) runs true perspective; the CPU reference degrades to a 2.5D
+ * depth-sorted composite (per-layer distance scale, no out-of-plane tilt). A layer
+ * at `z = 0` with no rotation renders pixel-identical to its 2D placement, so
+ * wrapping content in `<Scene3D>` changes nothing until you move layers in z.
+ */
+declare function Scene3D(props: Scene3DProps): ReactElement<{
+    camera3d: Camera3D;
+    blur?: number
+    /** Directional (motion) blur sugar for `effects: [{ effect: 'directional_blur', … }]`:
+     *  a 1D blur of std-dev `sigma` (px) along `angle` (radians, default 0 = horizontal) —
+     *  the cinematic "in-motion" smear. Honored by Vello AND the CPU reference. */
+     | undefined;
+    vignette?: number | {
+        amount: number;
+        softness?: number;
+    }
+    /** Posterize sugar: quantize each channel to `levels` (≥2) discrete steps. */
+     | undefined;
+    posterize?: number
+    /** Duotone sugar: map luminance to a gradient from `shadow` to `highlight`. */
+     | undefined;
+    duotone?: {
+        shadow: ColorInput;
+        highlight: ColorInput;
+    }
+    /** Chroma-key sugar: knock out `color`; `threshold` (default 0.4) + `smoothness`
+     *  (default 0.1) shape the soft matte edge. */
+     | undefined;
+    bloom?: number | {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    }
+    /** Cinematic color-grade sugar for `effects: [{ effect: 'color_grade', ... }]` —
+     *  the "land AI media" wedge: one grade unifies mismatched clips into a single
+     *  look. All five fields are optional and default to the neutral identity
+     *  (`exposure` 0, `contrast` 1, `saturation` 1, `temperature` 0, `tint` 0), so
+     *  `{}` is a no-op. Honored by Vello AND the CPU reference. */
+     | undefined;
+    goo?: number | {
+        sigma: number;
+        threshold?: number;
+    }
+    /** Film-grain sugar for `effects: [{ effect: 'grain', ... }]`: luminance-banded,
+     *  animated monochrome noise added late over the subtree — the compositing "glue"
+     *  that makes mismatched sources read as one photographed image, and the dither
+     *  that hides 8-bit banding on dark gradients. A bare number is the `intensity`
+     *  (~0.04–0.1 is filmic); the object form adds `size` (grain scale in px, default
+     *  1) and `seed` (animation offset — pass the current frame for *living* grain,
+     *  default 0 = static). Honored by Vello AND the CPU reference. */
+     | undefined;
+    grain?: number | {
+        intensity: number;
+        size?: number;
+        seed?: number;
+    }
+    /** Frosted-glass sugar for `effects: [{ effect: 'backdrop_blur', ... }]`: samples
+     *  the already-composited BACKDROP *behind* this node (not its own subtree),
+     *  blurs it by `sigma` (output px), and draws it as the node's backing — then the
+     *  node's own content (e.g. a translucent panel `fill`) composites on top. A bare
+     *  number is just the `sigma`; the object form adds a `tint` (its alpha = tint
+     *  strength), a `brightness` and a `saturation` (CSS-style, `1` = identity).
+     *  Honored by Vello AND the CPU reference. */
+     | undefined;
+    id?: number
+    /** Translation in pixels. */
+     | undefined;
+    x?: number | undefined;
+    y?: number
+    /** Scale factor (1 = identity). */
+     | undefined;
+    scaleX?: number | undefined;
+    scaleY?: number
+    /** Clockwise rotation in degrees, about the transform origin (default (0,0)).
+     *  Renders on the GPU (Vello) backend; the CPU reference rasterizer ignores it. */
+     | undefined;
+    rotation?: number
+    /** Pivot for scale + rotation in local px (CSS transform-origin). Default (0,0).
+     *  For "about the center", pass half the node's width/height. */
+     | undefined;
+    originX?: number | undefined;
+    originY?: number
+    /** Opacity, 0..1. */
+     | undefined;
+    opacity?: number
+    /** DEPTH (z) of this layer for depth-of-field, in the same arbitrary units as
+     *  `<Composition dof={{ focus }}>`. Layers at the focus depth stay sharp; the
+     *  farther a layer's `depth` is from `focus`, the more it defocuses (a blur the
+     *  reconciler computes from the camera aperture). Animate the comp's `focus` for a
+     *  rack-focus pull. No effect unless the comp sets `dof`. */
+     | undefined;
+    depth?: number
+    /** 3D LAYER position `[x, y, z]` in world pixels — meaningful only inside a
+     *  `<Scene3D>`. `z = 0` is the framing plane (matches the 2D placement); larger
+     *  `z` is farther into the screen (smaller), negative `z` nearer the camera (After
+     *  Effects convention). Animate for fly-throughs / parallax / exploded views. */
+     | undefined;
+    position3d?: [number, number, number]
+    /** 3D LAYER rotation `[x, y, z]` in degrees (Z·Y·X): X pitch (tilt toward/away),
+     *  Y yaw (swing), Z roll (in-plane spin). Inside `<Scene3D>` only. GPU-only — the
+     *  CPU reference degrades to a flat depth-sorted composite (no out-of-plane tilt). */
+     | undefined;
+    rotation3d?: [number, number, number]
+    /** Pivot within this layer's content plane (px) that `position3d`/`rotation3d`
+     *  act about. Default: the layer's center. */
+     | undefined;
+    anchor3d?: [number, number]
+    /** EXTRUDE this layer's 2D outline into a lit 3D SOLID (the "3D logo / title"):
+     *  inside a `<Scene3D>`, a shape or text layer becomes a mesh with `depth`
+     *  thickness + side walls, shaded by a directional light so it catches the light
+     *  as it rotates. GPU only — the CPU reference + live preview draw the flat outline. */
+     | undefined;
+    extrude?: number | {
+        depth: number;
+    }
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode).
+     *  GPU/Vello-rendered (e.g. `'screen'`, `'multiply'`, `'overlay'`). */
+     | undefined;
+    blendMode?: BlendMode
+    /** Clip this node and its subtree to a region (local space). */
+     | undefined;
+    clip?: ClipInput
+    /** Matte (track matte / mask): a stencil SUBTREE, passed as a React element,
+     *  through which this node's content is revealed. The matte's alpha — or its
+     *  luminance, per `matteMode` — multiplies the content's alpha, so the content
+     *  (this node's children) shows only where the matte covers. The
+     *  strictly-more-powerful sibling of `clip`: the matte is a fully rendered,
+     *  animatable subtree (giant text, a gradient, a shape) — the signature
+     *  "media-through-type" move (a photo seen only through animated type). */
+     | undefined;
+    matte?: ReactElement
+    /** Which channel of the {@link NodeProps.matte} subtree drives the reveal (CSS
+     *  `mask-mode`). `'alpha'` (default): content alpha ×= matte alpha. `'luminance'`:
+     *  content alpha ×= luma(matte) × matte alpha (white reveals, black hides). */
+     | undefined;
+    matteMode?: MatteMode
+    /** Ordered, low-level screen-space effects on this node + subtree (render-to-texture). */
+     | undefined;
+    effects?: Effect[]
+    /** Gaussian blur std-dev in output px; sugar for `effects: [{ effect: 'blur', sigma }]`.
+     *  Honored by Vello AND the CPU reference once Phase 1 lands. */
+     | undefined;
+    directionalBlur?: {
+        sigma: number;
+        angle?: number;
+    }
+    /** Chromatic-aberration sugar: R/B split by `amount` px radially from centre. */
+     | undefined;
+    chromaticAberration?: number
+    /** Vignette sugar — radial edge darkening. `amount` 0..1; `softness` 0..1 (default 0.5). */
+     | undefined;
+    chromaKey?: {
+        color: ColorInput;
+        threshold?: number;
+        smoothness?: number;
+    }
+    /** Glow / bloom sugar for `effects: [{ effect: 'bloom', ... }]`: bright regions
+     *  (luminance above `threshold`, default 0.7; scaled by `intensity`, default 1)
+     *  blur with `sigma` and composite additively over the sharp subtree. Honored by
+     *  Vello AND the CPU reference. */
+     | undefined;
+    grade?: {
+        /** Linear exposure gain (`2^exposure`); 0 = identity. */
+        exposure?: number;
+        /** Contrast around a 0.5 pivot; 1 = identity. */
+        contrast?: number;
+        /** Saturation; 1 = identity, 0 = grayscale, >1 = punchier. */
+        saturation?: number;
+        /** Warm/cool shift (R up / B down for positive); 0 = neutral. */
+        temperature?: number;
+        /** Green/magenta shift on G (positive = green); 0 = neutral. */
+        tint?: number;
+    }
+    /** Gooey / liquid / metaball-morph sugar for `effects: [{ effect: 'goo', ... }]`:
+     *  the subtree is blurred with `sigma`, then its alpha is sharpened around
+     *  `threshold` (the 0..1 cutoff, default 0.5) so overlapping shapes fuse into
+     *  solid forms joined by smooth necks (the "drops of liquid coalescing" look).
+     *  A bare number is the `sigma`. Honored by Vello AND the CPU reference. */
+     | undefined;
+    backdropBlur?: number | {
+        sigma: number;
+        tint?: ColorInput;
+        brightness?: number;
+        saturation?: number;
+    }
+    /** Light-wrap sugar for `effects: [{ effect: 'light_wrap', ... }]`: bleeds the
+     *  blurred BACKDROP behind this node onto its own feathered EDGES — the #1
+     *  "shot in, not pasted on" compositing tell for a cut-out plate. A bare number
+     *  is the `sigma` (the backdrop blur / rim width); the object form adds a
+     *  `strength` (0 = off, ~1 = a natural spill). EXPORT/NATIVE only — the live
+     *  preview draws the node un-wrapped. */
+     | undefined;
+    lightWrap?: number | {
+        sigma: number;
+        strength?: number;
+    } | undefined;
+}, string | react.JSXElementConstructor<any>>;
+interface RectProps extends NodeProps, PaintProps {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+}
+declare function Rect(props: RectProps): react.DOMElement<RectProps, Element>;
+interface EllipseProps extends NodeProps, PaintProps {
+    width: number;
+    height: number;
+}
+declare function Ellipse(props: EllipseProps): react.DOMElement<EllipseProps, Element>;
+interface PathProps extends NodeProps, PaintProps {
+    /** SVG path data (e.g. `"M0 0 L100 0 Z"`), in the node's local space. */
+    d: string;
+}
+/** An arbitrary vector outline from SVG path data. Renders on the GPU (Vello)
+ *  backend; the CPU reference rasterizer skips paths. */
+declare function Path(props: PathProps): react.DOMElement<PathProps, Element>;
+/** One styled run for rich `<Text>` — overrides the node's style. */
+interface TextRunInput {
+    text: string;
+    color?: ColorInput;
+    fontSize?: number;
+    /** Font family (must be loaded; bundled: "Open Sans", "IBM Plex Sans"). */
+    fontFamily?: string;
+    /** CSS weight 1..1000 (700 = bold). */
+    fontWeight?: number;
+    italic?: boolean;
+}
+interface TextProps extends NodeProps {
+    fontSize?: number;
+    color?: ColorInput;
+    /** Font family (must be loaded; bundled: "Open Sans", "IBM Plex Sans"). */
+    fontFamily?: string;
+    /** CSS weight 1..1000 (700 = bold). */
+    fontWeight?: number;
+    italic?: boolean;
+    /** Extra px between glyphs (CSS `letter-spacing` / tracking). `0` = natural;
+     *  negative tightens. Applied on the GPU/preview (Vello) text path. */
+    letterSpacing?: number;
+    /** Rich multi-style runs. When set, these replace the text children — each run
+     *  may override color/size/family/weight/style. Renders per-run on the GPU
+     *  (Vello); the CPU backend draws their concatenated text in the node style. */
+    runs?: TextRunInput[];
+    children?: ReactNode;
+}
+declare function Text(props: TextProps): react.DOMElement<TextProps, Element>;
+interface ImageProps extends NodeProps {
+    src: string;
+    /** Target box width in px. With `height`, the decoded image is fitted into this
+     *  box per `fit` — the renderer measures the image, so the component doesn't
+     *  need its intrinsic size. Omit both for the image's intrinsic pixel size. */
+    width?: number;
+    height?: number;
+    /** How to fit the image into the `width`×`height` box (default `'cover'`). */
+    fit?: ImageFit;
+    /** Gaussian blur radius (sigma, in source pixels) applied to the decoded image
+     *  by the engine's image pass. `0`/omitted leaves it sharp; animating it gives
+     *  a soft→sharp "focus pull" entrance. Identical on every backend. */
+    blur?: number;
+}
+declare function Image(props: ImageProps): react.DOMElement<ImageProps, Element>;
+interface VideoProps extends NodeProps {
+    /** Path, URL, or `data:` URI of the video. The frame at the current time is
+     *  decoded by the player (browser: an off-screen `<video>`/WebCodecs) or by
+     *  `onda export` (native ffmpeg) — the author layer never decodes. */
+    src: string;
+    /** Seconds into the SOURCE shown at this clip's frame 0 (trim the head).
+     *  Default `0`. */
+    startFrom?: number;
+    /** Source seconds advanced per composition second (1 = realtime, 2 = 2× fast,
+     *  0.5 = slow-mo). Default `1`. */
+    playbackRate?: number;
+    /** Seconds into the SOURCE to stop at (trim the tail). Past it the clip holds
+     *  its last frame, unless `loop` is set. Omit to play to the source's end. */
+    endAt?: number;
+    /** Loop the trimmed span `[startFrom, endAt)` (requires `endAt`). The source
+     *  time wraps so the clip repeats for as long as the `<Sequence>` shows it. */
+    loop?: boolean;
+    /** Target box width in px. With `height`, the frame is fitted into this box
+     *  per `fit`. Omit both for the video's intrinsic pixel size. */
+    width?: number;
+    height?: number;
+    /** How to fit the frame into the `width`×`height` box (default `'cover'`). */
+    fit?: ImageFit;
+    /**
+     * Preview-only behaviour when the browser can't composite this source — i.e. a
+     * cross-origin video without CORS headers. **Never affects `onda export`**,
+     * which always composites via ffmpeg.
+     *  - `'skip'` (default): leave it blank in preview + log a one-time hint.
+     *  - `'element'`: overlay a plain `<video>` so it still *plays* in preview
+     *    (display-only — no engine effects, and it sits above the canvas). Useful
+     *    for prototyping with a third-party URL you can't add CORS to. For your own
+     *    assets, serving them same-origin or with CORS is better (full compositing).
+     */
+    previewFallback?: 'skip' | 'element';
+}
+/** A video clip. At composition frame *f* it shows the source frame at
+ *  `startFrom + (f / fps) * playbackRate` seconds; the player/engine decodes that
+ *  exact frame (browser: `<video>`/WebCodecs; native export: ffmpeg) and the
+ *  renderer draws it like an image. Place/scale it like any node; combine with a
+ *  `<Sequence>` to position it on the timeline. */
+declare function Video({ startFrom, playbackRate, endAt, loop, ...rest }: VideoProps): react.DOMElement<{
+    time: number;
+    /** Path, URL, or `data:` URI of the video. The frame at the current time is
+     *  decoded by the player (browser: an off-screen `<video>`/WebCodecs) or by
+     *  `onda export` (native ffmpeg) — the author layer never decodes. */
+    src: string;
+    /** Target box width in px. With `height`, the frame is fitted into this box
+     *  per `fit`. Omit both for the video's intrinsic pixel size. */
+    width?: number;
+    height?: number;
+    /** How to fit the frame into the `width`×`height` box (default `'cover'`). */
+    fit?: ImageFit;
+    /**
+     * Preview-only behaviour when the browser can't composite this source — i.e. a
+     * cross-origin video without CORS headers. **Never affects `onda export`**,
+     * which always composites via ffmpeg.
+     *  - `'skip'` (default): leave it blank in preview + log a one-time hint.
+     *  - `'element'`: overlay a plain `<video>` so it still *plays* in preview
+     *    (display-only — no engine effects, and it sits above the canvas). Useful
+     *    for prototyping with a third-party URL you can't add CORS to. For your own
+     *    assets, serving them same-origin or with CORS is better (full compositing).
+     */
+    previewFallback?: "skip" | "element";
+    /** Stable id, required to target the node from an animation timeline. */
+    id?: number;
+    /** Translation in pixels. */
+    x?: number;
+    y?: number;
+    /** Scale factor (1 = identity). */
+    scaleX?: number;
+    scaleY?: number;
+    /** Clockwise rotation in degrees, about the transform origin (default (0,0)).
+     *  Renders on the GPU (Vello) backend; the CPU reference rasterizer ignores it. */
+    rotation?: number;
+    /** Pivot for scale + rotation in local px (CSS transform-origin). Default (0,0).
+     *  For "about the center", pass half the node's width/height. */
+    originX?: number;
+    originY?: number;
+    /** Opacity, 0..1. */
+    opacity?: number;
+    /** DEPTH (z) of this layer for depth-of-field, in the same arbitrary units as
+     *  `<Composition dof={{ focus }}>`. Layers at the focus depth stay sharp; the
+     *  farther a layer's `depth` is from `focus`, the more it defocuses (a blur the
+     *  reconciler computes from the camera aperture). Animate the comp's `focus` for a
+     *  rack-focus pull. No effect unless the comp sets `dof`. */
+    depth?: number;
+    /** 3D LAYER position `[x, y, z]` in world pixels — meaningful only inside a
+     *  `<Scene3D>`. `z = 0` is the framing plane (matches the 2D placement); larger
+     *  `z` is farther into the screen (smaller), negative `z` nearer the camera (After
+     *  Effects convention). Animate for fly-throughs / parallax / exploded views. */
+    position3d?: [number, number, number];
+    /** 3D LAYER rotation `[x, y, z]` in degrees (Z·Y·X): X pitch (tilt toward/away),
+     *  Y yaw (swing), Z roll (in-plane spin). Inside `<Scene3D>` only. GPU-only — the
+     *  CPU reference degrades to a flat depth-sorted composite (no out-of-plane tilt). */
+    rotation3d?: [number, number, number];
+    /** Pivot within this layer's content plane (px) that `position3d`/`rotation3d`
+     *  act about. Default: the layer's center. */
+    anchor3d?: [number, number];
+    /** EXTRUDE this layer's 2D outline into a lit 3D SOLID (the "3D logo / title"):
+     *  inside a `<Scene3D>`, a shape or text layer becomes a mesh with `depth`
+     *  thickness + side walls, shaded by a directional light so it catches the light
+     *  as it rotates. GPU only — the CPU reference + live preview draw the flat outline. */
+    extrude?: number | {
+        depth: number;
+    };
+    /** Blend this node's subtree against the backdrop (CSS mix-blend-mode).
+     *  GPU/Vello-rendered (e.g. `'screen'`, `'multiply'`, `'overlay'`). */
+    blendMode?: BlendMode;
+    /** Clip this node and its subtree to a region (local space). */
+    clip?: ClipInput;
+    /** Matte (track matte / mask): a stencil SUBTREE, passed as a React element,
+     *  through which this node's content is revealed. The matte's alpha — or its
+     *  luminance, per `matteMode` — multiplies the content's alpha, so the content
+     *  (this node's children) shows only where the matte covers. The
+     *  strictly-more-powerful sibling of `clip`: the matte is a fully rendered,
+     *  animatable subtree (giant text, a gradient, a shape) — the signature
+     *  "media-through-type" move (a photo seen only through animated type). */
+    matte?: ReactElement;
+    /** Which channel of the {@link NodeProps.matte} subtree drives the reveal (CSS
+     *  `mask-mode`). `'alpha'` (default): content alpha ×= matte alpha. `'luminance'`:
+     *  content alpha ×= luma(matte) × matte alpha (white reveals, black hides). */
+    matteMode?: MatteMode;
+    /** Ordered, low-level screen-space effects on this node + subtree (render-to-texture). */
+    effects?: Effect[];
+    /** Gaussian blur std-dev in output px; sugar for `effects: [{ effect: 'blur', sigma }]`.
+     *  Honored by Vello AND the CPU reference once Phase 1 lands. */
+    blur?: number;
+    /** Directional (motion) blur sugar for `effects: [{ effect: 'directional_blur', … }]`:
+     *  a 1D blur of std-dev `sigma` (px) along `angle` (radians, default 0 = horizontal) —
+     *  the cinematic "in-motion" smear. Honored by Vello AND the CPU reference. */
+    directionalBlur?: {
+        sigma: number;
+        angle?: number;
+    };
+    /** Chromatic-aberration sugar: R/B split by `amount` px radially from centre. */
+    chromaticAberration?: number;
+    /** Vignette sugar — radial edge darkening. `amount` 0..1; `softness` 0..1 (default 0.5). */
+    vignette?: number | {
+        amount: number;
+        softness?: number;
+    };
+    /** Posterize sugar: quantize each channel to `levels` (≥2) discrete steps. */
+    posterize?: number;
+    /** Duotone sugar: map luminance to a gradient from `shadow` to `highlight`. */
+    duotone?: {
+        shadow: ColorInput;
+        highlight: ColorInput;
+    };
+    /** Chroma-key sugar: knock out `color`; `threshold` (default 0.4) + `smoothness`
+     *  (default 0.1) shape the soft matte edge. */
+    chromaKey?: {
+        color: ColorInput;
+        threshold?: number;
+        smoothness?: number;
+    };
+    /** Glow / bloom sugar for `effects: [{ effect: 'bloom', ... }]`: bright regions
+     *  (luminance above `threshold`, default 0.7; scaled by `intensity`, default 1)
+     *  blur with `sigma` and composite additively over the sharp subtree. Honored by
+     *  Vello AND the CPU reference. */
+    bloom?: number | {
+        sigma: number;
+        threshold?: number;
+        intensity?: number;
+    };
+    /** Cinematic color-grade sugar for `effects: [{ effect: 'color_grade', ... }]` —
+     *  the "land AI media" wedge: one grade unifies mismatched clips into a single
+     *  look. All five fields are optional and default to the neutral identity
+     *  (`exposure` 0, `contrast` 1, `saturation` 1, `temperature` 0, `tint` 0), so
+     *  `{}` is a no-op. Honored by Vello AND the CPU reference. */
+    grade?: {
+        /** Linear exposure gain (`2^exposure`); 0 = identity. */
+        exposure?: number;
+        /** Contrast around a 0.5 pivot; 1 = identity. */
+        contrast?: number;
+        /** Saturation; 1 = identity, 0 = grayscale, >1 = punchier. */
+        saturation?: number;
+        /** Warm/cool shift (R up / B down for positive); 0 = neutral. */
+        temperature?: number;
+        /** Green/magenta shift on G (positive = green); 0 = neutral. */
+        tint?: number;
+    };
+    /** Gooey / liquid / metaball-morph sugar for `effects: [{ effect: 'goo', ... }]`:
+     *  the subtree is blurred with `sigma`, then its alpha is sharpened around
+     *  `threshold` (the 0..1 cutoff, default 0.5) so overlapping shapes fuse into
+     *  solid forms joined by smooth necks (the "drops of liquid coalescing" look).
+     *  A bare number is the `sigma`. Honored by Vello AND the CPU reference. */
+    goo?: number | {
+        sigma: number;
+        threshold?: number;
+    };
+    /** Film-grain sugar for `effects: [{ effect: 'grain', ... }]`: luminance-banded,
+     *  animated monochrome noise added late over the subtree — the compositing "glue"
+     *  that makes mismatched sources read as one photographed image, and the dither
+     *  that hides 8-bit banding on dark gradients. A bare number is the `intensity`
+     *  (~0.04–0.1 is filmic); the object form adds `size` (grain scale in px, default
+     *  1) and `seed` (animation offset — pass the current frame for *living* grain,
+     *  default 0 = static). Honored by Vello AND the CPU reference. */
+    grain?: number | {
+        intensity: number;
+        size?: number;
+        seed?: number;
+    };
+    /** Frosted-glass sugar for `effects: [{ effect: 'backdrop_blur', ... }]`: samples
+     *  the already-composited BACKDROP *behind* this node (not its own subtree),
+     *  blurs it by `sigma` (output px), and draws it as the node's backing — then the
+     *  node's own content (e.g. a translucent panel `fill`) composites on top. A bare
+     *  number is just the `sigma`; the object form adds a `tint` (its alpha = tint
+     *  strength), a `brightness` and a `saturation` (CSS-style, `1` = identity).
+     *  Honored by Vello AND the CPU reference. */
+    backdropBlur?: number | {
+        sigma: number;
+        tint?: ColorInput;
+        brightness?: number;
+        saturation?: number;
+    };
+    /** Light-wrap sugar for `effects: [{ effect: 'light_wrap', ... }]`: bleeds the
+     *  blurred BACKDROP behind this node onto its own feathered EDGES — the #1
+     *  "shot in, not pasted on" compositing tell for a cut-out plate. A bare number
+     *  is the `sigma` (the backdrop blur / rim width); the object form adds a
+     *  `strength` (0 = off, ~1 = a natural spill). EXPORT/NATIVE only — the live
+     *  preview draws the node un-wrapped. */
+    lightWrap?: number | {
+        sigma: number;
+        strength?: number;
+    };
+    children?: ReactNode;
+}, Element>;
+interface AudioProps {
+    /** Path, URL, or `data:` URI of the audio. */
+    src: string;
+    /** Composition time (seconds) at which the clip begins playing. Default 0. */
+    start?: number;
+    /** Seconds into the source to begin from (trim the head). Default 0. */
+    startAt?: number;
+    /** Linear gain, 0..1. Default 1. */
+    volume?: number;
+}
+/** A non-visual audio clip on the timeline. It draws nothing — the player plays
+ *  it during preview (and export muxes it). Place it anywhere in the tree; `start`
+ *  sets when it begins (seconds), `startAt` trims into the source, `volume`
+ *  scales its gain. The higher-level `<AudioClip>` (`@onda-engine/components`) wraps this
+ *  with a fade envelope. */
+declare function Audio(props: AudioProps): ReactElement<AudioProps, string | react.JSXElementConstructor<any>>;
+interface SvgProps extends NodeProps {
+    /** A file path/URL to the SVG (resolved at render time by `onda render`). */
+    src?: string;
+    /** Inline SVG markup (self-contained; preferred when present). */
+    markup?: string;
+}
+/** An SVG document, expanded into vector nodes by the engine (`onda-svg`).
+ *  Use `x`/`y`/`scaleX`/`scaleY` to place and size it. Renders on the GPU
+ *  (Vello) backend. */
+declare function Svg(props: SvgProps): react.DOMElement<SvgProps, Element>;
+
+/** Resolution and timing of the composition being rendered. */
+interface VideoConfig {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+}
+/** The frame currently being rendered (0-based). */
+declare function useCurrentFrame(): number;
+/** The composition's resolution and timing. */
+declare function useVideoConfig(): VideoConfig;
+
+interface SpringConfig {
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+}
+interface SpringOptions {
+    /** Current frame (e.g. from `useCurrentFrame()`). */
+    frame: number;
+    /** Composition frame rate. */
+    fps: number;
+    /** Output at rest start (default 0). */
+    from?: number;
+    /** Output at settle (default 1). */
+    to?: number;
+    config?: SpringConfig;
+    /** Re-time the spring so it settles in this many frames (like Remotion's
+     *  `durationInFrames`). Without it, the settle is governed purely by the
+     *  spring physics — and for an overdamped config (e.g. the Onda house spring)
+     *  that can be far slower than you want. */
+    durationInFrames?: number;
+    /** When `durationInFrames` is set, the spring counts as "settled" once it
+     *  stays within this distance of `to` with near-zero velocity. Default 0.005. */
+    durationRestThreshold?: number;
+}
+/** Spring value at `frame`. Settles toward `to`; underdamped configs overshoot.
+ *  With `durationInFrames`, the whole settle is time-remapped to land in that
+ *  many frames. */
+declare function spring({ frame, fps, from, to, config, durationInFrames, durationRestThreshold, }: SpringOptions): number;
+
+interface SequenceProps {
+    /** Frame at which this sequence starts (children's frame 0). Default 0. */
+    from?: number;
+    /** How many frames it lasts; unbounded if omitted. */
+    durationInFrames?: number;
+    children?: ReactNode;
+}
+/** Shift children in time: inside, the frame is `outerFrame - from`, and the
+ *  children render only while `0 <= localFrame < durationInFrames`. When a
+ *  `durationInFrames` is given, children's `useVideoConfig().durationInFrames`
+ *  reflects the SEQUENCE's length (Remotion semantics) — so a component can ask
+ *  "how long is my clip?" and fit its entrance to it. */
+declare function Sequence({ from, durationInFrames, children, }: SequenceProps): ReactElement | null;
+interface LoopProps {
+    /** Length of one loop iteration in frames. */
+    durationInFrames: number;
+    children?: ReactNode;
+}
+/** Repeat children forever: children see `frame % durationInFrames`. */
+declare function Loop({ durationInFrames, children }: LoopProps): ReactElement | null;
+interface SeriesSequenceProps {
+    durationInFrames: number;
+    children?: ReactNode;
+}
+declare function SeriesSequence(_props: SeriesSequenceProps): ReactElement | null;
+interface SeriesProps {
+    children?: ReactNode;
+}
+/** Play `<Series.Sequence>` children back-to-back: each starts where the
+ *  previous ended (cumulative offsets from their `durationInFrames`). */
+declare function SeriesRoot({ children }: SeriesProps): ReactElement;
+/** `<Series>` with `<Series.Sequence durationInFrames={…}>` children. */
+declare const Series: typeof SeriesRoot & {
+    Sequence: typeof SeriesSequence;
+};
+
+/** Derive a deterministic alternate seed from `(seed, variant)` — the cheap
+ *  "give me take #N" knob. `variant` 0/undefined returns `seed` UNCHANGED
+ *  (identity — existing compositions keep their exact pixels); any other
+ *  integer yields a well-mixed, stable new numeric seed. Pure. */
+declare function variantSeed(seed: number, variant?: number): number;
+declare function variantSeed(seed: number | string, variant?: number): number | string;
+/** A deterministic value in `[0, 1)` for `seed` (mulberry32, one step). */
+declare function random(seed: number | string): number;
+/** Smooth 2D value noise in `[-1, 1]` — coherent (nearby inputs give nearby
+ *  outputs), deterministic per `seed`. Scale `x`/`y` to set the frequency. */
+declare function noise2D(seed: number | string, x: number, y: number): number;
+/** Smooth 3D value noise in `[-1, 1]` (e.g. animate `z` over frames for drift). */
+declare function noise3D(seed: number | string, x: number, y: number, z: number): number;
+
+interface ParticlesProps {
+    /** Number of particles. */
+    count?: number;
+    /** Seed for every per-particle random — the same seed always renders the same field. */
+    seed?: number | string;
+    /** Emitter origin (px). */
+    x?: number;
+    y?: number;
+    /** Particles spawn at a random point within this radius of the origin (0 = a point). */
+    spawnRadius?: number;
+    /** Base launch speed (px per frame). */
+    speed?: number;
+    /** Random speed reduction, 0..1 (each particle gets `speed × (1 − variance×rand)`). */
+    speedVariance?: number;
+    /** Launch direction in degrees: 0 = right, −90 = up, 90 = down, 180 = left. */
+    angle?: number;
+    /** Spread cone around `angle`, in degrees (360 = omnidirectional burst). */
+    spread?: number;
+    /** Constant downward acceleration (px per frame²). */
+    gravity?: number;
+    /** Particle lifetime in frames. */
+    lifetime?: number;
+    /** Stagger the emission across this many frames (0 = a single burst). */
+    emitOver?: number;
+    /** Re-emit each particle when it dies → a continuous stream (set `emitOver`≈`lifetime`). */
+    loop?: boolean;
+    /** Frames before emission begins. */
+    delay?: number;
+    /** Particle shape. */
+    shape?: 'circle' | 'square';
+    /** Diameter (px) at birth → death (lerped over the lifetime). A number = constant. */
+    size?: number | [number, number];
+    /** Opacity at birth → death. */
+    opacity?: [number, number];
+    /** Palette each particle picks one colour from. */
+    colors?: string[];
+    /** Rotation in degrees over the lifetime (visible on `square`). */
+    spin?: number;
+}
+/** A deterministic particle emitter — bursts, fountains, confetti, sparks, dust,
+ *  snow. See {@link ParticlesProps}. */
+declare function Particles({ count, seed, x, y, spawnRadius, speed, speedVariance, angle, spread, gravity, lifetime, emitOver, loop, delay, shape, size, opacity, colors, spin, }: ParticlesProps): ReactElement;
+
+/** Maps a frame within a transition to progress `0..1` (may overshoot 1 for
+ *  springs). `durationInFrames` is how long the transition (overlap) lasts. */
+interface TransitionTiming {
+    durationInFrames: number;
+    getProgress(frame: number, fps: number): number;
+}
+/** A linear transition over `durationInFrames`. */
+declare function linearTiming({ durationInFrames }: {
+    durationInFrames: number;
+}): TransitionTiming;
+/** A spring-driven transition (natural ease, optional overshoot). */
+declare function springTiming({ durationInFrames, config, }?: {
+    durationInFrames?: number;
+    config?: SpringConfig;
+}): TransitionTiming;
+/** Which edge a slide/wipe moves from. */
+type SlideDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
+interface PresentationState {
+    /** Transition progress `0..1` (0 = fully out, 1 = fully in). */
+    progress: number;
+    /** True for the incoming scene, false for the outgoing one. */
+    entering: boolean;
+    width: number;
+    height: number;
+}
+/** Wraps a scene to present it at a point in a transition. Identity at the
+ *  resting state (entering progress 1 / exiting progress 0). */
+type TransitionPresentation = (children: ReactNode, state: PresentationState) => ReactElement;
+/** Cross-fade via opacity. */
+declare function fade(): TransitionPresentation;
+/** Slide the scenes across; `direction` is where the incoming scene comes from. */
+declare function slide({ direction, }?: {
+    direction?: SlideDirection;
+}): TransitionPresentation;
+/** Wipe the incoming scene over the outgoing one with a growing clip mask. */
+declare function wipe({ direction, }?: {
+    direction?: SlideDirection;
+}): TransitionPresentation;
+/** A hard cut — the overlap timing with no visual effect. The incoming scene
+ *  (drawn on top) simply replaces the outgoing one. */
+declare function none(): TransitionPresentation;
+/** A 2D card flip: the outgoing scene collapses horizontally to the centre line
+ *  by the midpoint, then the incoming scene expands out of it. */
+declare function flip(): TransitionPresentation;
+/** Iris: a circular reveal of the incoming scene expanding from the centre. The
+ *  outgoing scene stays full beneath it (the incoming draws on top). */
+declare function iris(): TransitionPresentation;
+/** Clock wipe: an angular sweep revealing the incoming scene clockwise from 12
+ *  o'clock. Outgoing stays full beneath (the incoming draws on top). The wedge is
+ *  a polygon fan (M/L/Z only — no arc command) so it clips on any path renderer. */
+declare function clockWipe(): TransitionPresentation;
+type PushDirection = 'left' | 'right' | 'up' | 'down';
+/** Both scenes translate together in `direction`, like a camera pan. */
+declare function push({ direction, }?: {
+    direction?: PushDirection;
+}): TransitionPresentation;
+/** Scale-and-fade punch. `direction` 'in' pushes toward the viewer, 'out' pulls back. */
+declare function zoom({ direction, scaleAmount, }?: {
+    direction?: 'in' | 'out';
+    scaleAmount?: number;
+}): TransitionPresentation;
+/** Push with parallax depth — a scale layered on the translate (a camera dolly). */
+declare function depthPush({ direction, scaleAmount, }?: {
+    direction?: PushDirection;
+    scaleAmount?: number;
+}): TransitionPresentation;
+/** Outgoing fades to `color`, incoming fades up from it (dip-to-black/white). */
+declare function dipToColor({ color }?: {
+    color?: string;
+}): TransitionPresentation;
+/** Blur cross: each scene blurs toward the midpoint and sharpens at rest, with an
+ *  opacity cross. (Multi-tap approximation — see {@link blurStack}.) */
+declare function blur({ maxBlur }?: {
+    maxBlur?: number;
+}): TransitionPresentation;
+/** Zoom-blur / "smooth zoom" — the punch-in (or -out) with a motion-blur smear
+ *  heaviest mid-transition, snapping sharp at rest, with an opacity cross. The
+ *  most-used viral/social transition. `direction` 'in' rushes toward the viewer,
+ *  'out' pulls back. */
+declare function zoomBlur({ direction, scaleAmount, maxBlur, }?: {
+    direction?: 'in' | 'out';
+    scaleAmount?: number;
+    maxBlur?: number;
+}): TransitionPresentation;
+/** Whip-pan — a fast directional swish with a motion-blur smear ALONG the pan
+ *  axis (the high-energy "camera whip" cut, best paired with a whoosh SFX).
+ *  `direction` is where the camera swings toward (left/right/up/down). */
+declare function whipPan({ direction, maxBlur, }?: {
+    direction?: PushDirection;
+    maxBlur?: number;
+}): TransitionPresentation;
+/** Film-burn / light-leak — the scenes crossfade while a warm leak blooms over the
+ *  cut, screen-blended and peaking at the midpoint (the cinematic-warmth flare).
+ *  The leak draws once (on the incoming layer); a dark gradient screen-blends to
+ *  ~nothing, so only the warm centre flares. */
+declare function filmBurn({ color }?: {
+    color?: string;
+}): TransitionPresentation;
+/** Luma-wipe — reveal the incoming scene through a soft LUMINANCE ramp that sweeps
+ *  across (a gradient matte; white reveals, black hides). The organic, edge-feathered
+ *  reveal Premiere/Resolve ship as a workhorse. */
+declare function lumaWipe(): TransitionPresentation;
+/** Chromatic split: the scene tears into horizontally offset ghosts that spread
+ *  at the midpoint and converge at rest (an RGB-fringe feel — the engine has no
+ *  per-channel tint, so the copies are uncoloured). */
+declare function chromaticAberration({ maxShift, }?: {
+    maxShift?: number;
+}): TransitionPresentation;
+/** Device pullback: the outgoing scene shrinks back (and lifts) as if pulled into
+ *  the distance, uncovering the incoming scene that settles forward into place. */
+declare function devicePullback(): TransitionPresentation;
+/** Expand morph: the incoming scene bursts open from the centre while the
+ *  outgoing one balloons out and dissolves — a quick morph-expand. */
+declare function expandMorph(): TransitionPresentation;
+/** Morph: a soft scale-and-fade blend — the scenes ease through each other with a
+ *  gentle breathing scale. */
+declare function morph(): TransitionPresentation;
+/** Glass wipe: the incoming scene reveals behind a sweeping edge and blurs sharp
+ *  as the "frosted panel" passes (blur is the {@link blurStack} approximation). */
+declare function glassWipe({ direction, }?: {
+    direction?: SlideDirection;
+}): TransitionPresentation;
+/** Grid pixelate: the incoming scene fills in as a grid of blocks, each popping
+ *  on in a deterministic scatter (a blocky reveal — true pixelation needs an
+ *  engine sampling pass). */
+declare function gridPixelate({ cols, rows, }?: {
+    cols?: number;
+    rows?: number;
+}): TransitionPresentation;
+/** Type mask: the incoming scene reveals through a row of vertical bars that
+ *  widen into place — a typographic blinds reveal. */
+declare function typeMask({ bars }?: {
+    bars?: number;
+}): TransitionPresentation;
+/** Alias of {@link fade} — Studio's "cross-fade" slug. */
+declare const crossFade: typeof fade;
+interface TransitionSeriesSequenceProps {
+    durationInFrames: number;
+    children?: ReactNode;
+}
+interface TransitionSeriesTransitionProps {
+    presentation: TransitionPresentation;
+    timing: TransitionTiming;
+}
+declare function TransitionSequence(_props: TransitionSeriesSequenceProps): ReactElement | null;
+declare function TransitionTransition(_props: TransitionSeriesTransitionProps): ReactElement | null;
+declare function TransitionSeriesRoot({ children }: {
+    children?: ReactNode;
+}): ReactElement;
+/** Play sequences back-to-back with overlapping transitions between them. */
+declare const TransitionSeries: typeof TransitionSeriesRoot & {
+    Sequence: typeof TransitionSequence;
+    Transition: typeof TransitionTransition;
+};
+
+/** Render `element` (root must be `<Composition>`) at `frame` to a static
+ *  {@link Scene}. Components read the frame via {@link useCurrentFrame}. */
+declare function renderFrame(element: ReactElement, frame: number): Scene;
+/** Render the composition once, at frame 0. */
+declare function renderToScene(element: ReactElement): Scene;
+/** The MOTION BLUR config declared on `<Composition motionBlur={…}>`, normalised, or
+ *  `undefined` when off. `true` → a 180° shutter at 16 samples; `samples < 2` is off.
+ *  Exported so the export orchestration can pass the matching `--motion-blur K`. */
+declare function motionBlurConfig(element: ReactElement): {
+    shutter: number;
+    samples: number;
+} | undefined;
+/** Render every frame `0..durationInFrames` to static scenes. With
+ *  `<Composition motionBlur>`, each frame expands to `samples` sub-frame scenes for
+ *  the CLI to average (so the array length is `durationInFrames × samples`). */
+declare function renderFrames(element: ReactElement): Scene[];
+/** Render a sub-range `[startFrame, endFrame)` to static scenes.
+ *  The returned array starts at index 0; the scenes carry the original frame
+ *  numbers so `useCurrentFrame()` reads the correct composition time. Motion blur
+ *  expands each frame to `samples` sub-frames, exactly like {@link renderFrames}. */
+declare function renderFramesRange(element: ReactElement, startFrame: number, endFrame: number): Scene[];
+/** Render frame 0 to a JSON string (for `onda render`). */
+declare function renderToSceneJSON(element: ReactElement, space?: number): string;
+/** Render all frames to a JSON array of scenes (for `onda export-frames`). */
+declare function renderFramesJSON(element: ReactElement, space?: number): string;
+/** Render a sub-range `[startFrame, endFrame)` to a JSON array (for `onda export-frames`).
+ *  Produces a short clip covering only those frames — useful for fast scene-level iteration. */
+declare function renderFrameRangeJSON(element: ReactElement, startFrame: number, endFrame: number, space?: number): string;
+
+/** Retain font bytes so the render harness can pass them to the renderer. Deduped
+ *  by content signature — declaring the same font twice is harmless. Synchronous
+ *  and independent of any async engine load, so the bytes are registered the
+ *  instant `loadFont` is called, even before the wasm measurement engine warms. */
+declare function registerFont(data: Uint8Array): void;
+/** A snapshot of the fonts declared so far — for the render harness to write out
+ *  and pass to the CLI. Callers receive a copy and must not mutate the registry. */
+declare function registeredFonts(): readonly Uint8Array[];
+/** Clear the registry — for tests, or a long-running process between renders of
+ *  different compositions (so one comp's fonts don't leak into the next). */
+declare function clearRegisteredFonts(): void;
+
+type Warmer = () => Promise<void>;
+/** Register an async warmer to run before a render. Idempotent per function. */
+declare function registerEngineWarmer(warm: Warmer): void;
+/** Run all registered warmers (best-effort — a warmer that throws is ignored, so
+ *  the render still proceeds with whatever fallback the component uses). */
+declare function runEngineWarmers(): Promise<void>;
+
+export { AbsoluteFill, type AbsoluteFillProps, Audio, type AudioProps, Camera, type Camera3D, type CameraProps, Center, type CenterProps, type ClipInput, type Color, type ColorInput, Composition, type Composition$1 as CompositionData, type CompositionProps, Easing, type EasingFn, type Effect, Ellipse, type EllipseProps, type Extrude, Flex, type FlexProps, type Gradient, type GradientInput, type GradientStop, type GradientStopInput, Group, type GroupProps, Image, type ImageProps, Image as Img, type InterpolateOptions, type Layout, Loop, type LoopProps, Merge, type MergeProps, type MorphOptions, type NodeKind, type NodeProps, type PaintProps, Particles, type ParticlesProps, Path, type PathProps, type Point, Precomp, type PrecompProps, type PresentationState, type PushDirection, Rect, type RectProps, Repeater, type RepeaterProps, type Scene, Scene3D, type Scene3DProps, type SceneNode, type SceneTextRun, Sequence, type SequenceProps, Series, type SeriesSequenceProps, type ShapeGeometry, type Size, type SlideDirection, type SpringConfig, type SpringOptions, type Stroke, Svg, type SvgProps, Text, type TextProps, type TextRunInput, type Transform, type Transform3D, type TransitionPresentation, TransitionSeries, type TransitionSeriesSequenceProps, type TransitionSeriesTransitionProps, type TransitionTiming, type Vec2, Video, type VideoConfig, type VideoProps, blur, chromaticAberration, clearRegisteredFonts, clipEllipse, clipPath, clipRect, clockWipe, crossFade, cubicBezier, depthPush, devicePullback, dipToColor, expandMorph, fade, fbmGradient, filmBurn, flip, glassWipe, gridPixelate, interpolate, interpolateColors, iris, linearGradient, linearTiming, lumaWipe, morph, morphPath, morphPathSequence, motionBlurConfig, noise2D, noise3D, none, parseClip, parseColor, parseGradient, push, radialGradient, random, registerEngineWarmer, registerFont, registeredFonts, renderFrame, renderFrameRangeJSON, renderFrames, renderFramesJSON, renderFramesRange, renderToScene, renderToSceneJSON, runEngineWarmers, slide, spring, springTiming, typeMask, useCurrentFrame, useVideoConfig, variantSeed, whipPan, wipe, zoom, zoomBlur };