63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T6fb9,// Capture Reveal · snapcn — https://snapcn.dev/docs/screens/capture-reveal "use client"; import { loadFont as loadDmSans } from "@remotion/google-fonts/DMSans"; import { type CSSProperties, type ReactNode, type RefObject, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { AbsoluteFill, continueRender, delayRender, Easing, getRemotionEnvironment, staticFile, useCurrentFrame, useVideoConfig, } from "remotion"; import { mixOklch, resolveFont, type SnapCnTheme, useSnapCnTheme, } from "@/lib/snap-cn-ui"; /** * A screenshot being taken: "Capturing selection… 79%" counts up in a toast * over a browser window, the window drops away and shrinks, the toast pops to * "Copied to clipboard." and a two-line headline rises out from behind the * window while the cursor glides up to the toast. * * ## Everything here was measured off a recording, frame by frame * * The numbers below are not taste. They were recovered from a 1.21 second, * 714 × 394, 24fps screen capture (29 frames) by fitting renders of each * element to it in BT.709 Y′CbCr, through the capture's own blur (σ 0.62px): * * - the window is ONE transform about a fixed origin: a 107.9px drop and a * 15.8% shrink on the same curve, `cubic-bezier(0.549, 0.228, 0.136, * 0.938)` over 19.16 frames (0.06px RMS), and then a slow exponential * shrink (τ 1.2s) that starts the frame the drop lands (0.03% RMS). * - the cursor glides on its own in-out curve over 19.5 frames and then * keeps drifting up — a hand that has not quite stopped (0.07px RMS). * - the "Copied" toast pops from 0.905 to 1 on `cubic-bezier(0.301, 1.056, * 0.803, 1)` over 22.8 frames. The "Capturing" toast is the same curve run * the other way: it presses in to 0.881 while the counter runs, which is * why the swap reads as a release. * - the headline does not scale and does not blur. It rises 22.6px on * `cubic-bezier(0.114, 1, 0.665, 1)` over 24 frames and fades in on a * faster curve of its own, from behind the window. * - the counter is linear: +3% a frame, 1% → 100%. * * The recording starts mid-count, so the 1.33s before its first frame — the * toast arriving and pressing in — is built from the same curves, not * measured. Everything after is the recording. * * ## The type is DM Sans, at the optical sizes the recording used * * Fingerprinted against thirty faces: DM Sans at opsz 40 is the closest free * match for the headline, and DM Sans at opsz 9 for the toast. The opsz axis is * pinned per element rather than left to `font-optical-sizing`, so a render at * any resolution draws the letterforms the recording has — a 1080p render * would otherwise give the toast its display cut. */ const { fontFamily: DM_SANS } = loadDmSans("normal", { weights: ["400"], subsets: ["latin"], }); /** DM Sans with its `opsz` axis, which the Google CSS API does not serve. */ const FACE = "Capture Reveal DM Sans"; const FACE_URL = "https://cdn.jsdelivr.net/npm/@fontsource-variable/dm-sans@5.3.0/files/dm-sans-latin-opsz-normal.woff2"; let faceLoad: Promise | null = null; function loadFace(): Promise { if (faceLoad) return faceLoad; if (typeof FontFace === "undefined") { faceLoad = Promise.resolve(); return faceLoad; } const face = new FontFace(FACE, `url(${FACE_URL}) format("woff2")`, { weight: "100 1000", }); document.fonts.add(face); // A face that fails to load leaves Google's DM Sans to paint — close, not exact. faceLoad = face.load().catch(() => undefined); return faceLoad; } /* ───────────────────────────────────────────────────────────────────────── The scene, in the reference's own 714 × 394 pixels and 24fps frames ───────────────────────────────────────────────────────────────────────── */ export const REF_W = 714; export const REF_H = 394; /** The recording's frame rate. Every time below is in its frames, "beats". */ export const BEATS = 24; /** Where the recording's first frame sits on this scene's clock, in beats. */ export const REF_AT = 32; /** The scene's length in beats: the recording's 29, a held tail, and the lead-in. */ export const SCENE_BEATS = 104; /** The page: a 45px grid, fainter across than down — measured per line. */ export const GRID = { x0: 12.85, dx: 45.379, y0: 16.44, dy: 45.245, /** Ink of one line, as a mix toward `foreground` at 1px. */ across: 0.0275, down: 0.0149, }; /** The window at rest: its box, top corners, and the shadow it casts. */ export const WIN = { x: 152.34, y: 106.57, w: 400.76, r: 9 }; export const WIN_SHADOW = { dy: 5.9, blur: 10.07, spread: -1.21, alpha: 0.207 }; /** The point the window scales about — its centre, on the measured 508.5 box. */ export const WIN_ORIGIN = [352.85, 361.33] as const; /** The drop: how far, and the shrink that rides the same curve. */ export const DROP = 107.905; export const SHRINK = 0.1581; export const DROP_AT = 0.154; export const DROP_FOR = 19.16; export const DROP_EASE = Easing.bezier(0.5492, 0.2279, 0.1361, 0.9381); /** The slow shrink after the drop lands. */ export const SETTLE = 0.0267; export const SETTLE_AT = 18.62; export const SETTLE_TAU = 28.94; /** The cursor's tip, where it glides, and the drift after. */ export const CURSOR_FROM = [573.334, 189.634] as const; export const CURSOR_BY = [-83.28, -111.49] as const; export const CURSOR_AT = -0.03; export const CURSOR_FOR = 19.5; export const CURSOR_EASE = Easing.bezier(0.54, 0.1, 0.41, 0.97); export const DRIFT = [-0.16, -0.43] as const; export const DRIFT_AT = 19; /** The arrowhead, from its tip: right point, notch, heel. Fitted outline. */ export const ARROW: readonly (readonly [number, number])[] = [ [0, 0], [14.779, 15.455], [5.855, 15.72], [0.051, 21.146], ]; export const ARROW_OUTLINE = 1.194; export const ARROW_SHADOW = { dx: -1.571, dy: 1.45, sigma: 0.716, alpha: 0.247, }; /** The headline: centre, the middle of its block, and the type. */ export const HEAD = { x: 353.64, mid: 188.619, pitch: 45.304, size: 45.93, weight: 367, track: 0.952, opsz: 40, /** Its ink, as a mix from `foreground` toward `mutedForeground`: #2b2b2b. */ ink: 0.29, }; export const RISE = 22.585; export const RISE_AT = 7.342; export const RISE_FOR = 23.972; export const RISE_EASE = Easing.bezier(0.114, 1, 0.665, 1); export const FADE_AT = 8; export const FADE_FOR = 8.322; export const FADE_EASE = Easing.bezier(0, 0.235, 0.166, 1); /** Both toasts share a surface and a type style. */ export const TOAST = { h: 49.357, r: 8.879, shadow: { dy: 0.012, blur: 14.549, spread: -2.397, alpha: 0.2512 }, size: 12.46, weight: 347, track: -0.192, opsz: 9, }; /** "Copied": centre, and its row laid out from the box's left edge. */ export const COPIED = { at: [357.7, 62.904] as const, check: { x: 21.371, dy: 0.005, r: 7.143, stroke: 1.124 }, /** The tick, from the circle's centre. */ tick: [ [-3.232, 0.238], [-0.916, 2.835], [3.193, -2.28], ] as const, text: { x: 38.469, base: 3.445 }, right: 18.464, }; /** * "Capturing": centre and scale at rest, and its row from the box's left edge. * The counter gets the width of "100%" whatever it reads, so the box does not * twitch as the digits change — with the same 10px either side of it. */ export const CAPTURING = { at: [353.221, 63.002] as const, scale: 0.8855, icon: { x: 20.957, dy: -1.09 }, text: { x: 39.039, base: 3.665 }, gap: 10.067, right: 10.067, percent: { base: 4.731 }, }; /** * The toast's mark: snapcn's, in its own 432 × 349.84 ink box, set 14px wide and * centred where the reference's app mark sat (its box ran x −5.5…8.9, y −5.9…8.7). * The recording carried another product's logo; a component ships ours. */ export const MARK = { path: "M43.9 1.41C27.2 5.51 13.4 16.31 5.9 31.11C-0.1 43.11 0 39.51 0 155.01C0 255.41 0.1 260.92 1.9 266.22C6.7 280.92 16.7 288.81 35 292.42C45 294.42 47.7 295.72 53.6 301.12C58.9 306.02 61 312.02 61 322.31C61.1 334.42 65.2 341.92 74.3 346.72L79.5 349.42L177.5 349.72C265.8 350.02 276.1 349.81 281.7 348.42C289.2 346.31 295 341.72 298.8 334.52L301.5 329.42L301.8 297.92C302 280.62 302 263.72 301.8 260.52L301.5 254.52L298.4 259.52C294.8 265.42 288.3 271.02 281.4 274.12L276.5 276.42L195.5 276.72C136.4 276.92 113 276.72 109 275.92C96.2 273.12 83.2 263.81 76.5 252.52C70 241.52 69.9 239.71 70.2 169.91L70.5 107.41L72.9 101.61C77.3 90.51 87.6 80.61 99.9 75.72L105.5 73.41L188.5 73.11C269.4 72.91 271.6 72.91 278 74.91C286 77.41 292.9 82.31 297.8 89.11L301.5 94.31L301.8 60.91C302.1 24.21 301.5 19.11 296.2 11.51C293.2 7.11 286.4 2.41 281 0.91C278.8 0.31 235.3-0.09 163.5 0.01C71.2 0.11 48.4 0.31 43.9 1.41ZM365 83.61C332.3 103.22 305.2 119.72 304.8 120.31C304.4 120.91 304.1 145.71 304.3 175.31L304.5 229.31L319 238.41C327 243.41 339.8 251.41 347.5 256.12C355.2 260.81 375.8 273.52 393.2 284.31C410.6 295.12 425.8 303.92 426.9 303.92C428 303.92 429.6 303.22 430.4 302.31C431.8 300.92 432 288.22 432 176.91C432 98.81 431.6 52.11 431 50.51C430.3 48.51 429.4 47.91 427.3 47.91C425.5 48.01 404.1 60.21 365 83.61Z", width: 432, height: 349.84, /** Rendered width, and the centre it sits on, in reference pixels. */ size: 14, cx: 1.7, cy: 1.4, }; /** * The toast's greys, as mixes of the theme's own: on the default light theme * they land on the recording's #474747 / #4f4f4f / #d0d0d0 / #c9c9c9. */ export const INK = { copied: 0.615, capturing: 0.705, percent: 0.6975, mark: 0.6525, }; /** The swap, and the pop both toasts ride. */ export const SWAP_AT = 7.5; export const POP_FROM = 0.9053; export const POP_FOR = 22.84; export const POP_EASE = Easing.bezier(0.3012, 1.056, 0.8028, 1.0); /** The lead-in nobody recorded: the toast arrives, then presses in. */ export const TOAST_IN = -26; export const PRESS_AT = -24; /** The counter: 1% at `TOAST_IN`, three a frame. */ export const COUNT_RATE = 3; const unit = (v: number) => Math.min(1, Math.max(0, v)); const ease = (f: (t: number) => number, at: number, dur: number, n: number) => f(unit((n - at) / dur)); /** The window's drop and scale at beat `n`. */ export function windowAt(n: number): { drop: number; scale: number } { const p = ease(DROP_EASE, DROP_AT, DROP_FOR, n); const settle = n > SETTLE_AT ? SETTLE * (1 - Math.exp(-(n - SETTLE_AT) / SETTLE_TAU)) : 0; return { drop: DROP * p, scale: 1 - SHRINK * p - settle }; } /** The cursor tip at beat `n`. */ export function cursorAt(n: number): [number, number] { const p = ease(CURSOR_EASE, CURSOR_AT, CURSOR_FOR, n); const d = Math.max(0, n - DRIFT_AT); return [ CURSOR_FROM[0] + CURSOR_BY[0] * p + DRIFT[0] * d, CURSOR_FROM[1] + CURSOR_BY[1] * p + DRIFT[1] * d, ]; } /** The headline's rise (px still to climb) and opacity at beat `n`. */ /** * The outro — not in the recording, built from its curves: once everything has * settled, the window slides out of the bottom of the frame on the drop's own * curve, the toast and cursor fade out on the headline's fade run backwards, * and the headline pushes forward to the middle of the frame. */ export const OUTRO_AT = 40; /** How far the window falls on its way out, past the frame's bottom edge. */ export const OUTRO_DROP = 240; /** The headline's push: scale, and the frame-middle it settles on. */ export const OUTRO_SCALE = 1.3; export const OUTRO_MID = REF_H / 2; /** Outro progress at beat `n`: the drop (window, headline) and the fade. */ export function outroAt(n: number): { p: number; fade: number } { return { p: ease(DROP_EASE, OUTRO_AT, DROP_FOR, n), fade: n < OUTRO_AT ? 1 : 1 - ease(FADE_EASE, OUTRO_AT, FADE_FOR, n), }; } export function headlineAt(n: number): { rise: number; opacity: number } { return { rise: RISE * (1 - ease(RISE_EASE, RISE_AT, RISE_FOR, n)), opacity: n < FADE_AT ? 0 : ease(FADE_EASE, FADE_AT, FADE_FOR, n), }; } /** The counter's reading at beat `n`. */ export function percentAt(n: number): number { // The epsilon is for the clock, not the count: 32/24·24 is 31.999… return Math.min(100, Math.floor(1 + COUNT_RATE * (n - TOAST_IN) + 1e-6)); } /** Which toast is up, and its scale and opacity at beat `n`. */ export function toastAt(n: number): { copied: boolean; scale: number; opacity: number; } { if (n >= SWAP_AT) { const p = ease(POP_EASE, SWAP_AT, POP_FOR, n); return { copied: true, scale: POP_FROM + (1 - POP_FROM) * p, opacity: 1 }; } const p = ease(POP_EASE, PRESS_AT, POP_FOR, n); return { copied: false, scale: 1 - (1 - CAPTURING.scale) * p, opacity: n < TOAST_IN ? 0 : ease(FADE_EASE, TOAST_IN, FADE_FOR, n), }; } /** * A line of type that can sit — and move — a fraction of a pixel. * * Chrome rounds a glyph run's baseline to a whole device pixel, in HTML and * SVG alike. The headline's rise ends in a long, slow crawl — a tenth of a * pixel a frame — that would otherwise hold still and then jump. So the line * is painted twice, one device pixel apart, both on whole pixels, cross-faded * by the fraction in between; `plus-lighter` adds the two copies' coverage, * so the blend is exactly linear. (Same trick as check-cycle.) */ function Line({ x, y, dev, style, children, }: { x: number; y: number; /** A baseline at y, in this group's units, lands on device row a·y + b. */ dev: { a: number; b: number }; style: CSSProperties; children: ReactNode; }) { // The Player scales the scene with CSS, so its pixel grid is not the one // `dev` describes — there a single copy is the honest choice. if (getRemotionEnvironment().isPlayer) return ( {children} ); const d = dev.a * y + dev.b; const lo = Math.floor(d); const f = d - lo; const at = (row: number) => (row + 1e-3 - dev.b) / dev.a; return ( {[ [lo, 1 - f], [lo + 1, f], ].map(([row, w]) => (w ?? 0) < 1e-3 ? null : ( {children} ), )} ); } /** * A root-relative asset is a `public/` file. Only the site's own Player serves * it at that path; Remotion Studio and a render know its URL through * `staticFile()` alone — so every environment but the Player rewrites it. */ function resolveSrc(src: string): string { const isLocal = src.startsWith("/") && !src.startsWith("//"); if (!isLocal || getRemotionEnvironment().isPlayer) return src; const base = staticFile("_").slice(0, -2); if (base && src.startsWith(`${base}/`)) return src; try { return staticFile(src.replace(/^\/+/, "")); } catch { return src; } } /** The screenshot's natural aspect, held behind the render until it is known. */ function useAspect(src: string): number | null { const [aspect, setAspect] = useState(null); const [handle] = useState(() => delayRender(`capture-reveal: ${src}`)); useEffect(() => { if (!src) { continueRender(handle); return; } const img = new Image(); img.onload = () => { setAspect(img.naturalHeight / Math.max(1, img.naturalWidth)); continueRender(handle); }; img.onerror = () => continueRender(handle); img.src = src; }, [src, handle]); return aspect; } /** Advance widths of the toast copy, measured in the real face once it loads. */ function useWidths( texts: string[], font: string, ): [number[] | null, RefObject] { const probe = useRef(null); const [widths, setWidths] = useState(null); const [handle] = useState(() => delayRender("capture-reveal: measure")); const key = texts.join("\u0000"); // biome-ignore lint/correctness/useExhaustiveDependencies: `key` is `texts` useLayoutEffect(() => { let live = true; loadFace() .then(() => document.fonts.ready) .then(() => { if (!live) return; const nodes = probe.current?.querySelectorAll("text") ?? []; setWidths(Array.from(nodes, (t) => t.getComputedTextLength())); continueRender(handle); }); return () => { live = false; }; }, [key, font, handle]); return [widths, probe]; } export interface CaptureRevealProps { /** The headline; `|` breaks it into lines. */ headline?: string; /** The toast while the counter runs. */ capturing?: string; /** The toast once it lands. */ copied?: string; /** The screenshot in the window: an image, laid in at full width, top first. */ src?: string; theme?: Partial; mode?: "light" | "dark"; fontFamily?: string; } export function CaptureReveal({ headline = "no more | keyframes", capturing = "Capturing selection...", copied = "Copied to clipboard.", src = "https://media.snapcn.dev/stills/capture-reveal-window.webp", theme, mode = "light", fontFamily = "Default", }: CaptureRevealProps) { const frame = useCurrentFrame(); const { fps, width, height } = useVideoConfig(); const t = useSnapCnTheme(theme, mode); const face = resolveFont(fontFamily) ?? `"${FACE}", ${DM_SANS}`; const id = useId().replace(/:/g, ""); const image = src ? resolveSrc(src) : ""; const aspect = useAspect(image); const [widths, probe] = useWidths([capturing, copied, "100%"], face); const n = (frame / fps) * BEATS - REF_AT; const u = Math.min(width / REF_W, height / REF_H); const left = (width - REF_W * u) / 2; const top = (height - REF_H * u) / 2; // A Remotion render's `scale` is the page's devicePixelRatio. const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1; /* — the page — */ const lineX = mixOklch(t.background, t.foreground, GRID.down); const lineY = mixOklch(t.background, t.foreground, GRID.across); const view = { x: -left / u, y: -top / u, w: width / u, h: height / u }; const cols: number[] = []; for ( let x = GRID.x0 + Math.floor((view.x - GRID.x0) / GRID.dx) * GRID.dx; x < view.x + view.w; x += GRID.dx ) cols.push(x); const rows: number[] = []; for ( let y = GRID.y0 + Math.floor((view.y - GRID.y0) / GRID.dy) * GRID.dy; y < view.y + view.h; y += GRID.dy ) rows.push(y); /* — the window — */ const win = windowAt(n); const [ox, oy] = WIN_ORIGIN; const winH = WIN.w * (aspect ?? 1.25); const out = outroAt(n); const winT = `translate(${ox} ${oy + win.drop + OUTRO_DROP * out.p}) scale(${win.scale}) translate(${-ox} ${-oy})`; /* — the headline — */ const lines = headline .split("|") .map((l) => l.trim()) .filter(Boolean); const head = headlineAt(n); const headType: CSSProperties = { fontFamily: face, fontSize: HEAD.size, fontWeight: HEAD.weight, fontVariationSettings: `"opsz" ${HEAD.opsz}`, letterSpacing: HEAD.track, fill: mixOklch(t.foreground, t.mutedForeground, HEAD.ink), textAnchor: "middle", // Unhinted outlines, so the sub-pixel `Line` blend moves the shape it drew. textRendering: "geometricPrecision", }; /* — the toast — */ const toast = toastAt(n); const [wCapturing, wCopied, wFull] = widths ?? [0, 0, 0]; const capText = CAPTURING.text.x + (wCapturing ?? 0) + CAPTURING.gap; const boxW = toast.copied ? COPIED.text.x + (wCopied ?? 0) + COPIED.right : capText + (wFull ?? 0) + CAPTURING.right; const [cx, cy] = toast.copied ? COPIED.at : CAPTURING.at; const boxL = cx - boxW / 2; const s = toast.scale; const toastType: CSSProperties = { fontFamily: face, fontSize: TOAST.size, fontWeight: TOAST.weight, fontVariationSettings: `"opsz" ${TOAST.opsz}`, letterSpacing: TOAST.track, textRendering: "geometricPrecision", }; // Toast group: y_stage = cy + s·(y − cy) → device row = a·y + b. const toastDev = { a: dpr * u * s, b: dpr * (top + u * cy * (1 - s)) }; // The push scales the block about its middle and carries that middle to the // frame's: y_stage = m + k·(y − mid), so the rows map as a·y + b. const k = 1 + (OUTRO_SCALE - 1) * out.p; const m = HEAD.mid + (OUTRO_MID - HEAD.mid) * out.p; const headT = `translate(${HEAD.x} ${m}) scale(${k}) translate(${-HEAD.x} ${-HEAD.mid})`; const headDev = { a: dpr * u * k, b: dpr * (top + u * (m - k * HEAD.mid)) }; const ts = TOAST.shadow; /* — the cursor — */ const [tx, ty] = cursorAt(n); const muted = t.mutedForeground; const inkCopied = mixOklch(t.foreground, muted, INK.copied); const inkCapturing = mixOklch(t.foreground, muted, INK.capturing); const inkPercent = mixOklch(muted, t.card, INK.percent); const inkMark = mixOklch(muted, t.card, INK.mark); const check = { x: boxL + COPIED.check.x, y: cy + COPIED.check.dy }; return ( ); } function Probe({ style, texts }: { style: CSSProperties; texts: string[] }) { return ( <> {texts.map((s, i) => ( {s} ))} ); } /** The selection mark: a back sheet, and a front sheet with a hole in it. */ function Mark({ x, y, ink }: { x: number; y: number; ink: string }) { const k = MARK.size / MARK.width; const left = x + MARK.cx - MARK.size / 2; const top = y + MARK.cy - (MARK.height * k) / 2; return ( ); } 62:["$","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/google-fonts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Fgoogle-fonts","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/google-fonts"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://snapcn.dev/r/snap-cn-ui.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/snap-cn/capture-reveal/index.tsx","content":"$65","type":"registry:component","target":"components/snap-cn/capture-reveal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]