50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4bdf,"use client"; import type { TransitionPresentation, TransitionPresentationComponentProps, } from "@remotion/transitions"; import React from "react"; import { AbsoluteFill, continueRender, delayRender, Easing, interpolate, random, useVideoConfig, } from "remotion"; const clampOpts = { extrapolateLeft: "clamp" as const, extrapolateRight: "clamp" as const, }; // --------------------------------------------------------------------------- // ascii-dissolve — the frame becomes plain text. The outgoing scene fades as // a fullscreen field of monospace glyphs rises over it: a deterministic // noise field drives each cell through a density ramp (" .:-=+*#%@"), so the // cover reads as living ASCII. It holds fully opaque long enough to be READ // as text, then the cells drop back down the ramp to space while the // incoming scene resolves beneath. // // Text mode (enterText): the outgoing scene blurs out under the rising // field; the incoming headline is never previewed as ascii — the field // dissolves cell by cell (per-cell staggered, never a flat plane) while // the real text fades in over it. `enterStyle` picks what happens AROUND // the arriving text: // "fade" — plain: staggered dissolve everywhere, text fades in. // "clearing" — the dissolve order is biased by distance to the text: // cells near the headline vanish first, the field opens a // granular cavity around it. // "halo" — a smooth radial attenuation grows around the text: near // cells slide down the ramp into thin glyphs, a soft dark // well forms behind the headline. // "wave" — one density impulse rides outward from the text: cells // on the wavefront jump up the ramp for a beat, then the // front leaves cleared field behind it. // "focus" — the field defocuses: it blurs and dims while the sharp // text resolves — a depth-of-field handoff. // "lime-echo" — on landing, a sparse ring of accent-colored glyphs // flashes once around the headline and settles. // // Fully deterministic: per-cell jitter comes from remotion's seeded random, // the flow from fixed sinusoids over progress, the letterform masks from a // one-time offscreen-canvas sample of the loaded fonts. // --------------------------------------------------------------------------- export type AsciiTextSpec = { /** The incoming headline (used for timing and the zone styles). */ text: string; /** Must match the scene's rendered text exactly. */ fontSize: number; /** Concrete family list for canvas sampling (CSS vars won't resolve). */ fontFamily: string; /** Default 400. */ fontWeight?: number; /** Letter-spacing in em, if the scene's text carries one. Default 0. */ letterSpacingEm?: number; /** Glyph color of the ASCII letterform. Default ink. */ color?: string; /** Vertical offset from frame center, px. Default 0. */ offsetY?: number; }; export type AsciiEnterStyle = | "fade" | "clearing" | "halo" | "wave" | "focus" | "lime-echo"; export type AsciiDissolveProps = { /** Row height of one glyph cell in px. Default 22 (use ~14 in text mode). */ cellSize?: number; /** Glyph color. Default translucent ink. */ colorFront?: string; /** Canvas behind the glyphs during the hold. Default near-black. */ colorBack?: string; /** Optional second color for a sparse scattering of accent cells. */ accentColor?: string; /** Share of cells rendered in the accent color, 0..1. Default 0.05. */ accentDensity?: number; /** Density ramp, lightest → densest. Default " .:-=+*#%@". */ ramp?: string; /** Monospace stack for the field. */ fontFamily?: string; /** Text mode: the incoming headline (used for timing and as the zone). */ enterText?: AsciiTextSpec; /** What happens around the arriving text. Default "fade". */ enterStyle?: AsciiEnterStyle; /** Progress window over which the outgoing scene fades out. */ exitFade?: [number, number]; /** Progress window over which the incoming scene resolves. */ enterFade?: [number, number]; }; // Per-cell stagger: global window progress g plus jitter j → this cell's // local progress. spread controls how far cells drift apart. const stagger = (g: number, j: number, spread = 0.55) => Math.max(0, Math.min(1, (g - j * spread) / (1 - spread))); // The field's mono advance, measured at the size the

 renders.
