egaki 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/vite/angled-screen-shader.d.ts +45 -0
- package/dist/vite/angled-screen-shader.d.ts.map +1 -0
- package/dist/vite/angled-screen-shader.js +573 -0
- package/dist/vite/angled-screen.d.ts +12 -3
- package/dist/vite/angled-screen.d.ts.map +1 -1
- package/dist/vite/angled-screen.js +12 -3
- package/dist/vite/mdx-video.d.ts +4 -2
- package/dist/vite/mdx-video.d.ts.map +1 -1
- package/dist/vite/mdx-video.js +4 -2
- package/dist/vite/mdx-video.test.js +1 -0
- package/dist/vite/render-client.d.ts +27 -0
- package/dist/vite/render-client.d.ts.map +1 -1
- package/dist/vite/render-client.js +47 -51
- package/dist/vite/sdk.d.ts.map +1 -1
- package/dist/vite/sdk.js +4 -3
- package/dist/vite/shader-renderer.d.ts +4 -0
- package/dist/vite/shader-renderer.d.ts.map +1 -1
- package/dist/vite/shader-renderer.js +3 -3
- package/dist/vite/tweakpane-hook.d.ts +6 -0
- package/dist/vite/tweakpane-hook.d.ts.map +1 -1
- package/dist/vite/tweakpane-hook.js +101 -4
- package/package.json +6 -6
- package/src/vite/angled-screen-shader.tsx +706 -0
- package/src/vite/angled-screen.tsx +13 -4
- package/src/vite/mdx-video.test.tsx +1 -0
- package/src/vite/mdx-video.tsx +4 -1
- package/src/vite/render-client.ts +52 -51
- package/src/vite/sdk.ts +4 -3
- package/src/vite/shader-renderer.tsx +3 -3
- package/src/vite/tweakpane-hook.tsx +102 -4
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* BasicAngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
|
|
3
|
+
*
|
|
4
|
+
* The shader-based version (true depth-of-field via WebGL) lives in
|
|
5
|
+
* angled-screen-shader.tsx and is exported as AngledScreen. This CSS version
|
|
6
|
+
* is kept as a lightweight fallback that works without HTML-in-canvas support.
|
|
3
7
|
*
|
|
4
8
|
* Wraps any children (images, videos, divs) in a 3D-transformed plane using
|
|
5
9
|
* CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
|
|
@@ -18,7 +22,7 @@
|
|
|
18
22
|
* Set `debug` to visualize the mask gradient as green (sharp) / red (blur).
|
|
19
23
|
*/
|
|
20
24
|
import { type CSSProperties, type ReactNode } from 'react';
|
|
21
|
-
export interface
|
|
25
|
+
export interface BasicAngledScreenProps {
|
|
22
26
|
children: ReactNode;
|
|
23
27
|
/** CSS perspective distance in px. Smaller = more dramatic. Default 1200. */
|
|
24
28
|
perspective?: number;
|
|
@@ -53,5 +57,10 @@ export interface AngledScreenProps {
|
|
|
53
57
|
/** Optional inline style on the outer container. */
|
|
54
58
|
style?: CSSProperties;
|
|
55
59
|
}
|
|
56
|
-
|
|
60
|
+
/**
|
|
61
|
+
* @deprecated Use `AngledScreen` (angled-screen-shader.tsx) instead — the
|
|
62
|
+
* WebGL version with true depth-of-field. This CSS version only remains as
|
|
63
|
+
* the automatic fallback for browsers without HTML-in-canvas support.
|
|
64
|
+
*/
|
|
65
|
+
export declare function BasicAngledScreen(props: BasicAngledScreenProps): import("react").JSX.Element;
|
|
57
66
|
//# sourceMappingURL=angled-screen.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angled-screen.d.ts","sourceRoot":"","sources":["../../src/vite/angled-screen.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"angled-screen.d.ts","sourceRoot":"","sources":["../../src/vite/angled-screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG1D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAA;IAGnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;+EAC2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACpD;4EACwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAwBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAwH9D"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* BasicAngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
|
|
5
|
+
*
|
|
6
|
+
* The shader-based version (true depth-of-field via WebGL) lives in
|
|
7
|
+
* angled-screen-shader.tsx and is exported as AngledScreen. This CSS version
|
|
8
|
+
* is kept as a lightweight fallback that works without HTML-in-canvas support.
|
|
5
9
|
*
|
|
6
10
|
* Wraps any children (images, videos, divs) in a 3D-transformed plane using
|
|
7
11
|
* CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
|
|
@@ -41,9 +45,14 @@ function autoDirection(rotateX, rotateY) {
|
|
|
41
45
|
}
|
|
42
46
|
return rotateX > 0 ? 'bottom' : 'top';
|
|
43
47
|
}
|
|
44
|
-
|
|
48
|
+
/**
|
|
49
|
+
* @deprecated Use `AngledScreen` (angled-screen-shader.tsx) instead — the
|
|
50
|
+
* WebGL version with true depth-of-field. This CSS version only remains as
|
|
51
|
+
* the automatic fallback for browsers without HTML-in-canvas support.
|
|
52
|
+
*/
|
|
53
|
+
export function BasicAngledScreen(props) {
|
|
45
54
|
const { children, transformOrigin = '50% 50%', bokehDirection, backgroundColor = '#000000', width = '80%', height = 'auto', style, } = props;
|
|
46
|
-
const tp = useTweakpane('
|
|
55
|
+
const tp = useTweakpane('BasicAngledScreen', {
|
|
47
56
|
perspective: { value: props.perspective ?? 1200, min: 100, max: 3000, step: 10 },
|
|
48
57
|
rotateX: { value: props.rotateX ?? 8, min: -90, max: 90, step: 0.5 },
|
|
49
58
|
rotateY: { value: props.rotateY ?? -12, min: -90, max: 90, step: 0.5 },
|
package/dist/vite/mdx-video.d.ts
CHANGED
|
@@ -14,7 +14,8 @@ import type { SafeMdxError } from 'safe-mdx';
|
|
|
14
14
|
import type { EagerModules } from 'safe-mdx/parse';
|
|
15
15
|
import { splitIntoSections, calculateTotalDuration, resolveAutoDurations, type MdxSection, type SplitResult, type VideoFrontmatter } from './mdx-parse.ts';
|
|
16
16
|
import { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep } from './components.tsx';
|
|
17
|
-
import {
|
|
17
|
+
import { BasicAngledScreen } from './angled-screen.tsx';
|
|
18
|
+
import { AngledScreen } from './angled-screen-shader.tsx';
|
|
18
19
|
import { CodeBlock, CODE_THEMES } from './code-block.tsx';
|
|
19
20
|
import { BandsShader } from './bands-shader.tsx';
|
|
20
21
|
import { WaveGradientShader } from './wave-gradient-shader.tsx';
|
|
@@ -286,7 +287,7 @@ export { LayoutContainerContext, LayoutTransition, LayoutTransitionProvider, Lay
|
|
|
286
287
|
import { LayoutTransition } from './layout-transition.tsx';
|
|
287
288
|
import { Img, Audio, Video } from './media-components.tsx';
|
|
288
289
|
export { ExportContext, useIsExporting, Img, Audio, Video } from './media-components.tsx';
|
|
289
|
-
export { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep, AngledScreen, CodeBlock, CODE_THEMES, BandsShader, WaveGradientShader, LiquidGradientShader, DispersionRingsShader, };
|
|
290
|
+
export { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep, AngledScreen, BasicAngledScreen, CodeBlock, CODE_THEMES, BandsShader, WaveGradientShader, LiquidGradientShader, DispersionRingsShader, };
|
|
290
291
|
/** Built-in JSX names available in MDX without user imports. Shared by
|
|
291
292
|
* client rendering (mdx-client.tsx) and <Server> slot rendering (app.tsx).
|
|
292
293
|
* Add new presentation components here once — not in app.tsx / mdx-client. */
|
|
@@ -303,6 +304,7 @@ export declare const MDX_BUILTIN_COMPONENTS: {
|
|
|
303
304
|
readonly Background: typeof Background;
|
|
304
305
|
readonly LayoutTransition: typeof LayoutTransition;
|
|
305
306
|
readonly AngledScreen: typeof AngledScreen;
|
|
307
|
+
readonly BasicAngledScreen: typeof BasicAngledScreen;
|
|
306
308
|
readonly BandsShader: import("react").FC<import("./bands-shader.tsx").BandsShaderProps>;
|
|
307
309
|
readonly WaveGradientShader: import("react").FC<import("./wave-gradient-shader.tsx").WaveGradientShaderProps>;
|
|
308
310
|
readonly LiquidGradientShader: import("react").FC<import("./liquid-gradient-shader.tsx").LiquidGradientShaderProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mdx-video.d.ts","sourceRoot":"","sources":["../../src/vite/mdx-video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7G,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,YAAY,EACb,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"mdx-video.d.ts","sourceRoot":"","sources":["../../src/vite/mdx-video.tsx"],"names":[],"mappings":"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"}
|
package/dist/vite/mdx-video.js
CHANGED
|
@@ -14,7 +14,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
14
14
|
import { createContext, useContext, useId, useInsertionEffect, useLayoutEffect } from 'react';
|
|
15
15
|
import { splitIntoSections, calculateTotalDuration, resolveAutoDurations, } from "./mdx-parse.js";
|
|
16
16
|
import { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep, } from "./components.js";
|
|
17
|
-
import {
|
|
17
|
+
import { BasicAngledScreen } from "./angled-screen.js";
|
|
18
|
+
import { AngledScreen } from "./angled-screen-shader.js";
|
|
18
19
|
import { CodeBlock, CODE_THEMES } from "./code-block.js";
|
|
19
20
|
import { BandsShader } from "./bands-shader.js";
|
|
20
21
|
import { WaveGradientShader } from "./wave-gradient-shader.js";
|
|
@@ -564,7 +565,7 @@ import { ExportContext, useIsExporting, Img, Audio, Video } from "./media-compon
|
|
|
564
565
|
export { ExportContext, useIsExporting, Img, Audio, Video } from "./media-components.js";
|
|
565
566
|
// Visual components and animations are re-exported so they're available
|
|
566
567
|
// as named imports from this client module for MDX usage.
|
|
567
|
-
export { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep, AngledScreen, CodeBlock, CODE_THEMES, BandsShader, WaveGradientShader, LiquidGradientShader, DispersionRingsShader, };
|
|
568
|
+
export { BlurReveal, MaskedSlideReveal, StaggeredFadeUp, ShimmerSweep, AngledScreen, BasicAngledScreen, CodeBlock, CODE_THEMES, BandsShader, WaveGradientShader, LiquidGradientShader, DispersionRingsShader, };
|
|
568
569
|
function GeneratedImage(_props) { return null; }
|
|
569
570
|
function GeneratedVideo(_props) { return null; }
|
|
570
571
|
function GeneratedSpeech(_props) { return null; }
|
|
@@ -573,6 +574,7 @@ export const MDX_BUILTIN_COMPONENTS = {
|
|
|
573
574
|
Background,
|
|
574
575
|
LayoutTransition,
|
|
575
576
|
AngledScreen,
|
|
577
|
+
BasicAngledScreen,
|
|
576
578
|
BandsShader,
|
|
577
579
|
WaveGradientShader,
|
|
578
580
|
LiquidGradientShader,
|
|
@@ -4,6 +4,33 @@
|
|
|
4
4
|
* via @remotion/web-renderer's renderMediaOnWeb().
|
|
5
5
|
*/
|
|
6
6
|
import React from 'react';
|
|
7
|
+
/**
|
|
8
|
+
* Wrap a composition for web-renderer entry points (export, screenshot,
|
|
9
|
+
* filmstrip). The scaffold wrapper is visibility:hidden and Chromium creates
|
|
10
|
+
* no paint records for hidden subtrees, which breaks captureElementImage()
|
|
11
|
+
* inside nested <HtmlInCanvas> (AngledScreen): onInit/onPaint silently never
|
|
12
|
+
* run and exports come out flat. visibility is overridable by descendants,
|
|
13
|
+
* so a visibility:visible div at the composition root restores paint records
|
|
14
|
+
* for the whole tree while deeper visibility:hidden ancestors (e.g.
|
|
15
|
+
* LayoutTransition's inactive instances) keep hiding their subtrees
|
|
16
|
+
* relative to this root.
|
|
17
|
+
*
|
|
18
|
+
* Tradeoff (accepted): the scaffold sits at z-index:-9999, painting above
|
|
19
|
+
* the page's root background but below all in-flow content — so the
|
|
20
|
+
* rendering composition can peek through wherever the page shows only the
|
|
21
|
+
* body background. Hiding it differently is not possible:
|
|
22
|
+
* - opacity:0 / filter:opacity(0) bake into captureElementImage pixels
|
|
23
|
+
* (verified: capture succeeds but frames come out fully transparent)
|
|
24
|
+
* - translate/clip-path/resize on the scaffold break the drawElementImage
|
|
25
|
+
* paint pipeline (black frames — learned June 2026, commit e501ca5)
|
|
26
|
+
* - visibility:hidden kills paint records entirely (the original bug)
|
|
27
|
+
* An opaque page background or full-viewport player UI fully occludes it.
|
|
28
|
+
*
|
|
29
|
+
* TODO: re-evaluate whether this wrapper is still needed once remotion
|
|
30
|
+
* fixes the HtmlInCanvas delayRender scoping / hidden-scaffold capture bug:
|
|
31
|
+
* https://github.com/remotion-dev/remotion/issues/9367
|
|
32
|
+
*/
|
|
33
|
+
export declare function wrapForWebRenderer(component: React.FC): React.FC;
|
|
7
34
|
export declare function renderInBrowser(options: {
|
|
8
35
|
component: React.FC;
|
|
9
36
|
durationInFrames: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-client.d.ts","sourceRoot":"","sources":["../../src/vite/render-client.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"render-client.d.ts","sourceRoot":"","sources":["../../src/vite/render-client.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,CAQhE;AAED,wBAAsB,eAAe,CAAC,OAAO,EAAE;IAC7C,SAAS,EAAE,KAAK,CAAC,EAAE,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB,gBA4BA"}
|
|
@@ -7,61 +7,57 @@ import { renderMediaOnWeb } from '@remotion/web-renderer';
|
|
|
7
7
|
import { ExportContext } from "./mdx-video.js";
|
|
8
8
|
import React from 'react';
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
10
|
+
* Wrap a composition for web-renderer entry points (export, screenshot,
|
|
11
|
+
* filmstrip). The scaffold wrapper is visibility:hidden and Chromium creates
|
|
12
|
+
* no paint records for hidden subtrees, which breaks captureElementImage()
|
|
13
|
+
* inside nested <HtmlInCanvas> (AngledScreen): onInit/onPaint silently never
|
|
14
|
+
* run and exports come out flat. visibility is overridable by descendants,
|
|
15
|
+
* so a visibility:visible div at the composition root restores paint records
|
|
16
|
+
* for the whole tree while deeper visibility:hidden ancestors (e.g.
|
|
17
|
+
* LayoutTransition's inactive instances) keep hiding their subtrees
|
|
18
|
+
* relative to this root.
|
|
14
19
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
+
* Tradeoff (accepted): the scaffold sits at z-index:-9999, painting above
|
|
21
|
+
* the page's root background but below all in-flow content — so the
|
|
22
|
+
* rendering composition can peek through wherever the page shows only the
|
|
23
|
+
* body background. Hiding it differently is not possible:
|
|
24
|
+
* - opacity:0 / filter:opacity(0) bake into captureElementImage pixels
|
|
25
|
+
* (verified: capture succeeds but frames come out fully transparent)
|
|
26
|
+
* - translate/clip-path/resize on the scaffold break the drawElementImage
|
|
27
|
+
* paint pipeline (black frames — learned June 2026, commit e501ca5)
|
|
28
|
+
* - visibility:hidden kills paint records entirely (the original bug)
|
|
29
|
+
* An opaque page background or full-viewport player UI fully occludes it.
|
|
20
30
|
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
31
|
+
* TODO: re-evaluate whether this wrapper is still needed once remotion
|
|
32
|
+
* fixes the HtmlInCanvas delayRender scoping / hidden-scaffold capture bug:
|
|
33
|
+
* https://github.com/remotion-dev/remotion/issues/9367
|
|
24
34
|
*/
|
|
25
|
-
function
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
'position:fixed',
|
|
29
|
-
'inset:0',
|
|
30
|
-
'z-index:-9998',
|
|
31
|
-
'background:#050505',
|
|
32
|
-
'pointer-events:none',
|
|
33
|
-
].join(';');
|
|
34
|
-
document.body.appendChild(cover);
|
|
35
|
-
return () => cover.remove();
|
|
35
|
+
export function wrapForWebRenderer(component) {
|
|
36
|
+
const Wrapped = () => React.createElement('div', { style: { visibility: 'visible', position: 'relative', width: '100%', height: '100%' } }, React.createElement(component));
|
|
37
|
+
return Wrapped;
|
|
36
38
|
}
|
|
37
39
|
export async function renderInBrowser(options) {
|
|
38
|
-
const removeCover = injectScaffoldCover();
|
|
39
40
|
const ExportWrapped = () => React.createElement(ExportContext.Provider, { value: true }, React.createElement(options.component));
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
onProgress
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
return getBlob();
|
|
63
|
-
}
|
|
64
|
-
finally {
|
|
65
|
-
removeCover();
|
|
66
|
-
}
|
|
41
|
+
const { getBlob } = await renderMediaOnWeb({
|
|
42
|
+
composition: {
|
|
43
|
+
component: wrapForWebRenderer(ExportWrapped),
|
|
44
|
+
durationInFrames: options.durationInFrames,
|
|
45
|
+
fps: options.fps ?? 30,
|
|
46
|
+
width: options.width ?? 1920,
|
|
47
|
+
height: options.height ?? 1080,
|
|
48
|
+
id: 'MdxVideo',
|
|
49
|
+
calculateMetadata: null,
|
|
50
|
+
},
|
|
51
|
+
inputProps: {},
|
|
52
|
+
container: 'mp4',
|
|
53
|
+
videoCodec: 'h264',
|
|
54
|
+
videoBitrate: 'high',
|
|
55
|
+
allowHtmlInCanvas: true,
|
|
56
|
+
scale: options.scale,
|
|
57
|
+
signal: options.signal,
|
|
58
|
+
onProgress: ({ progress }) => {
|
|
59
|
+
options.onProgress?.(progress);
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
return getBlob();
|
|
67
63
|
}
|
package/dist/vite/sdk.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/vite/sdk.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/vite/sdk.ts"],"names":[],"mappings":"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"}
|
package/dist/vite/sdk.js
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
import React from 'react';
|
|
14
14
|
import { renderStillOnWeb, renderMediaOnWeb } from '@remotion/web-renderer';
|
|
15
|
+
import { wrapForWebRenderer } from "./render-client.js";
|
|
15
16
|
import { ExportContext } from "./mdx-video.js";
|
|
16
17
|
// ---------------------------------------------------------------------------
|
|
17
18
|
// Helper: blob → data URL
|
|
@@ -192,7 +193,7 @@ class EgakiSDK {
|
|
|
192
193
|
const format = options.format ?? 'png';
|
|
193
194
|
const still = await renderStillOnWeb({
|
|
194
195
|
composition: {
|
|
195
|
-
component: c.component,
|
|
196
|
+
component: wrapForWebRenderer(c.component),
|
|
196
197
|
durationInFrames: c.totalDuration,
|
|
197
198
|
fps: c.fps,
|
|
198
199
|
width: c.width,
|
|
@@ -278,7 +279,7 @@ class EgakiSDK {
|
|
|
278
279
|
for (let i = 0; i < framesToCapture.length; i++) {
|
|
279
280
|
const still = await renderStillOnWeb({
|
|
280
281
|
composition: {
|
|
281
|
-
component: c.component,
|
|
282
|
+
component: wrapForWebRenderer(c.component),
|
|
282
283
|
durationInFrames: c.totalDuration,
|
|
283
284
|
fps: c.fps,
|
|
284
285
|
width: c.width,
|
|
@@ -315,7 +316,7 @@ class EgakiSDK {
|
|
|
315
316
|
const c = this.getConfig();
|
|
316
317
|
const { getBlob } = await renderMediaOnWeb({
|
|
317
318
|
composition: {
|
|
318
|
-
component: this.wrapForExport(c.component),
|
|
319
|
+
component: wrapForWebRenderer(this.wrapForExport(c.component)),
|
|
319
320
|
durationInFrames: c.totalDuration,
|
|
320
321
|
fps: c.fps,
|
|
321
322
|
width: c.width,
|
|
@@ -28,6 +28,10 @@ export interface ShaderConfig {
|
|
|
28
28
|
/** Property controls that become uniforms and tweakpane sliders. */
|
|
29
29
|
propertyControls: Record<string, PropertyControl>;
|
|
30
30
|
}
|
|
31
|
+
/** Parse a hex color string (#RGB, #RRGGBB, #RRGGBBAA) to [r, g, b, a] in 0-1 range. */
|
|
32
|
+
export declare function parseHexColor(hex: string): [number, number, number, number];
|
|
33
|
+
export declare function compileGlShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader;
|
|
34
|
+
export declare function linkGlProgram(gl: WebGL2RenderingContext, vs: WebGLShader, fs: WebGLShader): WebGLProgram;
|
|
31
35
|
/**
|
|
32
36
|
* Create a React component that renders a WebGL2 fragment shader full-screen.
|
|
33
37
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shader-renderer.d.ts","sourceRoot":"","sources":["../../src/vite/shader-renderer.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAOnE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAA;IAC1B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,EAAE,CAAA;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;CAClD;
|
|
1
|
+
{"version":3,"file":"shader-renderer.d.ts","sourceRoot":"","sources":["../../src/vite/shader-renderer.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAOnE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAA;IAC1B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,EAAE,CAAA;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;CAClD;AAMD,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAa3E;AAwFD,wBAAgB,eAAe,CAC7B,EAAE,EAAE,sBAAsB,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GACb,WAAW,CAWb;AAED,wBAAgB,aAAa,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,WAAW,GACd,YAAY,CAYd;AAuCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY;YAsEtC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE;;EA+MzD"}
|
|
@@ -33,7 +33,7 @@ import { useTweakpane } from "./tweakpane-hook.js";
|
|
|
33
33
|
// Color parsing
|
|
34
34
|
// ---------------------------------------------------------------------------
|
|
35
35
|
/** Parse a hex color string (#RGB, #RRGGBB, #RRGGBBAA) to [r, g, b, a] in 0-1 range. */
|
|
36
|
-
function parseHexColor(hex) {
|
|
36
|
+
export function parseHexColor(hex) {
|
|
37
37
|
let h = hex.replace('#', '');
|
|
38
38
|
if (h.length === 3 || h.length === 4) {
|
|
39
39
|
h = h
|
|
@@ -112,7 +112,7 @@ function generateFragmentSource(body, controls) {
|
|
|
112
112
|
// ---------------------------------------------------------------------------
|
|
113
113
|
// WebGL helpers
|
|
114
114
|
// ---------------------------------------------------------------------------
|
|
115
|
-
function compileGlShader(gl, type, source) {
|
|
115
|
+
export function compileGlShader(gl, type, source) {
|
|
116
116
|
const shader = gl.createShader(type);
|
|
117
117
|
if (!shader)
|
|
118
118
|
throw new Error('Failed to create shader');
|
|
@@ -125,7 +125,7 @@ function compileGlShader(gl, type, source) {
|
|
|
125
125
|
}
|
|
126
126
|
return shader;
|
|
127
127
|
}
|
|
128
|
-
function linkGlProgram(gl, vs, fs) {
|
|
128
|
+
export function linkGlProgram(gl, vs, fs) {
|
|
129
129
|
const program = gl.createProgram();
|
|
130
130
|
if (!program)
|
|
131
131
|
throw new Error('Failed to create program');
|
|
@@ -71,6 +71,12 @@ export declare let TWEAKPANE_DISABLED: boolean;
|
|
|
71
71
|
* Returns a reactive object with current values. Updating a control in the
|
|
72
72
|
* pane immediately triggers a React re-render with fresh values.
|
|
73
73
|
*
|
|
74
|
+
* Values follow live props: each key returns the schema value from the
|
|
75
|
+
* CURRENT render until the user touches that control in the pane, so
|
|
76
|
+
* animated props (e.g. `translateX={interpolate(frame, ...)}`) flow through
|
|
77
|
+
* every frame. Once touched, the user's pane value wins for that key until
|
|
78
|
+
* the component remounts.
|
|
79
|
+
*
|
|
74
80
|
* On unmount the folder is disposed and removed from the pane.
|
|
75
81
|
*/
|
|
76
82
|
export declare function useTweakpane<T extends ParamSchema>(label: string, schema: T): ResolvedValues<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tweakpane-hook.d.ts","sourceRoot":"","sources":["../../src/vite/tweakpane-hook.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tweakpane-hook.d.ts","sourceRoot":"","sources":["../../src/vite/tweakpane-hook.tsx"],"names":[],"mappings":"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"}
|