framecn
3components4.1Kviews11bookmarks
Installs all 101 components. Without our CLI, run instead.
Auto-indexed
framecn contents
Chromatic Aberration Wipe
Cursor Flow
Mesh Gradient Background
That's all 3 components
About framecn
framecn publishes a shadcn registry at framecn.vercel.app, with 101 components installable through the shadcn CLI.
- Components
- 101
- GitHub stars
- 130
- Last commit
- Aug 16, 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 fileAnimated Bar Chart
animated-bar-chartBars spring up from the baseline in a staggered cascade.
remotion1 fileAnimated Line Chart
animated-line-chartLine chart whose SVG path draws on from left to right with a leading dot.
remotion1 fileBackdrop
Layout wrapper providing a background fill with optional padding, radius, and shadow.
@editframe/react1 fileBlur Reveal
blur-revealText fades in from a heavy blur into sharp focus.
remotion1 fileBounding Box Selector
bounding-box-selectorFigma-style selection rectangle appears around any element.
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 fileChat to Preview Layout
chat-to-preview-layoutTwo-column layout where chat shrinks and preview expands.
remotion1 fileCode 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 fileConfetti
Deterministic CSS-animated particle burst celebration effect.
@editframe/react1 fileDashboard Populate
dashboard-populateAn empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill.
remotion1 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 fileDynamic 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 fileFocus Blur Resolve
focus-blur-resolveText resolves into focus from a blurred, shifted state, then blurs back out on exit.
remotion1 fileFrosted Glass Wipe
frosted-glass-wipeElegant scene transition through a sliding pane of frosted glass.
remotion1 fileGlass Code Block
glass-code-blockA premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.
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 fileLogo Enter
logo-enterRow of overlapping logo circles that spring in one by one.
@editframe/react1 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 filePer 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 fileRGB 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 fileShader Color Panels
shader-color-panelsOverlapping translucent color panels sliding past each other.
@editframe/react, @paper-design/shaders-react1 fileShader Dithering
shader-ditheringOrdered-dither shading over an animated gradient field.
@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 fileSimulated Cursor
simulated-cursorAnimated mouse cursor moving between waypoints with click ripple feedback.
remotion1 fileSlot 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 fileSpotlight 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 fileTerminal Simulator
terminal-simulatorTerminal window that types out commands and rolls old lines off the top.
remotion1 fileTerminal to Browser Deploy
terminal-to-browser-deployA CLI deploy completes, the terminal blurs back, and a browser window springs from the deploy URL.
remotion1 fileText Fade Replace
text-fade-replaceCross-fades between two strings on the same line without layout shift.
remotion1 fileTypewriter
Character-by-character text reveal with a deterministic blinking cursor.
remotion1 fileZoom Through Transition
zoom-through-transitionAggressively scale into the center of an element.
remotion1 file