const measureAdvance = (fontFamily: string, fontSize: number): number => {
  const fallback = fontSize * 0.6;
  if (typeof document === "undefined") return fallback;
  const ctx = document.createElement("canvas").getContext("2d");
  if (!ctx) return fallback;
  ctx.font = `400 ${fontSize}px ${fontFamily}`;
  const w = ctx.measureText("0").width;
  return w > 0 ? w : fallback;
};

// Sample the headline's letterforms: draw the text once on an offscreen
// canvas at 2× cell resolution and grade each cell by subsample coverage
// (0..4). Edge cells get mid-ramp glyphs, core cells the densest — the
// grading anti-aliases the letter contours, so strokes thinner than a cell
// still read as continuous letters.
const buildTextMask = (
  spec: AsciiTextSpec,
  width: number,
  height: number,
  cols: number,
  rows: number,
  advance: number,
  cellH: number,
): Uint8Array | null => {
  if (typeof document === "undefined") return null;
  const canvas = document.createElement("canvas");
  canvas.width = cols * 2;
  canvas.height = rows * 2;
  const ctx = canvas.getContext("2d", { willReadFrequently: true });
  if (!ctx) return null;
  ctx.setTransform(2 / advance, 0, 0, 2 / cellH, 0, 0);
  ctx.font = `${spec.fontWeight ?? 400} ${spec.fontSize}px ${spec.fontFamily}`;
  const spacing = (spec.letterSpacingEm ?? 0) * spec.fontSize;
  if (spacing !== 0) {
    (
      ctx as CanvasRenderingContext2D & { letterSpacing?: string }
    ).letterSpacing = `${spacing}px`;
  }
  ctx.textAlign = "center";
  // Canvas "middle" baseline is computed from the em square and lands
  // visibly ABOVE where a flex-centered DOM span puts the same text. Rebuild
  // the DOM's math instead: a flex-centered span (line-height normal) puts
  // its baseline at H/2 + (ascent - descent)/2, with ascent/descent taken
  // from the font's own metrics.
  ctx.textBaseline = "alphabetic";
  ctx.fillStyle = "#fff";
  const metrics = ctx.measureText(spec.text);
  const ascent = metrics.fontBoundingBoxAscent ?? spec.fontSize * 0.8;
  const descent = metrics.fontBoundingBoxDescent ?? spec.fontSize * 0.2;
  const baselineY = height / 2 + (ascent - descent) / 2 + (spec.offsetY ?? 0);
  ctx.fillText(spec.text, width / 2, baselineY);
  const data = ctx.getImageData(0, 0, cols * 2, rows * 2).data;
  const mask = new Uint8Array(cols * rows);
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let hits = 0;
      if (data[(y * 2 * cols * 2 + x * 2) * 4 + 3] > 100) hits++;
      if (data[(y * 2 * cols * 2 + x * 2 + 1) * 4 + 3] > 100) hits++;
      if (data[((y * 2 + 1) * cols * 2 + x * 2) * 4 + 3] > 100) hits++;
      if (data[((y * 2 + 1) * cols * 2 + x * 2 + 1) * 4 + 3] > 100) hits++;
      mask[y * cols + x] = hits;
    }
  }
  return mask;
};

const AsciiDissolvePresentation: React.FC<
  TransitionPresentationComponentProps
