framecn
17components20Kviews74bookmarks
Installs all 125 components. Without our CLI, run instead.
Auto-indexed
framecn contents
Format Morph
Stepper
IMessage Chat Flow
Message Bubble
Terminal to Browser Deploy
Shader Dithering
Logo Enter
Dashboard Populate
Animated Line Chart
Simulated Cursor
Bounding Box Selector
Zoom Through Transition
Animated Bar Chart
Glass Code Block
Chromatic Aberration Wipe
Cursor Flow
Mesh Gradient Background
That's all 17 components
About framecn
framecn publishes a shadcn registry at framecn.vercel.app, with 125 components installable through the shadcn CLI.
- Components
- 125
- GitHub stars
- 155
- Last commit
- Oct 7, 2026
- Repository
- shadcn-labs/framecn
Also in the framecn registry
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
AI Generation Canvas
ai-generation-canvasA prompt input transforms into a header, then a skeleton dashboard flips into populated cards.
remotion1 fileai-prompt-flow
framecn-uiBackdrop
Layout wrapper providing a background fill with optional padding, radius, and shadow.
@editframe/react1 fileblur-in
framecn-uiBlur Reveal
blur-revealText fades in from a heavy blur into sharp focus.
remotion1 fileBrowser Flow
browser-flowFull Safari/Chrome simulation: typed URL, progress bar, page render, scroll, and a virtual cursor click.
remotion1 fileCaption Clip Wipe
caption-clip-wipeWords reveal left-to-right via clip-path; keywords turn gold on speak; the group exits with a wipe.
@editframe/react1 fileCaption Editorial Emphasis
caption-editorial-emphasisHeadline-style captions that emphasise specific words using accent colors and weight shifts.
@editframe/react1 fileCaption Emoji Pop
caption-emoji-popCaptions with emoji that pop in alongside words.
@editframe/react1 fileCaption Glitch RGB
caption-glitch-rgbCaptions with a glitchy RGB-split effect on each word.
@editframe/react1 fileCaption Gradient Fill
caption-gradient-fillCaptions where words fill with a horizontal gradient from left to right.
@editframe/react1 fileCaption Highlight
caption-highlightWord-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word.
@editframe/react1 fileCaption Kinetic Slam
caption-kinetic-slamDynamic word-by-word captions: each word pops in with a springy scale/opacity entrance, then drops out in an overlapping ripple.
@editframe/react1 fileCaption Matrix Decode
caption-matrix-decodeMatrix-style green text decodes from blur to sharp on each word.
@editframe/react1 fileCaption Neon Accent
caption-neon-accentCaptions where words glow with a bright neon accent border and subtle glow.
@editframe/react1 fileCaption Neon Glow
caption-neon-glowCaptions with a neon glow effect on each word.
@editframe/react1 fileCaption Parallax Layers
caption-parallax-layersMulti-layer captions where background and foreground words move at different depths, creating a parallax depth effect.
@editframe/react1 fileCaption Particle Burst
caption-particle-burstCaptions where each word explodes into particles as it exits.
@editframe/react1 fileCaption Pill Karaoke
caption-pill-karaokeKaraoke-style captions where each word sits inside a pill-shaped background.
@editframe/react1 fileCaption Texture
caption-textureCaptions filled with a rich gradient texture that animates across words.
@editframe/react1 fileCaption Weight Shift
caption-weight-shiftFont weight animates from 100 to 900 when each word is spoken, back to thin after.
@editframe/react1 filecaret
framecn-uichat-flow
framecn-uiChat to Preview Layout
chat-to-preview-layoutTwo-column layout where chat shrinks and preview expands.
remotion1 filecheckout-flow
framecn-uiCode Accordion
code-accordionA code window that springs a range of lines closed and replaces them with a "N lines collapsed" placeholder.
remotion1 fileCode Diff Wipe
code-diff-wipeBefore/after code reveal via clip-path wipe with a handle marker.
remotion1 filecommand-menu
framecn-uicommand-menu-item
framecn-uiConfetti
Deterministic CSS-animated particle burst celebration effect.
@editframe/react1 fileData Flow Pipes
data-flow-pipesGlowing data packets travel along SVG bezier pipes between system nodes, leaving fading trails.
remotion1 fileDevice Mockup Zoom
device-mockup-zoomPull back from a UI to reveal it inside a device frame.
remotion1 fileDirectional Wipe
directional-wipeSlide one scene in while pushing the other out.
remotion1 fileDrag and Drop Flow
drag-and-drop-flowSimulated file drag into a dropzone followed by upload progress.
remotion1 filedropdown-menu-item
framecn-uiDynamic Grid
dynamic-gridSubtle moving grid background with configurable cell size and direction.
remotion1 fileEcosystem Constellation
ecosystem-constellationA central logo orbited by integration satellites with pulsing data lines.
remotion1 filefield
framecn-uiFocus Blur Resolve
focus-blur-resolveText resolves into focus from a blurred, shifted state, then blurs back out on exit.
remotion1 fileformat-morph
Frosted Glass Wipe
frosted-glass-wipeElegant scene transition through a sliding pane of frosted glass.
remotion1 fileGrid Pixelate Wipe
grid-pixelate-wipeDissolve from one scene to the next through a deterministic grid of mask cells.
remotion1 fileHero Device Assemble
hero-device-assembleFloating device layers spring together into a laptop or phone mockup, then the screen wakes with a shimmer.
remotion1 fileImage Expand To Fullscreen
image-expand-to-fullscreenAn image lifts out of a feed post and morphs into a fullscreen editor with toolbars sliding in.
remotion1 fileInfinite Bento Pan
infinite-bento-panA camera diagonally drifts across an oversized bento grid behind a soft vignette.
remotion1 fileInfinite Marquee
infinite-marqueeSeamlessly looping horizontal text strip with optional stroke style.
remotion1 fileInline Highlight
inline-highlightAnimates one word inside a sentence from a base color to a brand color.
remotion1 fileKinetic Type Mask
kinetic-type-maskUse giant typography as a window into the next scene.
remotion1 fileLanding Code Showcase
landing-code-showcaseMagical split-screen: code types itself on the left while the preview reactively re-renders on the right with sparks and tactile bounce.
remotion1 fileLive Code Compilation
live-code-compilationSplit-screen where typed code on the left snaps a live UI preview on the right, HMR-style.
remotion1 fileMarker Highlight
marker-highlightColored marker block draws behind a phrase as the text color shifts.
remotion1 fileMasked Slide Reveal
masked-slide-revealWords slide up out of an invisible horizontal mask, one after another.
remotion1 fileMatrix Decode
matrix-decodeRandom scramble resolves left-to-right into the target text.
remotion1 fileMorphing Modal
morphing-modalA bento card lifts off the grid and blooms into a full-screen modal driven by a single heavy spring.
remotion1 filenode-reveal
onboarding-stepper-flow
framecn-uiPer Character Rise
per-character-riseCharacters rise from below with a smooth spring-like easing, staggered one frame apart.
remotion1 filePerspective Marquee
perspective-marqueeA 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.
remotion1 filePipeline Journey
pipeline-journeyA Kanban ticket arcs across columns triggering landings and a final confetti burst.
remotion1 filePricing Tier Focus
pricing-tier-focusThree pricing cards where the focused tier rises and brightens while siblings dim and blur.
remotion1 fileProduct Launch Trailer
product-launch-trailerCinematic Product Hunt teaser: pulsing logo, zoom-through transition, 3D bento fly-over, and a confetti version drop.
remotion1 fileProgress Steps
progress-stepsMulti-step pipeline with sequentially activating nodes and filling lines.
remotion1 filePulsing Indicator
pulsing-indicatorContinuous pulsing dot with ping ring for loading or live states.
remotion1 fileradio
framecn-uiRGB Glitch Text
rgb-glitch-textThree RGB-offset text copies jitter for a brief glitch window.
remotion1 fileScale Down Fade
scale-down-fadeText enters scaling down into place with a fade, then shrinks and fades out.
remotion1 fileselect-item
framecn-uisettings-toggle-flow
framecn-uiShader Color Panels
shader-color-panelsOverlapping translucent color panels sliding past each other.
@editframe/react, @paper-design/shaders-react1 fileShader Dot Orbit
shader-dot-orbitDots orbiting on concentric paths across the frame.
@editframe/react, @paper-design/shaders-react1 fileShader God Rays
shader-god-raysVolumetric light rays radiating from an off-screen source.
@editframe/react, @paper-design/shaders-react1 fileShader Grain Gradient
shader-grain-gradientGrainy multi-stop gradient that drifts slowly with film-grain texture over the blend.
@editframe/react, @paper-design/shaders-react1 fileShader Liquid Metal
shader-liquid-metalMolten metallic surface with flowing specular highlights.
@editframe/react, @paper-design/shaders-react1 fileShader Mesh Gradient
shader-mesh-gradientWebGL mesh gradient backdrop driven per-frame for deterministic Editframe renders.
@editframe/react, @paper-design/shaders-react1 fileShader Metaballs
shader-metaballsOrganic blobs merging and splitting like lava.
@editframe/react, @paper-design/shaders-react1 fileShader Neuro Noise
shader-neuro-noiseOrganic neural-web noise field that slowly morphs.
@editframe/react, @paper-design/shaders-react1 fileShader Perlin Noise
shader-perlin-noiseClassic Perlin noise clouds drifting across the frame.
@editframe/react, @paper-design/shaders-react1 fileShader Pulsing Border
shader-pulsing-borderGlowing border frame that pulses around the edges.
@editframe/react, @paper-design/shaders-react1 fileShader Simplex Noise
shader-simplex-noiseSimplex noise flow field, smoother than Perlin.
@editframe/react, @paper-design/shaders-react1 fileShader Smoke Ring
shader-smoke-ringSoft smoke ring curling and dissipating in place.
@editframe/react, @paper-design/shaders-react1 fileShader Spiral
shader-spiralRotating spiral arms radiating from the center.
@editframe/react, @paper-design/shaders-react1 fileShader Swirl
shader-swirlConcentric bands swirling around a center point.
@editframe/react, @paper-design/shaders-react1 fileShader Voronoi
shader-voronoiAnimated Voronoi cells shifting and re-tessellating.
@editframe/react, @paper-design/shaders-react1 fileShader Warp
shader-warpDomain-warped color field that folds and stretches like liquid.
@editframe/react, @paper-design/shaders-react1 fileShader Water
shader-waterCaustic water-surface ripples with subtle refraction.
@editframe/react, @paper-design/shaders-react1 fileShimmer Sweep
shimmer-sweepLight shine sweeps across muted text via background-clip:text.
remotion1 filesignup-flow
framecn-uiskeleton-block
framecn-uiSlot Machine Roll
slot-machine-rollVertical reel scrolls characters from one value to another.
remotion1 fileSpatial Push
spatial-pushA new scene physically presses the old one back into the frame.
remotion1 filespinner
framecn-uiSpotlight Card
spotlight-cardA card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder.
remotion1 fileSpring Pop In
spring-pop-inElastic spring-driven scale-in wrapper for any child element.
remotion1 fileStaggered Bento Grid
staggered-bento-gridCards pop into a bento grid one after another with a spring.
remotion1 fileStaggered Fade Up
staggered-fade-upWords fade in and slide up one after another with a configurable delay.
remotion1 fileSuccess Confetti
success-confettiDeterministic seeded confetti burst with optional headline.
remotion1 fileSwipe Transition Wipe
swipe-transition-wipeTwo scenes laid out side-by-side flick across the screen with a parallax background and a darkening outgoing layer.
remotion1 filetelegram-chat-flow
framecn-uiTerminal Simulator
terminal-simulatorTerminal window that types out commands and rolls old lines off the top.
remotion1 fileText Fade Replace
text-fade-replaceCross-fades between two strings on the same line without layout shift.
remotion1 fileToast Notification
toast-notificationSystem-style toast pops in, holds, then slides out.
remotion1 fileTypewriter
Character-by-character text reveal with a deterministic blinking cursor.
remotion1 filetyping-indicator
framecn-ui
