etro 0.13.0 → 0.14.0

package/.github/workflows/nodejs.yml

@@ -39,7 +39,11 @@ jobs:
       run: xvfb-run --auto-servernum npm run test:unit
       env:
         CI: true
+        # Force Mesa's software renderer so headless Firefox has WebGL on
+        # GPU-less runners (Chrome uses SwiftShader via its launcher flags).
+        LIBGL_ALWAYS_SOFTWARE: true
     - name: run smoke tests
       run: xvfb-run --auto-servernum npm run test:smoke
       env:
         CI: true
+        LIBGL_ALWAYS_SOFTWARE: true

package/.github/workflows/shipjs-trigger.yml

@@ -13,8 +13,9 @@ jobs:
         with:
           fetch-depth: 0
           ref: master
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v6
         with:
+          node-version: 24
           registry-url: "https://registry.npmjs.org"
       - run: |
           if [ -f "yarn.lock" ]; then

package/.husky/pre-commit

@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npm run fix
 
 if [ -z "$SKIP_TESTS" ]; then
     npm run test:unit

package/AGENTS.md

@@ -0,0 +1,106 @@
+# AGENTS.md — Etro Contributor Context
+
+## What is Etro?
+
+Etro is a TypeScript video-editing framework for the browser. It composites
+layers (video, audio, image, text, or custom) onto an HTML `<canvas>`, applies
+GPU-accelerated GLSL shader effects, and outputs via `play()`, `stream()`
+(WebRTC), or `record()` (Blob). Audio routes through the Web Audio API.
+
+## Repository Layout
+
+```
+src/
+spec/                   # Tests (Karma + Jasmine)
+├── unit/               # Mocked unit tests
+├── smoke/              # End-to-end without audio (runs in CI)
+├── integration/        # End-to-end with audio (local only)
+├── mocks/              # Shared mock factories (dom, movie, layer, effect)
+└── assets/             # Test fixtures (images, audio, video, effect references)
+examples/               # Browser demos (hello-world, keyframes, effects, webcam)
+scripts/effect/         # Effect sample generation tooling
+dist/                   # Build output (gitignored)
+```
+
+## Architecture Concepts
+
+- **Movie** — the root composition. Owns a `<canvas>`, an `AudioContext`, a
+  `layers` list, and an `effects` list. Renders via `play()`, `stream()`,
+  `record()`, or `refresh()`.
+- **Layer** — a time-sliced content source (`startTime` + `duration`). Visual
+  layers draw to the canvas; audio layers route through Web Audio.
+- **Effect** — a filter applied to a layer or to the movie globally. Visual
+  effects use WebGL fragment shaders.
+- **Dynamic Properties** — layer/effect properties can be a constant, a
+  `KeyFrame` animation, or a function `(element, time) => value`. Evaluate
+  with `etro.val(obj, 'prop', time)`.
+- **Events** (deprecated) — pub/sub via `event.publish` / `event.subscribe`.
+  New code should prefer async callbacks (`onDraw`, `onStart`, etc.).
+
+## Build & Dev
+
+| Command                    | Purpose                                       |
+|----------------------------|-----------------------------------------------|
+| `npm run build`            | Rollup → `dist/etro-cjs.js` + `dist/etro-iife.js` |
+| `npm run lint`             | ESLint (StandardJS + TypeScript rules)        |
+| `npm run fix`              | ESLint with `--fix`                           |
+| `npm run test:unit`        | Unit tests (mocked DOM, runs in CI)           |
+| `npm run test:smoke`       | Smoke tests (real browser, no audio, runs in CI) |
+| `npm run test:integration` | Integration tests (audio required, local only)|
+| `npm run doc`              | Typedoc → `docs/`                             |
+| `npm run effects`          | Regenerate effect reference images             |
+
+Tests run in **headless Chrome and/or Firefox** via Karma (depending on local
+browser availability). The test suite is selected by the `TEST_SUITE` env var
+(`unit`, `smoke`, or `integration`).
+
+## Code Conventions
+
+- **Language**: TypeScript, compiled to ES6. Target `"lib": ["es2016", "DOM"]`.
+- **Style**: [StandardJS](https://standardjs.com/rules.html) — no semicolons,
+  2-space indent, `1tbs` brace style, `curly: all`.
+- **Commits**: Husky pre-commit runs lint + build + tests automatically.
+- **Branching**: Work on a feature branch, never commit directly to master.
+  Rebase onto upstream/master before opening a PR.
+
+## Adding / Modifying Effects
+
+1. Create or edit the effect class in `src/effect/`.
+2. Effects with visual output should extend `etro.effect.Shader` (for custom
+   GLSL) or `etro.effect.Visual`.
+3. Register the effect in `src/effect/index.ts`.
+4. Add the effect to `scripts/gen-effect-samples.html`.
+5. Run `npm run effects` and review generated images in
+   `spec/integration/assets/effect/`.
+6. Add unit tests in `spec/unit/effect/` and smoke tests in `spec/smoke/effect/`.
+
+## Adding / Modifying Layers
+
+1. Create or edit the layer class in `src/layer/`.
+2. Visual layers should extend `etro.layer.Visual`; audio layers extend
+   `etro.layer.Base` and implement audio routing.
+3. Register the layer in `src/layer/index.ts`.
+4. Add unit tests in `spec/unit/layer/` using the mock factories in
+   `spec/unit/mocks/`.
+
+## Key Patterns
+
+- Use `applyOptions()` (from `util.ts`) to merge constructor options with
+  defaults — though this is deprecated; new code should assign defaults
+  directly in the constructor.
+- The `Dynamic<T>` type and `val()` helper enable keyframe-animated and
+  functional properties. Any property that should support animation must use
+  this pattern.
+- Layers and effects use `tryAttach` / `tryDetach` lifecycle hooks when
+  added to or removed from a movie. Use `attach()` for setup and `detach()`
+  for teardown.
+- The `publicExcludes` array on layers/effects controls which properties are
+  excluded from serialization.
+
+## Useful Links
+
+- Docs: https://etrojs.dev/
+- API Reference: https://etrojs.dev/docs/reference/movie
+- Dynamic Properties: https://etrojs.dev/docs/reference/dynamic-properties
+- Discord: https://discord.gg/myrBsQ8Cht
+- CONTRIBUTING.md for full workflow details

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.14.0] - 2026-06-06
+### Added
+- Movie serialization and deserialization ([#340](https://github.com/etro-js/etro/pull/340) by [@G3RRYGL3Z](https://github.com/G3RRYGL3Z)).
+
+### Changed
+- Bump rollup-plugin-typescript2 to 0.37.0.
+- Bump karma to 6.4.4.
+
+### Security
+- Bump handlebars from 4.7.7 to 4.7.9 ([#329](https://github.com/etro-js/etro/pull/329)).
+- Bump shipjs, tmp ([#343](https://github.com/etro-js/etro/pull/343)).
+- Bump body-parser, qs ([#337](https://github.com/etro-js/etro/pull/337)).
+- Bump rollup to 4.61.1.
+- Bump typedoc to 0.28.19.
+- Bump karma-jasmine to 5.1.0.
+
 ## [0.13.0] - 2026-03-18
 ### Added
 - `Movie#play()` option `onDraw()` ([#266](https://github.com/etro-js/etro/pull/266)).
@@ -336,6 +352,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[0.14.0]: https://github.com/etro-js/etro/compare/v0.13.0...v0.14.0
 [0.13.0]: https://github.com/etro-js/etro/compare/v0.12.1...v0.13.0
 [0.12.1]: https://github.com/etro-js/etro/compare/v0.12.0...v0.12.1
 [0.12.0]: https://github.com/etro-js/etro/compare/v0.11.0...v0.12.0

package/CONTRIBUTING.md

@@ -4,7 +4,7 @@
 
 ## Introduction
 
-Thank you for considering contributing to Etro! There are many ways you can contribute to Etro, like creating issues for features or bugs, improving the docs or wiki, or writing the code for the library. This page covers how to make changes to the repository files (either code or jsdocs).
+Thank you for considering contributing to Etro! There are many ways to contribute, such as reporting bugs, suggesting features, improving the documentation, or writing code. This guide covers how to make changes to the repository files (code or documentation).
 
 [Join our Discord](https://discord.gg/myrBsQ8Cht)
 
@@ -23,7 +23,7 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ## Making your changes
 
-- Make some changes and update tests
+- Make your changes and update the relevant tests
 - If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions
 - If you're adding or updating an effect:
   - Add your effect to **scripts/gen-effect-samples.html**
@@ -44,13 +44,13 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ## Submitting your changes
 
-- Before pushing to your fork, rebase (please avoid merging) to integrate your work with any new changes in the main repository
+- Before pushing to your fork, please rebase onto the latest upstream changes (rather than merging) to keep the history clean:
   ```
   git fetch upstream
   git rebase upstream/master
   ```
-- Open a pull request from the branch in your fork to the main repository. If you changed any core functionality, make sure you explain your motives for those changes
-- A large part of the submission process is receiving feedback on how you can improve you pull request. If you need to change your pull request, feel free to push more commits.
+- Open a pull request from the branch in your fork to the main repository. If your changes affect core functionality, please explain the reasoning behind them.
+- We may provide feedback to help refine your pull request. Feel free to push additional commits to address any suggestions.
 
 ## Tests
 

package/README.md

@@ -4,10 +4,10 @@
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge&style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)
 [![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=flat&logo=discord&logoColor=white)](https://discord.gg/myrBsQ8Cht)
 
-Etro is a typescript framework for programmatically editing videos. It lets you
-composite layers and add filters (effects). Etro comes shipped with text, video,
-audio and image layers, along with a bunch of GLSL effects. You can also define
-your own layers and effects with javascript and GLSL.
+Etro is a framework-agnostic TypeScript library for programmatically editing
+videos. It lets you composite layers and add filters. Etro includes text, video,
+audio and image layers, along with a variety of GLSL filters. You can also
+define your own layers and filters with TypeScript and GLSL.
 
 ## Features
 
@@ -17,6 +17,7 @@ your own layers and effects with javascript and GLSL.
 - Manipulate audio with the web audio API *(audio effects coming soon)*
 - Define layer and effect parameters as keyframes or custom functions
 - Render to a blob in realtime *(offline rendering coming soon)*
+- UI framework agnostic
 
 ## Installation
 
@@ -24,12 +25,6 @@ your own layers and effects with javascript and GLSL.
 npm i etro
 ```
 
-### System Dependencies
-
-- `node-canvas`
-
-_If you have problems while installing `etro` you may need to manually install additional dependencies. See: [compiling node-canvas](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling)_
-
 ## Basic Usage
 
 Let's look at an example:
@@ -84,8 +79,8 @@ To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
 
 ## Running the Examples
 
-Start the development server (only used for convenience while developing; you
-don't need a server to use Etro):
+Start the development server (used for convenience during development; Etro does
+not require a server):
 
 ```
 npm i

package/coverage/{Firefox 148.0 (Mac OS 10.15) → Chrome Headless 148.0.0.0 (Mac OS 10.15.7)}/html/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">51.16% </span>
+                <span class="strong">47.23% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>791/1546</span>
+                <span class='fraction'>802/1698</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">26.98% </span>
+                <span class="strong">23.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>180/667</span>
+                <span class='fraction'>185/780</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">48.68% </span>
+                <span class="strong">45.96% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>148/304</span>
+                <span class='fraction'>148/322</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50.1% </span>
+                <span class="strong">46.36% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>714/1425</span>
+                <span class='fraction'>726/1566</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line low'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -79,63 +79,63 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file medium" data-value="src"><a href="src/index.html">src</a></td>
-	<td data-value="51.17" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 51%"></div><div class="cover-empty" style="width: 49%"></div></div>
+	<td class="file low" data-value="src"><a href="src/index.html">src</a></td>
+	<td data-value="44.5" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 44%"></div><div class="cover-empty" style="width: 56%"></div></div>
 	</td>
-	<td data-value="51.17" class="pct medium">51.17%</td>
-	<td data-value="299" class="abs medium">153/299</td>
-	<td data-value="29.8" class="pct low">29.8%</td>
-	<td data-value="151" class="abs low">45/151</td>
-	<td data-value="61.36" class="pct medium">61.36%</td>
-	<td data-value="44" class="abs medium">27/44</td>
-	<td data-value="51.82" class="pct medium">51.82%</td>
-	<td data-value="274" class="abs medium">142/274</td>
+	<td data-value="44.5" class="pct low">44.5%</td>
+	<td data-value="355" class="abs low">158/355</td>
+	<td data-value="22.72" class="pct low">22.72%</td>
+	<td data-value="198" class="abs low">45/198</td>
+	<td data-value="52.94" class="pct medium">52.94%</td>
+	<td data-value="51" class="abs medium">27/51</td>
+	<td data-value="44.54" class="pct low">44.54%</td>
+	<td data-value="330" class="abs low">147/330</td>
 	</tr>
 
 <tr>
 	<td class="file low" data-value="src/effect"><a href="src/effect/index.html">src/effect</a></td>
-	<td data-value="31.47" class="pic low">
+	<td data-value="31.04" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 31%"></div><div class="cover-empty" style="width: 69%"></div></div>
 	</td>
-	<td data-value="31.47" class="pct low">31.47%</td>
-	<td data-value="556" class="abs low">175/556</td>
-	<td data-value="1.58" class="pct low">1.58%</td>
-	<td data-value="189" class="abs low">3/189</td>
-	<td data-value="22" class="pct low">22%</td>
-	<td data-value="100" class="abs low">22/100</td>
-	<td data-value="28.11" class="pct low">28.11%</td>
-	<td data-value="505" class="abs low">142/505</td>
+	<td data-value="31.04" class="pct low">31.04%</td>
+	<td data-value="567" class="abs low">176/567</td>
+	<td data-value="1.51" class="pct low">1.51%</td>
+	<td data-value="198" class="abs low">3/198</td>
+	<td data-value="21.56" class="pct low">21.56%</td>
+	<td data-value="102" class="abs low">22/102</td>
+	<td data-value="27.9" class="pct low">27.9%</td>
+	<td data-value="516" class="abs low">144/516</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/layer"><a href="src/layer/index.html">src/layer</a></td>
-	<td data-value="58.52" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 58%"></div><div class="cover-empty" style="width: 42%"></div></div>
+	<td data-value="56.71" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 56%"></div><div class="cover-empty" style="width: 44%"></div></div>
 	</td>
-	<td data-value="58.52" class="pct medium">58.52%</td>
-	<td data-value="352" class="abs medium">206/352</td>
-	<td data-value="25.32" class="pct low">25.32%</td>
-	<td data-value="154" class="abs low">39/154</td>
-	<td data-value="53.76" class="pct medium">53.76%</td>
-	<td data-value="93" class="abs medium">50/93</td>
-	<td data-value="58.03" class="pct medium">58.03%</td>
-	<td data-value="336" class="abs medium">195/336</td>
+	<td data-value="56.71" class="pct medium">56.71%</td>
+	<td data-value="365" class="abs medium">207/365</td>
+	<td data-value="23.92" class="pct low">23.92%</td>
+	<td data-value="163" class="abs low">39/163</td>
+	<td data-value="52.63" class="pct medium">52.63%</td>
+	<td data-value="95" class="abs medium">50/95</td>
+	<td data-value="56.32" class="pct medium">56.32%</td>
+	<td data-value="348" class="abs medium">196/348</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/movie"><a href="src/movie/index.html">src/movie</a></td>
-	<td data-value="75.81" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
+	<td data-value="63.5" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
 	</td>
-	<td data-value="75.81" class="pct medium">75.81%</td>
-	<td data-value="339" class="abs medium">257/339</td>
-	<td data-value="53.75" class="pct medium">53.75%</td>
-	<td data-value="173" class="abs medium">93/173</td>
-	<td data-value="73.13" class="pct medium">73.13%</td>
-	<td data-value="67" class="abs medium">49/67</td>
-	<td data-value="75.8" class="pct medium">75.8%</td>
-	<td data-value="310" class="abs medium">235/310</td>
+	<td data-value="63.5" class="pct medium">63.5%</td>
+	<td data-value="411" class="abs medium">261/411</td>
+	<td data-value="44.34" class="pct low">44.34%</td>
+	<td data-value="221" class="abs low">98/221</td>
+	<td data-value="66.21" class="pct medium">66.21%</td>
+	<td data-value="74" class="abs medium">49/74</td>
+	<td data-value="64.24" class="pct medium">64.24%</td>
+	<td data-value="372" class="abs medium">239/372</td>
 	</tr>
 
 </tbody>
@@ -146,7 +146,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-18T02:03:15.743Z
+                at 2026-06-06T05:34:26.433Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/{Firefox 148.0 (Mac OS 10.15) → Chrome Headless 148.0.0.0 (Mac OS 10.15.7)}/html/src/custom-array.ts.html

@@ -116,14 +116,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -132,19 +132,19 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</span>
-<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -167,7 +167,7 @@ export class CustomArray&lt;T&gt; extends Array&lt;T&gt; {
 &nbsp;
     // Create proxy
     return new Proxy(target, {
-<span class="fstat-no" title="function not covered" >      deleteProperty </span>(target, property): boolean {
+      deleteProperty<span class="fstat-no" title="function not covered" > (t</span>arget, property): boolean {
         const value = <span class="cstat-no" title="statement not covered" >target[property]</span>
 <span class="cstat-no" title="statement not covered" >        delete target[property]</span>
 <span class="cstat-no" title="statement not covered" >        listener.onRemove(value)</span>
@@ -199,7 +199,7 @@ export class CustomArray&lt;T&gt; extends Array&lt;T&gt; {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-18T02:03:15.743Z
+                at 2026-06-06T05:34:26.433Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/{Firefox 148.0 (Mac OS 10.15) → Chrome Headless 148.0.0.0 (Mac OS 10.15.7)}/html/src/effect/base.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">48.57% </span>
+                <span class="strong">40.42% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>17/35</span>
+                <span class='fraction'>19/47</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/10</span>
+                <span class='fraction'>0/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">7.69% </span>
+                <span class="strong">6.66% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/13</span>
+                <span class='fraction'>1/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">47.05% </span>
+                <span class="strong">40% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>16/34</span>
+                <span class='fraction'>18/45</span>
             </div>
         
             
@@ -179,9 +179,26 @@
 <a name='L114'></a><a href='#L114'>114</a>
 <a name='L115'></a><a href='#L115'>115</a>
 <a name='L116'></a><a href='#L116'>116</a>
-<a name='L117'></a><a href='#L117'>117</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -289,6 +306,21 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -298,6 +330,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { Movie } from '../movie'
 import { Base as BaseLayer } from '../layer/index'
 import BaseObject from '../object'
+import { serializeProperty } from '../util'
 &nbsp;
 /**
  * @deprecated All visual effects now inherit from `Visual` instead
@@ -405,6 +438,21 @@ export class Base implements BaseObject {
 <span class="fstat-no" title="function not covered" >  getDefaultOptions </span>(): Record&lt;string, unknown&gt; {
 <span class="cstat-no" title="statement not covered" >    return {}</span>
   }
+&nbsp;
+<span class="fstat-no" title="function not covered" >  toJSON </span>(): object {
+    const json: any = <span class="cstat-no" title="statement not covered" >{ type: `effect.${this.constructor.name}` }</span>
+    const exclude<span class="cstat-no" title="statement not covered" > = ['type', 'publicExcludes', 'propertyFilters', 'movie', 'ready', 'parent', 'currentTime', ...this.publicExcludes]</span>
+<span class="cstat-no" title="statement not covered" >    for (const key in this) {</span>
+<span class="cstat-no" title="statement not covered" >      if (key.startsWith('_') || exclude.indexOf(key) !== -1 || typeof (this as any)[key] === 'function') {</span>
+<span class="cstat-no" title="statement not covered" >        continue</span>
+      }
+<span class="cstat-no" title="statement not covered" >      json[key] = serializeProperty((this as any)[key])</span>
+    }
+<span class="cstat-no" title="statement not covered" >    if ((this as any).effects &amp;&amp; (this as any).effects.length &gt; 0) {</span>
+<span class="cstat-no" title="statement not covered" >      json.effects = (this as any).effects.map(<span class="fstat-no" title="function not covered" >(e</span>: any) =&gt; <span class="cstat-no" title="statement not covered" >e.toJSON())</span></span>
+    }
+<span class="cstat-no" title="statement not covered" >    return json</span>
+  }
 }
 // id for events (independent of instance, but easy to access when on prototype
 // chain)
@@ -418,7 +466,7 @@ Base.prototype.propertyFilters = {}
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-18T02:03:15.743Z
+                at 2026-06-06T05:34:26.433Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/{Firefox 148.0 (Mac OS 10.15) → Chrome Headless 148.0.0.0 (Mac OS 10.15.7)}/html/src/effect/brightness.ts.html

@@ -199,7 +199,7 @@ export class Brightness extends Shader {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-18T02:03:15.743Z
+                at 2026-06-06T05:34:26.433Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/{Firefox 148.0 (Mac OS 10.15) → Chrome Headless 148.0.0.0 (Mac OS 10.15.7)}/html/src/effect/channels.ts.html

@@ -220,7 +220,7 @@ export class Channels extends Shader {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-18T02:03:15.743Z
+                at 2026-06-06T05:34:26.433Z
             </div>
         <script src="../../prettify.js"></script>
         <script>