ActiveFeaturedAnimated components101
@framecn
Animated components · MIT · data updated 2026-07-28
A shadcn-compatible registry of 64 programmatic video compositions for React, built on the Editframe rendering engine. Compositions include Hero Device Assemble, AI Generation Canvas, Browser Flow, Terminal to Browser Deploy, Product Launch Trailer, Pricing Tier Focus, Changelog Bite, and more — all covering SaaS and developer storytelling scenarios. Free and open-source, TypeScript/Next.js, installable via npx shadcn add. Use for: embedding high-quality animated video sequences or motion narratives inside React/Next.js apps without a video editing tool.
aestheticaianimationbackgroundsblockscardschartsdashboarddeveloper-toolseditorformsglassmorphismiconsloadersmediamobileoverlaysretrosaastext-effects
Install
npx shadcn@latest add https://framecn.vercel.app/r/registry.jsonHealth
StatusActive
Last commit3 weeks ago
LicenseMIT
Open issues1
ArchivedNo
Stars101
Components (101)
blur-revealtypewriterinline-highlighttext-fade-replacestrikethrough-replacestaggered-fade-upmasked-slide-revealtracking-inshimmer-sweepmarker-highlightslot-machine-rollmatrix-decodergb-glitch-textinfinite-marqueemesh-gradient-bgdynamic-gridspring-pop-insimulated-cursorpulsing-indicatordirectional-wipedevice-mockup-zoomzoom-through-transitionstaggered-bento-gridchat-to-preview-layoutbounding-box-selectoranimated-line-chartanimated-bar-chartterminal-simulatorcode-diff-wipetoast-notificationdrag-and-drop-flowprogress-stepsmorphing-modaldata-flow-pipescursor-flowcode-accordionglass-code-blockspotlight-cardperspective-marqueesuccess-confettifrosted-glass-wipekinetic-type-maskspatial-pushgrid-pixelate-wipechromatic-aberration-wipehero-device-assembleecosystem-constellationai-generation-canvaslive-code-compilationlanding-code-showcasepipeline-journeydashboard-populateterminal-to-browser-deploybrowser-flowpricing-tier-focusinfinite-bento-panai-generate-overlayimage-expand-to-fullscreenswipe-transition-wipeproduct-launch-trailer
Components: blur-reveal, typewriter, inline-highlight, text-fade-replace, strikethrough-replace, staggered-fade-up, masked-slide-reveal, tracking-in, shimmer-sweep, marker-highlight, slot-machine-roll, matrix-decode, rgb-glitch-text, infinite-marquee, mesh-gradient-bg, dynamic-grid, spring-pop-in, simulated-cursor, pulsing-indicator, directional-wipe, device-mockup-zoom, zoom-through-transition, staggered-bento-grid, chat-to-preview-layout, bounding-box-selector, animated-line-chart, animated-bar-chart, terminal-simulator, code-diff-wipe, toast-notification, drag-and-drop-flow, progress-steps, morphing-modal, data-flow-pipes, cursor-flow, code-accordion, glass-code-block, spotlight-card, perspective-marquee, success-confetti, frosted-glass-wipe, kinetic-type-mask, spatial-push, grid-pixelate-wipe, chromatic-aberration-wipe, hero-device-assemble, ecosystem-constellation, ai-generation-canvas, live-code-compilation, landing-code-showcase, pipeline-journey, dashboard-populate, terminal-to-browser-deploy, browser-flow, pricing-tier-focus, infinite-bento-pan, ai-generate-overlay, image-expand-to-fullscreen, swipe-transition-wipe, product-launch-trailer, caption-highlight, caption-pill-karaoke, caption-kinetic-slam, caption-clip-wipe, caption-editorial-emphasis, caption-emoji-pop, caption-glitch-rgb, caption-gradient-fill, caption-matrix-decode, caption-neon-accent, caption-neon-glow, caption-parallax-layers, caption-particle-burst, caption-texture, caption-weight-shift, confetti, logo-enter, backdrop, top-down-letters, blur-out-up, focus-blur-resolve, per-character-rise, scale-down-fade, shader-color-panels, shader-dithering, shader-dot-orbit, shader-god-rays, shader-grain-gradient, shader-liquid-metal, shader-mesh-gradient, shader-metaballs, shader-neuro-noise, shader-perlin-noise, shader-pulsing-border, shader-simplex-noise, shader-smoke-ring, shader-spiral, shader-swirl, shader-voronoi, shader-warp, shader-waterPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@framecn · blur-reveal
npx shadcn@latest add https://framecn.vercel.app/r/blur-reveal.jsonView source