multiplane 0.3.3 → 0.3.7

package/THIRD_PARTY_NOTICES.md

@@ -1,30 +1,30 @@
-# 第三方声明
-
-Multiplane 使用以下依赖；它们保留各自的版权和许可，不因本项目的 Apache-2.0 许可而改变。
-
-| 组件 | 本次锁定版本 | 许可与原文 | 用途 |
-|---|---|---|---|
-| [Playwright](https://github.com/microsoft/playwright) / playwright-core | 1.63.0 | Apache-2.0：[LICENSE](licenses/playwright-LICENSE)、[NOTICE](licenses/playwright-NOTICE)、[Playwright 第三方声明](licenses/playwright-ThirdPartyNotices.txt)、[core 第三方声明](licenses/playwright-core-ThirdPartyNotices.txt) | 安装和控制 Chromium |
-| [sharp](https://github.com/lovell/sharp) | 0.35.5 | Apache-2.0：[LICENSE](licenses/sharp-LICENSE) | PNG 解码和缩放 |
-| sharp Windows x64 原生依赖 | 0.35.5 | Apache-2.0 AND LGPL-3.0-or-later：[包许可](licenses/sharp-win32-x64-LICENSE)、[上游第三方组件声明](licenses/sharp-win32-x64-NOTICES.md)、[LGPLv3](licenses/LGPL-3.0.txt)、[GPLv3](licenses/GPL-3.0.txt) | 原生图像处理，包含 libvips 等组件 |
-| [three.js](https://github.com/mrdoob/three.js) | 0.180.0 | MIT：[LICENSE](licenses/three-LICENSE) | 可选三维层 |
-| @img/colour | 随 lockfile 固定 | MIT：[LICENSE](licenses/colour-LICENSE.md) | sharp 间接依赖 |
-| detect-libc | 随 lockfile 固定 | Apache-2.0：[LICENSE](licenses/detect-libc-LICENSE) | sharp 平台检测 |
-| semver | 随 lockfile 固定 | ISC：[LICENSE](licenses/semver-LICENSE) | 版本解析 |
-| Roboto 可变字体 | Google Fonts 原始 TTF | SIL OFL 1.1：[OFL 原文](examples/assets/OFL.txt) | 文字示例 |
-| [Acorn](https://github.com/acornjs/acorn) | 8.15.0 | MIT：[LICENSE](licenses/acorn-LICENSE) | JavaScript 静态语法与位置解析 |
-| [parse5](https://github.com/inikulin/parse5) | 7.3.0 | MIT：[LICENSE](licenses/parse5-LICENSE) | HTML 元素、属性和内联源码位置解析 |
-| [PostCSS](https://github.com/postcss/postcss) | 8.5.28 | MIT：[LICENSE](licenses/postcss-LICENSE) | CSS 规则与声明解析；禁用 source map 读取 |
-| [postcss-value-parser](https://github.com/TrySound/postcss-value-parser) | 4.2.0 | MIT：[LICENSE](licenses/postcss-value-parser-LICENSE) | CSS 资源 URL 与字符串解析 |
-| entities | 6.0.1 | BSD-2-Clause：[LICENSE](licenses/entities-LICENSE) | parse5 间接依赖，HTML 实体解码 |
-| nanoid | 3.3.19 | MIT：[LICENSE](licenses/nanoid-LICENSE) | PostCSS 间接依赖 |
-| picocolors | 1.1.1 | ISC：[LICENSE](licenses/picocolors-LICENSE) | PostCSS 间接依赖，诊断颜色工具 |
-| source-map-js | 1.2.2 | BSD-3-Clause：[LICENSE](licenses/source-map-js-LICENSE) | PostCSS 间接依赖，source map 工具 |
-
-Roboto 文件从 [Google Fonts 的 Roboto 目录](https://github.com/google/fonts/tree/main/ofl/roboto) 获取，文件名为 `Roboto[wdth,wght].ttf`，本仓库仅将文件名改为 `Roboto-Variable.ttf`，未修改字体内容。Copyright 2011 The Roboto Project Authors。许可原文随字体保存。
-
-`examples/assets/card.svg` 为本项目自行绘制的几何图形，采用本项目 Apache-2.0 许可。
-
-Chromium 由 Playwright 安装或复用本机已安装的对应版本，不放入 Multiplane 包。其自身声明随浏览器发行物提供。不同平台的 sharp 原生依赖由 npm 按平台安装，不重打包进 Multiplane；应保留对应包内的许可和声明。上表原生依赖副本对应当前验收的 Windows x64 平台；其第三方库清单和使用许可详见上游声明，源码与构建信息见 [sharp-libvips](https://github.com/lovell/sharp-libvips)。Playwright 的内嵌依赖另在其安装包内 `*.js.LICENSE` 文件中声明。
-
-本包不包含 FFmpeg 二进制，也不依赖 `ffmpeg-static`。使用方通过命令行、环境变量或 PATH 提供 FFmpeg；其具体构建的许可与功能以该发行物为准。
+# 第三方声明
+
+Multiplane 使用以下依赖；它们保留各自的版权和许可，不因本项目的 Apache-2.0 许可而改变。
+
+| 组件 | 本次锁定版本 | 许可与原文 | 用途 |
+|---|---|---|---|
+| [Playwright](https://github.com/microsoft/playwright) / playwright-core | 1.63.0 | Apache-2.0：[LICENSE](licenses/playwright-LICENSE)、[NOTICE](licenses/playwright-NOTICE)、[Playwright 第三方声明](licenses/playwright-ThirdPartyNotices.txt)、[core 第三方声明](licenses/playwright-core-ThirdPartyNotices.txt) | 安装和控制 Chromium |
+| [sharp](https://github.com/lovell/sharp) | 0.35.5 | Apache-2.0：[LICENSE](licenses/sharp-LICENSE) | PNG 解码和缩放 |
+| sharp Windows x64 原生依赖 | 0.35.5 | Apache-2.0 AND LGPL-3.0-or-later：[包许可](licenses/sharp-win32-x64-LICENSE)、[上游第三方组件声明](licenses/sharp-win32-x64-NOTICES.md)、[LGPLv3](licenses/LGPL-3.0.txt)、[GPLv3](licenses/GPL-3.0.txt) | 原生图像处理，包含 libvips 等组件 |
+| [three.js](https://github.com/mrdoob/three.js) | 0.180.0 | MIT：[LICENSE](licenses/three-LICENSE) | 可选三维层 |
+| @img/colour | 随 lockfile 固定 | MIT：[LICENSE](licenses/colour-LICENSE.md) | sharp 间接依赖 |
+| detect-libc | 随 lockfile 固定 | Apache-2.0：[LICENSE](licenses/detect-libc-LICENSE) | sharp 平台检测 |
+| semver | 随 lockfile 固定 | ISC：[LICENSE](licenses/semver-LICENSE) | 版本解析 |
+| Roboto 可变字体 | Google Fonts 原始 TTF | SIL OFL 1.1：[OFL 原文](examples/assets/OFL.txt) | 文字示例 |
+| [Acorn](https://github.com/acornjs/acorn) | 8.15.0 | MIT：[LICENSE](licenses/acorn-LICENSE) | JavaScript 静态语法与位置解析 |
+| [parse5](https://github.com/inikulin/parse5) | 7.3.0 | MIT：[LICENSE](licenses/parse5-LICENSE) | HTML 元素、属性和内联源码位置解析 |
+| [PostCSS](https://github.com/postcss/postcss) | 8.5.28 | MIT：[LICENSE](licenses/postcss-LICENSE) | CSS 规则与声明解析；禁用 source map 读取 |
+| [postcss-value-parser](https://github.com/TrySound/postcss-value-parser) | 4.2.0 | MIT：[LICENSE](licenses/postcss-value-parser-LICENSE) | CSS 资源 URL 与字符串解析 |
+| entities | 6.0.1 | BSD-2-Clause：[LICENSE](licenses/entities-LICENSE) | parse5 间接依赖，HTML 实体解码 |
+| nanoid | 3.3.19 | MIT：[LICENSE](licenses/nanoid-LICENSE) | PostCSS 间接依赖 |
+| picocolors | 1.1.1 | ISC：[LICENSE](licenses/picocolors-LICENSE) | PostCSS 间接依赖，诊断颜色工具 |
+| source-map-js | 1.2.2 | BSD-3-Clause：[LICENSE](licenses/source-map-js-LICENSE) | PostCSS 间接依赖，source map 工具 |
+
+Roboto 文件从 [Google Fonts 的 Roboto 目录](https://github.com/google/fonts/tree/main/ofl/roboto) 获取，文件名为 `Roboto[wdth,wght].ttf`，本仓库仅将文件名改为 `Roboto-Variable.ttf`，未修改字体内容。Copyright 2011 The Roboto Project Authors。许可原文随字体保存。
+
+`examples/assets/card.svg` 为本项目自行绘制的几何图形，采用本项目 Apache-2.0 许可。
+
+Chromium 由 Playwright 安装或复用本机已安装的对应版本，不放入 Multiplane 包。其自身声明随浏览器发行物提供。不同平台的 sharp 原生依赖由 npm 按平台安装，不重打包进 Multiplane；应保留对应包内的许可和声明。上表原生依赖副本对应当前验收的 Windows x64 平台；其第三方库清单和使用许可详见上游声明，源码与构建信息见 [sharp-libvips](https://github.com/lovell/sharp-libvips)。Playwright 的内嵌依赖另在其安装包内 `*.js.LICENSE` 文件中声明。
+
+本包不包含 FFmpeg 二进制，也不依赖 `ffmpeg-static`。使用方通过命令行、环境变量或 PATH 提供 FFmpeg；其具体构建的许可与功能以该发行物为准。

package/examples/alpha.html

@@ -1,18 +1,18 @@
-<!doctype html>
-<html lang="en"><meta charset="utf-8"><title>Alpha example</title>
-<link rel="stylesheet" href="/multiplane/runtime/shot.css">
-<style>
-@font-face{font-family:Example;src:url('./assets/Roboto-Variable.ttf')}
-#stage{width:320px;height:180px;background:transparent}
-#block{position:absolute;top:65px;width:60px;height:60px;background:rgba(40,120,220,.5)}
-#label{position:absolute;left:24px;top:20px;color:rgba(230,70,30,.8);font:28px Example,sans-serif}
-</style>
-<div id="stage"><div id="block"></div><div id="label">Alpha</div></div>
-<script src="/multiplane/runtime/shot.js"></script>
-<script>
-// TODO(design): Review the neutral alpha example before publication.
-const block = document.querySelector('#block');
-Shot.define({duration:2,fps:12,fonts:[['28px Example','Alpha']],post:{alpha:true,motionBlur:5,shutter:0.8},
-  render(t){block.style.transform=`translateX(${24+90*t}px)`;}
-});
-</script></html>
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><title>Alpha example</title>
+<link rel="stylesheet" href="/multiplane/runtime/shot.css">
+<style>
+@font-face{font-family:Example;src:url('./assets/Roboto-Variable.ttf')}
+#stage{width:320px;height:180px;background:transparent}
+#block{position:absolute;top:65px;width:60px;height:60px;background:rgba(40,120,220,.5)}
+#label{position:absolute;left:24px;top:20px;color:rgba(230,70,30,.8);font:28px Example,sans-serif}
+</style>
+<div id="stage"><div id="block"></div><div id="label">Alpha</div></div>
+<script src="/multiplane/runtime/shot.js"></script>
+<script>
+// TODO(design): Review the neutral alpha example before publication.
+const block = document.querySelector('#block');
+Shot.define({duration:2,fps:12,fonts:[['28px Example','Alpha']],post:{alpha:true,motionBlur:5,shutter:0.8},
+  render(t){block.style.transform=`translateX(${24+90*t}px)`;}
+});
+</script></html>

package/examples/animation.html

@@ -1,17 +1,17 @@
-<!doctype html>
-<html lang="en"><meta charset="utf-8"><title>Geometry</title>
-<link rel="stylesheet" href="/multiplane/runtime/shot.css">
-<style>#stage{width:640px;height:360px}#shape{position:absolute;top:140px;width:80px;height:80px;background:#888}</style>
-<div id="stage"><div id="shape"></div></div>
-<script src="/multiplane/runtime/shot.js"></script>
-<script>
-// TODO(design): Review the neutral examples before publication.
-const stage = document.querySelector('#stage'), shape = document.querySelector('#shape');
-Shot.define({ duration: 2, fps: 12, cuts: [1], post: { motionBlur: 5, shutter: 0.8, grain: 0 },
-  render(t) {
-    stage.style.background = t < 1 ? '#eee' : '#222';
-    shape.style.borderRadius = t < 1 ? '0' : '50%';
-    shape.style.transform = `translateX(${40 + 480 * (t < 1 ? t : t - 1)}px)`;
-  }
-});
-</script></html>
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><title>Geometry</title>
+<link rel="stylesheet" href="/multiplane/runtime/shot.css">
+<style>#stage{width:640px;height:360px}#shape{position:absolute;top:140px;width:80px;height:80px;background:#888}</style>
+<div id="stage"><div id="shape"></div></div>
+<script src="/multiplane/runtime/shot.js"></script>
+<script>
+// TODO(design): Review the neutral examples before publication.
+const stage = document.querySelector('#stage'), shape = document.querySelector('#shape');
+Shot.define({ duration: 2, fps: 12, cuts: [1], post: { motionBlur: 5, shutter: 0.8, grain: 0 },
+  render(t) {
+    stage.style.background = t < 1 ? '#eee' : '#222';
+    shape.style.borderRadius = t < 1 ? '0' : '50%';
+    shape.style.transform = `translateX(${40 + 480 * (t < 1 ? t : t - 1)}px)`;
+  }
+});
+</script></html>

package/examples/assets/OFL.txt

@@ -1,93 +1,93 @@
-Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
+Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/examples/assets/card.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#f4f4f4"/>
-  <rect x="32" y="32" width="80" height="80" fill="#444"/>
-  <circle cx="184" cy="72" r="40" fill="#999"/>
-  <path d="M32 152h192M32 184h192M32 216h128" stroke="#666" stroke-width="8"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+  <rect width="256" height="256" fill="#f4f4f4"/>
+  <rect x="32" y="32" width="80" height="80" fill="#444"/>
+  <circle cx="184" cy="72" r="40" fill="#999"/>
+  <path d="M32 152h192M32 184h192M32 216h128" stroke="#666" stroke-width="8"/>
+</svg>

package/examples/three-cards.html

@@ -1,17 +1,17 @@
-<!doctype html>
-<html lang="en"><meta charset="utf-8"><title>Cards</title>
-<link rel="stylesheet" href="/multiplane/runtime/shot.css">
-<style>#stage{width:640px;height:360px;background:#ddd}</style>
-<script type="importmap">{"imports":{"three":"/multiplane/vendor/three/build/three.module.js","three/addons/":"/multiplane/vendor/three/examples/jsm/"}}</script>
-<div id="stage"></div>
-<script src="/multiplane/runtime/shot.js"></script>
-<script type="module">
-import { createThreeLayer } from '/multiplane/three.js';
-const layer = createThreeLayer({ samples: 16, maxSamples: 64, aperture: 0.12, focusDistance: 10 });
-const cards = [-2, 0, 2].map((z, i) => layer.card({ src: './assets/card.svg', width: 2.5, height: 2.5,
-  position: [(i - 1) * 2.3, 0, z], rotation: [0, (i - 1) * 0.2, 0] }));
-window.EXAMPLE_LAYER = layer;
-Shot.define({ duration: 2, fps: 12, setup: () => layer.ready,
-  render(t) { cards.forEach((card, i) => { card.position.y = Math.sin(t + i) * 0.3; }); layer.render({ t, focusDistance: 10 - t }); }
-});
-</script></html>
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><title>Cards</title>
+<link rel="stylesheet" href="/multiplane/runtime/shot.css">
+<style>#stage{width:640px;height:360px;background:#ddd}</style>
+<script type="importmap">{"imports":{"three":"/multiplane/vendor/three/build/three.module.js","three/addons/":"/multiplane/vendor/three/examples/jsm/"}}</script>
+<div id="stage"></div>
+<script src="/multiplane/runtime/shot.js"></script>
+<script type="module">
+import { createThreeLayer } from '/multiplane/three.js';
+const layer = createThreeLayer({ samples: 16, maxSamples: 64, aperture: 0.12, focusDistance: 10 });
+const cards = [-2, 0, 2].map((z, i) => layer.card({ src: './assets/card.svg', width: 2.5, height: 2.5,
+  position: [(i - 1) * 2.3, 0, z], rotation: [0, (i - 1) * 0.2, 0] }));
+window.EXAMPLE_LAYER = layer;
+Shot.define({ duration: 2, fps: 12, setup: () => layer.ready,
+  render(t) { cards.forEach((card, i) => { card.position.y = Math.sin(t + i) * 0.3; }); layer.render({ t, focusDistance: 10 - t }); }
+});
+</script></html>

package/examples/typography.html

@@ -1,17 +1,17 @@
-<!doctype html>
-<html lang="en"><meta charset="utf-8"><title>Typography</title>
-<link rel="stylesheet" href="/multiplane/runtime/shot.css">
-<style>
-@font-face{font-family:ExampleSans;src:url('./assets/Roboto-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
-#stage{width:640px;height:360px;background:#eee;color:#222;font-family:ExampleSans,sans-serif}
-h1{position:absolute;left:48px;top:72px;font-size:48px;font-weight:400;margin:0}
-p{position:absolute;left:48px;top:168px;font-size:24px;margin:0}
-</style>
-<div id="stage"><h1>Multiplane</h1><p>Frames in time</p></div>
-<script src="/multiplane/runtime/shot.js"></script>
-<script>
-const heading = document.querySelector('h1'), line = document.querySelector('p');
-Shot.define({ duration: 2, fps: 12, fonts: [['48px ExampleSans', 'MultiplaneFrames in time']],
-  render(t) { heading.style.transform = `translateX(${24 * t}px)`; line.style.opacity = String(Math.min(1, t * 2)); }
-});
-</script></html>
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><title>Typography</title>
+<link rel="stylesheet" href="/multiplane/runtime/shot.css">
+<style>
+@font-face{font-family:ExampleSans;src:url('./assets/Roboto-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
+#stage{width:640px;height:360px;background:#eee;color:#222;font-family:ExampleSans,sans-serif}
+h1{position:absolute;left:48px;top:72px;font-size:48px;font-weight:400;margin:0}
+p{position:absolute;left:48px;top:168px;font-size:24px;margin:0}
+</style>
+<div id="stage"><h1>Multiplane</h1><p>Frames in time</p></div>
+<script src="/multiplane/runtime/shot.js"></script>
+<script>
+const heading = document.querySelector('h1'), line = document.querySelector('p');
+Shot.define({ duration: 2, fps: 12, fonts: [['48px ExampleSans', 'MultiplaneFrames in time']],
+  render(t) { heading.style.transform = `translateX(${24 * t}px)`; line.style.opacity = String(Math.min(1, t * 2)); }
+});
+</script></html>