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.
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.
Brush Stroke Simulatorbrush-stroke-simulatorA simulated finger brushes across an image, revealing a pixelated layer along its bezier path.
Changelog Bitechangelog-biteSeamlessly looping square card showing a before/after diff with a frosted glass wipe and a pulsing New pill.
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.
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.
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.
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.
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.
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.
Tool Menu Slide Intool-menu-slide-inA glass tool palette whips up from below the editor canvas while its icons pop in with a stagger.
Tracking Intracking-inLetter-spacing collapses and blur clears with a springy motion.
TypewritertypewriterCharacter-by-character text reveal with a deterministic blinking cursor.
Visual Docs Snippetvisual-docs-snippetCalm tutorial flow: a virtual cursor arcs to a button, clicks, and a bounding box plus tooltip explain what just happened.
Zoom Through Transitionzoom-through-transitionAggressively scale into the center of an element.