{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "remocn", "homepage": "https://remocn.dev", "items": [ { "name": "blur-reveal", "type": "registry:component", "title": "Blur Reveal", "description": "Text fades in from a heavy blur into sharp focus.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/blur-reveal/index.tsx", "type": "registry:component", "target": "components/remocn/blur-reveal.tsx" } ] }, { "name": "typewriter", "type": "registry:component", "title": "Typewriter", "description": "Character-by-character text reveal with a deterministic blinking cursor.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/typewriter/index.tsx", "type": "registry:component", "target": "components/remocn/typewriter.tsx" } ] }, { "name": "inline-highlight", "type": "registry:component", "title": "Inline Highlight", "description": "Animates one word inside a sentence from a base color to a brand color.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/inline-highlight/index.tsx", "type": "registry:component", "target": "components/remocn/inline-highlight.tsx" } ] }, { "name": "text-fade-replace", "type": "registry:component", "title": "Text Fade Replace", "description": "Cross-fades between two strings on the same line without layout shift.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/text-fade-replace/index.tsx", "type": "registry:component", "target": "components/remocn/text-fade-replace.tsx" } ] }, { "name": "strikethrough-replace", "type": "registry:component", "title": "Strikethrough Replace", "description": "Draws a strike line across old text then reveals new text in its place.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/strikethrough-replace/index.tsx", "type": "registry:component", "target": "components/remocn/strikethrough-replace.tsx" } ] }, { "name": "staggered-fade-up", "type": "registry:component", "title": "Staggered Fade Up", "description": "Words fade in and slide up one after another with a configurable delay.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/staggered-fade-up/index.tsx", "type": "registry:component", "target": "components/remocn/staggered-fade-up.tsx" } ] }, { "name": "masked-slide-reveal", "type": "registry:component", "title": "Masked Slide Reveal", "description": "Words slide up out of an invisible horizontal mask, one after another.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/masked-slide-reveal/index.tsx", "type": "registry:component", "target": "components/remocn/masked-slide-reveal.tsx" } ] }, { "name": "tracking-in", "type": "registry:component", "title": "Tracking In", "description": "Letter-spacing collapses and blur clears with a springy motion.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/tracking-in/index.tsx", "type": "registry:component", "target": "components/remocn/tracking-in.tsx" } ] }, { "name": "shimmer-sweep", "type": "registry:component", "title": "Shimmer Sweep", "description": "Light shine sweeps across muted text via background-clip:text.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/shimmer-sweep/index.tsx", "type": "registry:component", "target": "components/remocn/shimmer-sweep.tsx" } ] }, { "name": "marker-highlight", "type": "registry:component", "title": "Marker Highlight", "description": "Colored marker block draws behind a phrase as the text color shifts.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/marker-highlight/index.tsx", "type": "registry:component", "target": "components/remocn/marker-highlight.tsx" } ] }, { "name": "slot-machine-roll", "type": "registry:component", "title": "Slot Machine Roll", "description": "Vertical reel scrolls characters from one value to another.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/slot-machine-roll/index.tsx", "type": "registry:component", "target": "components/remocn/slot-machine-roll.tsx" } ] }, { "name": "matrix-decode", "type": "registry:component", "title": "Matrix Decode", "description": "Random scramble resolves left-to-right into the target text.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/matrix-decode/index.tsx", "type": "registry:component", "target": "components/remocn/matrix-decode.tsx" } ] }, { "name": "rgb-glitch-text", "type": "registry:component", "title": "RGB Glitch Text", "description": "Three RGB-offset text copies jitter for a brief glitch window.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/rgb-glitch-text/index.tsx", "type": "registry:component", "target": "components/remocn/rgb-glitch-text.tsx" } ] }, { "name": "infinite-marquee", "type": "registry:component", "title": "Infinite Marquee", "description": "Seamlessly looping horizontal text strip with optional stroke style.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/infinite-marquee/index.tsx", "type": "registry:component", "target": "components/remocn/infinite-marquee.tsx" } ] }, { "name": "mesh-gradient-bg", "type": "registry:component", "title": "Mesh Gradient Background", "description": "Living gradient with amorphous color blobs slowly drifting across the frame.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/mesh-gradient-bg/index.tsx", "type": "registry:component", "target": "components/remocn/mesh-gradient-bg.tsx" } ] }, { "name": "dynamic-grid", "type": "registry:component", "title": "Dynamic Grid", "description": "Subtle moving grid background with configurable cell size and direction.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/dynamic-grid/index.tsx", "type": "registry:component", "target": "components/remocn/dynamic-grid.tsx" } ] }, { "name": "spring-pop-in", "type": "registry:component", "title": "Spring Pop In", "description": "Elastic spring-driven scale-in wrapper for any child element.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/spring-pop-in/index.tsx", "type": "registry:component", "target": "components/remocn/spring-pop-in.tsx" } ] }, { "name": "simulated-cursor", "type": "registry:component", "title": "Simulated Cursor", "description": "Animated mouse cursor moving between waypoints with click ripple feedback.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/simulated-cursor/index.tsx", "type": "registry:component", "target": "components/remocn/simulated-cursor.tsx" } ] }, { "name": "pulsing-indicator", "type": "registry:component", "title": "Pulsing Indicator", "description": "Continuous pulsing dot with ping ring for loading or live states.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/pulsing-indicator/index.tsx", "type": "registry:component", "target": "components/remocn/pulsing-indicator.tsx" } ] }, { "name": "directional-wipe", "type": "registry:component", "title": "Directional Wipe", "description": "Slide one scene in while pushing the other out.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/directional-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/directional-wipe.tsx" } ] }, { "name": "device-mockup-zoom", "type": "registry:component", "title": "Device Mockup Zoom", "description": "Pull back from a UI to reveal it inside a device frame.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/device-mockup-zoom/index.tsx", "type": "registry:component", "target": "components/remocn/device-mockup-zoom.tsx" } ] }, { "name": "zoom-through-transition", "type": "registry:component", "title": "Zoom Through Transition", "description": "Aggressively scale into the center of an element.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/zoom-through-transition/index.tsx", "type": "registry:component", "target": "components/remocn/zoom-through-transition.tsx" } ] }, { "name": "staggered-bento-grid", "type": "registry:component", "title": "Staggered Bento Grid", "description": "Cards pop into a bento grid one after another with a spring.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/staggered-bento-grid/index.tsx", "type": "registry:component", "target": "components/remocn/staggered-bento-grid.tsx" } ] }, { "name": "chat-to-preview-layout", "type": "registry:component", "title": "Chat to Preview Layout", "description": "Two-column layout where chat shrinks and preview expands.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/chat-to-preview-layout/index.tsx", "type": "registry:component", "target": "components/remocn/chat-to-preview-layout.tsx" } ] }, { "name": "bounding-box-selector", "type": "registry:component", "title": "Bounding Box Selector", "description": "Figma-style selection rectangle appears around any element.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/bounding-box-selector/index.tsx", "type": "registry:component", "target": "components/remocn/bounding-box-selector.tsx" } ] }, { "name": "animated-line-chart", "type": "registry:component", "title": "Animated Line Chart", "description": "Line chart whose SVG path draws on from left to right with a leading dot.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/animated-line-chart/index.tsx", "type": "registry:component", "target": "components/remocn/animated-line-chart.tsx" } ] }, { "name": "animated-bar-chart", "type": "registry:component", "title": "Animated Bar Chart", "description": "Bars spring up from the baseline in a staggered cascade.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/animated-bar-chart/index.tsx", "type": "registry:component", "target": "components/remocn/animated-bar-chart.tsx" } ] }, { "name": "terminal-simulator", "type": "registry:component", "title": "Terminal Simulator", "description": "Terminal window that types out commands and rolls old lines off the top.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/terminal-simulator/index.tsx", "type": "registry:component", "target": "components/remocn/terminal-simulator.tsx" } ] }, { "name": "code-diff-wipe", "type": "registry:component", "title": "Code Diff Wipe", "description": "Before/after code reveal via clip-path wipe with a handle marker.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/code-diff-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/code-diff-wipe.tsx" } ] }, { "name": "toast-notification", "type": "registry:component", "title": "Toast Notification", "description": "System-style toast pops in, holds, then slides out.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/toast-notification/index.tsx", "type": "registry:component", "target": "components/remocn/toast-notification.tsx" } ] }, { "name": "drag-and-drop-flow", "type": "registry:component", "title": "Drag and Drop Flow", "description": "Simulated file drag into a dropzone followed by upload progress.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/drag-and-drop-flow/index.tsx", "type": "registry:component", "target": "components/remocn/drag-and-drop-flow.tsx" } ] }, { "name": "progress-steps", "type": "registry:component", "title": "Progress Steps", "description": "Multi-step pipeline with sequentially activating nodes and filling lines.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/progress-steps/index.tsx", "type": "registry:component", "target": "components/remocn/progress-steps.tsx" } ] }, { "name": "morphing-modal", "type": "registry:component", "title": "Morphing Modal", "description": "A bento card lifts off the grid and blooms into a full-screen modal driven by a single heavy spring.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/morphing-modal/index.tsx", "type": "registry:component", "target": "components/remocn/morphing-modal.tsx" } ] }, { "name": "data-flow-pipes", "type": "registry:component", "title": "Data Flow Pipes", "description": "Glowing data packets travel along SVG bezier pipes between system nodes, leaving fading trails.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/data-flow-pipes/index.tsx", "type": "registry:component", "target": "components/remocn/data-flow-pipes.tsx" } ] }, { "name": "cursor-flow", "type": "registry:component", "title": "Cursor Flow", "description": "A realistic mouse that arcs along cubic Bezier paths, pauses, and clicks targets that dip in response.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/cursor-flow/index.tsx", "type": "registry:component", "target": "components/remocn/cursor-flow.tsx" } ] }, { "name": "code-accordion", "type": "registry:component", "title": "Code Accordion", "description": "A code window that springs a range of lines closed and replaces them with a \"N lines collapsed\" placeholder.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/code-accordion/index.tsx", "type": "registry:component", "target": "components/remocn/code-accordion.tsx" } ] }, { "name": "glass-code-block", "type": "registry:component", "title": "Glass Code Block", "description": "A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/glass-code-block/index.tsx", "type": "registry:component", "target": "components/remocn/glass-code-block.tsx" } ] }, { "name": "spotlight-card", "type": "registry:component", "title": "Spotlight Card", "description": "A card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/spotlight-card/index.tsx", "type": "registry:component", "target": "components/remocn/spotlight-card.tsx" } ] }, { "name": "perspective-marquee", "type": "registry:component", "title": "Perspective Marquee", "description": "A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/perspective-marquee/index.tsx", "type": "registry:component", "target": "components/remocn/perspective-marquee.tsx" } ] }, { "name": "success-confetti", "type": "registry:component", "title": "Success Confetti", "description": "Deterministic seeded confetti burst with optional headline.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/success-confetti/index.tsx", "type": "registry:component", "target": "components/remocn/success-confetti.tsx" } ] }, { "name": "frosted-glass-wipe", "type": "registry:component", "title": "Frosted Glass Wipe", "description": "Elegant scene transition through a sliding pane of frosted glass.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/frosted-glass-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/frosted-glass-wipe.tsx" } ] }, { "name": "kinetic-type-mask", "type": "registry:component", "title": "Kinetic Type Mask", "description": "Use giant typography as a window into the next scene.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/kinetic-type-mask/index.tsx", "type": "registry:component", "target": "components/remocn/kinetic-type-mask.tsx" } ] }, { "name": "spatial-push", "type": "registry:component", "title": "Spatial Push", "description": "A new scene physically presses the old one back into the frame.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/spatial-push/index.tsx", "type": "registry:component", "target": "components/remocn/spatial-push.tsx" } ] }, { "name": "grid-pixelate-wipe", "type": "registry:component", "title": "Grid Pixelate Wipe", "description": "Dissolve from one scene to the next through a deterministic grid of mask cells.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/grid-pixelate-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/grid-pixelate-wipe.tsx" } ] }, { "name": "chromatic-aberration-wipe", "type": "registry:component", "title": "Chromatic Aberration Wipe", "description": "An ultra-fast slide transition with an RGB glitch on the peak frames.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/chromatic-aberration-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/chromatic-aberration-wipe.tsx" } ] }, { "name": "hero-device-assemble", "type": "registry:component", "title": "Hero Device Assemble", "description": "Floating device layers spring together into a laptop or phone mockup, then the screen wakes with a shimmer.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/hero-device-assemble/index.tsx", "type": "registry:component", "target": "components/remocn/hero-device-assemble.tsx" } ] }, { "name": "ecosystem-constellation", "type": "registry:component", "title": "Ecosystem Constellation", "description": "A central logo orbited by integration satellites with pulsing data lines.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/ecosystem-constellation/index.tsx", "type": "registry:component", "target": "components/remocn/ecosystem-constellation.tsx" } ] }, { "name": "ai-generation-canvas", "type": "registry:component", "title": "AI Generation Canvas", "description": "A prompt input transforms into a header, then a skeleton dashboard flips into populated cards.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/ai-generation-canvas/index.tsx", "type": "registry:component", "target": "components/remocn/ai-generation-canvas.tsx" } ] }, { "name": "live-code-compilation", "type": "registry:component", "title": "Live Code Compilation", "description": "Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/live-code-compilation/index.tsx", "type": "registry:component", "target": "components/remocn/live-code-compilation.tsx" } ] }, { "name": "landing-code-showcase", "type": "registry:component", "title": "Landing Code Showcase", "description": "Magical split-screen: code types itself on the left while the preview reactively re-renders on the right with sparks and tactile bounce.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/landing-code-showcase/index.tsx", "type": "registry:component", "target": "components/remocn/landing-code-showcase.tsx" } ] }, { "name": "pipeline-journey", "type": "registry:component", "title": "Pipeline Journey", "description": "A Kanban ticket arcs across columns triggering landings and a final confetti burst.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/pipeline-journey/index.tsx", "type": "registry:component", "target": "components/remocn/pipeline-journey.tsx" } ] }, { "name": "dashboard-populate", "type": "registry:component", "title": "Dashboard Populate", "description": "An empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/dashboard-populate/index.tsx", "type": "registry:component", "target": "components/remocn/dashboard-populate.tsx" } ] }, { "name": "terminal-to-browser-deploy", "type": "registry:component", "title": "Terminal to Browser Deploy", "description": "A CLI deploy completes, the terminal blurs back, and a browser window springs from the deploy URL.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/terminal-to-browser-deploy/index.tsx", "type": "registry:component", "target": "components/remocn/terminal-to-browser-deploy.tsx" } ] }, { "name": "browser-flow", "type": "registry:component", "title": "Browser Flow", "description": "Full Safari/Chrome simulation: typed URL, progress bar, page render, scroll, and a virtual cursor click.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/browser-flow/index.tsx", "type": "registry:component", "target": "components/remocn/browser-flow.tsx" } ] }, { "name": "pricing-tier-focus", "type": "registry:component", "title": "Pricing Tier Focus", "description": "Three pricing cards where the focused tier rises and brightens while siblings dim and blur.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/pricing-tier-focus/index.tsx", "type": "registry:component", "target": "components/remocn/pricing-tier-focus.tsx" } ] }, { "name": "infinite-bento-pan", "type": "registry:component", "title": "Infinite Bento Pan", "description": "A camera diagonally drifts across an oversized bento grid behind a soft vignette.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/infinite-bento-pan/index.tsx", "type": "registry:component", "target": "components/remocn/infinite-bento-pan.tsx" } ] }, { "name": "brush-stroke-simulator", "type": "registry:component", "title": "Brush Stroke Simulator", "description": "A simulated finger brushes across an image, revealing a pixelated layer along its bezier path.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/brush-stroke-simulator/index.tsx", "type": "registry:component", "target": "components/remocn/brush-stroke-simulator.tsx" } ] }, { "name": "ai-generate-overlay", "type": "registry:component", "title": "AI Generate Overlay", "description": "Source image blurs under a shimmering dot grid and a pulsing 'Generating…' pill before a new image fades in.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/ai-generate-overlay/index.tsx", "type": "registry:component", "target": "components/remocn/ai-generate-overlay.tsx" } ] }, { "name": "tool-menu-slide-in", "type": "registry:component", "title": "Tool Menu Slide In", "description": "A glass tool palette whips up from below the editor canvas while its icons pop in with a stagger.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/tool-menu-slide-in/index.tsx", "type": "registry:component", "target": "components/remocn/tool-menu-slide-in.tsx" } ] }, { "name": "image-expand-to-fullscreen", "type": "registry:component", "title": "Image Expand To Fullscreen", "description": "An image lifts out of a feed post and morphs into a fullscreen editor with toolbars sliding in.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/image-expand-to-fullscreen/index.tsx", "type": "registry:component", "target": "components/remocn/image-expand-to-fullscreen.tsx" } ] }, { "name": "swipe-transition-wipe", "type": "registry:component", "title": "Swipe Transition Wipe", "description": "Two scenes laid out side-by-side flick across the screen with a parallax background and a darkening outgoing layer.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/swipe-transition-wipe/index.tsx", "type": "registry:component", "target": "components/remocn/swipe-transition-wipe.tsx" } ] }, { "name": "product-launch-trailer", "type": "registry:component", "title": "Product Launch Trailer", "description": "Cinematic Product Hunt teaser: pulsing logo, zoom-through transition, 3D bento fly-over, and a confetti version drop.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/product-launch-trailer/index.tsx", "type": "registry:component", "target": "components/remocn/product-launch-trailer.tsx" } ] }, { "name": "changelog-bite", "type": "registry:component", "title": "Changelog Bite", "description": "Seamlessly looping square card showing a before/after diff with a frosted glass wipe and a pulsing New pill.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/changelog-bite/index.tsx", "type": "registry:component", "target": "components/remocn/changelog-bite.tsx" } ] }, { "name": "visual-docs-snippet", "type": "registry:component", "title": "Visual Docs Snippet", "description": "Calm tutorial flow: a virtual cursor arcs to a button, clicks, and a bounding box plus tooltip explain what just happened.", "dependencies": ["remotion"], "files": [ { "path": "registry/remocn/visual-docs-snippet/index.tsx", "type": "registry:component", "target": "components/remocn/visual-docs-snippet.tsx" } ] } ] }