> = ({
  children,
  presentationProgress,
  presentationDirection,
  passedProps,
}) => {
  const {
    cellSize = 22,
    colorFront = "rgba(242,242,242,0.6)",
    colorBack = "#0d0d10",
    accentColor,
    accentDensity = 0.05,
    ramp = " .:-=+*#%@",
    fontFamily = "ui-monospace, SFMono-Regular, Menlo, monospace",
    enterText,
    enterStyle = "fade",
    exitFade,
    enterFade,
  } = passedProps;
  const { width, height } = useVideoConfig();
  const entering = presentationDirection === "entering";
  const p = presentationProgress;
  const textMode = enterText !== undefined;

  // The outgoing scene blurs out under the rising field.
  const exitWindow = exitFade ?? [0.14, 0.3];
  // The real text fades in while the field dissolves cell by cell.
  const enterWindow = enterFade ?? (textMode ? [0.6, 0.8] : [0.62, 0.8]);

  // The masks and the mono advance must be measured with the REAL webfonts.
  // The component can mount while they are still loading (a fallback font
  // would bake wrong metrics into the memoized masks and shift the letterform
  // off the scene's text) — so gate on document.fonts and hold the render.
  const [fontsReady, setFontsReady] = React.useState(
    () => typeof document === "undefined" || document.fonts.status === "loaded",
  );
  React.useEffect(() => {
    if (fontsReady || typeof document === "undefined") return;
    const handle = delayRender("ascii-dissolve: waiting for fonts");
    let alive = true;
    document.fonts.ready.then(() => {
      if (alive) setFontsReady(true);
      continueRender(handle);
    });
    return () => {
      alive = false;
      continueRender(handle);
    };
  }, [fontsReady]);

  const fontSize = cellSize * 0.86;
  // biome-ignore lint/correctness/useExhaustiveDependencies: fontsReady is an intentional extra dep — remeasure the mono advance once the real webfonts load
  const advance = React.useMemo(
    () => measureAdvance(fontFamily, fontSize),
    [fontFamily, fontSize, fontsReady],
  );
  const cols = Math.ceil(width / advance);
  const rows = Math.ceil(height / cellSize) + 1;

  // The zone styles need to know where the incoming text sits — a capsule
  // around its center line, derived from the letterform mask's bounds. The
  // mask itself is never displayed.
  const zoneStyles: AsciiEnterStyle[] = [
    "clearing",
    "halo",
    "wave",
    "lime-echo",
  ];
  const needZone = enterText !== undefined && zoneStyles.includes(enterStyle);
  const enterMask = React.useMemo(
    () =>
      enterText && needZone && fontsReady
        ? buildTextMask(enterText, width, height, cols, rows, advance, cellSize)
        : null,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
      enterText,
      needZone,
      fontsReady,
      width,
      height,
      cols,
      rows,
      advance,
      cellSize,
    ],
  );
  const enterZone = React.useMemo(() => {
    if (enterMask === null) return null;
    let minX = Infinity;
    let maxX = -Infinity;
    let minY = Infinity;
    let maxY = -Infinity;
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        if (enterMask[y * cols + x] > 0) {
          if (x < minX) minX = x;
          if (x > maxX) maxX = x;
          if (y < minY) minY = y;
          if (y > maxY) maxY = y;
        }
      }
    }
    if (maxX < minX) return null;
    return {
      x0: minX * advance,
      x1: (maxX + 1) * advance,
      cy: ((minY + maxY + 1) / 2) * cellSize,
      halfH: ((maxY - minY + 1) / 2) * cellSize,
    };
  }, [enterMask, cols, rows, advance, cellSize]);

  if (!entering) {
    const exitStyle: React.CSSProperties = {
      opacity: interpolate(p, exitWindow, [1, 0], clampOpts),
      filter: `blur(${interpolate(p, [exitWindow[0], exitWindow[1] + 0.06], [0, 8], clampOpts)}px)`,
    };
    return {children};
  }

  // -------------------------------------------------------------------------
  // Envelopes.
  // -------------------------------------------------------------------------
  // Generic mode keeps the original flat envelopes; text mode staggers the
  // rise and the dissolve per cell instead, so nothing moves as one plane.
  const coverage = textMode
    ? 1
    : interpolate(p, [0.06, 0.28, 0.6, 0.9], [0, 1, 1, 0], clampOpts);
  const fieldOpacity = textMode
    ? 1
    : interpolate(p, [0.04, 0.2, 0.66, 0.94], [0, 1, 1, 0], clampOpts);
  const panelOpacity = textMode
    ? interpolate(p, [0.06, 0.24, 0.55, 0.75], [0, 1, 1, 0], clampOpts)
    : fieldOpacity;

  // Text-mode phase clocks. The outgoing scene blurs out as the field
  // rises; the field boils, then dissolves cell by cell while the real
  // text fades in.
  const riseG = interpolate(p, [0.04, 0.3], [0, 1], clampOpts);
  const dissolveG = interpolate(
    p,
    enterStyle === "clearing" ? [0.52, 0.85] : [0.5, 0.82],
    [0, 1],
    clampOpts,
  );

  // Style clocks for the arriving text's surroundings.
  const haloG = interpolate(p, [0.52, 0.74], [0, 1], clampOpts);
  const waveT = interpolate(p, [0.56, 0.94], [0, 1], {
    ...clampOpts,
    easing: Easing.out(Easing.quad),
  });
  const waveR = waveT * 860; //  the impulse front, px from the text capsule
  const echoFlash = interpolate(p, [0.56, 0.64, 0.82], [0, 0.9, 0], clampOpts);
  const focusBlur = interpolate(p, [0.55, 0.9], [0, 4], clampOpts);
  const focusFade = interpolate(p, [0.62, 0.94], [1, 0], clampOpts);

  const cx = cols / 2;
  const cy = rows / 2;
  const t = p * 5;
  const rampLen = ramp.length;

  const mainRows: string[] = [];
  const accentRows: string[] = [];
  const echoRows: string[] = [];
  const fieldAlive = textMode ? p < 0.999 : fieldOpacity > 0.001;

  if (fieldAlive) {
    for (let y = 0; y < rows; y++) {
      let mainRow = "";
      let accentRow = "";
      let echoRow = "";
      for (let x = 0; x < cols; x++) {
        // A slow sinusoid flow plus per-cell jitter — organic, but textual.
        const base =
          0.5 +
          (Math.sin(x * 0.33 + t * 1.7) +
            Math.sin(y * 0.51 - t * 1.2) +
            Math.sin((x * 0.5 + y) * 0.24 + t * 0.9) +
            Math.sin(Math.hypot(x - cx, (y - cy) * 1.8) * 0.42 - t * 2.1)) /
            8;
        const jitter = random(`ascii-${x}-${y}`);

        // Distance to the incoming text's capsule, for the zone styles —
        // and the plain circular distance from its center, for the wave.
        let dist = Infinity;
        let distC = Infinity;
        let s = 0; // proximity, 1 at the text's center line → 0 far away
        if (enterZone !== null) {
          const px = (x + 0.5) * advance;
          const py = (y + 0.5) * cellSize;
          const nx = Math.min(Math.max(px, enterZone.x0), enterZone.x1);
          dist = Math.hypot(px - nx, py - enterZone.cy);
          distC = Math.hypot(
            px - (enterZone.x0 + enterZone.x1) / 2,
            py - enterZone.cy,
          );
          s = Math.max(0, 1 - dist / (enterZone.halfH + 64));
        }

        let cellCoverage: number;
        if (!textMode) {
          cellCoverage = coverage;
        } else if (enterStyle === "clearing" && enterZone !== null) {
          // Dissolve order biased by proximity: cells near the headline
          // vanish first, a granular cavity opens outward.
          const order = (1 - s) * 0.6 + random(`ascii-d-${x}-${y}`) * 0.4;
          const gone = Math.max(
            0,
            Math.min(1, (dissolveG * 1.35 - order) / 0.3),
          );
          cellCoverage = stagger(riseG, jitter) * (1 - gone);
        } else if (enterStyle === "wave" && enterZone !== null) {
          // The impulse front — a CIRCLE from the text's center — clears
          // the field behind it.
          const passed = Math.max(0, Math.min(1, (waveR - distC) / 55));
          cellCoverage = stagger(riseG, jitter) * (1 - passed);
        } else {
          cellCoverage =
            stagger(riseG, jitter) *
            (1 - stagger(dissolveG, random(`ascii-d-${x}-${y}`)));
        }

        let d = Math.max(
          0,
          Math.min(
            0.999,
            (base * 0.72 + jitter * 0.28) * cellCoverage * 1.2 - 0.08,
          ),
        );
        if (enterStyle === "halo" && enterZone !== null) {
          // A smooth radial attenuation: near cells slide down the ramp.
          d *= 1 - haloG * s;
        }
        if (enterStyle === "wave" && enterZone !== null && waveT > 0) {
          // Cells on the circular wavefront jump up the ramp for a beat.
          const bump = Math.exp(-(((distC - waveR) / 55) ** 2));
          d = Math.min(0.999, d + bump * 0.5);
        }
        const ch = ramp[Math.floor(d * rampLen)] ?? " ";
        const isAccent =
          accentColor !== undefined &&
          random(`ascii-a-${x}-${y}`) < accentDensity;
        mainRow += isAccent ? " " : ch;
        accentRow += isAccent ? ch : " ";

        // The lime echo: a sparse ring of accent glyphs around the headline.
        if (
          enterStyle === "lime-echo" &&
          enterZone !== null &&
          echoFlash > 0.01 &&
          dist > 8 &&
          dist < 84 &&
          ch !== " " &&
          random(`ascii-e-${x}-${y}`) < 0.5
        ) {
          echoRow += ch;
        } else {
          echoRow += " ";
        }
      }
      mainRows.push(mainRow);
      accentRows.push(accentRow);
      echoRows.push(echoRow);
    }
  }

  // The blur must hit exactly 0 by p = 1: the entering presentation stays
  // mounted at p = 1 for the whole scene, so any residue would soften the
  // incoming scene permanently. In text mode the incoming scene resolves
  // with NO transform at all — it must sit pixel-exact under the letterform.
  const enterBlur = textMode
    ? 0
    : interpolate(
        p,
        [enterWindow[0], Math.min(1, enterWindow[1] + 0.05)],
        [10, 0],
        clampOpts,
      );
  const childStyle: React.CSSProperties = textMode
    ? { opacity: interpolate(p, enterWindow, [0, 1], clampOpts) }
    : {
        opacity: interpolate(p, enterWindow, [0, 1], clampOpts),
        scale: `${interpolate(p, [enterWindow[0], 1], [1.04, 1], {
          ...clampOpts,
          easing: Easing.out(Easing.cubic),
        })}`,
        filter: enterBlur > 0.01 ? `blur(${enterBlur}px)` : undefined,
      };

  const preStyle: React.CSSProperties = {
    margin: 0,
    position: "absolute",
    inset: 0,
    overflow: "hidden",
    whiteSpace: "pre",
    fontFamily,
    fontSize,
    lineHeight: `${cellSize}px`,
    color: colorFront,
  };

  const renderLayer = (
    layerRows: string[],
    color: string,
    layerOpacity: number,
  ) =>
    layerOpacity > 0.001 ? (
              {layerRows.join("\n")}
      
    ) : null;

  return (
    
      {children}
      {fieldAlive ? (
        
          
           0.01 ? `blur(${focusBlur}px)` : undefined,
                  }
                : undefined
            }
          >
            {renderLayer(mainRows, colorFront, fieldOpacity)}
            {accentColor !== undefined
              ? renderLayer(accentRows, accentColor, fieldOpacity)
              : null}
          
          {enterStyle === "lime-echo"
            ? renderLayer(echoRows, accentColor ?? "#C3E88D", echoFlash)
            : null}
        
      ) : null}
    
  );
};

export function asciiDissolve(
  props: AsciiDissolveProps = {},
): TransitionPresentation {
  return {
    component: AsciiDissolvePresentation,
    props,
  };
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}],["$","li","@remotion/transitions",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Ftransitions","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@remotion/transitions"}]]}]}]]}],["$","$L50",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/remocn/ascii-dissolve/index.tsx","content":"$52","type":"registry:component","target":"components/remocn/ascii-dissolve.tsx"}],"className":"h-[70svh] min-h-80"}]]}]