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:T32d7,// Logo Assemble · snapcn — https://snapcn.dev/docs/logos/logo-assemble "use client"; import { Easing, getRemotionEnvironment, Img, interpolate, staticFile, useCurrentFrame, useVideoConfig, } from "remotion"; import { Item, mixOklch, resolveFont, type SnapCnTheme, useSnapCnTheme, withAlpha, } from "@/lib/snap-cn-ui"; /** * A logo build: a single ring of image cards revolves around the centre, then * spins inward and vanishes into the middle — giving birth to a simple logo and * the brand name. One circle, no colour on the mark; the images do the motion. */ export interface LogoAssembleProps { /** The logo mark (kept simple/monochrome — it sits on the dark backdrop). */ logoSrc?: string; /** Brand name that appears to the right of the logo. */ brandName?: string; /** Text held in the middle of the ring while the images revolve (\n for lines). */ middleText?: string; /** Image URLs for the ring, cycled around the circle. */ images?: string[]; /** How many cards ride the ring. */ count?: number; /** Backdrop color. Overrides the design system's `background`. */ background?: string; speed?: number; className?: string; /** Design-system token overrides. */ theme?: Partial; /** * Defaults to `"dark"`: the shipped `logoSrc` is a white mark, so the stage * has to be dark for it to read. Pass `"light"` with a dark logo asset. */ mode?: "light" | "dark"; /** * The face this scene paints its words in — a label from `fonts.ts` * ("Inter", "Space Grotesk", "Instrument Serif") or a CSS family you have * loaded yourself. Unset, the scene keeps the face it was designed around. * * Overrides `theme.fontFamily`, which is how a brand kit re-skins a whole * timeline from one value. */ fontFamily?: string; } const FONT_FAMILY = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'; /** Sample images. Absolute, because a root-relative default becomes * `staticFile()` in a render and 404s in the project this file was just * copied into. Pass your own — root-relative or remote, both resolve. */ const DEFAULT_IMAGES = [ "https://snapcn.dev/showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp", "https://snapcn.dev/showcase-assets/5e5305b05bd405a0d89570725434099e.webp", "https://snapcn.dev/showcase-assets/767d99bb371a54d0d36751e8cecae43c.jpg", "https://snapcn.dev/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg", "https://snapcn.dev/showcase-assets/937438c560ada1c83317f2c11b3454b0.jpg", "https://snapcn.dev/showcase-assets/98f89cb9994f5c382ab964062c4039db.jpg", "https://snapcn.dev/showcase-assets/b25b82db2892efff9be3204e860d30ee.jpg", "https://snapcn.dev/showcase-assets/c9ebc6337aa2268ac4b357f9cb1ac547.jpg", ]; // ─── Timeline (frames @ 30fps; ~3.6s) ────────────────────────────────────────── /** The ring spins inward from here (radius → 0, cards vanish). */ export const CONTRACT_START = 50; export const CONTRACT_END = 66; /** The middle text fades out as the ring collapses. */ export const MIDDLE_OUT = 52; /** The logo is born at the centre, then slides left to make room for the name. */ export const LOGO_IN = 58; export const LOGO_SHIFT_START = 74; export const LOGO_SHIFT_END = 90; /** The name reveals in step with the slide — the logo moving and the name * coming happen simultaneously, not one after the other. */ export const NAME_IN = LOGO_SHIFT_START; /** Base angular speed of the ring (radians / frame). */ export const ORBIT_SPEED = 0.1; /** Extra spin added as the ring drains inward — the dr, water-down-the-plughole. */ export const DRAIN_SPIN = Math.PI * 1.1; const CARD_RATIO = 1.22; // portrait cards export const EASE = Easing.bezier(0.2, 0.6, 0.35, 1); /** Accelerate into the centre — the collapse, not a drift. */ export const EASE_IN = Easing.bezier(0.5, 0, 0.75, 0.4); const CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const; /** 0 while orbiting, 1 when fully drained to the centre. */ export function contractProgress(frame: number): number { return interpolate(frame, [CONTRACT_START, CONTRACT_END], [0, 1], { ...CLAMP, easing: EASE_IN, }); } /** * The ring's rotation (radians). Steady while orbiting, then a burst of extra * spin as it drains inward. */ export function orbitAngle(frame: number): number { return frame * ORBIT_SPEED + contractProgress(frame) * DRAIN_SPIN; } /** Radius multiplier: 1 while orbiting, → 0 as the ring drains in. */ export function ringScale(frame: number): number { return 1 - contractProgress(frame); } /** Card scale: full size on the ring, shrinking as it pulls to the centre. */ export function cardScale(frame: number): number { return 1 - 0.66 * contractProgress(frame); } /** Card opacity: solid on the ring, vanishing near the end of the drain. */ export function cardOpacity(frame: number): number { return interpolate(frame, [CONTRACT_END - 8, CONTRACT_END], [1, 0], CLAMP); } /** Center text: fades in early, holds through the orbit, out as the ring drains. */ export function middleTextOpacity(frame: number): number { return interpolate( frame, [6, 16, MIDDLE_OUT - 6, MIDDLE_OUT], [0, 1, 1, 0], CLAMP, ); } export interface LogoPose { opacity: number; scale: number; } /** The logo is born at the centre — a small overshoot as the ring vanishes. */ export function logoPose(frame: number): LogoPose { return { opacity: interpolate(frame, [LOGO_IN, LOGO_IN + 8], [0, 1], CLAMP), scale: interpolate( frame, [LOGO_IN, LOGO_IN + 10, LOGO_IN + 18], [0.6, 1.05, 1], { ...CLAMP, easing: EASE }, ), }; } /** Fraction the logo has slid from centre toward its left resting spot (0 → 1). */ export function logoShift(frame: number): number { return interpolate(frame, [LOGO_SHIFT_START, LOGO_SHIFT_END], [0, 1], { ...CLAMP, easing: EASE, }); } export interface NamePose { opacity: number; dx: number; } /** Brand name: fades and slides in from the right, after the logo has moved. */ export function namePose(frame: number): NamePose { return { opacity: interpolate(frame, [NAME_IN, NAME_IN + 10], [0, 1], CLAMP), dx: interpolate(frame, [NAME_IN, NAME_IN + 12], [18, 0], { ...CLAMP, easing: EASE, }), }; } /** Rewrite root-relative assets through staticFile everywhere but the Player. */ function resolveSrc(src: string): string { const isLocal = src.startsWith("/") && !src.startsWith("//"); if (!isLocal || getRemotionEnvironment().isPlayer) return src; // A value that already came out of staticFile() carries the static base // (`/static-/…`); running it through again would prefix it twice. const base = staticFile("_").slice(0, -2); if (base && src.startsWith(`${base}/`)) return src; try { return staticFile(src.replace(/^\/+/, "")); } catch { return src; } } export function LogoAssemble({ logoSrc = "https://snapcn.dev/logo/snapcn-white.png", brandName = "snapcn", middleText = "Cinematic components\nfor React", images = DEFAULT_IMAGES, count = 10, background, speed = 1, className, theme, mode, fontFamily, }: LogoAssembleProps) { const frame = useCurrentFrame() * speed; const { width, height } = useVideoConfig(); const t = useSnapCnTheme(theme, mode ?? "dark"); const face = resolveFont(fontFamily ?? t.fontFamily) ?? FONT_FAMILY; const stage = background ?? t.background; // A shadow is cast in the dark direction whatever the mode, so it is walked // from the stage toward black — not toward `foreground`, which is near-white // in dark mode and would light the card from below instead of grounding it. const cardShadow = withAlpha(mixOklch(stage, "#000", 0.75), 0.4); const cx = width / 2; const cy = height / 2; const short = Math.min(width, height); const isRendering = getRemotionEnvironment().isRendering; const R = short * 0.36; // Smaller than the arc between cards, so the ring has clear gaps. const cardW = Math.round(short * 0.15); const cardH = cardW * CARD_RATIO; const a = orbitAngle(frame); const rs = ringScale(frame); const cScale = cardScale(frame); const cOpacity = cardOpacity(frame); const middleOp = middleTextOpacity(frame); const logo = logoPose(frame); const shift = logoShift(frame); const name = namePose(frame); const n = Math.max(1, Math.floor(count)); // Logo slides from the centre to a left resting spot; the name sits to its right. const logoSize = Math.round(short * 0.125); const gap = Math.round(short * 0.035); const restX = short * 0.13; // how far left the logo settles const logoCX = cx - restX * shift; const nameLeft = cx - restX + logoSize / 2 + gap; const nameSize = Math.round(short * 0.055); return (

{/* The ring of images */} {cOpacity > 0 && Array.from({ length: n }, (_, i) => { const theta = (i / n) * Math.PI * 2 + a; const x = cx + Math.cos(theta) * R * rs; const y = cy + Math.sin(theta) * R * rs; // The ring cycles `images`, so with more cards than images one // image rides it twice. Studio outlines its first card; the others // are only pictures of it. const k = i % images.length; // Cards stay upright and just revolve around the centre — no tangent // spin, so no image ever tips onto its side. return (

); })} {/* Center text, held in the ring while the images revolve */} {middleOp > 0 && middleText && (

{middleText}

)} {/* Simple logo, born at the centre, then sliding left */} {logo.opacity > 0 && (

)} {/* Brand name, revealed to the right of the settled logo */} {name.opacity > 0 && (

{brandName}

)}

); } 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"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://snapcn.dev/r/snap-cn-ui.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/snap-cn/logo-assemble/index.tsx","content":"$65","type":"registry:component","target":"components/snap-cn/logo-assemble.tsx"}],"className":"h-[70svh] min-h-80"}]]}]