4e: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"] 4f: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"] 50:T1906,"use client"; import { useId } from "react"; import { Easing, interpolate, useCurrentFrame } from "remotion"; export interface GooeyMorphProps { className?: string; width?: number; height?: number; barWidth?: number; barHeight?: number; barStartPositions?: [number, number][]; barRestPositions?: [number, number][]; barEntryFrames?: number[]; barTravelFrames?: number; word?: string; fontFamily?: string; fontSize?: number; tracking?: number; wordCenterX?: number; wordBaselineY?: number; blurRadius?: number; blurIterations?: number; alphaInputBlack?: number; alphaInputWhite?: number; morphStartFrame?: number; morphPeakFrame?: number; morphEndFrame?: number; displaceAmount?: number; displaceSize?: number; displaceComplexity?: number; displaceEvolutionPerSecond?: number; fill?: string; } function boxBlurSigma(radius: number, iterations: number): number { const w = 2 * radius + 1; return Math.sqrt((iterations * (w * w - 1)) / 12); } export function GooeyMorph({ className, width = 1920, height = 1080, barWidth = 213, barHeight = 181, barStartPositions = [ [956.9, 764.9], [297.5, 799.9], [738.2, 257.9], [1617.9, 302.9], ], barRestPositions = [ [634.9, 538.9], [852.5, 538.9], [1070.2, 538.9], [1287.9, 538.9], ], barEntryFrames = [8, 0, 4, 13], barTravelFrames = 30, word = "HELLO", fontFamily = "sans-serif", fontSize = 237, tracking = 0, wordCenterX = 961.4, wordBaselineY = 601.3, blurRadius = 6, blurIterations = 6, alphaInputBlack = 0.4588, alphaInputWhite = 0.5098, morphStartFrame = 50, morphPeakFrame = 63, morphEndFrame = 76, displaceAmount = 20, displaceSize = 19, displaceComplexity = 1, displaceEvolutionPerSecond = 50, fill = "#ffffff", }: GooeyMorphProps) { const frame = useCurrentFrame(); const filterId = useId(); const travelEase = Easing.bezier(0.88, 0.14, 0.12, 0.86); const morphWindow: [number, number, number] = [ morphStartFrame, morphPeakFrame, morphEndFrame, ]; const blur = interpolate(frame, morphWindow, [0, blurRadius, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.33, 0, 0.67, 1), }); const sigma = boxBlurSigma(blur, blurIterations); const displaceScale = interpolate( frame, morphWindow, [0, displaceAmount, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.33, 0, 0.67, 1), }, ); const barsOpacity = interpolate( frame, [morphStartFrame, morphEndFrame], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }, ); const wordOpacity = interpolate( frame, [morphStartFrame, morphEndFrame], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }, ); const slope = 1 / Math.max(alphaInputWhite - alphaInputBlack, 1e-6); const offset = -alphaInputBlack * slope; const evolution = (frame / 30) * displaceEvolutionPerSecond; return (

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/remocn/gooey-morph/index.tsx","content":"$50","type":"registry:component","target":"components/remocn/gooey-morph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]