onda-engine 0.1.0

package/dist/components.d.ts

@@ -0,0 +1,3480 @@
+import { EasingFn } from './interpolate.js';
+import { z } from 'zod';
+import { Scene } from './scene.js';
+export { B as Backend, C as COMPONENT_FIDELITY, a as ComponentFidelity, E as ENGINE_CAPABILITIES, F as FIDELITY_SUMMARY, b as Fidelity, M as MANIFEST, c as MANIFEST_NAMES, d as ManifestEntry, P as PropMeta, R as RECOMMENDED_PALETTE, e as compactCatalog, f as firstClassEntries, m as manifestEntry } from './manifest-7N3yu9tB.js';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { NodeProps } from './components.js';
+import { GradientInput } from './gradient.js';
+import { SpringConfig } from './spring.js';
+
+/**
+ * Duration scale in frames at 30fps. Reach for these before hardcoding a frame
+ * count. At other framerates, scale via `Math.round(DURATION.x * fps / 30)`.
+ *
+ * - `instant` (6f / 0.20s) — micro shifts
+ * - `fast`    (10f / 0.33s) — exits, small moves
+ * - `base`    (22f / 0.73s) — default entrance
+ * - `slow`    (28f / 0.93s) — large entrances, hero moves
+ * - `slower`  (34f / 1.13s) — full scene transitions
+ * - `hold`    (48f / 1.60s) — minimum settled hold
+ *
+ * Pacing note: entrances run on the slower side and every reveal is meant to
+ * *settle and hold* before the next move — confidence reads as stillness, not
+ * constant motion. Keep one primary move per beat.
+ */
+declare const DURATION: {
+    readonly instant: 6;
+    readonly fast: 10;
+    readonly base: 22;
+    readonly slow: 28;
+    readonly slower: 34;
+    readonly hold: 48;
+};
+/** Keys of {@link DURATION} — useful for typed props that pick a duration. */
+type DurationToken = keyof typeof DURATION;
+/** Canonical stagger between sibling elements (lists, words, grouped reveals).
+ *  `5` frames @ 30fps ≈ 0.17s — a pronounced, orchestrated wave that choreographs
+ *  the eye. One value, used everywhere. */
+declare const STAGGER = 5;
+/** Hero-landing overshoot magnitude — a 3% scale bump that settles back to 1.
+ *  Reserved for the two-phase landing pattern (see `heroReveal`). */
+declare const OVERSHOOT = 0.03;
+/** The house spring — smooth, settled, no overshoot. The Onda fingerprint.
+ *  Heavily overdamped (damping ratio ≈ 10): a confident settle, never a bounce. */
+declare const SPRING_SMOOTH: {
+    readonly damping: 200;
+    readonly stiffness: 100;
+    readonly mass: 1;
+};
+/** Faster spring for decisive elements (counters, value swaps, cursor moves).
+ *  Still heavily overdamped — snappiness via higher stiffness, not less damping. */
+declare const SPRING_SNAPPY: {
+    readonly damping: 120;
+    readonly stiffness: 180;
+    readonly mass: 1;
+};
+/** Stagger offset in frames for the i-th sibling in a grouped reveal. The single
+ *  canonical helper — every cascade goes through here so stagger stays
+ *  consistent and greppable. */
+declare const staggerFrames: (index: number, increment?: number) => number;
+
+/** The house easing curve — a restrained ease-out (`cubic-bezier(0.16, 1, 0.3, 1)`).
+ *  Use for opacity / color fades and anything the eye tracks but that doesn't
+ *  move physically. (ondajs uses Remotion's `Easing.bezier`; `@onda-engine/react`
+ *  exposes the same curve as `cubicBezier`.) */
+declare const HOUSE_EASE: EasingFn;
+
+/** A duration/delay value: frames as a number (the historical form) or a human
+ *  time string — `'0.5s'`, `'500ms'`, `'12f'`, `'1:30'`. */
+type TimeInput = number | string;
+/** Parse a {@link TimeInput} to FRAMES (rounded). Numbers pass through as
+ *  frames; strings parse per the cinema time grammar. Invalid/empty strings
+ *  and `undefined` resolve to `fallback` (default 0). Never throws. */
+declare function framesOf(value: TimeInput | undefined, fps: number, fallback?: number): number;
+/** The Zod schema for a {@link TimeInput} prop — shared by the component
+ *  schemas so the Studio agent validates one duration grammar. */
+declare const timeSchema: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
+/** One-line description suffix for converted manifest/schema props. */
+declare const TIME_DESCRIPTION = "Accepts frames (number) or a time string ('0.5s', '500ms', '12f', '1:30').";
+
+/** `delay + (n−1)×stagger + duration` — the settle of a staggered entrance.
+ *  All values in FRAMES. */
+declare function staggeredSettle(count: number, staggerFrames: number, durationFrames: number, delayFrames?: number): number;
+/** Loose prop bag — the registry reads only the timing-relevant keys. */
+type Props = Record<string, unknown>;
+/** A per-component settle calculator: total frames from the component's local
+ *  frame 0 until its entrance has fully settled (defaults applied). */
+type SettleFn = (props: Props, fps: number) => number;
+/** Settle calculators, keyed by the PascalCase component name. Formulas mirror
+ *  the component implementations (see each component's source for the beats). */
+declare const COMPONENT_SETTLE: Record<string, SettleFn>;
+/** Total settle time in FRAMES for `component` with `props` — `delay` included,
+ *  defaults applied — or `null` when the component isn't in the registry (not
+ *  animated, or its end isn't statically computable). "Does it land before the
+ *  cut?" is `settleTime(...) <= clipFrames`. */
+declare function settleTime(component: string, props?: Props, fps?: number): number | null;
+/** Clip-fit props shared by the animated components. */
+interface FitToClipOpts {
+    /** Compress the WHOLE timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s' string). Wins over
+     *  `fitToClip` when both are given. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default `DURATION.instant`
+     *  = 6 frames). */
+    hold?: TimeInput;
+}
+/** Resolve {@link FitToClipOpts} against a natural settle time (frames) into a
+ *  time-scale factor ≤ 1. Multiply every delay/stagger/duration by it. Returns
+ *  1 when no fit is requested or the entrance already lands. The compressed
+ *  settle never drops below 1 frame. */
+declare function useTimeScale(naturalSettleFrames: number, opts: FitToClipOpts): number;
+
+interface TextMetrics {
+    /** Shaped advance width — the true rendered width of the string (px). */
+    width: number;
+    /** Total laid-out height (px). */
+    height: number;
+    /** Top of the line box to the baseline (px). */
+    ascent: number;
+    /** Baseline to the bottom of the line box (px). */
+    descent: number;
+    /** Baseline-to-baseline line height (px). */
+    lineHeight: number;
+}
+interface MeasureOpts {
+    fontFamily?: string;
+    fontWeight?: number;
+    italic?: boolean;
+    /** Extra px between glyphs (CSS letter-spacing) — included in the width so a
+     *  component can center/size letter-spaced text faithfully. */
+    letterSpacing?: number;
+}
+/** Font-level vertical metrics returned by `fontMetrics()`. Derived by
+ *  rasterizing 'H' and 'x' — pixel-accurate for the actual rendered font.
+ *  Call once per (fontSize, family, weight) combo, not per frame. */
+interface FontMetrics {
+    /** Distance from the Text node's `y` to the top of capital letters (px). */
+    capTop: number;
+    /** Height of capital letters from their top to the baseline (px). */
+    capHeight: number;
+    /** Distance from the Text node's `y` to the top of lowercase 'x' (px). */
+    xTop: number;
+    /** x-height: height of lowercase letters from their top to the baseline (px). */
+    xHeight: number;
+    /** Distance from node's `y` to the baseline (px). Same as `TextMetrics.ascent`. */
+    ascent: number;
+    /** Baseline to bottom of the line box (px). */
+    descent: number;
+    /** Baseline-to-baseline line height (px). */
+    lineHeight: number;
+}
+/** One kerning-aware character cluster from `glyphLayout()`. */
+interface GlyphInfo {
+    /** Byte offset of this cluster's start in the original string. */
+    start: number;
+    /** Byte offset of this cluster's end (exclusive). */
+    end: number;
+    /** Pen x relative to the layout origin (includes letter-spacing). */
+    x: number;
+    /** Advance width to the next cluster — includes kern pairs. */
+    advance: number;
+}
+/** Load + init `@onda-engine/wasm` once and build the shared engine. Idempotent. In the
+ *  browser the wasm auto-locates next to its JS; in Node we read the bytes and
+ *  `initSync` (the auto-locate is browser-only). */
+declare function preloadTextMetrics(): Promise<void>;
+/** Measure `content` at `fontSize` synchronously: real shaped metrics if the
+ *  engine is warm (Node export, or browser after `useTextMetrics` loads it),
+ *  else the glyph-count estimate. Never throws. */
+declare function measureText(content: string, fontSize: number, opts?: MeasureOpts): TextMetrics;
+/** Font-level vertical metrics for `fontSize` + optional family/weight — derived
+ *  by rasterizing 'H' and 'x'. Call ONCE per (fontSize, family, weight) combo
+ *  (not per frame). Use `capTop`/`capHeight` to center text without guessing:
+ *  ```
+ *  const m = fontMetrics(SIZE, { fontFamily: SANS })
+ *  const y = height / 2 - m.capTop - m.capHeight / 2   // centers caps at height/2
+ *  const cursorY = y + m.capTop                         // cursor aligned to cap top
+ *  ```
+ */
+declare function fontMetrics(fontSize: number, opts?: MeasureOpts): FontMetrics;
+/** Like `fontMetrics` but loads the engine in the browser and re-renders when
+ *  ready. Returns estimates until the engine is warm. */
+declare function useFontMetrics(fontSize: number, opts?: MeasureOpts): FontMetrics;
+declare function glyphLayout(content: string, fontSize: number, opts?: MeasureOpts): GlyphInfo[];
+/** Like `glyphLayout` but loads the engine in the browser and re-renders when
+ *  ready. Returns the no-kerning fallback until the engine is warm. */
+declare function useGlyphLayout(content: string, fontSize: number, opts?: MeasureOpts): GlyphInfo[];
+/** Measure `content`, loading the engine in the browser on first use and
+ *  re-rendering when it's ready. Returns the estimate until then. In Node it
+ *  returns whatever `measureText` has (real metrics when `preloadTextMetrics`
+ *  ran before the render; the estimate otherwise). */
+declare function useTextMetrics(content: string, fontSize: number, opts?: MeasureOpts): TextMetrics;
+/** Loader-only companion to {@link measureText} for components that measure a
+ *  VARIABLE number of strings (a `.map`/loop), where the {@link useTextMetrics}
+ *  hook can't be called per item without breaking the rules of hooks. Call this
+ *  ONCE at the top of the component, then `measureText(...)` synchronously in the
+ *  loop. It loads the engine in the browser and re-renders when ready; returns
+ *  `true` once measurements are real. In Node it reflects whether the engine is
+ *  warm (the export path warms it via `preloadTextMetrics`). */
+declare function useTextMetricsReady(): boolean;
+/** Load a custom font (`.ttf`/`.otf` bytes) into the author-time measurement
+ *  engine so `measureText`/`glyphLayout`/`fontMetrics` — and therefore
+ *  `<TextAnimator>` / `KineticText` glyph placement — are kerning-accurate for
+ *  that family instead of silently falling back to the bundled default. Select
+ *  the font by a returned family name on `<Text fontFamily=…>` or `TextAnimator`'s
+ *  `fontFamily`. Resolves to the family name(s) the font provides.
+ *
+ *  Parity: the RENDERER must be given the SAME bytes (CLI `--font <path>`, or the
+ *  wasm preview's own `loadFont`). Identical bytes + identical cosmic-text shaping
+ *  ⇒ the positions measured here match the glyphs the engine draws. Loading the
+ *  same family twice is harmless. Awaits engine init; never throws (logs + returns
+ *  `[]` if the engine is unavailable or the bytes don't parse). */
+declare function loadFont(data: Uint8Array): Promise<string[]>;
+
+/** The render backends a scene can be judged on. `'export'` is the reference. */
+type RenderBackend = 'export' | 'preview-webgpu' | 'preview-cpu' | 'native-cpu';
+/** One feature that renders differently on the target backend than on export. */
+interface Divergence {
+    /** Slash path of node indices from the root (e.g. `root/0/2`); `composition`
+     *  for composition-level features. */
+    path: string;
+    /** The node's `id`, when it has one. */
+    nodeId?: string;
+    /** What diverges — `transform:rotation`, `node:clip`, `node:blend`,
+     *  `node:video`, `text:runs`, `effect:light_wrap`, `effect:goo`,
+     *  `gradient:fbm`, `composition:finish`, `composition:linear`,
+     *  `composition:motionBlur`. */
+    feature: string;
+    /** `missing` = not drawn/applied at all; `degraded` = drawn approximately. */
+    severity: 'missing' | 'degraded';
+    /** Human note (mirrors the engine doc comments). */
+    note: string;
+}
+/** Options for composition-level features that do NOT survive into per-frame
+ *  scene JSON (and so can't be detected by walking it). */
+interface DivergenceOpts {
+    /** The composition declares `<Composition motionBlur={…}>` (an export-time
+     *  frame expansion — pass it explicitly, the per-frame scene can't show it). */
+    motionBlur?: boolean;
+}
+/** Every node/effect/composition feature in `scene` whose render on `backend`
+ *  diverges from the native export. Empty for `'export'` (modulo
+ *  `opts.motionBlur`, which only export applies). */
+declare function divergenceReport(scene: Scene, backend: RenderBackend, opts?: DivergenceOpts): Divergence[];
+/** True when `scene` renders identically to export on `backend`. */
+declare function matchesExport(scene: Scene, backend: RenderBackend, opts?: DivergenceOpts): boolean;
+
+/** Engine line-box height as a multiple of font size (typography crate). */
+declare const LINE_RATIO = 1.2;
+/** One laid-out character cluster. */
+interface GlyphCell {
+    /** The cluster's text (one user-perceived character). */
+    ch: string;
+    /** Pen x of the cluster's left edge, relative to the line's left edge. */
+    x: number;
+    /** Advance width to the next cluster (kerning + letter-spacing included). */
+    width: number;
+    /** Index among ALL cells (spaces included) — the historical stagger index. */
+    index: number;
+    /** Index among RENDERED (non-space) cells, or -1 for whitespace. */
+    renderIndex: number;
+    /** True for whitespace cells (advance only; usually not drawn). */
+    space: boolean;
+}
+/** A laid-out single line. */
+interface GlyphLine {
+    /** Every cluster, spaces included, left-to-right. */
+    cells: GlyphCell[];
+    /** The non-space cells (what actually draws). */
+    rendered: GlyphCell[];
+    /** Total advance width of the line (px). */
+    width: number;
+    /** Line-box height (`fontSize × 1.2`). */
+    height: number;
+}
+interface GlyphLineOpts extends MeasureOpts {
+    /** Fixed per-character advance instead of measured shaping — for column-
+     *  locked layouts (e.g. the slot-roll's estimated monospace cell). Receives
+     *  the character; returns its advance in px. */
+    cellAdvance?: (ch: string) => number;
+}
+/** Lay out one line of text as positioned glyph cells. Measured, kerning-
+ *  accurate advances by default (one `glyphLayout` call; estimate fallback
+ *  until the wasm engine warms); fixed `cellAdvance` when supplied. */
+declare function layoutGlyphLine(text: string, fontSize: number, opts?: GlyphLineOpts): GlyphLine;
+/** Left-edge x of a line of `lineWidth` aligned about `anchorX` — the single
+ *  alignment formula ('center' centers on the anchor, 'right' ends at it,
+ *  'left' starts at it). */
+declare function lineStartX(align: 'left' | 'center' | 'right', anchorX: number, lineWidth: number): number;
+/** Top y of a single line whose VERTICAL CENTER should sit at `anchorY` — the
+ *  house nudge (`anchor − 0.6×fontSize`, half the 1.2 line box), rounded like
+ *  every text component historically did. */
+declare function lineTopY(anchorY: number, fontSize: number): number;
+
+/** The resolved box of a measured line, px and frame-relative. */
+interface ResolvedBounds {
+    /** Shaped line width (px). */
+    width: number;
+    /** Line-box height (px). */
+    height: number;
+    /** Width as a fraction of the frame width. */
+    widthFrac: number;
+    /** Height as a fraction of the frame height. */
+    heightFrac: number;
+    /** True when the line is wider than the frame's safe band
+     *  (`frameWidth × (1 − 2×margin)`). */
+    overflows: boolean;
+}
+/** Measure `content` against the live frame: px box + %-of-frame + an overflow
+ *  verdict against the safe band (`margin` per side, default the shared
+ *  {@link SAFE_MARGIN} = 10%). Loads the metrics engine in the browser and
+ *  re-renders when real metrics arrive. */
+declare function useResolvedBounds(content: string, fontSize: number, opts?: MeasureOpts & {
+    margin?: number;
+}): ResolvedBounds;
+/** The largest font size ≤ `fontSize` at which `content` measures ≤ `maxWidth`
+ *  px. Pure + synchronous (uses whatever metrics `measureText` has). The
+ *  caller's `letterSpacing` (given at the ORIGINAL `fontSize`) is scaled
+ *  proportionally, so tracked type fits exactly. Never scales UP. */
+declare function fitFontSize(content: string, fontSize: number, maxWidth: number, opts?: MeasureOpts): number;
+/** Auto-fit options shared by the text-bearing components. */
+interface FitOpts {
+    /** `'frame'` caps the line to the frame width minus the safe margins
+     *  (10% per side). Opt-in; default `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px. Combines with `fit` (the smaller cap wins). */
+    maxWidth?: number;
+    /** Safe-margin fraction per side for `fit: 'frame'` (default 0.1). */
+    fitMargin?: number;
+}
+/** Resolve the effective width cap in px for {@link FitOpts} against a frame
+ *  width — `undefined` when no fit is requested. */
+declare function fitMaxWidth(opts: FitOpts, frameWidth: number): number | undefined;
+/** Hook form of {@link fitFontSize} driven by {@link FitOpts}: returns the
+ *  (possibly reduced) font size for `content` against the live frame. Returns
+ *  `fontSize` untouched when no fit is requested. Loads the metrics engine in
+ *  the browser and re-renders when real metrics arrive. */
+declare function useFittedFontSize(content: string, fontSize: number, opts?: MeasureOpts & FitOpts): number;
+
+/** The region keywords the placement contract understands. */
+type PlacementRegion = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'upper-third' | 'lower-third';
+/** A normalized canvas point — 0..1 fractions, anchored at the element CENTER.
+ *  Omitted axes default to 0.5 (centered on that axis). */
+interface PlacementPoint {
+    x?: number;
+    y?: number;
+}
+/** What a `placement` prop accepts: a region keyword or a normalized point. */
+type Placement = PlacementRegion | PlacementPoint;
+/** Region → fraction of the canvas the element's CENTER targets. Mirrors the
+ *  cinema bridge's `PLACEMENT_COORDS` exactly so geometry is stable when a
+ *  component graduates from bridge-offset to self-anchoring. */
+declare const PLACEMENT_REGIONS: Record<PlacementRegion, readonly [number, number]>;
+/** Safe-area inset as a fraction of each canvas axis — the broadcast 10% margin
+ *  (`LowerThird`'s `REGION_MAP` inset). Edge/corner regions flush to this. */
+declare const SAFE_MARGIN = 0.1;
+/** Canvas size in px. */
+interface FrameSize {
+    width: number;
+    height: number;
+}
+/** The element's laid-out size in px, when the component knows it (measured
+ *  text, explicit width/height). Lets edge/corner regions sit flush on the safe
+ *  margin instead of approximating with a centered anchor. */
+interface ElementSize {
+    width?: number;
+    height?: number;
+}
+/** A resolved placement, in px. */
+interface ResolvedPlacement {
+    /** The element's center point. */
+    x: number;
+    y: number;
+    /** Top-left origin for an element of the given {@link ElementSize} (equals
+     *  `x`/`y` when the size is unknown — treat as the center then). */
+    originX: number;
+    originY: number;
+    /** Offset from the canvas center — what a self-centering component adds to
+     *  move its (already centered) assembly onto the placement. (0,0) for
+     *  `'center'`. */
+    dx: number;
+    dy: number;
+}
+/** Narrowing helper: is this value a placement region/point at all? Useful for
+ *  components that accept legacy props alongside `placement`. */
+declare function isPlacement(value: unknown): value is Placement;
+/** Resolve a `placement` to canvas px. Pure — see {@link usePlacement} for the
+ *  hook form. `element` (when known) lets edge/corner regions sit flush on the
+ *  safe margin; `{x,y}` points are always element-center anchored. */
+declare function resolvePlacement(placement: Placement | undefined, frame: FrameSize, element?: ElementSize): ResolvedPlacement;
+/** Resolve a `placement` against the live video config. The hook every
+ *  placeable component calls. */
+declare function usePlacement(placement: Placement | undefined, element?: ElementSize): ResolvedPlacement;
+interface PlacedProps {
+    /** Where the box sits (region keyword or normalized `{x,y}`). Default `'center'`. */
+    placement?: Placement;
+    /** The content's local box width in px (content drawn in `[0,width]×[0,height]`). */
+    width?: number;
+    /** The content's local box height in px. */
+    height?: number;
+    children?: ReactNode;
+}
+/** Place an origin-relative subtree (content drawn from its local top-left in a
+ *  `width`×`height` box) per the shared contract: wraps it in a `<Group>` whose
+ *  origin puts the box's CENTER at the resolved placement point. */
+declare function Placed({ placement, width, height, children }: PlacedProps): react.FunctionComponentElement<NodeProps>;
+interface PlacementShiftProps {
+    /** Where the (self-centered) content should sit. `undefined`/`'center'` → no
+     *  shift, the tree renders exactly as before. */
+    placement?: Placement;
+    children?: ReactNode;
+}
+/** Move an already self-centering subtree (e.g. an `<AbsoluteFill
+ *  justify="center">` card) onto a placement by shifting it by the
+ *  center→target delta. The cheap migration path for layout-centered
+ *  components whose laid-out size isn't known author-side. */
+declare function PlacementShift({ placement, children }: PlacementShiftProps): react.FunctionComponentElement<NodeProps> | react.FunctionComponentElement<react.FragmentProps>;
+/** The Zod schema for a `placement` prop — shared by every component schema so
+ *  the Studio agent validates one contract, not eighty dialects. */
+declare const placementSchema: z.ZodUnion<[z.ZodEnum<["center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right", "upper-third", "lower-third"]>, z.ZodObject<{
+    x: z.ZodOptional<z.ZodNumber>;
+    y: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    x?: number | undefined;
+    y?: number | undefined;
+}, {
+    x?: number | undefined;
+    y?: number | undefined;
+}>]>;
+/** Manifest prop-metadata blurb for `placement` — one wording everywhere. */
+declare const PLACEMENT_DESCRIPTION = "Where the element sits: a region keyword ('center', 'lower-third', 'upper-third', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right') or normalized {x,y} (0-1 canvas fractions, anchored at the element's center).";
+
+interface Theme {
+    /** Primary brand color — the earned accent (bars, rules, highlights, glows). */
+    accent: string;
+    /** A soft, translucent accent for fills/washes behind content. Must be an
+     *  engine color (`#rrggbbaa`), not a CSS `rgba()` string — it is used directly
+     *  as a scene fill. */
+    accentSoft: string;
+    /** Primary text. */
+    text: string;
+    /** Secondary / supporting text. */
+    textMuted: string;
+    /** Canvas background. */
+    background: string;
+    /** Cards / panels / surfaces. */
+    surface: string;
+    /** Hairlines / borders. */
+    border: string;
+    /** Extra series colors for multi-bar / multi-slice charts (after the accent). */
+    palette: string[];
+    /** Body font family (a *loaded* family name; `undefined` = the engine default). */
+    fontFamily?: string;
+    /** Heading font family (falls back to `fontFamily`). */
+    headingFamily?: string;
+    /** Monospace font family for code (falls back to a generic mono). */
+    monoFamily?: string;
+    /** Base corner radius in px. */
+    radius: number;
+    /** Brand logo, for `LogoSting` / watermarks / outros. */
+    logo?: {
+        src?: string;
+        markup?: string;
+    };
+}
+/** The Onda house theme — the values components shipped with before theming. */
+declare const defaultTheme: Theme;
+/** Read the active theme. Returns {@link defaultTheme} when there's no provider. */
+declare function useTheme(): Theme;
+interface ThemeProviderProps {
+    /** Partial overrides merged over the inherited (or default) theme. */
+    theme?: Partial<Theme>;
+    children?: ReactNode;
+}
+/** Provide a theme to descendant components. Merges over any parent theme, so
+ *  providers can nest (a section can tweak a few tokens). */
+declare function ThemeProvider({ theme, children }: ThemeProviderProps): react.FunctionComponentElement<react.ProviderProps<Theme>>;
+
+/** Numeric motion for a scene node. Spread the relevant fields onto a `<Group>`:
+ *  `x`/`y` (px translate), `scaleX`/`scaleY` (1 = identity), `opacity` (0..1),
+ *  `rotation` (degrees; optional — only keyframe animation emits it). */
+type Motion = {
+    opacity: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation?: number;
+};
+type PatternInput = {
+    frame: number;
+    fps: number;
+    /** Frames (number) or a time string ('0.5s', '500ms', '12f'). */
+    delay?: TimeInput;
+    /** Frames (number) or a time string ('0.5s', '500ms', '12f'). */
+    durationInFrames?: TimeInput;
+    travelPx?: number;
+};
+/** Pure opacity 0 → 1 on {@link SPRING_SMOOTH}. No translate, no scale — the
+ *  simplest reveal, for elements where presence alone changes. */
+declare const entryFade: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, }: Omit<PatternInput, "travelPx">) => Motion;
+/** Direction-parameterized translate + fade on {@link SPRING_SMOOTH}. `direction`
+ *  names the *settling* direction — `'up'` rises into place (origin below),
+ *  `'left'` slides in from the right. Travel is the 12–24px Onda envelope. */
+declare const entrySlide: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, direction, distance, }: Omit<PatternInput, "travelPx"> & {
+    direction: "up" | "down" | "left" | "right";
+    distance?: number;
+}) => Motion;
+/** Opacity + scale from N → 1 on {@link SPRING_SMOOTH}. Restrained on purpose:
+ *  default `from` is `0.9`; below ~0.85 reads as dramatic zoom.
+ *
+ *  Note: scene scale is about the node's local origin (0,0), not its center —
+ *  for centered growth, wrap a subtree whose origin sits where you want the
+ *  scale anchored. (Per-node transform-origin is a planned engine feature.) */
+declare const entryScale: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, from, }: Omit<PatternInput, "travelPx"> & {
+    from?: number;
+}) => Motion;
+/** The default entrance — translate up + fade in on {@link SPRING_SMOOTH} at
+ *  `DURATION.base`. Appropriate for ~80% of entering elements. */
+declare const entryFadeRise: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, travelPx, }: PatternInput) => Motion;
+/** Plain fade OUT — opacity 1 → 0 on {@link HOUSE_EASE}, no transform. The exit
+ *  counterpart to {@link entryFade}. */
+declare const exitFade: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, }: Omit<PatternInput, "travelPx" | "fps"> & {
+    fps?: number;
+}) => Motion;
+/** The default exit — translate down + fade out at `DURATION.fast` on
+ *  {@link HOUSE_EASE}. Exits are ~30% faster than entries. */
+declare const exitFadeFall: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, travelPx, }: Omit<PatternInput, "fps"> & {
+    fps?: number;
+}) => Motion;
+/** Directional fade + translate OUT — the exit counterpart to {@link entrySlide}.
+ *  `direction` names where the element LEAVES toward. On {@link HOUSE_EASE}. */
+declare const exitSlide: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, direction, distance, }: Omit<PatternInput, "travelPx" | "fps"> & {
+    fps?: number;
+    direction: "up" | "down" | "left" | "right";
+    distance?: number;
+}) => Motion;
+/** Fade + scale OUT — the exit counterpart to {@link entryScale}. Scales from 1
+ *  to `to` (default 0.9) while fading, on {@link HOUSE_EASE}. */
+declare const exitScale: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, to, }: Omit<PatternInput, "travelPx" | "fps"> & {
+    fps?: number;
+    to?: number;
+}) => Motion;
+/** The two-phase hero landing — the Onda signature pattern. Phase 1: a
+ *  {@link SPRING_SMOOTH} translate + fade over the full duration. Phase 2: a 3%
+ *  scale overshoot ({@link OVERSHOOT}) near the end that settles back to 1.0. The
+ *  two read as one continuous landing. Reserve for ≤1 element per scene. */
+declare const heroReveal: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, travelPx, }: PatternInput) => Motion;
+/** In-place state swap — for a value/label changing while its container stays
+ *  put. Crossfade on {@link HOUSE_EASE}. Returns `{ outOpacity, inOpacity }` —
+ *  apply to the old and new values (both rendered, layered, so it stays put). */
+declare const stateSwap: ({ frame, fps, delay: delayIn, durationInFrames: durationIn, }: Omit<PatternInput, "travelPx" | "fps"> & {
+    fps?: number;
+}) => {
+    outOpacity: number;
+    inOpacity: number;
+};
+
+/** The entrance flavors {@link useEntrance} can produce. */
+type EntranceType = 'fade' | 'rise' | 'scale' | 'slide';
+/** Shared entrance options. `type` picks the choreography pattern. */
+type EntranceOptions = {
+    type?: EntranceType;
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    /** For `type: 'slide'` — the settling direction. */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /** For `type: 'slide'` — travel distance in px (12–24 envelope). */
+    distance?: number;
+    /** For `type: 'scale'` — starting scale (default 0.9). */
+    from?: number;
+};
+/** The workhorse entrance hook — returns the {@link Motion} for the current
+ *  frame. Dispatches to the choreography vocabulary so the fingerprint stays
+ *  consistent. Spread the relevant fields onto a `<Group>`. */
+declare function useEntrance(opts?: EntranceOptions): Motion;
+/** Call once, get a function that yields the entrance {@link Motion} for sibling
+ *  `i`, staggered by {@link STAGGER}. The clean way to animate a list/grid
+ *  without calling a hook in a loop. */
+declare function useStaggeredEntrance(opts?: EntranceOptions & {
+    increment?: TimeInput;
+}): (index: number) => Motion;
+/** The house spring value (0→1) for the current frame — the one-liner most
+ *  components reach for to drive a custom interpolation. */
+declare function useSpringValue(opts?: {
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    snappy?: boolean;
+}): number;
+/** Normalized progress (0→1) across a window, eased with {@link HOUSE_EASE} by
+ *  default. For opacity/color ramps and anything that isn't physical motion
+ *  (use {@link useSpringValue} for position/scale). */
+declare function useSceneProgress(opts?: {
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    eased?: boolean;
+}): number;
+/** How many units (chars or words) of a reveal are visible at the current frame.
+ *  Drives typewriter / decode / slot-roll effects. Linear by default — a steady
+ *  cadence reads better than an eased one. Returns an integer in `[0, length]`. */
+declare function useTextReveal(opts: {
+    length: number;
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    eased?: boolean;
+}): number;
+
+/** `@onda-engine/wasm-audio`'s `Beats` handle — beat/onset/tempo analysis in frame units. */
+interface BeatsHandle {
+    readonly tempo: number;
+    readonly beats: Uint32Array;
+    readonly onsets: Uint32Array;
+    readonly onsetEnv: Float32Array;
+}
+/** Beat / onset / tempo analysis of a clip, in VIDEO-FRAME units — for syncing motion
+ *  to the music. Returned by {@link useAudioBeats}; pair with {@link beatPulse}. */
+interface Beats {
+    /** Estimated tempo, beats per minute (0 if undetectable). */
+    tempo: number;
+    /** Frame indices on the beat grid (ascending). */
+    beats: number[];
+    /** Frame indices of picked onsets — any transient (drum hit, note, accent). */
+    onsets: number[];
+    /** Per-frame onset strength `0..1` (one value per frame) — a continuous envelope. */
+    onsetEnv: Float32Array;
+}
+/** Minimal shape of `@onda-engine/wasm-audio`'s `AudioAnalyzer` — kept local so this
+ *  file doesn't hard-depend on the generated wasm types at build time. */
+interface AudioAnalyzer {
+    /** Per-frame spectrum: flat, frame-major (`frames * bands`), each `0..1`,
+     *  low→high. Deterministic — identical to the native export. */
+    spectrogram(fps: number, frames: number, bands: number): Float32Array;
+    /** Beat / onset / tempo analysis over `frames` frames at `fps`. Deterministic. */
+    beats(fps: number, frames: number): BeatsHandle;
+    /** Clip duration in seconds. */
+    duration_secs(): number;
+    /** Decoded sample rate (Hz). */
+    sample_rate(): number;
+}
+/** Load + decode `src` (cached + shared) and return its analyzer once ready, or
+ *  `null` while loading / on failure (the caller uses a procedural fallback). The
+ *  component re-renders when the analyzer becomes available. Browser only —
+ *  returns `null` outside a browser (export preloads the cache separately). */
+declare function useAudioData(src: string | undefined): AudioAnalyzer | null;
+/** Analyze `src` for BEATS / onsets / tempo (frame units, from the composition's fps +
+ *  duration) so you can sync motion to the music. Returns `null` while the audio loads
+ *  or on failure (browser only — the export path preloads). Pair with {@link beatPulse}:
+ *  `scaleX={1 + 0.3 * beatPulse(frame, b.beats)}` punches an element on every beat.
+ *
+ *  For deterministic export an agent can instead bake the `beats` array into the
+ *  composition as a constant and use the pure helpers directly. */
+declare function useAudioBeats(src: string | undefined): Beats | null;
+/** Frames since the most recent beat at or before `frame` (`Infinity` before the first).
+ *  `beats` must be ascending (as {@link useAudioBeats} returns it). */
+declare function framesSinceBeat(frame: number, beats: readonly number[]): number;
+/** A `1 → 0` PUNCH that fires on each beat and decays over `decay` frames — the core
+ *  audio-sync primitive. Drive a scale / opacity / glow with it so the element hits on
+ *  the beat: `scaleX={1 + amount * beatPulse(frame, beats)}`. */
+declare function beatPulse(frame: number, beats: readonly number[], decay?: number): number;
+/** True when `frame` is on a beat (within `tolerance` frames) — for hard cuts/swaps. */
+declare function isBeat(frame: number, beats: readonly number[], tolerance?: number): boolean;
+
+/** Time spec — seconds (number) or a string like `"0:04"`, `"30s"`, `"500ms"`, `"90f"`. */
+type TimeSpec = string | number;
+interface AudioClipProps {
+    /** URL or path to the audio file. AAC-in-MP4 or WAV preferred. */
+    src?: string;
+    /**
+     * Where to start in the source audio. Time spec — `"0:04"`, `"30s"`,
+     * `"500ms"`, `"90f"`, or a raw number of seconds.
+     */
+    startAt?: TimeSpec;
+    /**
+     * Where to stop in the source. Same time spec as `startAt`. When omitted,
+     * plays to the source's end. Required for `loop`. (Not yet applied in preview.)
+     */
+    endAt?: TimeSpec;
+    /** Amplitude volume `0..1`. */
+    volume?: number;
+    /**
+     * Advanced gain in dB. When set, wins over `volume`. Converted via
+     * `10 ** (dB / 20)`: `0` = unity, `-6` ≈ 0.5, `-12` ≈ 0.25, `-20` ≈ 0.1.
+     */
+    gainDb?: number;
+    /**
+     * Apply an entry/exit volume envelope. Default `true`. (Not yet applied in
+     * preview; accepted for API parity.)
+     */
+    fade?: boolean;
+    /** Frames the fade-in / fade-out takes. Default 2 (~67ms @ 30fps). */
+    fadeDuration?: TimeInput;
+    /** Loop the trimmed clip. Requires `endAt`. (Not yet applied in preview.) */
+    loop?: boolean;
+    /** Mute the clip. */
+    muted?: boolean;
+    /** Playback speed. (Not yet applied in preview.) */
+    playbackRate?: number;
+    /** Acceptable time-shift threshold before resync (seconds). */
+    acceptableTimeShiftSeconds?: number;
+}
+/**
+ * Schedule an audio clip. Plays from the composition start (place inside a
+ * `<Sequence>` to offset — Sequence-relative start is a follow-up), trimming the
+ * source by `startAt`, at `volume` (or `gainDb`). Emits a `<Audio>` node, which
+ * draws nothing; the player plays it for preview.
+ */
+declare function AudioClip({ src, startAt, volume, gainDb, muted, }?: AudioClipProps): react.JSX.Element;
+
+/** Visualizer render style. Every style draws from the same amplitude array, so
+ *  switching `type` is purely a change of geometry. */
+type AudioVisualizerType = 'bars' | 'mirrored' | 'waveform' | 'radial' | 'dots';
+interface AudioVisualizerProps {
+    /**
+     * Render style (default `'bars'`):
+     *  - `bars` — classic vertical frequency bars.
+     *  - `mirrored` — bars mirrored around the centre line (symmetric EQ).
+     *  - `waveform` — a smooth filled ribbon around the centre line.
+     *  - `radial` — bars radiating from a centre ring (circular spectrum).
+     *  - `dots` — an LED dot-matrix meter with a brighter peak dot.
+     */
+    type?: AudioVisualizerType;
+    /**
+     * Audio file URL to drive the bars with REAL frequency data (decoded + FFT'd by
+     * `@onda-engine/wasm-audio` — identical spectra in preview and export). Omit for the
+     * built-in procedural animation. For the browser preview the source must be
+     * same-origin or CORS-enabled; `onda export` accepts any direct URL. When set,
+     * the player also PLAYS the audio (use the volume/mute control to silence it).
+     */
+    src?: string;
+    /** Number of frequency bands. */
+    barCount?: number;
+    /**
+     * Bar color. Pass a single hex string for a one-tone visualizer, or a
+     * two-entry array `[top, bottom]` for a vertical gradient ramp. The FIRST
+     * entry is the meaningful color on the CPU backend (see header). (default:
+     * theme `accent` for the top, theme `palette[1]` for the bottom)
+     */
+    color?: string | string[];
+    /** Overall width of the visualizer, in px. */
+    width?: number;
+    /** Overall height of the visualizer (the tallest a band can reach), in px. */
+    height?: number;
+    /** Vertical placement of the bars within `height` (`bars` style only). */
+    align?: 'top' | 'middle' | 'bottom';
+    /** Pixel gap between adjacent bars. */
+    gap?: number;
+    /** Bar corner radius in px (also the minimum bar height so idle bars read) (default: theme `radius`). */
+    barRadius?: number;
+    /** Animation speed multiplier for the fake spectrum's drift. */
+    speed?: number;
+    /** Deterministic seed for the fake spectrum. */
+    seed?: number | string;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Frames before the visualizer fades/grows in. */
+    delay?: TimeInput;
+    /** Frames for the entrance grow-in. */
+    durationInFrames?: TimeInput;
+}
+declare function AudioVisualizer({ type, src, barCount, color: colorProp, width, height, align, gap, barRadius: barRadiusProp, speed, seed: seedProp, variant, delay, durationInFrames, }: AudioVisualizerProps): react.JSX.Element;
+
+interface TextStyleProps {
+    /** Text color (hex `#rrggbb` / `#rrggbbaa`). Default: theme `text`. */
+    color?: string;
+    /** Loaded font family by name (any Google family; set it via `onda render
+     *  --font` or a brand profile). Default: theme `fontFamily`. */
+    fontFamily?: string;
+    /** Font weight (100–900). */
+    fontWeight?: number;
+    /** Italic / oblique. */
+    italic?: boolean;
+    /** TRACKING — extra px between glyphs (CSS `letter-spacing`). Positive opens
+     *  type up (premium display type + fast-moving text want air); negative
+     *  tightens. Default `0` (the font's natural spacing). */
+    letterSpacing?: number;
+    /** Uppercase the text — a motion-graphics staple (bold geometric-sans all-caps).
+     *  Applied to the string itself, so it survives per-glyph layout. */
+    uppercase?: boolean;
+}
+
+/** One bar: a label and its numeric value. */
+interface BarChartDatum {
+    label: string;
+    value: number;
+}
+interface BarChartProps extends TextStyleProps {
+    /** Bars to render. Order is preserved — top to bottom. */
+    data?: BarChartDatum[];
+    /** Value mapped to a full-width bar. Bars cap at 100% of the track. */
+    max?: number;
+    /** Frames before the **first** bar starts. */
+    delay?: TimeInput;
+    /** Per-bar grow duration. Bars want more time than text (default `slow`). */
+    duration?: TimeInput;
+    /** Frames between consecutive bars (default canonical `STAGGER` = 4). */
+    stagger?: TimeInput;
+    /** Bar (and track) height in px. */
+    barHeight?: number;
+    /** Pixel gap between rows. */
+    gap?: number;
+    /** Pixels reserved for the label column (left of the track). */
+    labelWidth?: number;
+    /** Gap between the label column and the track, in px. */
+    labelGap?: number;
+    /** Track length in px — the full-width target for a bar at `max`. */
+    trackWidth?: number;
+    /** Color of the **largest** bar — the earned accent (Onda rose). */
+    accentColor?: string;
+    /** Color of non-largest bars. */
+    barColor?: string;
+    /** Bar track (background) color. */
+    trackColor?: string;
+    /** Show the numeric value at the end of each bar. */
+    showValues?: boolean;
+    /** Count each value up from 0 in sync with its bar's growth (lands exactly on
+     *  the true value). Only applies when `showValues` is on. Default `true`. */
+    countUp?: boolean;
+    /** Optional headline above the chart — tells viewers what the numbers measure
+     *  (e.g. "Frames per second"). */
+    title?: string;
+    /** Title font size in px. Default ~1.5× the label `fontSize`. */
+    titleSize?: number;
+    /** Title color. Defaults to `color`. */
+    titleColor?: string;
+    /** Label / value font size in px. */
+    fontSize?: number;
+}
+declare function BarChart({ data, max, delay: delayIn, duration: durationIn, stagger: staggerIn, barHeight, gap, labelWidth, labelGap, trackWidth, accentColor: accentColorProp, barColor: barColorProp, trackColor: trackColorProp, color: colorProp, showValues, countUp, title, titleSize, titleColor: titleColorProp, fontSize, fontFamily: fontFamilyProp, letterSpacing, uppercase, }: BarChartProps): react.JSX.Element;
+
+/** A single bento cell. Spans default to 1×1; `accent` earns the rose tint. */
+interface BentoItem {
+    /** Cell title (display font). */
+    title: string;
+    /** Optional headline figure shown large above the title (e.g. `'98%'`). */
+    value?: string;
+    /** Optional caption beneath the title. */
+    caption?: string;
+    /** Columns this cell spans. Clamped to the grid's `columns` (default 1). */
+    colSpan?: number;
+    /** Rows this cell spans (default 1). */
+    rowSpan?: number;
+    /** Marks the one earned-accent cell — rose value + accent border. */
+    accent?: boolean;
+}
+interface BentoGridProps extends TextStyleProps {
+    /** The cells, laid out left-to-right, top-to-bottom. Spans drive the rhythm. */
+    items?: BentoItem[];
+    /** Number of grid columns (default 3). */
+    columns?: number;
+    /** Gap between cells in px (default 24). */
+    gap?: number;
+    /** Overall grid width in px (default 960). */
+    width?: number;
+    /** Row-track height in px. Defaults to the column-track width (≈ square cells). */
+    rowHeight?: number;
+    /** Inner padding of each cell in px (default 34). */
+    padding?: number;
+    /** Frames before the first cell enters (default 0). */
+    delay?: TimeInput;
+    /** Frames between successive cells rising in. House stagger is 4. */
+    stagger?: TimeInput;
+    /** Base title font size in px (default 30). */
+    fontSize?: number;
+    /** Caption color (default: theme `textMuted`). */
+    captionColor?: string;
+    /** Accent color for the earned `accent` cell (default: theme `accent`). */
+    accentColor?: string;
+    /** Card fill — translucent dark, approximating glass (default: theme `surface`). */
+    cardColor?: string;
+    /** Card border color (default: theme `border`). */
+    borderColor?: string;
+    /** Body font family for captions (default: theme `fontFamily`). */
+    captionFontFamily?: string;
+}
+declare function BentoGrid({ items, columns, gap, width, rowHeight, padding, delay, stagger, fontSize, color: colorProp, captionColor: captionColorProp, accentColor: accentColorProp, cardColor: cardColorProp, borderColor: borderColorProp, fontFamily: fontFamilyProp, captionFontFamily: captionFontFamilyProp, }: BentoGridProps): react.JSX.Element;
+
+interface BlurRevealProps extends TextStyleProps {
+    /** What to reveal. Rendered as a single-line `<Text>` unless `children` is
+     *  provided. */
+    text?: string;
+    /** Custom content to reveal instead of `text` (wins over `text` when both are
+     *  given). Lets BlurReveal wrap any subtree, not just a string. */
+    children?: ReactNode;
+    /** Frames before the reveal starts. */
+    delay?: TimeInput;
+    /** Frames until the reveal fully settles (default `DURATION.base` = 18). With
+     *  `SPRING_SMOOTH` the visible motion settles in roughly this range. */
+    durationInFrames?: TimeInput;
+    /** Text size in px. Ignored when `children` is set. */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  measured line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Where the reveal sits. The legacy `'top'`/`'bottom'` keywords keep their
+     *  historical edge-flush meaning (layout `justify`); every other region
+     *  keyword and normalized `{x,y}` (0-1, content center) goes through the
+     *  shared placement contract. Default `'center'`. */
+    placement?: Placement;
+    /** Rise distance in px (the original's 16px envelope; small on purpose). */
+    travelPx?: number;
+    /** Starting blur in px (gaussian sigma) for the soft→sharp focus-pull; ramps
+     *  to 0 as the reveal settles (the ondajs original's `blur(10px → 0)`). */
+    fromBlur?: number;
+}
+declare function BlurReveal({ text: textProp, children, delay: delayIn, durationInFrames: durationInFramesIn, color: colorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, placement, travelPx, fromBlur, }: BlurRevealProps): react.JSX.Element;
+
+interface BoundingBoxProps extends TextStyleProps {
+    /** Box left edge as a `0..1` fraction of the composition width. */
+    x?: number;
+    /** Box top edge as a `0..1` fraction of the composition height. */
+    y?: number;
+    /** Box width as a `0..1` fraction of the composition width. */
+    width?: number;
+    /** Box height as a `0..1` fraction of the composition height. */
+    height?: number;
+    /** Optional label tag pinned to the box's top-left corner. Empty hides it. */
+    label?: string;
+    /** Frames before the outline starts revealing. */
+    delay?: TimeInput;
+    /** Frames to reveal the full outline (default `DURATION.slow` = 28). */
+    drawDuration?: number;
+    /** Outline stroke width in px. */
+    strokeWidth?: number;
+    /** Reserved (kept for API compatibility). The perimeter draw-on traces sharp
+     *  corners (the selection-marquee look), so outline rounding is not applied. */
+    cornerRadius?: number;
+    /** Label text color — a dark for contrast on the accent tag by default. */
+    labelColor?: string;
+    /** Label font size in px. */
+    fontSize?: number;
+}
+declare function BoundingBox({ x, y, width, height, label: labelProp, color: colorProp, delay: delayIn, drawDuration, strokeWidth, cornerRadius, labelColor, fontSize, fontFamily: fontFamilyProp, letterSpacing, uppercase, }: BoundingBoxProps): react.JSX.Element;
+
+interface BrowserFrameProps {
+    /** URL shown in the address pill (and as the placeholder when empty). */
+    url?: string;
+    /** Image to show inside the frame when no `children` are passed. Scaled to
+     *  fill the content width (see approximations). */
+    src?: string;
+    /** Frames before the entrance. */
+    delay?: TimeInput;
+    /** Scale-and-fade the frame in on the house spring. */
+    animate?: boolean;
+    /** Frame (and content) width in px. */
+    width?: number;
+    /** Content height in px (excludes the chrome bar). */
+    height?: number;
+    /** Starting scale for the entrance (default 0.96 — restrained, like ondajs). */
+    from?: number;
+    /** Card body fill (default: theme `surface`). */
+    surface?: string;
+    /** 1px card border and chrome divider (default: theme `border`). */
+    border?: string;
+    /** Traffic-light dot color (default: theme `border`). */
+    borderLit?: string;
+    /** Address-pill fill (default: theme `surface`). */
+    surface2?: string;
+    /** Content canvas background (default: theme `background`). */
+    bg?: string;
+    /** Pill/URL text color (default: theme `textMuted`). */
+    dim?: string;
+    /** Placeholder text color (default: theme `textMuted`). */
+    faint?: string;
+    /** Card corner radius in px (default: theme `radius`). */
+    cardRadius?: number;
+    /** Address-pill corner radius in px (default: theme `radius`). */
+    pillRadius?: number;
+    /** Content to wrap; renders at the content area's local origin (0,0). */
+    children?: ReactNode;
+}
+declare function BrowserFrame({ url, src, delay, animate, width, height, from, surface: surfaceProp, border: borderProp, borderLit: borderLitProp, surface2: surface2Prop, bg: bgProp, dim: dimProp, faint: faintProp, cardRadius: cardRadiusProp, pillRadius: pillRadiusProp, children, }: BrowserFrameProps): react.JSX.Element;
+
+interface ButtonProps extends TextStyleProps {
+    /** The button label. */
+    label?: string;
+    /** `'primary'` = filled with `color`; `'ghost'` = transparent with a `color`
+     *  border and `color`-tinted label. */
+    variant?: 'primary' | 'ghost';
+    /** Accent color — the primary fill and the ghost border/label tint
+     *  (default: theme `accent`). */
+    color?: string;
+    /** Label color on the primary variant (default: theme `text`). Ignored
+     *  by `'ghost'`, which tints the label with `color`. */
+    textColor?: string;
+    /** Pill width in px (default 280). */
+    width?: number;
+    /** Pill height in px (default 72). */
+    height?: number;
+    /** Corner radius in px (default: theme `radius`). */
+    cornerRadius?: number;
+    /** Border thickness in px for the `'ghost'` variant (default 2). */
+    borderWidth?: number;
+    /** Label font size in px (default 24). */
+    fontSize?: number;
+    /** Loaded font family (e.g. a `--font` passed to `onda render`) (default: theme `fontFamily`). */
+    fontFamily?: string;
+    /** Label font weight (display default 600). */
+    fontWeight?: number;
+    /** Where the button sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, button center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias for `placement={{ x }}` — horizontal center as a
+     *  0–1 fraction of canvas width. */
+    centerX?: number;
+    /** @deprecated Legacy alias for `placement={{ y }}` — vertical center as a
+     *  0–1 fraction of canvas height. */
+    centerY?: number;
+    /** Play the entrance (fade + rise on the house spring). */
+    entrance?: boolean;
+    /** Frames before the entrance begins. */
+    delay?: TimeInput;
+    /** Entrance duration in frames (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    /** Play the click-dip press animation. */
+    press?: boolean;
+    /** Frame the press dip lands on (relative to the local timeline). */
+    pressFrame?: TimeInput;
+}
+declare function Button({ label, variant, color: colorProp, textColor: textColorProp, width, height, cornerRadius: cornerRadiusProp, borderWidth, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, placement, centerX, centerY, entrance, delay: delayIn, durationInFrames: durationInFramesIn, press, pressFrame: pressFrameIn, }: ButtonProps): react.JSX.Element;
+
+/** Which side of the bubble the pointer triangle sticks out from (and thus the
+ *  rough direction the callout is aimed). */
+type CalloutDirection = 'top' | 'bottom' | 'left' | 'right';
+interface CalloutProps extends TextStyleProps {
+    /** Bubble label. Single line — no auto-wrap. */
+    label?: string;
+    /** Where the bubble sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, bubble center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias for `placement={{ x }}` — bubble-center X as a
+     *  0..1 fraction of canvas width. */
+    x?: number;
+    /** @deprecated Legacy alias for `placement={{ y }}` — bubble-center Y as a
+     *  0..1 fraction of canvas height. */
+    y?: number;
+    /** Side the pointer triangle sticks out from (default `'bottom'`). */
+    direction?: CalloutDirection;
+    /** Frames before the bubble starts revealing. */
+    delay?: TimeInput;
+    /** Bubble scale-and-fade reveal duration in frames (default `DURATION.base`). */
+    duration?: TimeInput;
+    /** Frames after the bubble starts before the pointer eases in (default 6). */
+    lineDelay?: TimeInput;
+    /** Pointer reveal duration in frames (default `DURATION.base`). */
+    lineDuration?: TimeInput;
+    /** Bubble background fill (default: an elevated translucent-white surface that
+     *  lifts the bubble off the dark canvas). */
+    bgColor?: string;
+    /** Bubble border color (default: a bright translucent-white hairline). */
+    borderColor?: string;
+    /** Bubble border width in px (default 1). */
+    borderWidth?: number;
+    /** Label font size in px (default 20). */
+    fontSize?: number;
+    /** Horizontal padding inside the bubble (default 14). */
+    paddingX?: number;
+    /** Vertical padding inside the bubble (default 8). */
+    paddingY?: number;
+    /** Bubble corner radius (default: theme `radius`). */
+    cornerRadius?: number;
+    /** Pointer triangle base width in px (default 18). */
+    pointerWidth?: number;
+    /** Pointer triangle length (how far it pokes out) in px (default 12). */
+    pointerLength?: number;
+    /** Explicit bubble width in px. Overrides the measured text extent. */
+    width?: number;
+}
+declare function Callout({ label, placement, x, y, direction, delay: delayIn, duration: durationIn, lineDelay: lineDelayIn, lineDuration: lineDurationIn, color: colorProp, bgColor: bgColorProp, borderColor: borderColorProp, borderWidth, fontSize, fontFamily: fontFamilyProp, fontWeight, letterSpacing, uppercase, paddingX, paddingY, cornerRadius: cornerRadiusProp, pointerWidth, pointerLength, width, }: CalloutProps): react.JSX.Element;
+
+interface CameraShakeProps {
+    /** Frames before the shake starts. Outside the window, offset is 0. */
+    delay?: TimeInput;
+    /** Frames the shake lasts. Before `delay` / after `delay + duration`, the
+     *  offset is exactly 0 and content is still. */
+    duration?: TimeInput;
+    /** Maximum positional offset in px. Restrained by default — bump for impact
+     *  moments. */
+    intensity?: number;
+    /** Maximum rotation amplitude in degrees (GPU/Vello only). A subtle wobble by
+     *  default; set `0` for pure translational shake. */
+    rotationIntensity?: number;
+    /** PRNG seed — same seed always produces the same shake. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Linearly decay intensity (and rotation) to 0 over `duration`, so the camera
+     *  settles to rest by the end. Default `true`. */
+    decay?: boolean;
+    /** Rest x of the wrapper in px (the shake jitters around this). */
+    x?: number;
+    /** Rest y of the wrapper in px (the shake jitters around this). */
+    y?: number;
+    /** Content to shake. */
+    children?: ReactNode;
+}
+declare function CameraShake({ delay: delayIn, duration: durationIn, intensity, rotationIntensity, seed: seedProp, variant, decay, x, y, children, }: CameraShakeProps): react.JSX.Element;
+
+interface CardShowcaseProps {
+    brand?: string;
+    network?: string;
+    cardNumber?: string;
+    heroColor?: string;
+    heroTextColor?: string;
+    tierColors?: string[];
+    background?: string;
+    tilt?: number;
+    /** Slide speed in px/sec (rightward magnitude; per-row direction is applied). */
+    speed?: number;
+    /** Center logo text revealed at the end (e.g. a brand). Empty = no logo. */
+    logo?: string;
+    logoColor?: string;
+    duration?: TimeInput;
+}
+declare function CardShowcase({ brand, network, cardNumber, heroColor, heroTextColor, tierColors, background, tilt, speed, logo, logoColor, duration: durationIn, }: CardShowcaseProps): react.JSX.Element;
+
+/** One word inside a phrase, with its own spoken `[startMs, endMs)` window. */
+interface CaptionWord {
+    text: string;
+    startMs: number;
+    endMs: number;
+}
+/** One transcript entry: a word and its `[startMs, endMs)` activation window. */
+interface CaptionEntry {
+    text: string;
+    startMs: number;
+    endMs: number;
+    /** Optional per-word timing. When present, the WHOLE phrase shows at once and
+     *  each word lights up the instant it is spoken (`currentMs` inside that word's
+     *  `[startMs, endMs)`) — true word-synced karaoke — instead of the default
+     *  cascade-timed reveal where words fade in on a fixed stagger and the accent
+     *  follows that wave. The shape `onda transcribe` emits per segment. */
+    words?: CaptionWord[];
+}
+interface CaptionsProps extends TextStyleProps {
+    /** The transcript timeline. Each entry is a word + its `[startMs, endMs)`
+     *  window — the format every STT / transcript tool already speaks. */
+    captions?: CaptionEntry[];
+    /** Frames before the timeline starts (shifts every `startMs` by this). */
+    delay?: TimeInput;
+    /** Active word color — the one earned accent, carried by the word the eye is
+     *  currently landing on as the line cascades in (default: theme `accent`). */
+    accentColor?: string;
+    /** Font size in px. */
+    fontSize?: number;
+    /** Unitless line height. Accepted for prop-shape parity with ondajs; the scene
+     *  `<Text>` has a fixed text box, so it is NOT applied (see `approximations`). */
+    lineHeight?: number;
+    /** Text alignment of the caption block within its line(s). */
+    align?: 'left' | 'center' | 'right';
+    /** Vertical placement band of the block. Captions sit in the lower third by
+     *  default; `'center'`/`'top'`/`'upper-third'`/`'bottom'` reposition it (the
+     *  historical band values). A normalized `{x,y}` point (0-1, line center) is
+     *  also accepted per the shared placement contract. */
+    placement?: 'center' | 'top' | 'bottom' | 'upper-third' | 'lower-third' | {
+        x?: number;
+        y?: number;
+    };
+    /** Max line width as a 0–1 fraction of canvas width — the block wraps to more
+     *  lines within this (default 0.8) instead of overflowing the frame. */
+    maxWidth?: number;
+    /** Legibility backing so captions read over any footage (Text has no native
+     *  stroke). `'shadow'` (default) drops a soft dark copy behind each word;
+     *  `'outline'` rings each word in dark — the classic black-border caption that
+     *  reads over ANYTHING; `'box'` lays a rounded translucent card behind the
+     *  whole block (the CapCut subtitle look); `'none'` for clean plates. */
+    backdrop?: 'none' | 'shadow' | 'outline' | 'box';
+    /** Backing color for `'shadow'`/`'outline'`/`'box'` (default near-black). */
+    backdropColor?: string;
+    /** How the active word is emphasized. `'color'` (default) recolors it to the
+     *  accent; `'box'` seats it in a rounded accent pill with dark text (the
+     *  dominant short-form caption look). */
+    highlight?: 'color' | 'box';
+}
+declare function Captions({ captions, delay: delayIn, color: colorProp, accentColor: accentColorProp, fontSize, fontFamily: fontFamilyProp, fontWeight, letterSpacing, uppercase, align, placement, maxWidth, backdrop, backdropColor, highlight, }: CaptionsProps): react.JSX.Element | null;
+
+interface ChapterCardProps extends TextStyleProps {
+    /** The chapter heading — the focal text on the card. */
+    chapter: string;
+    /** Numbered index above the chapter. String so leading zeros (`"01"`) read as intended. */
+    number?: string;
+    /** Frames before the number starts fading in. The whole card sequences off this. */
+    delay?: TimeInput;
+    /** When `true`, the number takes `numberColor` (the rose) and an underline punctuates the title. */
+    accent?: boolean;
+    /** Number color when `accent` is `true` (the Onda rose) (default: theme `accent`). */
+    numberColor?: string;
+    /** Number color when `accent` is `false` — quiet metadata dim (default: theme `textMuted`). */
+    subtitleColor?: string;
+    /** Number font size in px — smaller than the title, sitting above it. */
+    numberFontSize?: number;
+    /** Number font weight. */
+    numberFontWeight?: number;
+    /** Chapter title font size in px — the focal element. */
+    titleFontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the TITLE size DOWN (never up) so the
+     *  title line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the title line; combines with `fit` (the
+     *  smaller cap wins). */
+    maxWidth?: number;
+    /** Title font weight. */
+    titleFontWeight?: number;
+    /** Where the card sits: a region keyword (`'center'`, `'lower-third'`, ...) or
+     *  normalized `{x,y}` (0-1, card center). The shared placement contract;
+     *  default `'center'` (the historical self-centering). */
+    placement?: Placement;
+}
+declare function ChapterCard({ chapter, number, delay: delayIn, accent, numberColor: numberColorProp, color: colorProp, subtitleColor: subtitleColorProp, numberFontSize, numberFontWeight, titleFontSize: titleFontSizeProp, fit, maxWidth, titleFontWeight, fontFamily: fontFamilyProp, letterSpacing, uppercase, placement, }: ChapterCardProps): react.JSX.Element;
+
+interface CodeBlockProps extends TextStyleProps {
+    /** The source to render. Newlines split into reveal-able lines. */
+    code?: string;
+    /** Filename shown in the title bar. Empty hides the title (dots still show if `chrome`). */
+    title?: string;
+    /** Show the macOS-style window chrome (three dots + title bar). */
+    chrome?: boolean;
+    /** Reveal lines one-by-one instead of all at once. */
+    revealLines?: boolean;
+    /** Frames before the first line appears. */
+    delay?: TimeInput;
+    /** Frames between successive line reveals. */
+    lineDelay?: TimeInput;
+    /** Code font size in px. Sized for a video canvas, not a screen UI. */
+    fontSize?: number;
+    /** Panel width in px. */
+    width?: number;
+    /** Default text color — identifiers, punctuation, operators (default: theme `text`). */
+    textColor?: string;
+    /** Keyword color. A muted, dusty violet — reads as syntax, not the brand accent (default: theme `palette[1]`). */
+    keywordColor?: string;
+    /** String literal color — dusty sage (default: theme `palette[3]`). */
+    stringColor?: string;
+    /** Comment color (default: theme `textMuted`). */
+    commentColor?: string;
+    /** Numeric literal color — dusty amber (default: theme `palette[2]`). */
+    numberColor?: string;
+    /** JSX / HTML tag-name color — dusty cyan (default: theme `palette[1]`). */
+    tagColor?: string;
+    /** Panel background fill (the "glass" surface) (default: theme `surface`). */
+    panelColor?: string;
+    /** Panel border color (default: theme `border`). */
+    borderColor?: string;
+}
+declare function CodeBlock({ code, title, chrome, revealLines, delay, lineDelay, fontFamily: fontFamilyProp, letterSpacing, fontSize, width, textColor: textColorProp, keywordColor: keywordColorProp, stringColor: stringColorProp, commentColor: commentColorProp, numberColor: numberColorProp, tagColor: tagColorProp, panelColor: panelColorProp, borderColor: borderColorProp, }: CodeBlockProps): react.JSX.Element;
+
+/** Line kind — drives gutter symbol, color, and row treatment. */
+type DiffLineType = 'add' | 'remove' | 'context';
+/** A single diff line. */
+interface DiffLine {
+    /** The line text (no leading +/−; the gutter adds it). */
+    text: string;
+    /** Line kind. Defaults to `'context'` when omitted. */
+    type?: DiffLineType;
+}
+interface CodeDiffProps extends TextStyleProps {
+    /** The diff lines, top to bottom. */
+    lines?: DiffLine[];
+    /** Filename shown in the title bar. */
+    title?: string;
+    /** Show window chrome (dots + title bar). */
+    chrome?: boolean;
+    /** Reveal lines one-by-one (else all appear together). */
+    revealLines?: boolean;
+    /** Frames before the first line appears. */
+    delay?: TimeInput;
+    /** Frames between consecutive line reveals (default canonical `STAGGER` = 5). */
+    lineDelay?: TimeInput;
+    /** Code font size in px. */
+    fontSize?: number;
+    /** Panel width in px. */
+    width?: number;
+    /** Default (context) text color (default: theme `textMuted`). */
+    textColor?: string;
+    /** Added-line color — a restrained green (default: theme `palette[3]`). */
+    addColor?: string;
+    /** Removed-line color — a restrained red tinted toward bg (default: `#cf6f7e`). */
+    removeColor?: string;
+    /** Panel surface (glass) fill (default: theme `surface`). */
+    surfaceColor?: string;
+    /** Panel border / chrome divider color (default: theme `border`). */
+    borderColor?: string;
+    /** Panel corner radius in px (default: theme `radius`). */
+    cornerRadius?: number;
+    /** Window-chrome traffic-light dot color (default: theme `border`). */
+    chromeDotsColor?: string;
+    /** Window-chrome title (filename) color — the one earned accent: it names the
+     *  file under change (default: theme `accent`). */
+    chromeTitleColor?: string;
+}
+declare function CodeDiff({ lines, title, chrome, revealLines, delay: delayIn, lineDelay: lineDelayIn, fontFamily: fontFamilyProp, letterSpacing, fontSize, width, textColor: textColorProp, addColor: addColorProp, removeColor: removeColorProp, surfaceColor: surfaceColorProp, borderColor: borderColorProp, cornerRadius: cornerRadiusProp, chromeDotsColor: chromeDotsColorProp, chromeTitleColor: chromeTitleColorProp, }: CodeDiffProps): react.JSX.Element;
+
+interface ConfettiProps {
+    /** Seed for every per-piece random (angle, reach, opacity, size, colour) — the
+     *  same seed always produces the same bloom (§1). */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Number of motes. ~80 reads full without thrashing the render. */
+    count?: number;
+    /** Palette motes are picked from. Defaults to the theme accent plus a soft
+     *  accent tint and tasteful neutrals; all rendered translucent. */
+    colors?: string[];
+    /** Bloom origin X, as a fraction of canvas width (0 = left, 1 = right). */
+    originX?: number;
+    /** Bloom origin Y, as a fraction of canvas height (0 = top, 1 = bottom). */
+    originY?: number;
+    /** Frames before the bloom begins. */
+    delay?: TimeInput;
+    /** Frames over which a mote drifts and fades out. */
+    duration?: TimeInput;
+    /** Drift spread, in degrees, around straight up. Wider = more fan-out. */
+    spread?: number;
+    /** Gentle downward bias added over the drift (0 = pure rise; 1 = a soft settle). */
+    gravity?: number;
+    /** Base mote size in pixels — each varies around this (small motes .. soft bokeh). */
+    pieceSize?: number;
+}
+declare function Confetti({ seed: seedProp, variant, count, colors: colorsProp, originX, originY, delay: delayIn, duration: durationIn, spread, gravity, pieceSize, }: ConfettiProps): react.JSX.Element;
+
+interface CountUpProps extends TextStyleProps {
+    /** Starting value (default `0`). */
+    from?: number;
+    /** Ending value (default `100`). */
+    to?: number;
+    /** Time before the count starts (default `0`) — frames or '0.5s'. */
+    delay?: TimeInput;
+    /** Time to count from `from` to `to`. Numbers want more time than text
+     *  (default `DURATION.slow` = 24 frames). */
+    durationInFrames?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** Fraction digits to render (default `0`). */
+    decimals?: number;
+    /** Insert en-US thousands separators (default `true`). */
+    useGrouping?: boolean;
+    /** Prepended to the number, e.g. `'$'` (default `''`). */
+    prefix?: string;
+    /** Appended to the number, e.g. `'%'` (default `''`). */
+    suffix?: string;
+    /** Font size in px. Counters are usually large (default `120`). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  measured line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Use the snappier spring (`SPRING_SNAPPY`) for the count (default `false`,
+     *  i.e. `SPRING_SMOOTH` — matches ondajs). */
+    snappy?: boolean;
+    /** Where the counter sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, anchored at the FINAL value's measured
+     *  center, so the line never slides as it counts). The shared placement
+     *  contract. Omitted → the legacy origin-relative `x`/`y` translate. */
+    placement?: Placement;
+    /** @deprecated Legacy — pixel translate from the local origin. Prefer
+     *  `placement`. */
+    x?: number;
+    /** @deprecated Legacy — pixel translate from the local origin. Prefer
+     *  `placement`. */
+    y?: number;
+}
+declare function CountUp({ from, to, delay: delayIn, durationInFrames: durationIn, fitToClip, maxSettle, hold, decimals, useGrouping, prefix, suffix, color: colorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, snappy, placement, x, y, }: CountUpProps): react.JSX.Element;
+
+interface CursorProps {
+    /** Start X as a 0..1 fraction of canvas width. */
+    fromX?: number;
+    /** Start Y as a 0..1 fraction of canvas height. */
+    fromY?: number;
+    /** End X as a 0..1 fraction of canvas width. */
+    toX?: number;
+    /** End Y as a 0..1 fraction of canvas height. */
+    toY?: number;
+    /** Frames before the cursor starts moving. */
+    delay?: TimeInput;
+    /** Frames to travel from start to end on the house spring. */
+    travelDuration?: number;
+    /** Emit a click ripple on arrival. */
+    click?: boolean;
+    /** Frames after arrival before the click fires. */
+    clickDelay?: number;
+    /** Pointer + ripple color (hex `#rrggbb` / `#rrggbbaa`) (default: theme `text`). */
+    color?: string;
+    /** Pointer height in px. */
+    size?: number;
+}
+declare function Cursor({ fromX, fromY, toX, toY, delay: delayIn, travelDuration, click, clickDelay, color: colorProp, size, }: CursorProps): react.JSX.Element;
+
+interface DeviceFrameProps {
+    /** Which device bezel to draw. */
+    device?: 'phone' | 'laptop';
+    /** Image src shown inside when no `children` are passed (use the literal
+     *  `"DEMO_IMAGE"` token in demos). Sized via the engine, not `object-fit`. */
+    src?: string;
+    /** Frames before the entrance begins. */
+    delay?: TimeInput;
+    /** Scale-and-fade the device in on the house spring. */
+    animate?: boolean;
+    /** Device width in px (height is derived from the device aspect). */
+    width?: number;
+    /** Bezel color (hex `#rrggbb` / `#rrggbbaa`) (default: theme `surface`). */
+    color?: string;
+    /** Content to wrap (scene nodes). Takes precedence over `src`. */
+    children?: ReactNode;
+}
+declare function DeviceFrame({ device, src, delay, animate, width, color: colorProp, children, }: DeviceFrameProps): react.JSX.Element;
+
+interface DrawOnProps {
+    /** SVG path `d` attribute (in the path's own coordinate space). The default is
+     *  a gentle wave — on-brand. */
+    d?: string;
+    /** Stroke color (hex `#rrggbb` / `#rrggbbaa`) (default: theme `text`). */
+    color?: string;
+    /** Stroke width in path coordinate units. */
+    strokeWidth?: number;
+    /** Frames before the draw-on starts. */
+    delay?: TimeInput;
+    /** Frames to fully draw the path in (default `DURATION.slow` = 24). */
+    durationInFrames?: TimeInput;
+}
+declare function DrawOn({ d, color: colorProp, strokeWidth, delay, durationInFrames, }: DrawOnProps): react.JSX.Element | null;
+
+interface DynamicGridProps {
+    /** Cell size in px (the lattice pitch). */
+    cell?: number;
+    /** Ruled lines or a dot lattice. */
+    variant?: 'lines' | 'dots';
+    /** Grid color (hex `#rrggbb` / `#rrggbbaa`) (default: theme `border`). */
+    color?: string;
+    /** Diagonal drift speed in px/frame. Negative drifts the other way. */
+    speed?: number;
+    /** Grid opacity, 0..1 — a grid is scaffold, not subject. */
+    opacity?: number;
+    /** Add a centered accent glow over the grid. */
+    glow?: boolean;
+    /** Glow color (hex). The meaningful color on the CPU fallback (first stop) (default: theme `accent`). */
+    glowColor?: string;
+    /** Canvas color painted behind the grid (default: theme `background`). */
+    background?: string;
+    /** Stroke thickness (lines) / dot radius in px (dots). */
+    thickness?: number;
+}
+declare function DynamicGrid({ cell, variant, color: colorProp, speed, opacity, glow, glowColor: glowColorProp, background: backgroundProp, thickness, }: DynamicGridProps): react.JSX.Element;
+
+interface EndCardProps extends TextStyleProps {
+    /** Hero CTA / headline line. */
+    cta?: string;
+    /** Social handles or URLs displayed in a row beneath the CTA. */
+    handles?: string[];
+    /** Time before the CTA starts (frames, or '0.5s'/'500ms'/'12f'). The whole card is sequenced relative to this. */
+    delay?: TimeInput;
+    /** Where the card sits: a region keyword (`'center'`, `'lower-third'`, ...) or
+     *  normalized `{x,y}` (0-1, card center). The shared placement contract;
+     *  default `'center'` (the historical self-centering). */
+    placement?: Placement;
+    /** Show the accent underline beneath the CTA (default `true`). */
+    accent?: boolean;
+    /** CTA font size in px (default 96). */
+    ctaFontSize?: number;
+    /** Font weight for the CTA (default 600). */
+    ctaFontWeight?: number;
+    /** Handles row font size in px (default 24). */
+    handlesFontSize?: number;
+    /** Font weight for the handles row (default 600). */
+    handlesFontWeight?: number;
+    /** Handles color — defaults so the row reads quiet (default: theme `textMuted`). */
+    handlesColor?: string;
+    /** Underline color — the earned rose (default: theme `accent`). */
+    accentColor?: string;
+}
+declare function EndCard({ cta, handles, delay: delayIn, placement, accent, ctaFontSize, ctaFontWeight, handlesFontSize, handlesFontWeight, color: colorProp, handlesColor: handlesColorProp, accentColor: accentColorProp, fontFamily: fontFamilyProp, letterSpacing, uppercase, }: EndCardProps): react.JSX.Element;
+
+interface FadeInProps {
+    /** Frames to wait before starting. */
+    delay?: TimeInput;
+    /** Frames the fade takes to settle (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    children?: ReactNode;
+}
+declare function FadeIn({ delay, durationInFrames, children }: FadeInProps): react.JSX.Element;
+
+interface FadeOutProps {
+    /** Frame at which the exit begins. */
+    delay?: TimeInput;
+    /** Frames the fade-out takes (default `DURATION.fast` = 10 — exits are quick). */
+    durationInFrames?: TimeInput;
+    children?: ReactNode;
+}
+declare function FadeOut({ delay, durationInFrames, children }: FadeOutProps): react.JSX.Element;
+
+/** The named cinematic looks. */
+type FilmLook = 'warm' | 'cool' | 'noir' | 'teal-orange' | 'vibrant' | 'film' | 'faded';
+interface FilmGradeProps {
+    /** The named cinematic look applied to the whole subtree. Default `'film'`. */
+    look?: FilmLook;
+    /**
+     * Strength of the look, `0..1`. Lerps every grade param from the neutral
+     * identity toward the look: `0` = no grade (pass-through), `1` = the full
+     * look. Default `1`.
+     */
+    intensity?: number;
+    /** Explicit linear-exposure override (`2^exposure`; 0 = identity), applied on
+     *  top of the resolved look. */
+    exposure?: number;
+    /** Explicit contrast override (1 = identity), applied on top of the look. */
+    contrast?: number;
+    /** Explicit saturation override (1 = identity, 0 = grayscale), on top of the look. */
+    saturation?: number;
+    /** Explicit warm/cool override (R up / B down for positive; 0 = neutral), on top. */
+    temperature?: number;
+    /** Explicit green/magenta override (positive = green; 0 = neutral), on top. */
+    tint?: number;
+    /** The graded subtree — typically the whole composition. */
+    children?: ReactNode;
+}
+declare function FilmGrade({ look, intensity, exposure, contrast, saturation, temperature, tint, children, }: FilmGradeProps): react.JSX.Element;
+
+interface GradientShiftProps {
+    /** Gradient start color (`#rrggbb` / `#rrggbbaa`). Default is the canvas tone
+     *  — near-identical to `to`, so the drift reads as a dark-on-dark breath
+     *  (default: theme `background`). */
+    from?: string;
+    /** Gradient end color. Default is one step warmer than `from`, intentionally
+     *  near-identical so the shift is a whisper rather than a colored wash
+     *  (default: theme `surface`). */
+    to?: string;
+    /** Starting gradient angle in degrees (CSS convention: `0deg` points up,
+     *  increasing clockwise). Default `135`. */
+    angle?: number;
+    /** Rotation rate in degrees per frame. Keep low — atmospheric, not focal.
+     *  At 30fps the default `0.5` produces a 24-second full rotation. */
+    speed?: number;
+    /** Frames before the drift starts. While `frame < delay` the gradient sits at
+     *  `angle`. Default `0`. */
+    delay?: TimeInput;
+}
+declare function GradientShift({ from: fromProp, to: toProp, angle, speed, delay: delayIn, }: GradientShiftProps): react.JSX.Element;
+
+interface GrainOverlayProps {
+    /** Grain strength (peak luminance deviation). Capped at `0.15` to match the
+     *  house 2–15% range (ondajs caps grain at ~2–4%). Default `0.05`. */
+    opacity?: number;
+    /** Grain fineness: higher = finer, tighter speckle (noise nearer full
+     *  resolution); lower = coarser photo-grain (a lower-res field, upscaled).
+     *  Default `0.9`. */
+    baseFrequency?: number;
+    /** Grain contrast: widens the deviation so the texture gains punch. Clamped to
+     *  `1..4` like ondajs. Default `1`. */
+    numOctaves?: number;
+    /** Deterministic variation — the same seed always produces the same grain. Default `0`. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** When `true`, the field re-seeds on a frame bucket so the grain shimmers. Off
+     *  by default — ondajs grain is intentionally static set-dressing. */
+    animate?: boolean;
+    /** Frames per re-seed bucket when `animate` is on. Lower = busier. Default `2`. */
+    animateEvery?: TimeInput;
+    /** @deprecated The grain is now a continuous per-pixel field, not scattered
+     *  dots — `count` no longer applies. Accepted for compat. */
+    count?: number;
+    /** @deprecated Grain is monochrome luminance noise (overlay-blended), so a
+     *  colour no longer applies. Accepted for compat. */
+    color?: string;
+}
+declare function GrainOverlay({ opacity, baseFrequency, numOctaves, seed: seedProp, variant, animate, animateEvery: animateEveryIn, }: GrainOverlayProps): react.JSX.Element;
+
+interface HighlightProps extends TextStyleProps {
+    /** Text to highlight. */
+    text?: string;
+    /** Frames before the text starts revealing. */
+    delay?: TimeInput;
+    /** Text reveal duration in frames (default `DURATION.base` = 18). */
+    duration?: TimeInput;
+    /** Frames to wait after the text appears before the accent bar wipes in. */
+    lineDelay?: TimeInput;
+    /** Accent-bar wipe duration. Fast on purpose — emphatic (default `DURATION.fast`). */
+    lineDuration?: TimeInput;
+    /** Accent (highlight) bar color (default: theme `accent`). */
+    accentColor?: string;
+    /** Font size in px (default 64). */
+    fontSize?: number;
+    /** Pixels past the text edges that the accent bar extends (default 8). */
+    paddingX?: number;
+    /** Explicit text width in px. Overrides the glyph-count estimate when known. */
+    width?: number;
+    /** Local-space placement of the component's top-left. */
+    x?: number;
+    /** Local-space placement of the component's top-left. */
+    y?: number;
+}
+declare function Highlight({ text: textProp, delay: delayIn, duration: durationIn, lineDelay: lineDelayIn, lineDuration: lineDurationIn, color: colorProp, accentColor: accentColorProp, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, paddingX, width, x, y, }: HighlightProps): react.JSX.Element;
+
+/** The four built-in shape icons, matching ondajs (inside a 0–24 viewBox). */
+type IconShape = 'check' | 'cross' | 'dot' | 'star';
+interface IconPopProps extends TextStyleProps {
+    /** A character/emoji to pop in (e.g. "✦", "★", "🎉"). Takes precedence over
+     *  `shape` when set. Rendered via `<Text>` so it works on both backends. */
+    glyph?: string;
+    /** One of the four built-in shapes (check/cross/dot/star). Used when `glyph`
+     *  is not set. Drawn as `<Path>` — GPU/Vello only. */
+    shape?: IconShape;
+    /** Icon size in px (the icon is square-ish, centered on its placement point). */
+    iconSize?: number;
+    /** Icon color (default: theme `accent`). */
+    color?: string;
+    /** Stroke width for the outline shapes (check, cross). Ignored by glyph and by
+     *  the filled shapes (dot, star). */
+    strokeWidth?: number;
+    /** Frames before the pop starts. */
+    delay?: TimeInput;
+    /** Frames the pop takes to settle (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    /** Overshoot amount — how far past 1.0 the scale peaks before settling, as a
+     *  fraction (default 0.18 ≈ an 18% bump). 0 disables the overshoot. */
+    overshoot?: number;
+    /** Canvas x of the icon's CENTER (the pop grows from here). */
+    x?: number;
+    /** Canvas y of the icon's CENTER. */
+    y?: number;
+}
+declare function IconPop({ glyph, shape, iconSize, color: colorProp, strokeWidth, delay: delayIn, durationInFrames: durationInFramesIn, overshoot, letterSpacing, uppercase, x, y, }: IconPopProps): react.JSX.Element;
+
+/** Which entrance fingerprint the image uses. `'blur'` is the ondajs default —
+ *  a real soft→sharp focus pull via the engine's `Image.blur` gaussian.
+ *  `'none'` skips the entrance entirely: the image is placed and held still
+ *  (the bare `<Image>` primitive, but with this component's box / fit /
+ *  rounded-corner ergonomics) — for logos and precise product stills that
+ *  shouldn't drift or reveal. */
+type ImageRevealMotion = 'blur' | 'fade' | 'scale' | 'wipe' | 'none';
+/** How the image fills its box. Both require `srcWidth`/`srcHeight` to differ
+ *  from a plain stretch — see the file doc comment. */
+type ImageRevealFit = 'cover' | 'contain';
+interface ImageRevealProps {
+    /** Image URL or path (resolved at render time). */
+    src: string;
+    /** Which motion fingerprint the entrance uses (default `'blur'`). */
+    motion?: ImageRevealMotion;
+    /** Peak blur for the `'blur'` motion — the sigma (source px) the image starts
+     *  at before resolving to sharp. Ignored by the other motions. Default `24`. */
+    blurAmount?: number;
+    /** How the image fits its box (default `'cover'`). */
+    fit?: ImageRevealFit;
+    /** Frames to fully reveal (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    /** Frames before the reveal starts. */
+    delay?: TimeInput;
+    /** Box top-left X in px (default 0). */
+    x?: number;
+    /** Box top-left Y in px (default 0). */
+    y?: number;
+    /** Box width in px. Defaults to the full composition width (fill mode). */
+    width?: number;
+    /** Box height in px. Defaults to the full composition height (fill mode). */
+    height?: number;
+    /** Corner radius of the box (clips the image to a rounded rect) (default: theme `radius`). */
+    cornerRadius?: number;
+}
+declare function ImageReveal({ src, motion, blurAmount, fit, durationInFrames, delay, x, y, width, height, cornerRadius: cornerRadiusProp, }: ImageRevealProps): react.JSX.Element;
+
+interface InputFieldProps extends TextStyleProps {
+    /** The field's value. With `typed` on, this is what types itself in. */
+    value?: string;
+    /** Placeholder shown while the field is empty (before any glyph is revealed). */
+    placeholder?: string;
+    /** Label above the field. Empty string hides it. */
+    label?: string;
+    /** Animate `value` typing itself in character-by-character (`useTextReveal`). */
+    typed?: boolean;
+    /** Frames before typing starts. */
+    delay?: TimeInput;
+    /** Frames to type the whole value (linear pacing). */
+    typeDuration?: TimeInput;
+    /** Show the accent focus ring around the field once typing begins. */
+    focusRing?: boolean;
+    /** Field width in px. Sized for a 1080p+ video canvas, not a screen UI. */
+    width?: number;
+    /** Text size in px. */
+    fontSize?: number;
+    /** Value text color (default: theme `text`). */
+    textColor?: string;
+    /** Placeholder text color (default: theme `textMuted`). */
+    placeholderColor?: string;
+    /** Label text color (default: theme `textMuted`). */
+    labelColor?: string;
+    /** Caret + focus-ring color — the one earned accent (the Onda rose) (default: theme `accent`). */
+    accentColor?: string;
+    /** Resting (unfocused) field border color (default: theme `border`). */
+    borderColor?: string;
+    /** Field background fill (the "glass" surface) (default: theme `surface`). */
+    fieldColor?: string;
+    /** Where the field sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, field center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias for `placement={{ x }}` — horizontal center of
+     *  the field as a 0–1 fraction of canvas width. */
+    x?: number;
+    /** @deprecated Legacy alias for `placement={{ y }}` — vertical center of the
+     *  field as a 0–1 fraction of canvas height. */
+    y?: number;
+}
+declare function InputField({ value, placeholder, label, typed, delay: delayIn, typeDuration: typeDurationIn, focusRing, width, fontSize, fontFamily: fontFamilyProp, letterSpacing, uppercase, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, accentColor: accentColorProp, borderColor: borderColorProp, fieldColor: fieldColorProp, placement, x, y, }: InputFieldProps): react.JSX.Element;
+
+/** A single Kanban column: a header, an optional accent, and its ticket cards. */
+interface KanbanColumn {
+    /** Column header, e.g. `'In Progress'`. */
+    title: string;
+    /** Status-dot + count color for this column. Defaults to a neutral faint token;
+     *  one column should earn the accent. */
+    accent?: string;
+    /** Ticket labels — one small card per entry, top-to-bottom. Single-line each. */
+    cards?: string[];
+}
+interface KanbanBoardProps extends TextStyleProps {
+    /** The columns, laid out left-to-right. Each holds its own ticket cards. */
+    columns?: KanbanColumn[];
+    /** Overall board width in px. Split evenly across the columns. */
+    width?: number;
+    /** Gap between columns (and between cards within a column) in px. */
+    gap?: number;
+    /** Frames before the first card enters. */
+    delay?: TimeInput;
+    /** Frames between successive cards rising in (house stagger = 4). */
+    stagger?: TimeInput;
+    /** Base column-header font size in px. */
+    fontSize?: number;
+    /** Default accent for the dot/count when a column omits its own (default: theme `accent`). */
+    accent?: string;
+    /** Header / title text color (default: theme `text`). */
+    textColor?: string;
+    /** Ticket-label text color (default: theme `textMuted`). */
+    cardTextColor?: string;
+    /** Faint color for neutral dots, counts, and card accent stripes (default: theme `textMuted`). */
+    faintColor?: string;
+    /** Glass column fill (translucent — see approximations) (default: theme `surface`). */
+    columnFill?: string;
+    /** Glass column border color (default: theme `border`). */
+    columnStroke?: string;
+    /** Ticket card fill (translucent — see approximations) (default: theme `surface`). */
+    cardFill?: string;
+}
+declare function KanbanBoard({ columns, width, gap, delay: delayIn, stagger: staggerIn, fontSize, fontFamily: fontFamilyProp, letterSpacing, uppercase, accent: accentProp, textColor: textColorProp, cardTextColor: cardTextColorProp, faintColor: faintColorProp, columnFill: columnFillProp, columnStroke: columnStrokeProp, cardFill: cardFillProp, }: KanbanBoardProps): react.JSX.Element;
+
+interface KenBurnsProps {
+    /** Image source (resolved at render time by `onda render`). */
+    src: string;
+    /** Frames before the drift starts. */
+    delay?: TimeInput;
+    /** Frames over which the zoom + pan completes. 150f ≈ 5s @ 30fps. */
+    duration?: TimeInput;
+    /** Starting scale (atop the cover fit). Default 1.0. */
+    fromScale?: number;
+    /** Ending scale — keep the delta restrained (1.0 → 1.1). Default 1.1. */
+    toScale?: number;
+    /** Starting pan origin X. `0` = left, `1` = right. Default 0.5 (center). */
+    fromX?: number;
+    /** Starting pan origin Y. `0` = top, `1` = bottom. Default 0.5 (center). */
+    fromY?: number;
+    /** Ending pan origin X. Default 0.5. */
+    toX?: number;
+    /** Ending pan origin Y. Default 0.5. */
+    toY?: number;
+}
+declare function KenBurns({ src, delay: delayIn, duration: durationIn, fromScale, toScale, fromX, fromY, toX, toY, }: KenBurnsProps): react.JSX.Element;
+
+type Ease = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | [number, number, number, number];
+/** One position keyframe. `ease` is the TEMPORAL curve of the segment ENDING at this
+ *  key (speed). `ti`/`to` are SPATIAL bezier tangents — handle offsets RELATIVE to
+ *  this key's (x,y): `to` shapes the path LEAVING this key, `ti` the path ARRIVING.
+ *  Both absent ⇒ a straight segment (legacy behaviour, unchanged). */
+interface PosKey {
+    at: number;
+    x: number;
+    y: number;
+    ease?: Ease;
+    ti?: [number, number];
+    to?: [number, number];
+}
+/** One scalar keyframe (opacity 0–1, scale, rotation°). */
+interface ValKey {
+    at: number;
+    v: number;
+    ease?: Ease;
+}
+interface KeyframeTracks {
+    position?: PosKey[];
+    opacity?: ValKey[];
+    scale?: ValKey[];
+    /** Non-uniform horizontal scale — wins over `scale` when present. */
+    scaleX?: ValKey[];
+    /** Non-uniform vertical scale — wins over `scale` when present. */
+    scaleY?: ValKey[];
+    rotation?: ValKey[];
+}
+interface SampledKeyframes {
+    x: number;
+    y: number;
+    opacity: number;
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+}
+/** Sample one channel of a track at `frame` — clamps to the end keys; between two
+ *  keys, eases `t` by the LATER key's `ease` (the segment's curve). */
+declare function sampleTrack<T extends {
+    at: number;
+    ease?: Ease;
+}>(track: T[] | undefined, frame: number, get: (k: T) => number, dflt: number): number;
+/** Sample every channel at `frame`. Absent channels return their neutral default
+ *  (position offset 0, opacity 1, scale 1, rotation 0). */
+declare function sampleKeyframes(tracks: KeyframeTracks, frame: number): SampledKeyframes;
+/** True if `params` carries any keyframe track — lets a renderer/editor detect a
+ *  `pattern:"keyframes"` animation. */
+declare function hasKeyframeTracks(params: Record<string, unknown> | undefined): boolean;
+
+interface SlotRef<T> {
+    slot: string;
+    default: T;
+    value?: T;
+}
+type Slottable<T> = T | SlotRef<T>;
+interface KeyframesImageContent {
+    kind: 'image';
+    /** Image source — a literal URL or a `{slot}` to swap. Omit for a `gradient`/`color` placeholder. */
+    src?: Slottable<string>;
+    /** Gradient fill (linear/radial/fbm or a `{slot}`) used when `src` is absent — wins over `color`. */
+    gradient?: Slottable<GradientInput>;
+    /** Solid fill — a hex, a brand-token name, or a `{slot}`; used when neither `src` nor `gradient` is set. Defaults to the theme surface. */
+    color?: Slottable<string>;
+    /** Outline color (hex/token/`{slot}`) — for a stroked/outline rect. */
+    stroke?: Slottable<string>;
+    /** Outline thickness (px) — a literal or a `{slot}`. */
+    strokeWidth?: Slottable<number>;
+    /** Width (px) — a literal or a `{slot}` (resize). */
+    width: Slottable<number>;
+    /** Height (px) — a literal or a `{slot}` (resize). */
+    height: Slottable<number>;
+    /** Corner rounding (px) — a literal or a `{slot}`. */
+    cornerRadius?: Slottable<number>;
+    /** Pivot in content space (defaults to the tile CENTER). */
+    anchorX?: number;
+    anchorY?: number;
+}
+/** An ellipse/ring leaf — fill via `color`/`gradient`, or `stroke` only for a ring. */
+interface KeyframesEllipseContent {
+    kind: 'ellipse';
+    width: Slottable<number>;
+    height: Slottable<number>;
+    color?: Slottable<string>;
+    gradient?: Slottable<GradientInput>;
+    stroke?: Slottable<string>;
+    strokeWidth?: Slottable<number>;
+    anchorX?: number;
+    anchorY?: number;
+}
+/** An arbitrary vector path leaf (SVG `d`, local space). Native/GPU render. */
+interface KeyframesPathContent {
+    kind: 'path';
+    d: string;
+    color?: Slottable<string>;
+    gradient?: Slottable<GradientInput>;
+    stroke?: Slottable<string>;
+    strokeWidth?: Slottable<number>;
+    anchorX?: number;
+    anchorY?: number;
+}
+interface KeyframesTextContent {
+    kind: 'text';
+    text: Slottable<string>;
+    /** Text size (px) — a literal or a `{slot}` (resize). */
+    fontSize: Slottable<number>;
+    color?: Slottable<string>;
+    /** Typeface — a literal family name or a `{slot}` (the brand `font`). */
+    fontFamily?: Slottable<string>;
+    /** Weight — a literal or a `{slot}`. */
+    fontWeight?: Slottable<number>;
+    letterSpacing?: number;
+    /** Horizontal alignment of the text about its `position` x. `'left'` (default,
+     *  and the legacy behaviour) anchors the LEFT edge at the position; `'center'`
+     *  measures the rendered text and centres it on the position; `'right'` ends at
+     *  it. When set, it OVERRIDES `anchorX` (the engine computes the pivot). This is
+     *  what lets the agent "centre this text" on a raw-positioned Keyframes element. */
+    align?: 'left' | 'center' | 'right';
+    /** Vertical alignment of the text about its `position` y. `'top'` (default, the
+     *  legacy behaviour) anchors the TOP of the line box at the position; `'middle'`
+     *  centres it vertically; `'bottom'` anchors the bottom edge. When set, it
+     *  OVERRIDES `anchorY`. Combine with `align` for the full 9-point grid — e.g.
+     *  `align:'right' + vAlign:'top'` = top-right corner, `align:'center' +
+     *  vAlign:'middle'` = dead-centre on the position. */
+    vAlign?: 'top' | 'middle' | 'bottom';
+    /** Pivot in content space (defaults to top-left 0,0). `anchorX` ignored when
+     *  `align` is set; `anchorY` ignored when `vAlign` is set. */
+    anchorX?: number;
+    anchorY?: number;
+}
+type KeyframesContent = KeyframesImageContent | KeyframesTextContent | KeyframesEllipseContent | KeyframesPathContent;
+/** A keyframe on the path-`d` MORPH track: the `content.kind:"path"` `d` at frame `at`. */
+interface DMorphKey {
+    at: number;
+    d: string;
+}
+interface KeyframesProps {
+    position?: PosKey[];
+    opacity?: ValKey[];
+    scale?: ValKey[];
+    /** Non-uniform horizontal scale — wins over `scale` (e.g. a bar growing wide). */
+    scaleX?: ValKey[];
+    /** Non-uniform vertical scale — wins over `scale`. */
+    scaleY?: ValKey[];
+    rotation?: ValKey[];
+    /** Path-`d` MORPH track — interpolates a `content.kind:"path"` element's `d` across
+     *  keyframes so the SHAPE itself transforms (a wave reforming, a logo morphing). The
+     *  forms must share segment structure (same command sequence) → numeric lerp with
+     *  ease-in-out, exactly like CSS `d:path()`. Ignored for non-path content. */
+    morph?: DMorphKey[];
+    content: KeyframesContent;
+}
+declare function Keyframes({ position, opacity, scale, scaleX, scaleY, rotation, morph, content, }: KeyframesProps): react.JSX.Element | null;
+
+interface Box {
+    width: number;
+    height: number;
+}
+/** The `<Group>` transform that re-frames a design-space element onto the output. */
+interface ResponsiveTransform {
+    x: number;
+    y: number;
+    scale: number;
+}
+/** The representative design-space point an element "lives at" — the mean of its
+ *  position track, nudged to the visual CENTRE of image content (whose pivot defaults
+ *  to a corner). Returns `null` for elements with NO absolute position: those already
+ *  self-place against the output canvas (`placement`), so they must NOT be re-anchored. */
+declare function entryDesignAnchor(props: Record<string, unknown> | undefined): {
+    x: number;
+    y: number;
+} | null;
+/** The per-element Magic-Resize transform: anchor pinned per-axis, size scaled
+ *  uniformly by the smaller axis ratio so the element always fits the frame and never
+ *  distorts. A `null` anchor or a matching canvas ⇒ identity (the element self-places). */
+declare function responsiveEntryTransform(anchor: {
+    x: number;
+    y: number;
+} | null, design: Box, out: Box): ResponsiveTransform;
+
+/** The per-glyph entrance presets. */
+type KineticTextPreset = 'rise' | 'fade' | 'scale' | 'blur' | 'wave';
+interface KineticTextProps extends TextStyleProps {
+    /** The line to choreograph. Laid out as one row of absolutely-placed glyphs. */
+    text?: string;
+    /** Font size in px (default 96). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  line cannot exceed the frame minus the safe margins. Default `'none'`
+     *  (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Per-glyph entrance flavor (default `'rise'`). */
+    preset?: KineticTextPreset;
+    /** Time between consecutive glyphs entering (default `STAGGER` = 5 frames). */
+    stagger?: TimeInput;
+    /** Time each glyph's entrance takes to settle (default `DURATION.base`). */
+    durationInFrames?: TimeInput;
+    /** Time before the FIRST glyph starts (default 0). */
+    delay?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** Horizontal alignment of the line about its anchor (default `'center'`). */
+    align?: 'left' | 'center' | 'right';
+    /** Where the line sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, line center). The shared placement contract;
+     *  default `'center'` (the historical centering). */
+    placement?: Placement;
+}
+declare function KineticText({ text: textProp, fontSize, fit, maxWidth, preset, stagger, durationInFrames, delay, fitToClip, maxSettle, hold, align, color, fontFamily, fontWeight, italic, letterSpacing, uppercase, placement, }: KineticTextProps): react.JSX.Element;
+
+interface LineChartProps {
+    /** The series values, left to right. */
+    data?: number[];
+    /** Frames before the line starts drawing. */
+    delay?: TimeInput;
+    /** Frames for the line to fully draw on. */
+    duration?: TimeInput;
+    /** Line + dot color — the earned accent (default: theme `accent`). */
+    color?: string;
+    /** Stroke width in px. */
+    strokeWidth?: number;
+    /** Chart width in px. */
+    width?: number;
+    /** Chart height in px. */
+    height?: number;
+    /** Fill a soft gradient area under the line. */
+    fill?: boolean;
+    /** Show a dot at each data point as the line reaches it. */
+    showDots?: boolean;
+}
+declare function LineChart({ data, delay, duration, color: colorProp, strokeWidth, width, height, fill, showDots, }: LineChartProps): react.JSX.Element;
+
+type LogoRevealPreset = 'focus' | 'rise' | 'scale';
+interface LogoRevealProps {
+    /** Logo image source (resolved at render time by `onda render`). */
+    src?: string;
+    /** Logo box width in px (the image is `fit="contain"` inside it — never cropped). */
+    width?: number;
+    /** Logo box height in px. */
+    height?: number;
+    /** Frames before the reveal starts. */
+    delay?: number;
+    /** Frames over which the reveal completes (the house-spring duration). */
+    durationInFrames?: number;
+    /** Reveal style — `focus` (blur pull, default), `rise`, or `scale`. */
+    preset?: LogoRevealPreset;
+    /** Starting blur sigma (px) for the `focus` pull. Default 14. */
+    fromBlur?: number;
+}
+declare function LogoReveal({ src, width, height, delay, durationInFrames, preset, fromBlur, }: LogoRevealProps): react.JSX.Element;
+
+interface LogoStingProps extends TextStyleProps {
+    /** SVG path `d` for the logo mark, in `viewBox` coordinate space. */
+    d?: string;
+    /** The brand / product title beneath the mark. */
+    title?: string;
+    /** Frames before the sting starts. */
+    delay?: TimeInput;
+    /** Draw the accent rule beneath the title (the single earned-color moment). */
+    accent?: boolean;
+    /** SVG viewBox `"minX minY width height"` — must match the space of `d`. */
+    viewBox?: string;
+    /** Rendered width of the mark in px. */
+    pathWidth?: number;
+    /** Rendered height of the mark in px. */
+    pathHeight?: number;
+    /** Stroke width, in px (after the viewBox→pixel scale; see note below). */
+    strokeWidth?: number;
+    /** Logo stroke color (default: theme `text`). */
+    stroke?: string;
+    /** Underline accent color — the signature dusty rose (default: theme `accent`). */
+    accentColor?: string;
+    /** Title font size in px. */
+    titleFontSize?: number;
+}
+declare function LogoSting({ d, title, delay: delayIn, accent, viewBox, pathWidth, pathHeight, strokeWidth, stroke: strokeProp, accentColor: accentColorProp, titleFontSize, color: colorProp, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, }: LogoStingProps): react.JSX.Element;
+
+type LookbookLayout = 'spread-right' | 'spread-left' | 'centered';
+interface LookbookShotProps extends TextStyleProps {
+    /** Product photo source (resolved at render time by `onda render`). */
+    src?: string;
+    /** Product name — the headline, set in the display face. */
+    name?: string;
+    /** Small letterspaced eyebrow above the name (category), in the body face. */
+    eyebrow?: string;
+    /** Quiet supporting line under the name (material / method), in the body face. */
+    detail?: string;
+    /** Page composition (default `spread-right`). Alternate sides across shots. */
+    layout?: LookbookLayout;
+    /** Frames before the card enters. */
+    delay?: number;
+    /** Name font size in px (default 86 for spreads, auto-reduced for `centered`). */
+    nameFontSize?: number;
+    /** The mat/frame color (the print border). Default a near-white off the bg. */
+    matColor?: string;
+    /** Soft shadow color under the mat. Default a low-alpha warm dark. */
+    shadowColor?: string;
+    /** Eyebrow + rule color (default: theme `accent`). */
+    accentColor?: string;
+    /** Detail line color (default: theme `textMuted`). */
+    detailColor?: string;
+    /** Body font for eyebrow + detail (default: theme `fontFamily`). */
+    bodyFamily?: string;
+    /** Frames over which the card's slow "breath" scale completes (default 150). */
+    lifeDurationInFrames?: number;
+}
+declare function LookbookShot({ src, name, eyebrow, detail, layout, delay, nameFontSize, matColor, shadowColor, color: colorProp, accentColor: accentColorProp, detailColor: detailColorProp, fontFamily: fontFamilyProp, bodyFamily: bodyFamilyProp, letterSpacing, uppercase, lifeDurationInFrames, }: LookbookShotProps): react.JSX.Element;
+
+/** Broadcast lower-third placement regions — the corners (or centered edge) a
+ *  name bar lives in. The `*-center` variants center the block on the canvas
+ *  mid-line, for a single credit/URL line under a closing card. */
+type LowerThirdPlacement = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
+interface LowerThirdProps extends TextStyleProps {
+    /** The person's name (the primary line). */
+    name?: string;
+    /** The person's role / title (the secondary line). */
+    role?: string;
+    /** Which canvas corner the bar sits in (default `'bottom-left'`). Drives the
+     *  slide-in direction and flush alignment. */
+    placement?: LowerThirdPlacement;
+    /** Frames before the name slides in. */
+    delay?: TimeInput;
+    /** Show the accent rule beneath the name (default `true`). */
+    accent?: boolean;
+    /** Role color (default: theme `textMuted`). */
+    roleColor?: string;
+    /** Accent rule color (default: theme `accent`). */
+    accentColor?: string;
+    /** Name font size in px (default 48). */
+    fontSize?: number;
+    /** Name font weight (default 600). */
+    nameFontWeight?: number;
+    /** Role font size in px (default 22). */
+    roleFontSize?: number;
+    /** Role font weight (default 500). */
+    roleFontWeight?: number;
+    /** Accent rule corner radius in px (capped so a thin sliver never bulges) (default: theme `radius`). */
+    cornerRadius?: number;
+}
+declare function LowerThird({ name, role, placement, delay: delayIn, accent, color: colorProp, roleColor: roleColorProp, accentColor: accentColorProp, fontSize, nameFontWeight, roleFontSize, roleFontWeight, fontFamily: fontFamilyProp, letterSpacing, uppercase, cornerRadius: cornerRadiusProp, }: LowerThirdProps): react.JSX.Element;
+
+interface MarqueeProps extends TextStyleProps {
+    /** Items to scroll. The list is repeated as needed for a seamless wrap. */
+    items?: string[];
+    /** Scroll speed in pixels per second. Keep low for restraint (default 30). */
+    speed?: number;
+    /** Scroll direction (default `'left'`). */
+    direction?: 'left' | 'right';
+    /** Pixels between items (default 64). */
+    gap?: number;
+    /** Font size in px (default 32). */
+    fontSize?: number;
+    /** Viewport width to scroll within. Defaults to the full composition width. */
+    width?: number;
+    /** Viewport height (the clip band). Defaults to the full composition height. */
+    height?: number;
+}
+declare function Marquee({ items: itemsProp, speed, direction, gap, color: colorProp, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, width, height, }: MarqueeProps): react.JSX.Element;
+
+interface MaskRevealProps extends TextStyleProps {
+    /** What to reveal (single line). Ignored when `children` is supplied. */
+    text?: string;
+    /** Frames before the reveal starts. */
+    delay?: TimeInput;
+    /** Frames for the mask to fully retreat. */
+    duration?: TimeInput;
+    /** The side the content appears to come IN from (mirrors `SlideIn`). The mask
+     *  retreats toward this side. */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Text size in px (default 96). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  padded clip box cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). Text mode only. */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the padded clip box; combines with `fit`
+     *  (the smaller cap wins). Text mode only. */
+    maxWidth?: number;
+    /** Clip-box width in px. Required for `children`; otherwise estimated from `text`. */
+    width?: number;
+    /** Clip-box height in px. Required for `children`; otherwise `fontSize × 1.2`. */
+    height?: number;
+    /** Where the clip box sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, box center). The shared placement contract;
+     *  default `'center'` (the historical behavior). */
+    placement?: Placement;
+    /** Arbitrary subtree to reveal instead of `text`. Supply `width`/`height`. */
+    children?: ReactNode;
+}
+declare function MaskReveal({ text: textProp, delay, duration, direction, color: colorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, width, height, placement, children, }: MaskRevealProps): react.JSX.Element;
+
+interface MatrixDecodeProps extends TextStyleProps {
+    /** The text that decodes into place. */
+    text?: string;
+    /** Time before decoding starts — frames or '0.5s'. */
+    delay?: TimeInput;
+    /** Time between successive characters settling (left-to-right). */
+    charDelay?: TimeInput;
+    /** Time each character scrambles before it settles (min 1 frame). */
+    scrambleDuration?: TimeInput;
+    /** Time between glyph swaps while scrambling. Lower = faster flicker (min 1 frame). */
+    scrambleSpeed?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** Seed for the (deterministic) glyph picks. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Glyph pool drawn from while scrambling. */
+    charset?: string;
+    /** Color of still-scrambling glyphs — the earned accent (default: theme `accent`). */
+    scrambleColor?: string;
+    /** Font size in px (default 120). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  measured line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Horizontal anchoring of the single line (approximate — see file notes).
+     *  Only applies to the legacy default/`x` anchoring — `placement` anchors the
+     *  line's measured center. */
+    align?: 'left' | 'center' | 'right';
+    /** Where the line sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, line center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias — absolute x of the line's left edge in px.
+     *  Prefer `placement`. */
+    x?: number;
+    /** @deprecated Legacy alias — absolute y (top-ish) of the line in px. Prefer
+     *  `placement`. */
+    y?: number;
+}
+declare function MatrixDecode({ text: textProp, delay: delayIn, charDelay: charDelayIn, scrambleDuration: scrambleDurationIn, scrambleSpeed: scrambleSpeedIn, fitToClip, maxSettle, hold, seed: seedProp, variant, charset, color: colorProp, scrambleColor: scrambleColorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, placement, x, y, }: MatrixDecodeProps): react.JSX.Element;
+
+interface MeshGradientProps {
+    /** Blob colors. 2–4 reads best; they drift over the `background` canvas (default: theme `palette[0]`). */
+    colors?: string[];
+    /** Base canvas color behind the blobs (default: theme `background`). */
+    background?: string;
+    /** Drift speed multiplier. Keep low — this is atmosphere, not motion. */
+    speed?: number;
+    /** Seed for the blob phase/amplitude offsets (deterministic). */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Overall blob opacity over the canvas (0..1). */
+    opacity?: number;
+}
+declare function MeshGradient({ colors: colorsProp, background: backgroundProp, speed, seed: seedProp, variant, opacity, }: MeshGradientProps): react.JSX.Element;
+
+interface MoodboardProps {
+    /** Tile image sources (resolved at render). Distributed around the center. */
+    images?: string[];
+    /** Layout seed — same seed → same scatter (deterministic). */
+    seed?: number;
+    /** Coarse grid the tiles snap to (before jitter). */
+    columns?: number;
+    rows?: number;
+    /** Central exclusion rect (no tiles), as fractions of the canvas — sized to the
+     *  title that sits there. */
+    exclusionWidth?: number;
+    exclusionHeight?: number;
+    /** Frames between successive tiles ENTERING — keep it visible (default 3). */
+    stagger?: TimeInput;
+    /** Per-tile entrance duration (default '0.5s'). */
+    tileEnter?: TimeInput;
+    /** Frames between successive tiles EXITING (default 2). */
+    exitStagger?: TimeInput;
+    /** Per-tile exit duration (default '0.4s'). */
+    tileExit?: TimeInput;
+    /** Total clip length; defaults to the enclosing Sequence duration. */
+    durationInFrames?: TimeInput;
+    /** Entrance start scale (default 1 — the look is fade + slide, no scale). */
+    scaleFrom?: number;
+    /** Entrance drift distance in px (tiles rise into place). */
+    driftPx?: number;
+    /** Rounded-corner radius for each tile in px (default 16). */
+    cornerRadius?: number;
+    /** Position jitter as a fraction of the cell (default 0.12). */
+    jitter?: number;
+    /** Tile aspect-ratio pool (w/h) the scatter draws from (default landscape + square). */
+    aspects?: number[];
+}
+declare function Moodboard({ images, seed, columns, rows, exclusionWidth, exclusionHeight, stagger, tileEnter, exitStagger, tileExit, durationInFrames, scaleFrom, driftPx, cornerRadius, jitter, aspects, }: MoodboardProps): react.JSX.Element | null;
+
+/** One orbiting satellite node in the constellation. */
+interface Satellite {
+    /** Short label inside the node — a word or single character reads best. */
+    label: string;
+    /** Orbit radius in px (distance from the hub). Varying radii read as depth. */
+    radius: number;
+    /** Angular speed in radians per frame; signed for either direction. */
+    speed: number;
+    /** Starting angle in radians — where the satellite sits at frame 0. */
+    startAngle: number;
+}
+interface NodeGraphProps extends TextStyleProps {
+    /** Label inside the central hub node — a single character or short word. */
+    hubLabel?: string;
+    /** The orbiting satellites. Each flies in from off-frame, then settles into
+     *  its elliptical orbit. ~5 reads as a believable constellation. */
+    satellites?: Satellite[];
+    /** The earned accent — hub fill tint, the connection lines, and the glow (default: theme `accent`). */
+    accent?: string;
+    /** Vertical squash of every orbit (1 = circular, <1 = elliptical). A strong
+     *  squash makes the even-angled spokes *read* as lopsided (nodes bunch toward
+     *  the 3/9-o'clock sides and gaps open top/bottom), so the default keeps the
+     *  ring near-circular. */
+    ellipse?: number;
+    /** Seed for the deterministic fly-in directions and connection-pulse phases. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Frames before the constellation begins assembling. */
+    delay?: TimeInput;
+    /** Show the soft accent glow behind the hub. */
+    glow?: boolean;
+    /** Hub node diameter in px. */
+    hubDiameter?: number;
+    /** Hub label size in px. */
+    hubFontSize?: number;
+    /** Background canvas color behind the constellation (default: theme `background`). */
+    background?: string;
+    /** Surface (fill) color of the satellite pills (default: theme `surface`). */
+    surface?: string;
+    /** Border color of the satellite pills (default: theme `border`). */
+    borderColor?: string;
+    /** Text color of every label (default: theme `text`). */
+    textColor?: string;
+    /** Satellite label font size in px. */
+    satelliteFontSize?: number;
+    /** Horizontal center of the constellation as a 0–1 fraction of canvas width. */
+    centerX?: number;
+    /** Vertical center of the constellation as a 0–1 fraction of canvas height. */
+    centerY?: number;
+}
+declare function NodeGraph({ hubLabel, satellites, accent: accentProp, ellipse, seed: seedProp, variant, delay: delayIn, glow, hubDiameter, hubFontSize, background: backgroundProp, surface: surfaceProp, borderColor: borderColorProp, textColor: textColorProp, satelliteFontSize, fontFamily: fontFamilyProp, letterSpacing, uppercase, centerX, centerY, }: NodeGraphProps): react.JSX.Element;
+
+/** One drifting image layer. */
+interface ParallaxLayer {
+    /** Image URL/path (resolved at render time). */
+    src: string;
+    /** Drift-rate multiplier vs the base `distance` (1 = full distance over the
+     *  duration). Lower = slower/further-back layer; higher = faster/closer. */
+    speed?: number;
+    /** Per-layer oversize so the drift never exposes a canvas edge (default 1.05). */
+    scale?: number;
+    /** Per-layer opacity, 0..1 (default 1). */
+    opacity?: number;
+}
+interface ParallaxProps {
+    /** Single image layer. Use `src` OR `layers`; `layers` wins when both are set. */
+    src?: string;
+    /** Multiple layers, drawn back-to-front, each drifting at its own `speed`. */
+    layers?: ParallaxLayer[];
+    /** Frames before the drift starts. */
+    delay?: TimeInput;
+    /** Frames over which the drift completes (180f ≈ 6s @ 30fps — parallax wants time). */
+    duration?: TimeInput;
+    /** The edge the layers drift *toward* as time advances. */
+    direction?: 'left' | 'right' | 'up' | 'down';
+    /** Base drift in pixels across `duration` (per-layer scaled by `speed`). Keep
+     *  restrained — past ~120px it reads as a pan, not parallax. */
+    distance?: number;
+    /** Default oversize applied to layers that don't set their own `scale` (1.05). */
+    scale?: number;
+}
+declare function Parallax({ src, layers, delay: delayIn, duration: durationIn, direction, distance, scale, }: ParallaxProps): react.JSX.Element;
+
+interface PathMorphProps {
+    /** SVG path `d` to morph FROM (e.g. a logo emblem, or a line), in its own space. */
+    from: string;
+    /** SVG path `d` to morph TO (e.g. a divider, or another line), in the SAME space. */
+    to: string;
+    /** Ink color (hex). FILL for closed shapes, STROKE for open lines. Defaults theme `text`. */
+    color?: string;
+    /** Force STROKE (line) rendering. Auto-true when BOTH paths are OPEN (no `Z`). */
+    stroke?: boolean;
+    /** Stroke width in path-coordinate units (when stroked). Default 4. */
+    strokeWidth?: number;
+    /** Frames before the `from` shape appears. */
+    delay?: number;
+    /** Frames to HOLD the `from` shape (recognizable) before the morph begins. */
+    holdFrames?: number;
+    /** Frames the morph itself takes (default `DURATION.slow` = 24). */
+    durationInFrames?: number;
+    /** Composition position of the morph's local origin. */
+    x?: number;
+    y?: number;
+    /** Uniform scale of the path's coordinate space. */
+    scale?: number;
+    /** Fade the shape in over the first 8 frames (default true). */
+    fadeIn?: boolean;
+}
+declare function PathMorph({ from, to, color, stroke, strokeWidth, delay, durationInFrames, x, y, scale, fadeIn, }: PathMorphProps): react.JSX.Element;
+
+/** One pie slice: a numeric weight and its color. */
+interface PieRevealSlice {
+    /** Relative weight of the slice. The full circle is split proportionally. */
+    value: number;
+    /** Slice fill color (hex `#rrggbb` / `#rrggbbaa`). */
+    color: string;
+    /** Optional label, drawn just outside the ring at the slice's mid-angle when
+     *  {@link PieRevealProps.showLabel} is set. Also used for React keying. */
+    label?: string;
+}
+interface PieRevealProps extends TextStyleProps {
+    /** Slices to render, drawn clockwise from 12 o'clock in array order. */
+    data?: PieRevealSlice[];
+    /** Outer radius of the pie, in px. */
+    radius?: number;
+    /** Inner radius (donut hole) in px. `0` is a solid pie. The hole is filled
+     *  with {@link holeColor}, so set that to match the background. */
+    innerRadius?: number;
+    /** Color filling the donut hole — match the composition background (default: theme `background`). */
+    holeColor?: string;
+    /** Frames before the **first** slice starts sweeping. */
+    delay?: TimeInput;
+    /** Per-slice sweep duration on the house spring. */
+    duration?: TimeInput;
+    /** Frames between consecutive slices starting (default canonical `STAGGER`). */
+    stagger?: TimeInput;
+    /** Horizontal center as a 0–1 fraction of canvas width. */
+    x?: number;
+    /** Vertical center as a 0–1 fraction of canvas height. */
+    y?: number;
+    /** Show labels: the center total (donut only) plus each slice's `label`
+     *  drawn just outside the ring. */
+    showLabel?: boolean;
+    /** Center label text. Defaults to the slice count. */
+    label?: string;
+    /** Center label color (default: theme `text`). */
+    labelColor?: string;
+    /** Center label font size in px. */
+    fontSize?: number;
+}
+declare function PieReveal({ data, radius, innerRadius, holeColor: holeColorProp, delay: delayIn, duration: durationIn, stagger: staggerIn, x, y, showLabel, label, labelColor: labelColorProp, fontSize, fontFamily: fontFamilyProp, }: PieRevealProps): react.JSX.Element;
+
+interface PriceTagProps extends TextStyleProps {
+    /** Product name — the label, set in the display face. */
+    name?: string;
+    /** Price as a string so any currency works (e.g. `'$70'`, `'€19'`, `'£12.50'`). */
+    price?: string;
+    /** Show the SOLD state — dims + strikes the price and appends a muted pill. */
+    sold?: boolean;
+    /** The SOLD pill label. */
+    soldLabel?: string;
+    /** Frames before the chip enters. */
+    delay?: number;
+    /** Base scale for the chip (1 = the default size). Scales type + padding together. */
+    size?: number;
+    /** Price text color (default: theme `accent`). */
+    priceColor?: string;
+    /** Divider + SOLD-pill accent color (default: theme `accent`). */
+    accentColor?: string;
+    /** Chip fill color (default: theme `surface`). */
+    surface?: string;
+    /** Chip hairline border color (default: theme `border`). */
+    border?: string;
+    /** Body font for the price + SOLD pill (default: theme `fontFamily`). */
+    bodyFamily?: string;
+    /** Local-space x of the chip's top-left. Omit to center on the composition. */
+    x?: number;
+    /** Local-space y of the chip's top-left. Omit to center on the composition. */
+    y?: number;
+}
+declare function PriceTag({ name, price, sold, soldLabel, delay, size, color: colorProp, priceColor: priceColorProp, accentColor: accentColorProp, surface: surfaceProp, border: borderProp, fontFamily: fontFamilyProp, bodyFamily: bodyFamilyProp, letterSpacing, uppercase, x, y, }: PriceTagProps): react.JSX.Element;
+
+interface PricingCardProps extends TextStyleProps {
+    /** Tier name above the price (e.g. `'Pro'`). Rendered uppercase. */
+    tier?: string;
+    /** The headline price, rendered large. Free-form: `'$29'`, `'€19'`, `'Free'`. */
+    price?: string;
+    /** Billing period beneath the price (e.g. `'/month'`). Empty hides it. */
+    period?: string;
+    /** Feature checklist — each item gets an accent checkmark, revealed on a stagger. */
+    features?: string[];
+    /** Call-to-action button label. */
+    cta?: string;
+    /** Lifts + scales the card and shows an accent badge — the highlighted tier. */
+    recommended?: boolean;
+    /** The earned accent — checkmarks, badge, CTA, recommended border + glow (default: theme `accent`). */
+    accent?: string;
+    /** Frames before the card enters. */
+    delay?: TimeInput;
+    /** Card width in px. */
+    width?: number;
+    /** Price font size in px (the large display number). */
+    priceSize?: number;
+    /** Panel fill color (default: theme `surface`). */
+    background?: string;
+    /** Panel border color (when not `recommended`) (default: theme `border`). */
+    borderColor?: string;
+    /** Dim color for the tier label (default: theme `textMuted`). */
+    dimColor?: string;
+    /** Faint color for the billing period (default: theme `textMuted`). */
+    faintColor?: string;
+    /** Body font for tier / features / CTA (default: theme `fontFamily`). */
+    bodyFontFamily?: string;
+    /** Where the card sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, card center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias — x of the card's top-left in px. Prefer
+     *  `placement`. */
+    x?: number;
+    /** @deprecated Legacy alias — y of the card's top-left in px. Prefer
+     *  `placement`. */
+    y?: number;
+}
+declare function PricingCard({ tier, price, period, features, cta, recommended, accent: accentProp, delay: delayIn, width, priceSize, background: backgroundProp, borderColor: borderColorProp, color: colorProp, dimColor: dimColorProp, faintColor: faintColorProp, fontFamily: fontFamilyProp, bodyFontFamily: bodyFontFamilyProp, letterSpacing, uppercase, placement, x, y, }: PricingCardProps): react.JSX.Element;
+
+interface ProductWallProps {
+    /** Product photo sources (resolved at render time by `onda render`). */
+    images?: string[];
+    /** Per-image `[colSpan, rowSpan]` for the bento rhythm; cycled if shorter than
+     *  `images`. Omit for a uniform 1×1 grid. */
+    spans?: Array<[number, number]>;
+    /** Grid columns (default 4). */
+    columns?: number;
+    /** Gap between tiles in px (default 16). */
+    gap?: number;
+    /** Overall grid width in px (default 1680). */
+    width?: number;
+    /** Row-track height in px. Defaults to the column-track width (≈ square tiles). */
+    rowHeight?: number;
+    /** Frames before the first tile enters (default 0). */
+    delay?: number;
+    /** Frames between successive tiles rising in (default `STAGGER` = 4). */
+    stagger?: number;
+    /** Tile hairline border color (default: theme `border`). */
+    borderColor?: string;
+    /** Tile hairline border width in px (default 0 = no border). */
+    borderWidth?: number;
+    /** Optional dark veil over every tile, 0..1, to unify a mixed set (default 0). */
+    scrim?: number;
+    /** Camera scale at the start of the move (default 1.06). */
+    cameraFrom?: number;
+    /** Camera scale at the end — keep the delta gentle (default 1.18). */
+    cameraTo?: number;
+    /** Horizontal camera drift in px across the move (default -44). */
+    cameraDriftX?: number;
+    /** Vertical camera drift in px across the move (default 26). */
+    cameraDriftY?: number;
+    /** Frames over which the camera completes its push + drift (default 150). */
+    cameraDurationInFrames?: number;
+}
+declare function ProductWall({ images, spans, columns, gap, width, rowHeight, delay, stagger, borderColor, borderWidth, scrim, cameraFrom, cameraTo, cameraDriftX, cameraDriftY, cameraDurationInFrames, }: ProductWallProps): react.JSX.Element;
+
+interface ProgressBarProps extends TextStyleProps {
+    /** Target fill, 0–100. The bar grows from 0 to this value. */
+    value?: number;
+    /** Frames before the animation starts. */
+    delay?: TimeInput;
+    /** Frames to reach the full target value (default `DURATION.slow` = 24). */
+    duration?: TimeInput;
+    /** Track width in px — the full 0%→100% travel. */
+    width?: number;
+    /** Bar thickness in px. */
+    height?: number;
+    /** Corner radius in px. Defaults to a full pill. */
+    radius?: number;
+    /** Track color — the unfilled portion (default: theme `surface`). */
+    trackColor?: string;
+    /** Fill color (default: theme `accent`). */
+    accentColor?: string;
+    /** Whether to render the `${value}%` label beside the bar. */
+    showValue?: boolean;
+    /** Label font size in px. */
+    fontSize?: number;
+}
+declare function ProgressBar({ value, delay: delayIn, duration: durationIn, width, height, radius, trackColor: trackColorProp, accentColor: accentColorProp, showValue, color: colorProp, fontSize, fontFamily: fontFamilyProp, }: ProgressBarProps): react.JSX.Element;
+
+interface ProgressStepsProps extends TextStyleProps {
+    /** Step labels, left to right. */
+    steps?: string[];
+    /** How many steps are complete — the fill animates to this index (0-based count). */
+    current?: number;
+    /** Frames before the fill animates. */
+    delay?: TimeInput;
+    /** Frames for the fill to travel to `current`. */
+    duration?: TimeInput;
+    /** Completed / active color — the earned accent (Onda rose) (default: theme `accent`). */
+    accentColor?: string;
+    /** Pending color (dots + connector track) (default: theme `border`). */
+    dimColor?: string;
+    /** Label color (default: theme `textMuted`). */
+    labelColor?: string;
+    /** Label font size in px. */
+    fontSize?: number;
+    /** Overall width in px (dots are spaced across this). */
+    width?: number;
+    /** Dot diameter in px. */
+    dotSize?: number;
+    /** Connector track thickness in px. */
+    trackThickness?: number;
+}
+declare function ProgressSteps({ steps, current, delay, duration, accentColor: accentColorProp, dimColor: dimColorProp, labelColor: labelColorProp, fontFamily: fontFamilyProp, fontSize, width, dotSize, trackThickness, }: ProgressStepsProps): react.JSX.Element;
+
+interface PulsingIndicatorProps extends TextStyleProps {
+    /** Dot + ring color (default: theme `accent`). Note: this is the dot/ring fill,
+     *  not the label text color — set the label color via `labelColor`. */
+    color?: string;
+    /** Dot diameter in px. */
+    size?: number;
+    /** Optional label to the right of the dot. Empty hides it. */
+    label?: string;
+    /** Label color (default: theme `textMuted`). */
+    labelColor?: string;
+    /** Label font size in px. */
+    fontSize?: number;
+    /** Frames per pulse cycle. */
+    period?: number;
+    /**
+     * Placement of the indicator's top-left (the dot's bounding box). When
+     * omitted, the dot + label assembly is centered on the composition.
+     */
+    x?: number;
+    y?: number;
+}
+declare function PulsingIndicator({ color: colorProp, size, label, labelColor: labelColorProp, fontFamily: fontFamilyProp, letterSpacing, fontSize, period, x: xProp, y: yProp, }: PulsingIndicatorProps): react.JSX.Element;
+
+interface QuoteCardProps extends TextStyleProps {
+    /** The pull-quote body. Revealed word-by-word on a slower-than-canonical
+     *  stagger. */
+    quote?: string;
+    /** Attribution name. */
+    author?: string;
+    /** Attribution role / title. */
+    role?: string;
+    /** Frames before the quote starts. */
+    delay?: TimeInput;
+    /** Show the accent divider between quote and attribution. */
+    accent?: boolean;
+    /** Quote font size in px. */
+    quoteFontSize?: number;
+    /** Quote font weight (display default 600). */
+    quoteFontWeight?: number;
+    /** Author / role font size in px. */
+    authorFontSize?: number;
+    /** Author / role font weight. */
+    authorFontWeight?: number;
+    /** Author / role color (default: theme `textMuted`). */
+    authorColor?: string;
+    /** Divider color (default: theme `accent`). */
+    accentColor?: string;
+    /** Wrap width for the quote in px. Defaults to ~44% of the composition width
+     *  (the ondajs `40vw` pull-quote feel), so long quotes wrap onto multiple
+     *  lines. */
+    quoteWidth?: number;
+    /** Where the card sits: a region keyword (`'center'`, `'lower-third'`, ...) or
+     *  normalized `{x,y}` (0-1, card center). The shared placement contract;
+     *  default `'center'` (the historical self-centering). */
+    placement?: Placement;
+}
+declare function QuoteCard({ quote, author, role, delay: delayIn, accent, quoteFontSize, quoteFontWeight, authorFontSize, authorFontWeight, color: colorProp, authorColor: authorColorProp, accentColor: accentColorProp, fontFamily: fontFamilyProp, uppercase, quoteWidth, placement, }: QuoteCardProps): react.JSX.Element;
+
+interface RgbGlitchProps extends TextStyleProps {
+    /** The text to glitch. */
+    text?: string;
+    /** Frames before the effect starts. */
+    delay?: TimeInput;
+    /** Constant baseline channel split in px (the always-on chromatic edge). */
+    baseSplit?: number;
+    /** Peak extra split in px during a glitch burst. */
+    intensity?: number;
+    /** Frames between glitch bursts. */
+    glitchPeriod?: number;
+    /** Frames a glitch burst lasts. */
+    glitchDuration?: number;
+    /** Seed for the (deterministic) burst jitter. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Red-channel copy color (default: theme `accent`). */
+    redColor?: string;
+    /** Cyan-channel copy color (default: theme `palette[1]`). */
+    cyanColor?: string;
+    /** Opacity of the coloured channel copies (the screen-blend approximation —
+     *  lower keeps the center read as clean white). Default 0.85. */
+    channelOpacity?: number;
+    /** Font size in px. */
+    fontSize?: number;
+    /** Line alignment relative to the placement point. Default `'center'`. */
+    align?: 'left' | 'center' | 'right';
+    /** Absolute x of the alignment anchor. Defaults to canvas horizontal center. */
+    x?: number;
+    /** Absolute y (top-ish) of the line. Defaults to vertical center. */
+    y?: number;
+}
+declare function RgbGlitch({ text: textProp, delay: delayIn, baseSplit, intensity, glitchPeriod, glitchDuration, seed: seedProp, variant, color: colorProp, redColor: redColorProp, cyanColor: cyanColorProp, channelOpacity, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, x, y, }: RgbGlitchProps): react.JSX.Element;
+
+interface RotateInProps {
+    /** Frames to wait before starting. */
+    delay?: TimeInput;
+    /** Frames to settle to 0° (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    /** Starting angle in degrees (clockwise). Safe zone: `[-12, +12]`. Default -8. */
+    fromDegrees?: number;
+    children?: ReactNode;
+}
+declare function RotateIn({ delay: delayIn, durationInFrames: durationInFramesIn, fromDegrees, children, }: RotateInProps): react.JSX.Element;
+
+interface ScaleInProps {
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    /** Starting scale (default 0.9; below ~0.85 reads as dramatic zoom). */
+    from?: number;
+    children?: ReactNode;
+}
+declare function ScaleIn({ delay, durationInFrames, from, children, }: ScaleInProps): react.JSX.Element;
+
+interface ScrimProps {
+    /** Veil color (hex). Default white — lifts a busy photo so dark text reads. */
+    color?: string;
+    /** Veil strength 0..1 (default 0.3). */
+    opacity?: number;
+    /** Frames before it appears. */
+    delay?: number;
+    /** Fade the veil in over the first 8 frames (default true). */
+    fadeIn?: boolean;
+}
+declare function Scrim({ color, opacity, delay, fadeIn }: ScrimProps): react.JSX.Element;
+
+interface SiteRevealProps {
+    /** Full-page screenshot (tall) — the homepage to scroll. */
+    src?: string;
+    /** Address-bar text. */
+    url?: string;
+    /** Page height / width of `src` (drives the scroll extent). Default ~4.48. */
+    pageAspect?: number;
+    /** Card content width in px (default 1360). */
+    width?: number;
+    /** Viewport height in px below the chrome bar (default 770). */
+    height?: number;
+    /** Vertical nudge of the whole card from center (default 56, slightly low to
+     *  leave room for a headline above). */
+    offsetY?: number;
+    /** Frames before the card enters. */
+    delay?: number;
+    /** Type the URL into the address bar (with a blinking cursor) before scrolling
+     *  — the "navigate to the site" beat. Default true. */
+    typeUrl?: boolean;
+    /** Frames the URL takes to type in (default 26). */
+    typeDurationInFrames?: number;
+    /** Page fraction (0..1) shown at the start of the scroll (default 0 = top). */
+    scrollStart?: number;
+    /** Page fraction (0..1) reached at the end (default 0.62 — stop before footer). */
+    scrollEnd?: number;
+    /** Frames over which the scroll completes (default 150). */
+    scrollDurationInFrames?: number;
+    /** Card body fill (default near-white). */
+    surface?: string;
+    /** Chrome bar fill (default a light warm gray). */
+    barColor?: string;
+    /** 1px card border + chrome divider (default: theme `border`). */
+    border?: string;
+    /** Address pill text color (default: theme `textMuted`). */
+    dim?: string;
+    /** Soft shadow color under the card (default a low-alpha warm dark). */
+    shadowColor?: string;
+    /** Card corner radius in px (default 16). */
+    cardRadius?: number;
+}
+declare function SiteReveal({ src, url, pageAspect, width, height, offsetY, delay, typeUrl, typeDurationInFrames, scrollStart, scrollEnd, scrollDurationInFrames, surface, barColor, border: borderProp, dim: dimProp, shadowColor, cardRadius, }: SiteRevealProps): react.JSX.Element;
+
+interface ShimmerSweepProps extends TextStyleProps {
+    /** The single line of text to sweep light across. */
+    text?: string;
+    /** Frames before the sweep starts. */
+    delay?: TimeInput;
+    /** Frames for one sweep pass (default `DURATION.slower` = 30). */
+    duration?: TimeInput;
+    /** Loop the sweep instead of a single pass. */
+    loop?: boolean;
+    /** Frames between sweeps when looping. */
+    interval?: TimeInput;
+    /** The sweeping highlight color (default: theme `text`). */
+    shimmerColor?: string;
+    /** Sweep angle in degrees (approximated by tilting the gradient band). */
+    angle?: number;
+    /** Font size in px (default 96). */
+    fontSize?: number;
+    /** Explicit text-box width in px. Overrides the measured width. */
+    width?: number;
+    /** Top-left x in px. Defaults to centering the word on the canvas. */
+    x?: number;
+    /** Top-left y in px. Defaults to centering the word on the canvas. */
+    y?: number;
+}
+declare function ShimmerSweep({ text: textProp, delay: delayIn, duration: durationIn, loop, interval: intervalIn, color: colorProp, shimmerColor: shimmerColorProp, angle, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, width, x, y, }: ShimmerSweepProps): react.JSX.Element;
+
+interface SkeletonCardProps {
+    /** Number of placeholder text bars below the (optional) thumbnail. */
+    lines?: number;
+    /** Show the leading thumbnail block above the bars. */
+    thumbnail?: boolean;
+    /** Frames for one shimmer pass across the card. Lower = faster sweep. The
+     *  default runs slow on purpose — a settled, premium loading state. */
+    shimmerSpeed?: number;
+    /** The travelling highlight color — a soft sheen over the bars (default: theme `border`). */
+    shimmerColor?: string;
+    /** Resting fill of the placeholder bars / thumbnail (default: theme `surface`). */
+    barColor?: string;
+    /** Card (panel) background — the translucent glass fill (default: theme `background`). */
+    cardColor?: string;
+    /** Card border color (the 1px-equivalent stroke) (default: theme `border`). */
+    borderColor?: string;
+    /** Frames before the card enters. */
+    delay?: TimeInput;
+    /** Card width in px. */
+    width?: number;
+    /** Card height in px. `undefined` sizes the card to its content. */
+    height?: number;
+    /** Base bar height in px. */
+    barHeight?: number;
+    /** Inner padding of the card in px. */
+    padding?: number;
+}
+declare function SkeletonCard({ lines, thumbnail, shimmerSpeed, shimmerColor: shimmerColorProp, barColor: barColorProp, cardColor: cardColorProp, borderColor: borderColorProp, delay: delayIn, width, height, barHeight, padding, }: SkeletonCardProps): react.JSX.Element;
+
+interface SlideInProps {
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    /** Settling direction (default `'up'`). */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /** Travel distance in px (12–24 Onda envelope; default 12). */
+    distance?: number;
+    children?: ReactNode;
+}
+declare function SlideIn({ delay, durationInFrames, direction, distance, children, }: SlideInProps): react.JSX.Element;
+
+interface SlideOutProps {
+    delay?: TimeInput;
+    durationInFrames?: TimeInput;
+    /** Direction the element leaves toward (default `'down'`). */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    distance?: number;
+    children?: ReactNode;
+}
+declare function SlideOut({ delay, durationInFrames, direction, distance, children, }: SlideOutProps): react.JSX.Element;
+
+interface SlotMachineRollProps extends TextStyleProps {
+    /** The text that rolls into place. Best on short strings (years, counts). */
+    text?: string;
+    /** Time before rolling starts — frames or '0.5s'. */
+    delay?: TimeInput;
+    /** Time between successive characters starting their roll (default the house
+     *  `STAGGER` = 5 frames — a settled, orchestrated wave left-to-right). */
+    charDelay?: TimeInput;
+    /** Time for each character's reel to settle (default `DURATION.slower` = 34
+     *  frames — a slow, hard-decelerating odometer drop, not a constant-velocity
+     *  spin). */
+    durationInFrames?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** How many filler glyphs spin past before the target lands. */
+    reelLength?: number;
+    /** Seed for the (deterministic) filler glyphs. */
+    seed?: number;
+    /** Integer "take" selector: derives a new deterministic seed from (seed,
+     *  variant), so alternates never require hand-edited magic seeds. 0/omitted
+     *  = the default take (identical to today's output). */
+    variant?: number;
+    /** Glyph pool the reel spins through. */
+    charset?: string;
+    /** Font size in px (default 140). The cell height equals this. */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  line cannot exceed the frame minus the safe margins. Default `'none'`
+     *  (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Render a soft accent bloom behind the landed row. Default `false` — OFF.
+     *  It was a filled ellipse at half opacity faking a glow, so it read as a
+     *  muddy lozenge (a shape, not light), not a real radial falloff. Opt in with
+     *  `true` only if you know a theme's accent wants it. */
+    glow?: boolean;
+    /** Horizontal anchoring of the whole block (default `'center'`). Only applies
+     *  to the legacy `x` anchor — `placement` always anchors the block's center. */
+    align?: 'left' | 'center' | 'right';
+    /** Where the row sits: a region keyword (`'center'`, `'lower-third'`,
+     *  `'top-left'`, …) or normalized `{x,y}` (0–1, block center). The shared
+     *  placement contract; default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias — absolute x of the block's anchor in px
+     *  (respecting `align`). Prefer `placement`. */
+    x?: number;
+    /** @deprecated Legacy alias — absolute y of the block's top in px. Prefer
+     *  `placement`. */
+    y?: number;
+}
+declare function SlotMachineRoll({ text: textProp, delay: delayIn, charDelay: charDelayIn, durationInFrames: durationIn, fitToClip, maxSettle, hold, reelLength, seed: seedProp, variant, charset, color: colorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, glow, align, placement, x, y, }: SlotMachineRollProps): react.JSX.Element;
+
+interface SplitScreenProps extends TextStyleProps {
+    /** Content for the left (or top) pane — any scene subtree. */
+    left?: ReactNode;
+    /** Content for the right (or bottom) pane — any scene subtree. */
+    right?: ReactNode;
+    /** Pane axis: `horizontal` = side-by-side, `vertical` = stacked. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Fraction (0..1) of the main axis given to the `left` (or top) pane. */
+    ratio?: number;
+    /** Gap between the two panes in px. */
+    gap?: number;
+    /** Draw a thin token divider in the gap between the panes. */
+    divider?: boolean;
+    /** Slide the two panes apart from the center seam on the house spring. */
+    animate?: boolean;
+    /** Frames before the entrance. */
+    delay?: TimeInput;
+    /** Overall width in px. Defaults to the full composition width. */
+    width?: number;
+    /** Overall height in px. Defaults to the full composition height. */
+    height?: number;
+    /** Pane background fill (default: theme `surface`). */
+    paneBackground?: string;
+    /** Outer (gutter) background fill, seen in the gap behind the divider (default: theme `background`). */
+    background?: string;
+    /** Divider color (thin token line) (default: theme `border`). */
+    dividerColor?: string;
+    /** Placeholder label color for an empty pane (default: theme `textMuted`). */
+    placeholderColor?: string;
+}
+declare function SplitScreen({ left, right, orientation, ratio, gap, divider, animate, delay: delayIn, width, height, paneBackground: paneBackgroundProp, background: backgroundProp, dividerColor: dividerColorProp, placeholderColor: placeholderColorProp, fontFamily: fontFamilyProp, }: SplitScreenProps): react.JSX.Element;
+
+interface SpotlightProps {
+    /** Horizontal center of the spotlight as a 0–1 fraction of canvas width. */
+    x?: number;
+    /** Vertical center of the spotlight as a 0–1 fraction of canvas height. */
+    y?: number;
+    /** Final radius as a percentage of the canvas's smaller dimension. */
+    radius?: number;
+    /** Frames before the reveal starts. */
+    delay?: TimeInput;
+    /** Frames until the spotlight reaches its full radius. */
+    durationInFrames?: TimeInput;
+    /** Light color (default: theme `text`). Hex `#rrggbb` / `#rrggbbaa`. */
+    color?: string;
+    /** Gradient softness — % of the radius given over to the fade-to-transparent
+     *  tail. `0` is a hard disc; `100` fades from the very center. */
+    softness?: number;
+}
+declare function Spotlight({ x, y, radius, delay, durationInFrames, color: colorProp, softness, }: SpotlightProps): react.JSX.Element;
+
+interface SpotlightCardProps extends TextStyleProps {
+    /** Small uppercase kicker above the title. Empty hides it. */
+    eyebrow?: string;
+    /** Card headline (display font). */
+    title?: string;
+    /** Supporting body copy. Empty hides it. Single line (engine `<Text>` is
+     *  single-line; pass a short string). */
+    body?: string;
+    /** Frames before the card enters. */
+    delay?: TimeInput;
+    /** The drifting spotlight color — the earned accent (default: theme `accent`). */
+    glowColor?: string;
+    /** Card width in px. */
+    width?: number;
+    /** Card height in px. If omitted, sized from the content + padding. */
+    height?: number;
+    /** Inner padding in px. */
+    padding?: number;
+    /** Text alignment within the card. */
+    align?: 'left' | 'center';
+    /** Font family for the eyebrow + body copy (default: theme `fontFamily`). */
+    bodyFontFamily?: string;
+    /** Title font size in px (default 44). */
+    titleSize?: number;
+    /** Body font size in px (default 20). */
+    bodySize?: number;
+    /** Eyebrow font size in px (default 15). */
+    eyebrowSize?: number;
+    /** Title color (default: theme `text`). */
+    titleColor?: string;
+    /** Body color (default: theme `textMuted`). */
+    bodyColor?: string;
+    /** Eyebrow color (default: theme `textMuted`). */
+    eyebrowColor?: string;
+    /** Card glass fill (translucent dark by default) (default: theme `surface`). */
+    background?: string;
+    /** Card border (stroke) color (default: theme `border`). */
+    borderColor?: string;
+    /** Corner radius in px (default: theme `radius`). */
+    cornerRadius?: number;
+}
+declare function SpotlightCard({ eyebrow, title, body, delay: delayIn, glowColor: glowColorProp, width, height, padding, align, fontFamily: fontFamilyProp, letterSpacing, uppercase, bodyFontFamily: bodyFontFamilyProp, titleSize, bodySize, eyebrowSize, titleColor: titleColorProp, bodyColor: bodyColorProp, eyebrowColor: eyebrowColorProp, background: backgroundProp, borderColor: borderColorProp, cornerRadius: cornerRadiusProp, }: SpotlightCardProps): react.JSX.Element;
+
+interface StaggerGroupProps extends TextStyleProps {
+    /** The items to reveal, in source order (default: four short lines). */
+    items?: string[];
+    /** Frames before the FIRST item starts (default 0). */
+    delay?: TimeInput;
+    /** Frames between consecutive items. Canonical Onda stagger is `4`. */
+    stagger?: TimeInput;
+    /** Per-item reveal duration (default `DURATION.base` = 18). */
+    duration?: TimeInput;
+    /** Layout direction for the items (default `'column'`). */
+    direction?: 'row' | 'column';
+    /** Pixels between items (default 16). */
+    gap?: number;
+    /** Cross-axis alignment of items (default `'center'`). */
+    align?: 'start' | 'center' | 'end';
+    /** Font size in px (default 48). */
+    fontSize?: number;
+}
+declare function StaggerGroup({ items, delay: delayIn, stagger: staggerIn, duration: durationIn, direction, gap, align, color: colorProp, fontSize, fontFamily: fontFamilyProp, fontWeight, }: StaggerGroupProps): react.JSX.Element;
+
+interface SplitLockupProps {
+    /** Top line of the lockup (default 'NEW'). */
+    line1?: string;
+    /** Bottom line of the lockup (default 'PROJECT'). */
+    line2?: string;
+    /** Font size in px (default 200). */
+    fontSize?: number;
+    /** Ink color (defaults to theme `text`). */
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    /** Tracking in px — the look wants it generous (default fontSize × 0.04). */
+    letterSpacing?: number;
+    /** How far each line pulls HORIZONTALLY to its corner, px from center
+     *  (default 26% of the frame width). */
+    splitX?: number;
+    /** How far each line pulls VERTICALLY to its corner, px from center
+     *  (default 28% of the frame height). */
+    splitY?: number;
+    /** Vertical gap between the two stacked lines in the lockup (default fontSize × 0.12). */
+    lineGap?: number;
+    /** Time of the assemble (split → center) move (default '0.7s'). */
+    assembleFrames?: TimeInput;
+    /** Time of the disassemble (center → split) move (default '0.5s'). */
+    disassembleFrames?: TimeInput;
+    /** Total clip length; defaults to the enclosing Sequence duration. */
+    durationInFrames?: TimeInput;
+}
+declare function SplitLockup({ line1, line2, fontSize, color, fontFamily, fontWeight, letterSpacing, splitX, splitY, lineGap, assembleFrames, disassembleFrames, durationInFrames, }: SplitLockupProps): react.JSX.Element;
+
+interface StatCardProps extends TextStyleProps {
+    /** The headline metric, e.g. "26.8 fps" or "100×" (number is stringified).
+     *  Defaults to "—" so an under-specified card renders a placeholder, not nothing. */
+    value?: string | number;
+    /** The label beneath, e.g. "faster than Remotion". */
+    label?: string;
+    valueSize?: number;
+    labelSize?: number;
+    /** Value color (default: theme `text`). */
+    valueColor?: string;
+    /** Label color (default: theme `textMuted`). */
+    labelColor?: string;
+    /** Show the accent rule beneath the value. `true`/undefined → show (theme
+     *  accent); `false` → hide; a string → show in that color. Matches the
+     *  ondajs/Studio `accent: boolean` contract (a color goes via `accentColor`). */
+    accent?: boolean | string;
+    /** Accent rule color (default: theme `accent`). */
+    accentColor?: string;
+    delay?: TimeInput;
+    /** Where the stat sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, stat center). The shared placement contract;
+     *  default `'center'` (the historical self-centering). */
+    placement?: Placement;
+}
+declare function StatCard({ value, label, valueSize, labelSize, valueColor, labelColor, accent, accentColor, fontFamily, letterSpacing, uppercase, delay: delayIn, placement, }: StatCardProps): react.JSX.Element;
+
+interface TerminalProps extends TextStyleProps {
+    /** The command that types itself out after the prompt. */
+    command?: string;
+    /** Output lines that appear, staggered, once the command finishes typing. */
+    output?: string[];
+    /** The shell prompt glyph. */
+    prompt?: string;
+    /** Title-bar label. Empty hides it (dots still show if `chrome` is on). */
+    title?: string;
+    /** Show window chrome (dots + title bar). */
+    chrome?: boolean;
+    /** Frames before typing starts. */
+    delay?: TimeInput;
+    /** Frames to type the whole command (linear cadence). */
+    typeSpeed?: TimeInput;
+    /** Frames after the command finishes before output begins. */
+    outputDelay?: TimeInput;
+    /** Font size in px. Sized for a 1080p+ video canvas, not a screen UI. */
+    fontSize?: number;
+    /** Width of the window in px. Fixed so the frame is stable while the command
+     *  types into it — a terminal has a defined size, it doesn't grow char by char. */
+    width?: number;
+    /** Command text color (default: theme `text`). */
+    textColor?: string;
+    /** Prompt glyph color — the earned accent (default: theme `accent`). */
+    promptColor?: string;
+    /** Output line color (default: theme `textMuted`). */
+    outputColor?: string;
+    /** Window background color (default: theme `background`). */
+    background?: string;
+    /** Window corner radius in px (default: theme `radius`). */
+    cornerRadius?: number;
+    /** Where the window sits: a region keyword (`'center'`, `'lower-third'`, …)
+     *  or normalized `{x,y}` (0–1, window center). The shared placement contract;
+     *  default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias — absolute x of the window's top-left in px.
+     *  Prefer `placement`. */
+    x?: number;
+    /** @deprecated Legacy alias — absolute y of the window's top-left in px.
+     *  Prefer `placement`. */
+    y?: number;
+}
+declare function Terminal({ command, output, prompt, title, chrome, delay: delayIn, typeSpeed: typeSpeedIn, outputDelay: outputDelayIn, fontFamily: fontFamilyProp, letterSpacing: letterSpacingProp, fontSize, width, textColor: textColorProp, promptColor: promptColorProp, outputColor: outputColorProp, background: backgroundProp, cornerRadius: cornerRadiusProp, placement, x, y, }: TerminalProps): react.JSX.Element;
+
+/** What a unit is: a single glyph, a whitespace-delimited word, or a `\n` line. */
+type TextAnimatorUnit = 'glyph' | 'word' | 'line';
+/** Stagger order across the units — which one leads the wipe. */
+type TextAnimatorDirection = 'forward' | 'backward' | 'center' | 'edges';
+/** A `[from, to]` numeric pair animated over each unit's 0→1 progress. */
+type Pair = readonly [number, number];
+/** The channels a TextAnimator can drive per unit. Omitted channels stay at rest;
+ *  a present channel eases from `from` (progress 0) to `to` (progress 1). */
+interface TextAnimate {
+    /** Opacity `[from, to]` (e.g. `[0, 1]` to fade in). */
+    opacity?: Pair;
+    /** translateX in px `[from, to]`. */
+    x?: Pair;
+    /** translateY in px `[from, to]` (e.g. `[24, 0]` to rise). */
+    y?: Pair;
+    /** Uniform scale `[from, to]`, pivoted about the unit's own center. */
+    scale?: Pair;
+    /** Rotation in degrees `[from, to]`, pivoted about the unit's own center. */
+    rotate?: Pair;
+    /** Blur sigma in px `[from, to]` (RTT focus-pull — judge on native/export). */
+    blur?: Pair;
+    /** Color `[from, to]` (any ColorInput string). */
+    color?: readonly [string, string];
+}
+interface TextAnimatorProps extends TextStyleProps {
+    /** The text to choreograph. `\n` starts a new line. */
+    text?: string;
+    /** Unit granularity (default `'glyph'`). */
+    units?: TextAnimatorUnit;
+    /** Channels to animate per unit (default `{ opacity: [0, 1], y: [24, 0] }`). */
+    animate?: TextAnimate;
+    /** Time between consecutive units entering (default `STAGGER` = 5 frames). */
+    stagger?: TimeInput;
+    /** Time each unit takes to settle (default `DURATION.base`). */
+    durationInFrames?: TimeInput;
+    /** Time before the FIRST unit starts (default 0). */
+    delay?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** Stagger order across units (default `'forward'`). */
+    direction?: TextAnimatorDirection;
+    /** Physical settle spring; pass `false` to use `ease` instead (default `SPRING_SMOOTH`). */
+    spring?: SpringConfig | false;
+    /** Easing used when `spring` is `false` (default the house ease-out). */
+    ease?: (t: number) => number;
+    /** Font size in px (default 96). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  line cannot exceed the frame minus the safe margins. Default `'none'`
+     *  (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Horizontal alignment of each line about the placement anchor (default `'center'`). */
+    align?: 'left' | 'center' | 'right';
+    /** Where the text block sits: a region keyword (`'center'`, `'lower-third'`,
+     *  …) or normalized `{x,y}` (0–1, block center). The shared placement
+     *  contract; default `'center'` (the historical centering). */
+    placement?: Placement;
+}
+declare function TextAnimator({ text: textProp, units, animate, stagger: staggerIn, durationInFrames: durationIn, delay: delayIn, fitToClip, maxSettle, hold, direction, spring: springConfig, ease, fontSize: fontSizeProp, fit, maxWidth, color: colorProp, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, placement, }: TextAnimatorProps): react.JSX.Element;
+
+interface TextFadeReplaceProps extends TextStyleProps {
+    /** The outgoing phrase (shown first, fades out). */
+    from: string;
+    /** The incoming phrase (fades in over `from`). */
+    to: string;
+    /** Frames before the crossfade begins. Until then only `from` is shown
+     *  (default `DURATION.hold` = 45, a settled beat before the swap). */
+    delay?: TimeInput;
+    /** Frames the crossfade takes — old out over the first half, new in over the
+     *  second (default `DURATION.base` = 18). */
+    durationInFrames?: TimeInput;
+    /** Font size in px (default `96`, matching the ondajs display default). */
+    fontSize?: number;
+}
+declare function TextFadeReplace({ from: fromProp, to: toProp, delay, durationInFrames, fontSize, color: colorProp, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, }: TextFadeReplaceProps): react.JSX.Element;
+
+/** One anchor on the timeline. */
+interface TimelineEvent {
+    label: string;
+}
+interface TimelineProps extends TextStyleProps {
+    /** Anchor points down the timeline. Order is preserved — top to bottom. */
+    events?: TimelineEvent[];
+    /** Frames before the line begins to draw. */
+    delay?: TimeInput;
+    /** Frames over which the vertical line reveals itself top→bottom. */
+    lineDuration?: TimeInput;
+    /** Frames between the line completing and the first dot appearing. */
+    dotDelay?: number;
+    /** Frames between consecutive dot entrances (canonical Onda stagger = 4). */
+    dotStagger?: number;
+    /** Per-dot entrance duration. */
+    dotDuration?: number;
+    /** Dot diameter in px. */
+    dotSize?: number;
+    /** Vertical distance between consecutive events, in px. */
+    spacing?: number;
+    /** Line thickness in px. */
+    lineWidth?: number;
+    /** Line color (default: theme `border`). */
+    lineColor?: string;
+    /** Non-final dot color (default: theme `text`). */
+    dotColor?: string;
+    /** Final dot color — the earned accent (Onda rose) (default: theme `accent`). */
+    accentColor?: string;
+    /** Label color (default: theme `textMuted`). */
+    labelColor?: string;
+    /** Label font size in px. */
+    fontSize?: number;
+}
+declare function Timeline({ events, delay: delayIn, lineDuration: lineDurationIn, dotDelay, dotStagger, dotDuration, dotSize, spacing, lineWidth, lineColor: lineColorProp, dotColor: dotColorProp, accentColor: accentColorProp, labelColor: labelColorProp, fontSize, fontFamily: fontFamilyProp, }: TimelineProps): react.JSX.Element;
+
+interface TitleCardProps extends TextStyleProps {
+    title: string;
+    subtitle?: string;
+    /** Title font size in px (default 120). */
+    titleSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the TITLE size DOWN (never up) so the
+     *  title line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the title line; combines with `fit` (the
+     *  smaller cap wins). */
+    maxWidth?: number;
+    /** Subtitle font size in px (default 36). */
+    subtitleSize?: number;
+    /** Title color (default: theme `text`). */
+    titleColor?: string;
+    /** Subtitle color (default: theme `textMuted`). */
+    subtitleColor?: string;
+    /** Frame the title begins fading in (subtitle follows by one stagger step). */
+    delay?: TimeInput;
+    /** Where the card sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, card center). The shared placement contract;
+     *  default `'center'` (the historical self-centering). */
+    placement?: Placement;
+}
+declare function TitleCard({ title, subtitle, titleSize: titleSizeProp, fit, maxWidth, subtitleSize, titleColor, subtitleColor, fontFamily, letterSpacing, uppercase, delay: delayIn, placement, }: TitleCardProps): react.JSX.Element;
+
+interface TrackingInProps extends TextStyleProps {
+    /** The text to settle in. */
+    text?: string;
+    /** Frames before the entrance starts. */
+    delay?: TimeInput;
+    /** Frames until the text settles (default `DURATION.slow` = 24). */
+    durationInFrames?: TimeInput;
+    /** Starting letter-spacing in em — the text begins spread wide and contracts. */
+    fromTracking?: number;
+    /** Resting letter-spacing in em. */
+    tracking?: number;
+    /** Start the text soft and sharpen as it settles (approximated; see doc). */
+    blur?: boolean;
+    /** Font size in px. */
+    fontSize?: number;
+    /** Horizontal alignment of the line about `x`. Default `'center'`. */
+    align?: 'left' | 'center' | 'right';
+    /** @deprecated No longer used — the line now uses real shaped letter-spacing
+     *  metrics, so no per-glyph advance estimate is needed. Accepted for compat. */
+    advanceFactor?: number;
+    /** Absolute x anchor of the line (default canvas center). */
+    x?: number;
+    /** Absolute y of the line's top (default vertical center). */
+    y?: number;
+}
+declare function TrackingIn({ text: textProp, delay, durationInFrames, color: colorProp, fromTracking, tracking, blur, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, x, y, }: TrackingInProps): react.JSX.Element;
+
+interface TypewriterProps extends TextStyleProps {
+    /** What to type out. */
+    text?: string;
+    /** Time before typing starts — frames or '0.5s'. */
+    delay?: TimeInput;
+    /** Time to type the full string. Linear pacing — chars-per-frame is
+     *  constant. Default `DURATION.slow` (24 frames). */
+    durationInFrames?: TimeInput;
+    /** Compress the whole timing envelope (delay, stagger, durations) so the
+     *  entrance settles at least `hold` before the end of the enclosing clip
+     *  (`useVideoConfig().durationInFrames`, Sequence-scoped). Opt-in. */
+    fitToClip?: boolean;
+    /** Hard cap on the settle time (frames or '0.5s'). Wins over `fitToClip`. */
+    maxSettle?: TimeInput;
+    /** Breathing room before the cut for `fitToClip` (default 6 frames). */
+    hold?: TimeInput;
+    /** Show a blinking cursor at the leading edge while typing. Default `true`. */
+    cursor?: boolean;
+    /** Cursor color (default: theme `accent`). */
+    cursorColor?: string;
+    /** Font size in px (default 64). */
+    fontSize?: number;
+    /** Opt-in auto-fit: `'frame'` scales the font size DOWN (never up) so the
+     *  measured line cannot exceed the frame minus the safe margins. Default
+     *  `'none'` (the historical behavior). */
+    fit?: 'none' | 'frame';
+    /** Explicit width cap in px for the line; combines with `fit` (the smaller
+     *  cap wins). */
+    maxWidth?: number;
+    /** Where the line sits: a region keyword (`'center'`, `'lower-third'`, …) or
+     *  normalized `{x,y}` (0–1, anchored at the FULL line's measured center). The
+     *  shared placement contract; default `'center'`. */
+    placement?: Placement;
+    /** @deprecated Legacy alias — absolute x of the text's left edge in px.
+     *  Prefer `placement`. */
+    x?: number;
+    /** @deprecated Legacy alias — absolute y (baseline-ish top) in px. Prefer
+     *  `placement`. */
+    y?: number;
+}
+declare function Typewriter({ text: textProp, delay: delayIn, durationInFrames: durationIn, fitToClip, maxSettle, hold, cursor, cursorColor: cursorColorProp, color: colorProp, fontSize: fontSizeProp, fit, maxWidth, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, placement, x, y, }: TypewriterProps): react.JSX.Element;
+
+interface UnderlineProps extends TextStyleProps {
+    /** Text to reveal. Pass `""` to draw the rule alone. */
+    text?: string;
+    /** Frames before the text starts revealing. */
+    delay?: TimeInput;
+    /** Text reveal duration in frames (default `DURATION.base` = 18). */
+    duration?: TimeInput;
+    /** Frames to wait after the text lands before the rule starts drawing. */
+    lineDelay?: TimeInput;
+    /** Rule draw duration. Fast on purpose — emphatic (default `DURATION.fast`). */
+    lineDuration?: TimeInput;
+    /** Rule color (default: theme `accent`). */
+    accentColor?: string;
+    /** Rule thickness in px. */
+    lineThickness?: number;
+    /** Pixel gap between the text box and the rule. */
+    lineOffset?: number;
+    /** Text size in px (default 64). */
+    fontSize?: number;
+    /** Horizontal alignment of the rule under the text. */
+    align?: 'left' | 'center' | 'right';
+}
+declare function Underline({ text: textProp, delay: delayIn, duration: durationIn, lineDelay: lineDelayIn, lineDuration: lineDurationIn, color: colorProp, accentColor: accentColorProp, lineThickness, lineOffset, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, }: UnderlineProps): react.JSX.Element;
+
+interface VideoClipProps {
+    /** URL or path to the video. The current frame is decoded per composition
+     *  frame by the player (browser) or `onda export` (native ffmpeg). */
+    src: string;
+    /** Seconds into the source shown at the clip's frame 0 (trim the head). Default 0. */
+    startAt?: number;
+    /** Source seconds advanced per composition second (1 = realtime). 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 `[startAt, endAt)` (requires `endAt`) for as long as
+     *  the clip is visible. */
+    loop?: boolean;
+    /** Preview-only: how the player previews a source it can't composite (a
+     *  cross-origin URL without CORS). `'skip'` (default) blanks it + warns;
+     *  `'element'` overlays a plain `<video>` so it still plays in preview. Never
+     *  affects `onda export`. See {@link VideoProps.previewFallback}. */
+    previewFallback?: 'skip' | 'element';
+    /** Frames the clip waits before its fade-in begins (default 0). */
+    delay?: TimeInput;
+    /** Frames the fade-in takes (default `DURATION.base` = 18). `0` = hard cut in. */
+    fadeIn?: number;
+    /** Frames the fade-out takes (default `DURATION.base` = 18). `0` = hard cut out. */
+    fadeOut?: number;
+    /** Visible hold of the clip in frames, used to time the fade-out (the fade-out
+     *  lands on the last `fadeOut` frames). When omitted, the clip never fades out —
+     *  mirrors ondajs skipping the fade-out when `endAt` is unset. */
+    durationInFrames?: TimeInput;
+    /** How the poster fits its box. `'cover'` crops to fill (default); `'contain'`
+     *  letterboxes against black. */
+    fit?: 'cover' | 'contain';
+    /** Box width in px the clip occupies (default = full composition width). */
+    width?: number;
+    /** Box height in px the clip occupies (default = full composition height). */
+    height?: number;
+    /** Top-left x of the box in px (default 0 — canvas-filling). */
+    x?: number;
+    /** Top-left y of the box in px (default 0 — canvas-filling). */
+    y?: number;
+    /** Rounded corner radius of the box in px (default: theme `radius`). */
+    borderRadius?: number;
+    /** Draw cinematic black letterbox bars top & bottom, each this many px tall
+     *  (default 0 = none). Drawn over the poster, inside the box. */
+    letterbox?: number;
+    /** Backing color shown behind/around the poster (default: theme `background`). */
+    backgroundColor?: string;
+}
+declare function VideoClip({ src, startAt, playbackRate, endAt, loop, previewFallback, delay: delayIn, fadeIn, fadeOut, durationInFrames: durationInFramesIn, fit, width, height, x, y, borderRadius: borderRadiusProp, letterbox, backgroundColor: backgroundColorProp, }: VideoClipProps): react.JSX.Element;
+
+interface VignetteProps {
+    /** Edge darkness. `0` = no vignette, `1` = fully dark edges. Default `0.5`. */
+    intensity?: number;
+    /**
+     * Percent (0..100) from center where the darkening begins. Larger = bigger
+     * clean middle. Default `40`.
+     */
+    innerRadius?: number;
+    /** Edge color. Defaults to pure black for the classic cinematic frame (default: theme `background`). */
+    color?: string;
+}
+declare function Vignette({ intensity, innerRadius, color: colorProp }: VignetteProps): react.JSX.Element;
+
+interface WordRotateProps extends TextStyleProps {
+    /** Phrases cycled in place, in order. One is visible at a time. */
+    phrases?: string[];
+    /** Frames before the first phrase begins to enter (default `0`). */
+    delay?: TimeInput;
+    /** Frames each phrase holds at full opacity before the next arrives
+     *  (default `30`). */
+    holdDuration?: TimeInput;
+    /** Frames for a single phrase to fade in (and, separately, fade out)
+     *  (default `12`). */
+    transitionDuration?: number;
+    /** Font size in px. Phrases are usually large (default `96`). */
+    fontSize?: number;
+    /** Horizontal anchor of each phrase relative to `x` (default `'left'`).
+     *  `'center'`/`'right'` use an estimated text width (see doc comment). */
+    align?: 'left' | 'center' | 'right';
+    /** Absolute x of the anchor point. Defaults to the composition center. */
+    x?: number;
+    /** Absolute y (top-ish) of the text. Defaults to vertical center. */
+    y?: number;
+}
+declare function WordRotate({ phrases: phrasesProp, delay: delayIn, holdDuration: holdDurationIn, transitionDuration, color: colorProp, fontSize, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, align, x, y, }: WordRotateProps): react.JSX.Element;
+
+interface WordStaggerProps extends TextStyleProps {
+    /** The phrase. Split on whitespace into one reveal per word. */
+    text?: string;
+    /** Font size in px (default 64). */
+    fontSize?: number;
+    /** Container width in px — the line wraps within this (default 1080). */
+    width?: number;
+    /** Horizontal alignment of words within each line (default `'start'`). */
+    justify?: 'start' | 'center' | 'end';
+    /** Frames before the FIRST word starts (default 0). */
+    delay?: TimeInput;
+    /** Frames between consecutive words (default `STAGGER` = 4). */
+    stagger?: TimeInput;
+}
+declare function WordStagger({ text: textProp, fontSize, color: colorProp, width, fontFamily: fontFamilyProp, fontWeight, italic, letterSpacing, uppercase, justify, delay: delayIn, stagger: staggerIn, }: WordStaggerProps): react.JSX.Element;
+
+export { type AudioAnalyzer, AudioClip, type AudioClipProps, AudioVisualizer, type AudioVisualizerProps, BarChart, type BarChartDatum, type BarChartProps, type Beats, type BeatsHandle, BentoGrid, type BentoGridProps, type BentoItem, BlurReveal, type BlurRevealProps, BoundingBox, type BoundingBoxProps, type Box, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, COMPONENT_SETTLE, Callout, type CalloutDirection, type CalloutProps, CameraShake, type CameraShakeProps, type CaptionEntry, Captions, type CaptionsProps, CardShowcase, type CardShowcaseProps, ChapterCard, type ChapterCardProps, CodeBlock, type CodeBlockProps, CodeDiff, type CodeDiffProps, Confetti, type ConfettiProps, CountUp, type CountUpProps, Cursor, type CursorProps, DURATION, DeviceFrame, type DeviceFrameProps, type DiffLine, type DiffLineType, type Divergence, type DivergenceOpts, DrawOn, type DrawOnProps, type DurationToken, DynamicGrid, type DynamicGridProps, type Ease, type ElementSize, EndCard, type EndCardProps, type EntranceOptions, type EntranceType, FadeIn, type FadeInProps, FadeOut, type FadeOutProps, FilmGrade, type FilmGradeProps, type FilmLook, type FitOpts, type FitToClipOpts, type FontMetrics, type FrameSize, type GlyphCell, type GlyphInfo, type GlyphLine, type GlyphLineOpts, GradientShift, type GradientShiftProps, GrainOverlay, type GrainOverlayProps, HOUSE_EASE, Highlight, type HighlightProps, IconPop, type IconPopProps, type IconShape, ImageReveal, type ImageRevealFit, type ImageRevealMotion, type ImageRevealProps, InputField, type InputFieldProps, KanbanBoard, type KanbanBoardProps, type KanbanColumn, KenBurns, type KenBurnsProps, type KeyframeTracks, Keyframes, type KeyframesImageContent, type KeyframesProps, type KeyframesTextContent, KineticText, type KineticTextPreset, type KineticTextProps, LINE_RATIO, LineChart, type LineChartProps, LogoReveal, type LogoRevealPreset, type LogoRevealProps, LogoSting, type LogoStingProps, type LookbookLayout, LookbookShot, type LookbookShotProps, LowerThird, type LowerThirdProps, Marquee, type MarqueeProps, MaskReveal, type MaskRevealProps, MatrixDecode, type MatrixDecodeProps, type MeasureOpts, MeshGradient, type MeshGradientProps, Moodboard, type MoodboardProps, type Motion, NodeGraph, type NodeGraphProps, OVERSHOOT, PLACEMENT_DESCRIPTION, PLACEMENT_REGIONS, Parallax, type ParallaxLayer, type ParallaxProps, PathMorph, type PathMorphProps, type PatternInput, PieReveal, type PieRevealProps, type PieRevealSlice, Placed, type PlacedProps, type Placement, type PlacementPoint, type PlacementRegion, PlacementShift, type PlacementShiftProps, type PosKey, PriceTag, type PriceTagProps, PricingCard, type PricingCardProps, ProductWall, type ProductWallProps, ProgressBar, type ProgressBarProps, ProgressSteps, type ProgressStepsProps, PulsingIndicator, type PulsingIndicatorProps, QuoteCard, type QuoteCardProps, type RenderBackend, type ResolvedBounds, type ResolvedPlacement, type ResponsiveTransform, RgbGlitch, type RgbGlitchProps, RotateIn, type RotateInProps, SAFE_MARGIN, SPRING_SMOOTH, SPRING_SNAPPY, STAGGER, type SampledKeyframes, type Satellite, ScaleIn, type ScaleInProps, Scrim, type ScrimProps, type SettleFn, ShimmerSweep, type ShimmerSweepProps, SiteReveal, type SiteRevealProps, SkeletonCard, type SkeletonCardProps, SlideIn, type SlideInProps, SlideOut, type SlideOutProps, SlotMachineRoll, type SlotMachineRollProps, SplitLockup, type SplitLockupProps, SplitScreen, type SplitScreenProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, StaggerGroup, type StaggerGroupProps, StatCard, type StatCardProps, TIME_DESCRIPTION, Terminal, type TerminalProps, type TextAnimate, TextAnimator, type TextAnimatorDirection, type TextAnimatorProps, type TextAnimatorUnit, TextFadeReplace, type TextFadeReplaceProps, type TextMetrics, type Theme, ThemeProvider, type ThemeProviderProps, type TimeInput, Timeline, type TimelineEvent, type TimelineProps, TitleCard, type TitleCardProps, TrackingIn, type TrackingInProps, Typewriter, type TypewriterProps, Underline, type UnderlineProps, type ValKey, VideoClip, type VideoClipProps, Vignette, type VignetteProps, WordRotate, type WordRotateProps, WordStagger, type WordStaggerProps, beatPulse, defaultTheme, divergenceReport, entryDesignAnchor, entryFade, entryFadeRise, entryScale, entrySlide, exitFade, exitFadeFall, exitScale, exitSlide, fitFontSize, fitMaxWidth, fontMetrics, framesOf, framesSinceBeat, glyphLayout, hasKeyframeTracks, heroReveal, isBeat, isPlacement, layoutGlyphLine, lineStartX, lineTopY, loadFont, matchesExport, measureText, placementSchema, preloadTextMetrics, resolvePlacement, responsiveEntryTransform, sampleKeyframes, sampleTrack, settleTime, staggerFrames, staggeredSettle, stateSwap, timeSchema, useAudioBeats, useAudioData, useEntrance, useFittedFontSize, useFontMetrics, useGlyphLayout, usePlacement, useResolvedBounds, useSceneProgress, useSpringValue, useStaggeredEntrance, useTextMetrics, useTextMetricsReady, useTextReveal, useTheme, useTimeScale };