{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "changelog", "title": "Changelog — Rolling Numbers", "description": "remocn demo composition \"Changelog — Rolling Numbers\" — installs the full Remotion composition. Generated with AI from the prompt in demos/changelog/prompt.md.", "dependencies": [ "@remotion/google-fonts", "@remotion/transitions", "culori", "remotion" ], "registryDependencies": [ "https://remocn.dev/r/backdrop.json", "https://remocn.dev/r/caret.json", "https://remocn.dev/r/remocn-ui.json", "https://remocn.dev/r/rolling-number.json" ], "files": [ { "path": "src/components/remocn/blur-reveal.tsx", "content": "\"use client\";\n\nimport { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface BlurRevealProps {\n text: string;\n className?: string;\n blur?: number;\n fontSize?: number;\n color?: string;\n fontWeight?: number;\n speed?: number;\n}\n\nexport function BlurReveal({\n text,\n className,\n blur = 10,\n fontSize = 48,\n color = \"#171717\",\n fontWeight = 600,\n speed = 1,\n}: BlurRevealProps) {\n const frame = useCurrentFrame() * speed;\n const { durationInFrames } = useVideoConfig();\n\n const opacity = interpolate(frame, [0, durationInFrames * 0.6], [0, 1], {\n extrapolateRight: \"clamp\",\n });\n\n const blurAmount = interpolate(\n frame,\n [0, durationInFrames * 0.6],\n [blur, 0],\n { extrapolateRight: \"clamp\" },\n );\n\n return (\n \n \n {text}\n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/blur-reveal.tsx" }, { "path": "src/components/remocn/typewriter.tsx", "content": "\"use client\";\n\nimport { Caret } from \"@/components/remocn/caret\";\nimport { useTypewriter } from \"@/lib/remocn-ui\";\n\nexport interface TypewriterProps {\n text: string;\n cursor?: boolean;\n charsPerSecond?: number;\n speed?: number;\n fontSize?: number;\n color?: string;\n cursorColor?: string;\n fontWeight?: number;\n className?: string;\n}\n\nexport function Typewriter({\n text,\n cursor = true,\n charsPerSecond = 22,\n speed = 1,\n fontSize = 48,\n color = \"#171717\",\n cursorColor = \"#171717\",\n fontWeight = 600,\n className,\n}: TypewriterProps) {\n const tw = useTypewriter(text, { cps: charsPerSecond, speed });\n\n return (\n \n \n {tw.text}\n {cursor && (\n \n )}\n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/typewriter.tsx" }, { "path": "src/demos/changelog/index.tsx", "content": "import React from \"react\";\nimport { AbsoluteFill, Sequence, Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { demoAsset } from \"@/lib/demo-assets\";\nimport {\n TransitionSeries,\n linearTiming,\n type TransitionPresentation,\n type TransitionPresentationComponentProps,\n} from \"@remotion/transitions\";\nimport { fade } from \"@remotion/transitions/fade\";\nimport { loadFont } from \"@remotion/google-fonts/Manrope\";\n\nimport { RemocnUIProvider } from \"@/lib/remocn-ui\";\nimport { Backdrop } from \"@/components/remocn/backdrop\";\nimport { BlurReveal } from \"@/components/remocn/blur-reveal\";\nimport { Typewriter } from \"@/components/remocn/typewriter\";\nimport { RollingNumber } from \"@/components/remocn/rolling-number\";\n\n// Bind Inter to the CSS variable the remocn components read for their font.\nconst { fontFamily } = loadFont(\"normal\", {\n subsets: [\"latin\"],\n weights: [\"400\", \"600\", \"700\"],\n});\n\n// ---------------------------------------------------------------------------\n// Scene timings (frames @ 30fps)\n// ---------------------------------------------------------------------------\nconst INTRO = 75;\nconst DEMO = 105;\nconst OUTRO = 70;\nconst T_FADE = 18;\nconst T_SLIDE = 18;\nconst T_GAP = 16; // kinetic transition between consecutive metric scenes\n\n// Shared \"vanish\" parameters: the intro disappears with these, and the outro\n// arrives by replaying the exact same motion in reverse.\nconst EXIT_RISE = 80;\nconst EXIT_BLUR = 16;\nconst EXIT_SCALE_DROP = 0.06;\n\nexport const CHANGELOG_DURATION =\n INTRO + DEMO * 4 + OUTRO - T_FADE - T_SLIDE - 3 * T_GAP;\n\n// ---------------------------------------------------------------------------\n// Intro: version badge (top-right, blurReveal) + animation label\n// (bottom-right, typewriter)\n// ---------------------------------------------------------------------------\nconst IntroScene: React.FC = () => {\n const frame = useCurrentFrame();\n\n // Noticeable exit during the scene's final frames: the whole intro lifts up,\n // blurs and fades away (rather than just dissolving). This plays out while\n // the cross-fade hands over to the demo, so the intro clearly \"leaves\".\n const exit = interpolate(frame, [INTRO - T_FADE, INTRO], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.in(Easing.cubic),\n });\n const exitStyle: React.CSSProperties = {\n opacity: 1 - exit,\n filter: exit > 0 ? `blur(${exit * EXIT_BLUR}px)` : undefined,\n transform: `translateY(${-exit * EXIT_RISE}px) scale(${\n 1 - exit * EXIT_SCALE_DROP\n })`,\n };\n\n return (\n \n {/* Top-right — \"Remocn v2.0.6\" revealed with a blur. */}\n \n {/* Window spans the whole scene so the text stays after revealing. */}\n \n \n \n \n\n {/* Bottom-right — \"Animation: Rolling Numbers\" typed into a pill badge. */}\n \n \n \n \n \n \n );\n};\n\n// ---------------------------------------------------------------------------\n// Demo: the rolling-number component, with a fading caption.\n// ---------------------------------------------------------------------------\nconst DemoContent: React.FC<{\n label: string;\n count: number;\n countFrames: number;\n}> = ({ label, count, countFrames }) => {\n const frame = useCurrentFrame();\n const { fps } = useVideoConfig();\n\n const captionOpacity = interpolate(frame, [0, 0.5 * fps], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.out(Easing.cubic),\n });\n\n return (\n \n {/* Caption sits above the full-screen, centred RollingNumber. */}\n \n {label}\n \n\n {/* Drive the count once the content begins. */}\n \n \n \n \n );\n};\n\nconst DemoScene: React.FC<{\n label: string;\n count: number;\n /** Hold the scene empty for this many frames before it starts playing. */\n startDelay?: number;\n}> = ({ label, count, startDelay = 0 }) => {\n return (\n \n \n \n \n \n );\n};\n\n// ---------------------------------------------------------------------------\n// Outro: the wordmark revealed with a blur.\n// ---------------------------------------------------------------------------\nconst OutroScene: React.FC = () => {\n return (\n \n \n \n \n \n );\n};\n\n// ---------------------------------------------------------------------------\n// Outro transition: the reverse of the intro's disappearance. The leaving demo\n// dissolves, and the outro arrives by replaying the intro vanish backwards —\n// descending from above, un-blurring and scaling into place.\n// ---------------------------------------------------------------------------\nconst BlurRisePresentation: React.FC<\n TransitionPresentationComponentProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\n const entering = presentationDirection === \"entering\";\n\n // Ease so the entrance settles softly (the inverse of the intro's\n // accelerating exit).\n const p = interpolate(presentationProgress, [0, 1], [0, 1], {\n easing: entering ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),\n });\n\n const style: React.CSSProperties = entering\n ? {\n opacity: p,\n filter: p < 1 ? `blur(${(1 - p) * EXIT_BLUR}px)` : undefined,\n transform: `translateY(${-(1 - p) * EXIT_RISE}px) scale(${\n 1 - (1 - p) * EXIT_SCALE_DROP\n })`,\n }\n : {\n // The outgoing demo simply dissolves so it doesn't fight the reveal.\n opacity: 1 - p,\n filter: p > 0 ? `blur(${p * EXIT_BLUR}px)` : undefined,\n };\n\n return {children};\n};\n\nconst blurRise = (): TransitionPresentation> => ({\n component: BlurRisePresentation,\n props: {},\n});\n\n// ---------------------------------------------------------------------------\n// Kinetic slide between metric scenes: the two scenes push each other along an\n// axis while a motion blur peaks mid-transition and the content dips in scale,\n// giving each hand-off a fast, energetic \"whoosh\" instead of a hard cut.\n// ---------------------------------------------------------------------------\ntype SlideDir = \"from-bottom\" | \"from-top\" | \"from-left\" | \"from-right\";\n\nconst KineticSlidePresentation: React.FC<\n TransitionPresentationComponentProps<{ direction: SlideDir }>\n> = ({ children, presentationProgress, presentationDirection, passedProps }) => {\n const { direction } = passedProps;\n const entering = presentationDirection === \"entering\";\n\n const p = interpolate(presentationProgress, [0, 1], [0, 1], {\n easing: Easing.inOut(Easing.cubic),\n });\n\n const axis = direction === \"from-left\" || direction === \"from-right\" ? \"x\" : \"y\";\n // Where the entering scene starts (off-screen), as a sign of 100%.\n const enterSign = direction === \"from-right\" || direction === \"from-bottom\" ? 1 : -1;\n\n // Entering travels start -> 0; exiting is pushed 0 -> opposite side.\n const offsetPct = entering ? enterSign * (1 - p) * 100 : -enterSign * p * 100;\n const translate =\n axis === \"x\" ? `translateX(${offsetPct}%)` : `translateY(${offsetPct}%)`;\n\n // Speed cue: blur + scale dip peak at the mid-point of the move.\n const motion = Math.sin(p * Math.PI);\n const blur = motion * 12;\n const scale = 1 - motion * 0.08;\n\n const style: React.CSSProperties = {\n transform: `${translate} scale(${scale})`,\n filter: blur > 0.1 ? `blur(${blur}px)` : undefined,\n };\n\n return {children};\n};\n\nconst kineticSlide = (\n direction: SlideDir,\n): TransitionPresentation<{ direction: SlideDir }> => ({\n component: KineticSlidePresentation,\n props: { direction },\n});\n\n// ---------------------------------------------------------------------------\n// Composition root\n// ---------------------------------------------------------------------------\nexport const ChangelogDemo: React.FC = () => {\n return (\n \n \n {/* Persistent image background for the whole video. */}\n \n {/* Subtle scrim to deepen contrast for the foreground text. */}\n \n\n \n \n \n \n\n \n\n \n {/* Wait out the cross-fade so the count starts after the intro leaves. */}\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n );\n};\n", "type": "registry:component", "target": "demos/changelog/index.tsx" }, { "path": "src/lib/demo-assets.ts", "content": "import { staticFile } from \"remotion\";\n\n// Demo assets are loaded from absolute URLs so a demo installed into another\n// project via the registry renders identically without copying this repo's\n// public/ directory. The same URLs are used on the site and in local renders,\n// which keeps a single code path (network access is required for rendering).\n//\n// Override with REMOTION_DEMO_ASSETS_BASE — only REMOTION_-prefixed env vars\n// reach Remotion compositions (next.config.js additionally inlines it for the\n// site's ). Two override forms:\n// - \"local\" — serve straight from this repo's public/ via staticFile();\n// works in Remotion Studio, CLI renders and the Next dev site. Set it in\n// the gitignored .env so previews never depend on pushed assets.\n// - any URL — e.g. a local static server (http://127.0.0.1:8123).\nexport const DEMO_ASSETS_BASE =\n process.env.REMOTION_DEMO_ASSETS_BASE ||\n \"https://raw.githubusercontent.com/Remocn/remocn-collections/main/public\";\n\nexport const demoAsset = (path: string): string => {\n const clean = path.replace(/^\\/+/, \"\");\n if (DEMO_ASSETS_BASE === \"local\") return staticFile(clean);\n return `${DEMO_ASSETS_BASE}/${clean}`;\n};\n", "type": "registry:component", "target": "lib/demo-assets.ts" }, { "path": "src/demos/changelog/prompt.md", "content": "\n\nMake a quick changelog video for remocn v2.0.6 that shows off the rolling-number animation we added. Keep it short and focused — just enough setup to explain what changelog this is, then let the rolling-number component actually demo itself counting up so people see the motion. Use remocn's own rolling-number component for the demo, standard remocn changelog styling.\n", "type": "registry:file", "target": "demos/changelog/prompt.md" } ], "docs": "Register the composition in your Remotion Root:\n\n import { ChangelogDemo } from \"@/demos/changelog\";\n \n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render changelog out/changelog.mp4", "type": "registry:block" }