Push through

import type {ReactNode} from "react";
import {Easing, Fill, interpolate, useSceneTransition} from "odori";

export type PushThroughProps = {
  children?: ReactNode;
  /** Which way the incoming scene travels. */
  direction?: "up" | "down" | "left" | "right";
  /** How far the outgoing scene recedes, as a scale. */
  recede?: number;
};

/**
 * One scene pushing the last one out of the frame.
 *
 * This is the transition the timeline could not express before: it needs both
 * scenes on screen at once, so the scene it lives in declares an `overlap` and
 * this reads how far through the join it is. The same component handles both
 * halves — arriving, it slides in and pushes; leaving, it recedes and is
 * pushed — because a transition written as two components has two places to
 * get the timing wrong.
 *
 * ```tsx
 * <Scene id="proof" duration="4s" overlap="0.5s">
 *   <PushThrough>{content}</PushThrough>
 * </Scene>
 * ```
 */
export const PushThrough = ({children, direction = "up", recede = 0.94}: PushThroughProps) => {
  const {entering, leaving} = useSceneTransition();

  const arriving = interpolate(entering, [0, 1], [0, 1], {easing: Easing.standard});
  const departing = interpolate(leaving, [0, 1], [0, 1], {easing: Easing.standard});

  const axis = direction === "up" || direction === "down" ? "Y" : "X";
  const sign = direction === "up" || direction === "left" ? 1 : -1;

  // Arriving: travel in from off-frame. Leaving: give way in the same
  // direction, and shrink slightly so the incoming scene reads as in front.
  const offset = arriving < 1 ? (1 - arriving) * 100 * sign : departing * 22 * sign;
  const scale = arriving < 1 ? 1 : 1 - departing * (1 - recede);
  const dim = arriving < 1 ? 0 : departing * 0.35;

  return (
    <Fill style={{transform: `translate${axis}(${offset}%) scale(${scale})`, transformOrigin: "center"}}>
      {children}
      {dim > 0 ? (
        <div aria-hidden style={{background: "#000", inset: 0, opacity: dim, position: "absolute"}} />
      ) : null}
    </Fill>
  );
};

import {useBrand} from "odori";
import {defineComponentPreview} from "odori/preview";
import {PushThrough} from "./push-through";

const Panel = ({label}: {label: string}) => {
  const brand = useBrand();
  return (
  <div
    style={{
      alignItems: "center",
      background: brand.colors.background,
      color: brand.colors.foreground,
      display: "flex",
      fontFamily: "ui-sans-serif, system-ui",
      fontSize: 88,
      inset: 0,
      justifyContent: "center",
      letterSpacing: "-0.04em",
      position: "absolute",
    }}
  >
    {label}
  </div>
  );
};

export default defineComponentPreview({
  title: "Push through",
  category: "Motion",
  description: "A scene arriving by pushing the last one out of frame.",
  component: PushThrough,
  canvas: {width: 1920, height: 1080, duration: "3s"},
  controls: {
    direction: {type: "select", defaultValue: "up", options: ["up", "down", "left", "right"]},
    recede: {type: "number", defaultValue: 0.94, min: 0.8, max: 1, step: 0.01},
  },
  examples: [
    {name: "Default", props: {children: <Panel label="Arriving" />}},
    {name: "Sideways", props: {direction: "left", children: <Panel label="Arriving" />}},
  ],
});

import {Scene, Video} from "odori";
import {PushThrough} from "../components/push-through/push-through";

<Video>
  <Scene id="push-through" duration="3s">
    <PushThrough
      direction="up"
      recede={0.94}
    />
  </Scene>
</Video>