S
shadcn-labs/framecn
AI Generate Overlayai-generate-overlaySource image blurs under a shimmering dot grid and a pulsing 'Generating…' pill before a new image fades in.
AI Generation Canvasai-generation-canvasA prompt input transforms into a header, then a skeleton dashboard flips into populated cards.
Animated Bar Chartanimated-bar-chartBars spring up from the baseline in a staggered cascade.
Animated Line Chartanimated-line-chartLine chart whose SVG path draws on from left to right with a leading dot.
BackdropbackdropLayout wrapper providing a background fill with optional padding, radius, and shadow.
Blur Out Upblur-out-upWords blur and drift upward while fading out, staggered per word.
Blur Revealblur-revealText fades in from a heavy blur into sharp focus.
Bounding Box Selectorbounding-box-selectorFigma-style selection rectangle appears around any element.
Browser Flowbrowser-flowFull Safari/Chrome simulation: typed URL, progress bar, page render, scroll, and a virtual cursor click.
Caption Clip Wipecaption-clip-wipeWords reveal left-to-right via clip-path; keywords turn gold on speak; the group exits with a wipe.
Caption Editorial Emphasiscaption-editorial-emphasisHeadline-style captions that emphasise specific words using accent colors and weight shifts.
Caption Emoji Popcaption-emoji-popCaptions with emoji that pop in alongside words.
Caption Glitch RGBcaption-glitch-rgbCaptions with a glitchy RGB-split effect on each word.
Caption Gradient Fillcaption-gradient-fillCaptions where words fill with a horizontal gradient from left to right.
Caption Highlightcaption-highlightWord-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word.
Caption Kinetic Slamcaption-kinetic-slamDynamic word-by-word captions: each word pops in with a springy scale/opacity entrance, then drops out in an overlapping ripple.
Caption Matrix Decodecaption-matrix-decodeMatrix-style green text decodes from blur to sharp on each word.
Caption Neon Accentcaption-neon-accentCaptions where words glow with a bright neon accent border and subtle glow.
Caption Neon Glowcaption-neon-glowCaptions with a neon glow effect on each word.
Caption Parallax Layerscaption-parallax-layersMulti-layer captions where background and foreground words move at different depths, creating a parallax depth effect.
Caption Particle Burstcaption-particle-burstCaptions where each word explodes into particles as it exits.
Caption Pill Karaokecaption-pill-karaokeKaraoke-style captions where each word sits inside a pill-shaped background.
Caption Texturecaption-textureCaptions filled with a rich gradient texture that animates across words.
Caption Weight Shiftcaption-weight-shiftFont weight animates from 100 to 900 when each word is spoken, back to thin after.
Chat to Preview Layoutchat-to-preview-layoutTwo-column layout where chat shrinks and preview expands.
Chromatic Aberration Wipechromatic-aberration-wipeAn ultra-fast slide transition with an RGB glitch on the peak frames.
Code Accordioncode-accordionA code window that springs a range of lines closed and replaces them with a "N lines collapsed" placeholder.
Code Diff Wipecode-diff-wipeBefore/after code reveal via clip-path wipe with a handle marker.
ConfetticonfettiDeterministic CSS-animated particle burst celebration effect.
Cursor Flowcursor-flowA realistic mouse that arcs along cubic Bezier paths, pauses, and clicks targets that dip in response.
Dashboard Populatedashboard-populateAn empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill.
Data Flow Pipesdata-flow-pipesGlowing data packets travel along SVG bezier pipes between system nodes, leaving fading trails.
Device Mockup Zoomdevice-mockup-zoomPull back from a UI to reveal it inside a device frame.
Directional Wipedirectional-wipeSlide one scene in while pushing the other out.
Drag and Drop Flowdrag-and-drop-flowSimulated file drag into a dropzone followed by upload progress.
Dynamic Griddynamic-gridSubtle moving grid background with configurable cell size and direction.
Ecosystem Constellationecosystem-constellationA central logo orbited by integration satellites with pulsing data lines.
Focus Blur Resolvefocus-blur-resolveText resolves into focus from a blurred, shifted state, then blurs back out on exit.
Frosted Glass Wipefrosted-glass-wipeElegant scene transition through a sliding pane of frosted glass.
Glass Code Blockglass-code-blockA premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.
Grid Pixelate Wipegrid-pixelate-wipeDissolve from one scene to the next through a deterministic grid of mask cells.
Hero Device Assemblehero-device-assembleFloating device layers spring together into a laptop or phone mockup, then the screen wakes with a shimmer.
Image Expand To Fullscreenimage-expand-to-fullscreenAn image lifts out of a feed post and morphs into a fullscreen editor with toolbars sliding in.
Infinite Bento Paninfinite-bento-panA camera diagonally drifts across an oversized bento grid behind a soft vignette.
Infinite Marqueeinfinite-marqueeSeamlessly looping horizontal text strip with optional stroke style.
Inline Highlightinline-highlightAnimates one word inside a sentence from a base color to a brand color.
Kinetic Type Maskkinetic-type-maskUse giant typography as a window into the next scene.
Landing Code Showcaselanding-code-showcaseMagical split-screen: code types itself on the left while the preview reactively re-renders on the right with sparks and tactile bounce.
Live Code Compilationlive-code-compilationSplit-screen where typed code on the left snaps a live UI preview on the right, HMR-style.
Logo Enterlogo-enterRow of overlapping logo circles that spring in one by one.
Marker Highlightmarker-highlightColored marker block draws behind a phrase as the text color shifts.
Masked Slide Revealmasked-slide-revealWords slide up out of an invisible horizontal mask, one after another.
Matrix Decodematrix-decodeRandom scramble resolves left-to-right into the target text.
Mesh Gradient Backgroundmesh-gradient-bgLiving gradient with amorphous color blobs slowly drifting across the frame.
Morphing Modalmorphing-modalA bento card lifts off the grid and blooms into a full-screen modal driven by a single heavy spring.
Per Character Riseper-character-riseCharacters rise from below with a smooth spring-like easing, staggered one frame apart.
Perspective Marqueeperspective-marqueeA 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.
Pipeline Journeypipeline-journeyA Kanban ticket arcs across columns triggering landings and a final confetti burst.
Pricing Tier Focuspricing-tier-focusThree pricing cards where the focused tier rises and brightens while siblings dim and blur.
Product Launch Trailerproduct-launch-trailerCinematic Product Hunt teaser: pulsing logo, zoom-through transition, 3D bento fly-over, and a confetti version drop.
Progress Stepsprogress-stepsMulti-step pipeline with sequentially activating nodes and filling lines.
Pulsing Indicatorpulsing-indicatorContinuous pulsing dot with ping ring for loading or live states.
RGB Glitch Textrgb-glitch-textThree RGB-offset text copies jitter for a brief glitch window.
Scale Down Fadescale-down-fadeText enters scaling down into place with a fade, then shrinks and fades out.
Shader Color Panelsshader-color-panelsOverlapping translucent color panels sliding past each other.
Shader Ditheringshader-ditheringOrdered-dither shading over an animated gradient field.
Shader Dot Orbitshader-dot-orbitDots orbiting on concentric paths across the frame.
Shader God Raysshader-god-raysVolumetric light rays radiating from an off-screen source.
Shader Grain Gradientshader-grain-gradientGrainy multi-stop gradient that drifts slowly with film-grain texture over the blend.
Shader Liquid Metalshader-liquid-metalMolten metallic surface with flowing specular highlights.
Shader Mesh Gradientshader-mesh-gradientWebGL mesh gradient backdrop driven per-frame for deterministic Editframe renders.
Shader Metaballsshader-metaballsOrganic blobs merging and splitting like lava.
Shader Neuro Noiseshader-neuro-noiseOrganic neural-web noise field that slowly morphs.
Shader Perlin Noiseshader-perlin-noiseClassic Perlin noise clouds drifting across the frame.
Shader Pulsing Bordershader-pulsing-borderGlowing border frame that pulses around the edges.
Shader Simplex Noiseshader-simplex-noiseSimplex noise flow field, smoother than Perlin.
Shader Smoke Ringshader-smoke-ringSoft smoke ring curling and dissipating in place.
Shader Spiralshader-spiralRotating spiral arms radiating from the center.
Shader Swirlshader-swirlConcentric bands swirling around a center point.
Shader Voronoishader-voronoiAnimated Voronoi cells shifting and re-tessellating.
Shader Warpshader-warpDomain-warped color field that folds and stretches like liquid.
Shader Watershader-waterCaustic water-surface ripples with subtle refraction.
Shimmer Sweepshimmer-sweepLight shine sweeps across muted text via background-clip:text.
Simulated Cursorsimulated-cursorAnimated mouse cursor moving between waypoints with click ripple feedback.
Slot Machine Rollslot-machine-rollVertical reel scrolls characters from one value to another.
Spatial Pushspatial-pushA new scene physically presses the old one back into the frame.
Spotlight Cardspotlight-cardA card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder.
Spring Pop Inspring-pop-inElastic spring-driven scale-in wrapper for any child element.
Staggered Bento Gridstaggered-bento-gridCards pop into a bento grid one after another with a spring.
Staggered Fade Upstaggered-fade-upWords fade in and slide up one after another with a configurable delay.
Strikethrough Replacestrikethrough-replaceDraws a strike line across old text then reveals new text in its place.
Success Confettisuccess-confettiDeterministic seeded confetti burst with optional headline.
Swipe Transition Wipeswipe-transition-wipeTwo scenes laid out side-by-side flick across the screen with a parallax background and a darkening outgoing layer.
Terminal Simulatorterminal-simulatorTerminal window that types out commands and rolls old lines off the top.
Terminal to Browser Deployterminal-to-browser-deployA CLI deploy completes, the terminal blurs back, and a browser window springs from the deploy URL.
Text Fade Replacetext-fade-replaceCross-fades between two strings on the same line without layout shift.
Toast Notificationtoast-notificationSystem-style toast pops in, holds, then slides out.
Top Down Letterstop-down-lettersLetters animate in from top to bottom.
Tracking Intracking-inLetter-spacing collapses and blur clears with a springy motion.
TypewritertypewriterCharacter-by-character text reveal with a deterministic blinking cursor.
Zoom Through Transitionzoom-through-transitionAggressively scale into the center of an element.