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:T2645,"use client"; import type { ReactNode } from "react"; import { Easing, useCurrentFrame, useVideoConfig } from "remotion"; export interface CursorGravityProps { /** Custom content in a 300 × 88 reference-pixel slot. */ children?: ReactNode; label?: string; /** Strength of the elastic neck and recoil, 0–1.5. */ tension?: number; cursorColor?: string; color?: string; textColor?: string; backgroundColor?: string; speed?: number; className?: string; } export const cursorGravityLength = 151; const DURATION = 180; const finite = (value: number, fallback: number) => Number.isFinite(value) ? value : fallback; const clamp = (value: number) => Math.max(0, Math.min(1, value)); const mix = (a: number, b: number, p: number) => a + (b - a) * p; const progress = (frame: number, start: number, end: number) => clamp((frame - start) / (end - start)); const ease = Easing.bezier(0.65, 0, 0.35, 1); const pullEase = Easing.bezier(0.12, 0.8, 0.22, 1); /** Complete transition plus a one-second hold, in frames at 30 fps. */ export function getCursorGravityDuration({ speed = 1, }: Pick = {}) { const rate = Math.max(0, finite(speed, 1)); return rate === 0 ? 1 : Math.max(1, Math.ceil(DURATION / rate)); } /** A pull advances sharply, pauses under load, then recoils before the next tug. */ function pullDistance(t: number, strength: number) { const keys = [ [48, 0], [59, 116], [64, 116], [70, 116 - 30 * strength], [83, 292], [87, 292], [94, 292 - 42 * strength], [112, 772], ]; if (t <= keys[0][0]) return 0; for (let i = 1; i < keys.length; i++) { const [start, a] = keys[i - 1]; const [end, b] = keys[i]; if (t <= end) return mix(a, b, (b > a ? pullEase : ease)(progress(t, start, end))); } return 772; } /** Pure, resolution-aware pose. The right edge is the real composition boundary. */ export function getCursorGravityState( frame: number, { width = 1280, height = 720, tension = 1, }: { width?: number; height?: number; tension?: number } = {}, ) { const w = Math.max(1, finite(width, 1280)); const h = Math.max(1, finite(height, 720)); const unit = Math.min(w / 1280, h / 720); const t = Math.max(0, finite(frame, 0)); const strength = Math.max(0, Math.min(1.5, finite(tension, 1))); const centerY = h * 0.5; const finalLeft = w / 2 - 150 * unit; const finalRight = w / 2 + 150 * unit; const edgeTip = w - 24 * unit; const distance = pullDistance(t, strength) / 772; const extraction = distance * (edgeTip - (finalLeft - 14 * unit)); // The back of the button resists the first two tugs beyond the frame edge. const releaseTime = progress(t, 94, 132); // Closed-form damped spring stays continuous at fractional frames too. const springRelease = 1 - Math.exp(-7 * releaseTime) * (Math.cos(10 * releaseTime) + 0.7 * Math.sin(10 * releaseTime)); const release = mix(springRelease, 1, ease(progress(t, 122, 132))); const front = mix(w + 12 * unit, finalLeft, distance); const right = mix(w + 312 * unit - distance * 70 * unit, finalRight, release); const buttonWidth = Math.max(220 * unit, right - front); const strain = clamp((buttonWidth / (300 * unit) - 1) / 1.3) * strength; const wobble = t < 112 ? 0 : Math.sin((t - 112) * 0.48) * Math.exp(-(t - 112) * 0.14) * 5 * unit * strength * (1 - progress(t, 132, 140)); const y = centerY + wobble; const entry = ease(progress(t, 10, 39)); const approach = ease(progress(t, 39, 48)); const leave = ease(progress(t, 127, 151)); const holdTip = mix(w * 0.28, edgeTip - 80 * unit, entry); const pullTip = edgeTip - extraction; const cursorX = t < 48 ? mix(holdTip, edgeTip, approach) : mix(pullTip, w * 0.25, leave); const cursorY = t < 39 ? mix(h + 110 * unit, centerY + 70 * unit, entry) : t < 48 ? mix(centerY + 70 * unit, centerY, approach) : mix(centerY, h + 110 * unit, leave); // Triangle points toward the edge while pulling; turns toward its exit afterward. const cursorAngle = t < 48 ? mix(-32, 0, approach) : mix(0, 115, leave); const effortPulse = ( start: number, peak: number, hold: number, end: number, ) => ease(progress(t, start, peak)) * (1 - ease(progress(t, hold, end))); const cursorEffort = strength * (0.8 * effortPulse(48, 58, 64, 70) + effortPulse(70, 81, 87, 94) + 1.15 * effortPulse(94, 100, 104, 118)); return { frame: t, unit, front, right: front + buttonWidth, buttonWidth, centerY: y, strain, neckHeight: 88 * unit * (1 - 0.58 * strain), bodyHeight: 88 * unit * (1 - 0.17 * strain), cursorX, cursorY, cursorAngle, cursorEffort, attached: t >= 48 && t <= 121, tetherOpacity: progress(t, 46, 49) * (1 - progress(t, 115, 122)), }; } /** The tip stays fixed; the rear bows backward as each tug builds effort. */ export function getGravityCursorPath(effort: number) { const load = Math.max(0, Math.min(1.725, finite(effort, 0))); const shoulder = -62 - 30 * load; const rear = -70 - 40 * load; const halfHeight = 26 - 4 * load; return `M -5 -4 Q 3 0 -5 4 C -24 ${11.333 - load * 3} ${shoulder + 19} ${halfHeight - 7.333} ${shoulder} ${halfHeight} Q ${rear} ${halfHeight + 4} ${rear} ${halfHeight - 6} C ${rear} 4 ${rear - 18 * load} 8 ${rear - 18 * load} 0 C ${rear - 18 * load} -8 ${rear} -4 ${rear} ${-halfHeight + 6} Q ${rear} ${-halfHeight - 4} ${shoulder} ${-halfHeight} C ${shoulder + 19} ${-halfHeight + 7.333} -24 ${-11.333 + load * 3} -5 -4 Z`; } /** Rounded rectangle with a narrow leading edge: the pull deforms the surface. */ export function getGravityButtonPath( state: ReturnType, ) { const { buttonWidth: w, neckHeight, bodyHeight, unit } = state; const a = neckHeight / 2; const b = bodyHeight / 2; const r = Math.min(25 * unit, a * 0.9); const backRadius = 25 * unit; return `M ${r} ${-a} C ${w * 0.35} ${-a} ${w * 0.35} ${-b} ${w - backRadius} ${-b} Q ${w} ${-b} ${w} ${-b + backRadius} L ${w} ${b - backRadius} Q ${w} ${b} ${w - backRadius} ${b} C ${w * 0.35} ${b} ${w * 0.35} ${a} ${r} ${a} Q 0 ${a} 0 ${a - r} L 0 ${-a + r} Q 0 ${-a} ${r} ${-a} Z`; } export function CursorGravity({ children, label = "Create something", tension = 1, cursorColor = "#fffaf0", color = "#fffaf0", textColor = "#32153c", backgroundColor = "#a800b7", speed = 1, className, }: CursorGravityProps) { const frame = useCurrentFrame(); const { width, height, fps } = useVideoConfig(); const t = frame * (30 / fps) * Math.max(0, finite(speed, 1)); const state = getCursorGravityState(t, { width, height, tension }); const { unit } = state; // Content travels with the material, without stretching the lettering. const contentUnit = unit * Math.min(1, state.buttonWidth / (300 * unit)); const contentX = state.front + state.buttonWidth - 150 * contentUnit; return (

{children ?? ( <> {label} )}

); } 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/remocn/cursor-gravity/index.tsx","content":"$52","type":"registry:component","target":"components/remocn/cursor-gravity.tsx"}],"className":"h-[70svh] min-h-80"}]]}]