onda-engine 0.1.0 → 0.2.0

package/README.md

@@ -1,15 +1,38 @@
-# onda-engine
+<div align="center">
 
-**Author motion graphics in React. Render them natively on the GPU — no headless browser, no Chromium.**
+<img src="https://raw.githubusercontent.com/onda-engine/onda-engine/main/assets/brand/readme-hero.svg" alt="ONDA Engine — motion graphics at GPU speed, no browser" width="100%" />
+
+<br/>
+
+### Motion graphics at GPU speed. No browser. No Chromium.
+
+**Author video in React → compile it to a scene graph → render it natively on the GPU.**
+One `npm install` for the entire engine.
 
 [![npm](https://img.shields.io/npm/v/onda-engine?style=flat-square&labelColor=0e0e12&color=d96b82)](https://www.npmjs.com/package/onda-engine)
-[![License](https://img.shields.io/badge/license-FSL--1.1--Apache--2.0-d96b82?style=flat-square&labelColor=0e0e12)](#license)
+[![license: FSL-1.1-Apache-2.0](https://img.shields.io/badge/license-FSL--1.1--Apache--2.0-d96b82?style=flat-square&labelColor=0e0e12)](#license--read-this-first)
+[![types: included](https://img.shields.io/badge/types-included-d96b82?style=flat-square&labelColor=0e0e12)](#whats-in-the-box)
+[![renderer: Vello GPU](https://img.shields.io/badge/renderer-Vello_GPU-d96b82?style=flat-square&labelColor=0e0e12)](#why-onda)
+
+[Why ONDA](#why-onda) &nbsp;·&nbsp; [Install](#install) &nbsp;·&nbsp; [What's in the box](#whats-in-the-box) &nbsp;·&nbsp; [Onda Studio](#onda-studio) &nbsp;·&nbsp; [License](#license--read-this-first) &nbsp;·&nbsp; [onda.video](https://onda.video)
+
+</div>
+
+---
 
-ONDA turns a **React composition** into a renderer-agnostic **scene graph**, then rasterizes it with a native GPU renderer ([Vello](https://github.com/linebender/vello)) — or a deterministic CPU reference renderer, or a WASM path for live in-browser preview. It's the engine behind **[Onda Studio](https://studio.onda.video)**, but it stands on its own as a programmatic-video toolkit.
+**ONDA turns a React composition into a renderer-agnostic _scene graph_, then rasterizes it with a native GPU renderer ([Vello](https://github.com/linebender/vello))** — or a deterministic CPU reference renderer, or a WebAssembly path for live in-browser preview. No DOM. No headless browser. No screenshot round-trip. Just a scene graph, straight to the GPU.
 
-This is the **all-in-one** package: the React renderer, the motion-language components, the interactive player, the headless renderer, and the WASM core — one install, one version.
+`onda-engine` is the **all-in-one** package — the React renderer, the motion-language component library, the interactive player, the headless renderer, and the WASM cores — bundled into a single install, one version.
 
-> **Pre-1.0.** The Rust + WASM core powers a production studio, but the public API isn't frozen — expect breaking changes before 1.0.
+> **Pre-1.0.** The Rust + WASM core already powers a production studio, but the public API isn't frozen — expect breaking changes before `1.0`.
+
+## Why ONDA
+
+Programmatic video today (e.g. Remotion) renders by driving a **headless browser**: correct, but heavy — a Chromium process per render, slow cold starts, high memory, painful to scale. ONDA keeps the **React authoring model** you already know, but compiles it to a scene graph and renders it **natively**. There is no browser anywhere in the pipeline.
+
+> **It's faster because it does less.** Measured on an Apple M4 Pro (1080p, Remotion's best case): **~4.5× faster per thread** and **~9.3× higher machine throughput** than Remotion — and the gap *widens* with scene complexity, GPU acceleration, and cold-start / memory pressure.
+
+The scene graph is the universal language; the renderer is the platform. **One composition** drives them all — live browser preview (WebGPU / WASM), native GPU export, or a deterministic CPU reference render.
 
 ## Install
 
@@ -17,23 +40,19 @@ This is the **all-in-one** package: the React renderer, the motion-language comp
 npm install onda-engine react
 ```
 
-`react` (v19) is a peer dependency — you provide it. Everything else, including the ~11 MB of WASM, ships in the box; there's no runtime download and no extra registry to configure.
-
-> The engine is developed as granular [`@onda-engine/*`](https://github.com/onda-engine/onda-engine) workspace packages; `onda-engine` bundles them into a single public install (one package, one version) — this is the package you install.
+`react` (v19) is a peer dependency you provide. Everything else — including the ~11 MB of WASM cores — ships in the box. No runtime downloads, no extra registry to configure, no Rust toolchain on your machine.
 
-## What's inside
+## What's in the box
 
 | Import | What it is |
 | --- | --- |
 | `onda-engine` | The Onda **motion language** — choreography + component library (the main authoring surface) |
 | `onda-engine/react` | The React → scene-graph renderer (`renderToScene`, primitives, hooks) |
-| `onda-engine/player` | Interactive `<Player>` — real-time canvas/WebGPU preview |
-| `onda-engine/render` | **Node-only** headless render to video/still (no Chromium) |
+| `onda-engine/player` | Interactive `<Player>` — real-time canvas / WebGPU preview |
+| `onda-engine/render` | **Node-only** headless render to video / still (no Chromium) |
 | `onda-engine/cinema` | Render a timeline composition payload to an engine element |
 | `onda-engine/components/manifest` | Per-component prop manifest (semantic roles) |
-| `onda-engine/wasm` | The renderer compiled to WebAssembly (text metrics, CPU render) |
-| `onda-engine/wasm-audio` | Audio decode + FFT (audio-reactive visuals) |
-| `onda-engine/wasm-vello` | The Vello GPU renderer over WebGPU |
+| `onda-engine/wasm` · `/wasm-audio` · `/wasm-vello` | The renderer, audio FFT, and Vello GPU cores, compiled to WebAssembly |
 
 ## Usage
 
@@ -41,44 +60,46 @@ npm install onda-engine react
 import { TitleCard } from 'onda-engine'
 import { renderToScene } from 'onda-engine/react'
 
-const scene = renderToScene(<TitleCard title="Hello" />)
+const scene = renderToScene(<TitleCard title="Hello, motion" />)
 ```
 
-### WASM (browser)
-
-Under a bundler that supports the `new URL(..., import.meta.url)` asset convention (Vite, modern webpack), the WASM **loads itself** — each `.wasm` ships next to its glue and is fetched automatically. Nothing to wire up:
+**The WASM loads itself.** Under a bundler that supports the `new URL(..., import.meta.url)` asset convention (Vite, modern webpack), each `.wasm` ships next to its glue and is fetched automatically — nothing to wire up:
 
 ```ts
 import { preloadTextMetrics, measureText } from 'onda-engine'
 
-await preloadTextMetrics()      // locates + instantiates the wasm core
-measureText('Hello', 48)        // real shaped metrics
+await preloadTextMetrics()   // locates + instantiates the wasm core
+measureText('Hello', 48)     // real shaped glyph metrics
 ```
 
-If you'd rather pass the binary URL explicitly (e.g. to control caching), the assets are addressable too:
-
-```ts
-import wasmUrl from 'onda-engine/wasm/pkg/onda_wasm_bg.wasm?url'
-import init, { OndaEngine } from 'onda-engine/wasm'
+> **`onda-engine/render` is Node-only** — it uses `fs`, `child_process`, and ffmpeg. Don't import it into browser code; use it from a server or CLI.
 
-await init(wasmUrl)
-const engine = new OndaEngine()
-```
+## Onda Studio
 
-### `onda-engine/render` is Node-only
+ONDA is the **engine**; **[Onda Studio](https://studio.onda.video)** is the **director**.
 
-The headless renderer uses `fs`, `child_process`, and ffmpeg — **do not import it into browser code** (your bundler will try to externalize Node built-ins and fail). Use it from a server/CLI:
-
-```ts
-import { renderToFile } from 'onda-engine/render'
-```
+Studio is an AI motion-graphics studio — *"Lovable for video."* Describe a scene in plain language and an agent composes, renders, and ships it — frame-accurate, on this exact engine. The engine stands on its own as a programmatic-video toolkit; Studio is what it makes possible.
 
 ## Requirements
 
 - **React 19** (peer dependency)
-- A bundler that handles `.wasm` assets for browser use (Vite recommended), or Node ≥ 20 for server-side use
-- WebGPU for the GPU (`wasm-vello`) path; the CPU path (`wasm`) is the fallback
+- A bundler that handles `.wasm` assets for browser use (**Vite** recommended), or **Node ≥ 20** for server-side rendering
+- **WebGPU** for the GPU (`wasm-vello`) path; the CPU core (`wasm`) is the always-available fallback
+
+## License — read this first
+
+**Source-available — _not_ open source.** `onda-engine` is licensed under the **[Functional Source License](https://raw.githubusercontent.com/onda-engine/onda-engine/main/LICENSE)** (`FSL-1.1-Apache-2.0`):
+
+- ✅ **You may** read, run, self-host, modify, and build **non-competing** products with it — freely, no fee.
+- 🚫 **You may not** use it to make a product that **competes** with ONDA.
+- ⏳ **It turns into Apache-2.0:** each release automatically converts to full [Apache-2.0](https://raw.githubusercontent.com/onda-engine/onda-engine/main/LICENSE-APACHE) **two years** after it ships.
+
+If you need terms beyond the FSL grant, get in touch via [onda.video](https://onda.video).
 
-## License
+---
 
-[FSL-1.1-Apache-2.0](./LICENSE) — source-available, converting to Apache-2.0 over time. © Rodrigo Botelho.
+<div align="center">
+  <img src="https://raw.githubusercontent.com/onda-engine/onda-engine/main/assets/brand/onda-mark.svg" alt="ONDA" width="34" />
+  <br/><br/>
+  <sub><b>ONDA</b> &nbsp;·&nbsp; Motion graphics at GPU speed &nbsp;·&nbsp; <a href="https://onda.video">onda.video</a></sub>
+</div>

package/dist/cinema.js

@@ -1184,7 +1184,7 @@ function SceneTracks({
           const key = entry.id ?? `entry-${ei}`;
           const slot = createElement(EntrySlot, { entry, registry, suppress: suppress?.get(entry) });
           if (!responsive) return cloneElement(slot, { key });
-          const t = Components.responsiveEntryTransform(
+          const t = Components.isFullBleed(entry.props, responsive.design) ? Components.responsiveCoverTransform(responsive.design, responsive.out) : Components.responsiveEntryTransform(
             Components.entryDesignAnchor(entry.props),
             responsive.design,
             responsive.out