egaki 0.5.0 → 0.7.0

package/dist/vite/layout-transition.d.ts

@@ -0,0 +1,136 @@
+/**
+ * LayoutTransition — FLIP-based layout animation across section boundaries.
+ *
+ * <LayoutTransition id="x"> wraps an element that should animate from its
+ * position in the previous section to its position in the current section.
+ * When two consecutive sections both contain <LayoutTransition id="x">,
+ * the element in the current section starts at the previous section's
+ * position and springs to its natural position.
+ *
+ * Architecture (no temporal state — seek-safe by design):
+ * - The previous section is re-rendered in a hidden "ghost" container,
+ *   pinned at its last frame via Remotion <Freeze>. This happens in
+ *   SectionWithLayoutTransition (player-page.tsx).
+ * - LayoutContainerContext tells each LayoutTransition whether it lives
+ *   in the ghost or the visible container.
+ * - Entries register into LayoutRegistryContext in useLayoutEffect.
+ *   React runs effects in tree order, so all LayoutTransition effects
+ *   (descendants of containers rendered before the layer) complete before
+ *   LayoutAnimationLayer's effect runs.
+ * - LayoutAnimationLayer measures ghost vs visible rects every frame and
+ *   writes interpolated FLIP transforms directly to the visible wrappers.
+ *
+ * Hard-won correctness details (do not "simplify" these away):
+ * - getBoundingClientRect() INCLUDES CSS transforms. Transforms must be
+ *   reset before measuring, or each frame compounds the previous frame's
+ *   FLIP offset and the element drifts.
+ * - The Remotion Player scales the composition to fit the viewport.
+ *   Client-px deltas must be divided by that scale before being used as
+ *   transform values in composition space. The layer measures the scale
+ *   from its own composition-sized AbsoluteFill.
+ * - The web-renderer does not support z-index; layer order is DOM order.
+ *   The ghost renders BEFORE the visible content so the visible section
+ *   paints over it even if a renderer ignores visibility:hidden.
+ */
+import { type ReactNode, type RefObject } from 'react';
+type LayoutContainerKind = 'ghost' | 'visible';
+/** Which axes to animate: position + size, position only, or size only. */
+export type LayoutTransitionMode = 'both' | 'position' | 'size';
+export interface LayoutEntry {
+    id: string;
+    container: LayoutContainerKind;
+    ref: RefObject<HTMLDivElement | null>;
+    /** Transition duration in frames */
+    durationInFrames: number;
+    /** Spring bounce, 0 = no overshoot */
+    bounce: number;
+    /** Custom easing function. When set, overrides the spring. */
+    easing: ((t: number) => number) | null;
+    /** Which axes to animate. Default 'both'. */
+    mode: LayoutTransitionMode;
+    /** Intra-scene: frame at which this instance becomes visible (inclusive). */
+    showFrom?: number;
+    /** Intra-scene: frame at which this instance stops being visible (exclusive). */
+    showUpTo?: number;
+}
+export interface LayoutRegistry {
+    entries: Set<LayoutEntry>;
+    /** Returns an unregister function */
+    register(entry: LayoutEntry): () => void;
+}
+export declare const LayoutContainerContext: import("react").Context<LayoutContainerKind>;
+/**
+ * Provides the registry that connects LayoutTransition elements (in both
+ * the ghost and visible containers) with the LayoutAnimationLayer.
+ * One provider per section — wraps ghost + visible + animation layer.
+ */
+export declare function LayoutTransitionProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Marks its subtree as the hidden ghost copy of the previous section.
+ * LayoutTransition elements inside register as 'ghost' and are only
+ * used as measurement sources, never animated.
+ */
+export declare function LayoutGhost({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Wraps an element that should keep visual continuity across section
+ * boundaries. Matching is by `id`: if the previous section also rendered
+ * <LayoutTransition id="x">, the element springs from its old position
+ * to its new one at the start of the section.
+ *
+ * Usage in MDX:
+ * ```mdx
+ * # Scene 1 duration=5s
+ *
+ * <LayoutTransition id="title">
+ *   <BlurReveal text="Hello" />
+ * </LayoutTransition>
+ *
+ * # Scene 2 duration=5s
+ *
+ * <LayoutTransition id="title" duration={25} bounce={0.2}>
+ *   <BlurReveal text="Hello" />
+ * </LayoutTransition>
+ * ```
+ *
+ * If no matching id exists in the previous section, children render
+ * normally with no animation.
+ */
+export declare function LayoutTransition({ id, duration, bounce, easing, mode, showFrom, showUpTo, children, }: {
+    id: string;
+    /** Transition duration in frames. Default 20. */
+    duration?: number;
+    /** Spring bounce, 0 = no overshoot, 1 = max. Default 0.15.
+     *  Ignored when `easing` is set (easing replaces the spring entirely). */
+    bounce?: number;
+    /** Custom easing function. When set, uses interpolate() over `duration`
+     *  frames instead of the spring. Overrides `bounce`. */
+    easing?: (t: number) => number;
+    /** Which axes to animate. 'position' snaps size instantly; 'size' snaps
+     *  position instantly; 'both' (default) animates both. */
+    mode?: LayoutTransitionMode;
+    /** Intra-scene: frame at which this instance becomes visible (inclusive).
+     *  When set (along with showUpTo), enables intra-scene FLIP transitions
+     *  between multiple instances of the same id within the same section.
+     *  Ranges must not overlap. */
+    showFrom?: number;
+    /** Intra-scene: frame at which this instance stops being visible (exclusive).
+     *  Defaults to Infinity (visible until end of section). */
+    showUpTo?: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Measures ghost vs visible LayoutTransition elements after every render
+ * and writes FLIP transforms to the visible wrappers. Must be rendered
+ * AFTER both containers (sibling order matters: its layout effect has to
+ * run after all LayoutTransition registrations).
+ *
+ * Renders an empty composition-sized AbsoluteFill used only to measure
+ * the Player's scale factor (composition px vs client px).
+ */
+export declare function LayoutAnimationLayer(): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=layout-transition.d.ts.map

package/dist/vite/layout-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-transition.d.ts","sourceRoot":"","sources":["../../src/vite/layout-transition.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAad,KAAK,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAA;AAE9C,2EAA2E;AAC3E,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,mBAAmB,CAAA;IAC9B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC,oCAAoC;IACpC,gBAAgB,EAAE,MAAM,CAAA;IACxB,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,CAAA;IACtC,6CAA6C;IAC7C,IAAI,EAAE,oBAAoB,CAAA;IAC1B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IACzB,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,IAAI,CAAA;CACzC;AAGD,eAAO,MAAM,sBAAsB,8CAAgD,CAAA;AAiSnF;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAmB7E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAMhE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,QAAa,EACb,MAAa,EACb,MAAM,EACN,IAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAA;IACV,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;8EAC0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;4DACwD;IACxD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B;8DAC0D;IAC1D,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B;;;mCAG+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;+DAC2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB,+BAuEA;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,gCAwJnC"}