Dev Design LibraryAnimated Layout Components
Dev Design Library indexes 118 Animated layout components from 36 open-source UI libraries, with the most coming from Aceternity UI, React Bits, Amicro Micro Transitions, UI Lab and Velora UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the layout components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
Card SwapReact Bits · ReactCards animate position swapping with smooth layout transitions.
Scroll ShadowHeroUI · ReactAdds dynamic gradient shadows to scrollable content based on scroll position and overflow.
Card Stack Hovertransitions.dev · HTML/CSS
Handle with animated pill indicatorReUI · ReactHandle with animated pill indicator
Card Cascade StaggerAmicro Micro Transitions · ReactStack of cards that cascade into place one after another.
Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
Infinite MasonrybeUI · ReactResponsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
Avatar StackSpectrum UI · ReactAn overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members…
Agent Bento GridVengeance UI · ReactMulti-agent workspace grid layout
App SidebarFluid Functionalism · ReactA complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed…
Scroll FadeToolcraft · ReactScroll area whose edges fade out to hint that there is more content to scroll.
Web Day GridPanel UI · React Native
Animated List 03 - Expandable StackShadcn Space · ReactExpandable stack of cards showing notifications with dynamic spring layouts
Hover Layer StackPixel Perfect · ReactAn isometric stack of UI layers that lifts apart on hover, exploding the interface into its depth layers.
Animated Collectionuselayouts · ReactA collection of items with smooth layout transitions and animations.
Bento ExpandKinetics · HTML/CSSHover focuses one tile; the rest quietly recede
Collection SurferComponentry · ReactSmooth surfing interaction for browsing collections.
3D WrapperBadtz UI · ReactThis component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to…
Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
Macbook MockupGreatUI · React
Morph SurfaceSona UI · ReactAn unstyled layout primitive that grows, shrinks, clips, and updates the content of one persistent consumer-styled…
Scroll FadeWatermelon UI · ReactScroll area whose edges fade out to hint that there is more content to scroll.
Card stackArc Library · ReactReview a deck one card at a time, with a throw and an undo.
Avatar StackUI Lab · ReactFans open when you reach for it, with a name above each face.
Aspect ratioHextaUI · ReactA box that holds its shape before media loads, shimmers while loading, fades the media in and falls back when it fails.
Content 04FLX UI · ReactTwo-column card grid with a serif section header and copy above each image.
Card StackVelora UI · ReactDeck that shuffles the top card to the back on a timer.
Magnetic Dot GridAtelier UI · React
Adaptive Density GridSpaceUI · ReactA fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in…
Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
Fisheye Chromatic Card GridCue Foundations · React
Liquid DividerLiquefy UI · ReactDivider line in liquid glass style. Linha divisória em estilo vidro líquido.
Pull To RefreshEaseUI · ReactA pull-down gesture over scrollable content: the indicator tracks the finger 1:1, then resists past the trigger…
Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
Desktop Mockup CarouselReactFrame · ReactA realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance…
Container Text FlipAceternity UI · ReactBoxed word inside a sentence that flips through a list of words, with the box resizing to fit each one.
Fluid GlassReact Bits · ReactGlassmorphism container with animated liquid distortion refraction.
Handle pill with spring scale on dragReUI · ReactHandle pill with spring scale on drag
Mac TerminalAmicro Micro Transitions · ReactMac Terminal loading animation.
Lightbox GridKokonut UI · ReactA photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
Notification StackbeUI · ReactCompact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
Bento GridSpectrum UI · ReactA premium interactive Bento Grid component
Research Bento GridVengeance UI · ReactAnimated developer-service showcase with interactive pricing and pause states
Blog 01 - Latest Blog & News GridShadcn Space · ReactA modern blog section with featured posts, large thumbnails, publish dates, and headlines, ideal for sharing agency…
Photo Magnet GridPixel Perfect · ReactA tidy grid of photos that scatters away from the cursor like same-pole magnets, each tile leaning away in 3D as it…
Bento Carduselayouts · ReactAn interactive bento card with animated tabs and workspace preview.
Presence StackKinetics · HTML/CSSAvatars fan out with a live online pulse
Scroll ChoreographyComponentry · ReactA smooth, scroll-driven image choreography component using Framer Motion.
Animated Card 1Badtz UI · React
Codex TerminalNotra · ReactThe Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.
Prototype Morph SurfaceSona UI · ReactStress tests for the Morph Surface primitive. Página de testes de estresse do primitivo Morph Surface.
Newsletter signupArc Library · ReactAn email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.
Changelog StackUI Lab · ReactFiles each release card behind the stack like a hand riffling index cards.
Message scrollerHextaUI · ReactA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the…
Content 05FLX UI · ReactA focus grid with items that can be focused and dimmed.
Bento feature gridVelora UI · ReactFive-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.
Morphing AreaSpaceUI · ReactAdaptive aspect ratio surface with constant-area morphing for any child element, card, or media.
Morph StackSkecher UI · ReactA composable three-plate stack with spring-driven perspective and layered hover motion.
Stacker Style Bento GridCue Foundations · React
Liquid GlassLiquefy UI · ReactThe material on its own, with the optics exposed as props.
Glass Scroll StackOpaline · ReactGlass cards that pin and pile up as you scroll, shrinking as new cards land on them.
Diagonal CarouselReactFrame · ReactSquare cards fan out diagonally into a stacked deck, each inactive card rotates and offsets away from the active one…
Layout Text FlipAceternity UI · ReactHeadline with a fixed part and a boxed word that flips through a list, the layout shifting smoothly.
Glass SurfaceReact Bits · ReactAdvanced Apple-style glass surface with real-time distortion + lighting.
Handle with large capsule expansion on dragReUI · ReactHandle with large capsule expansion on drag
Perspective Layout SwitcherAmicro Micro Transitions · ReactInteractive toggle switching between Grid and 3D Stack layout icons.
Notification StackKokonut UI · ReactStacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.
Staggered GridVengeance UI · ReactOffset card grid composition
Portfolio 01 - Clean Portfolio GridShadcn Space · ReactA modern portfolio section displaying featured projects with tags, visuals, and categories, ideal for agencies or…
Magnified Bentouselayouts · ReactA bento card component with a draggable magnifying lens effect over scrolling chips.
Toast StackKinetics · HTML/CSSMultiple toasts stack upward and auto-dismiss in sequence
Sticky Scroll CardsComponentry · ReactA scroll-driven card stack where images pin and scale as you scroll, creating a layered depth effect.
Animated Card 2Badtz UI · React
OpenCode WindowNotra · ReactThe OpenCode terminal surface that sets the background, monospace font and line grid.
Resizable panelsArc Library · ReactTrade space between panes by dragging the divider between them.
Sortable GridUI Lab · ReactDrag an app tile and the others slide out of its way.
Scroll areaHextaUI · ReactNative scrolling with a minimal scrollbar, edges that fade only where there’s more to see, and an optional peek that…
Content 09FLX UI · ReactTwo-column icon card grid with serif section header and subtle entrance motion.
Product screenshot heroVelora UI · ReactCentered headline above a dashboard in a browser frame with a border beam and a logo row.
Sliding PanelSkecher UI · ReactA direction-aware panel transition with interruptible motion and reduced-motion fallbacks.
Glass TerminalOpaline · ReactA macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view.
Image Deck 3DReactFrame · ReactA single image split into a stacked deck of shape-clipped layers (rectangle, circle, hexagon, star, blob and more)…
Card StackAceternity UI · React
Magic BentoReact Bits · ReactInteractive bento grid tiles expand + animate with various options.
Nested layout with animated pill handlesReUI · ReactNested layout with animated pill handles
Smart Card DispenserAmicro Micro Transitions · ReactCredit card dispensing slot ejecting smart pass upwards on trigger.
Promise ToastKokonut UI · React"A toast that follows a task: the ring spins while it works, closes into a check or a warning when it lands, and…
Expandable Bento GridVengeance UI · React
Team 02 - Modern Team GridShadcn Space · ReactA clean team grid with large profile cards, roles, and social icons, ideal for agencies or SaaS companies to introduce…
Scroll Stack Deckuselayouts · ReactScroll-linked project cards that pin in the viewport and stack, scale, and settle as you move down the page.
Animated Card 3Badtz UI · React
Scroll areaArc Library · ReactA native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
Stacked DrawerUI Lab · ReactStacks iOS sheets that push the page back and drag down to dismiss.
Scroll 01FLX UI · ReactSticky media that changes as you scroll through text content.
Layout GridVelora UI · ReactBento grid of image tiles that expand in place to reveal rich content.
Scroll AreaReactFrame · ReactA scrollable container with a thin, draggable, auto-hiding custom scrollbar (vertical, horizontal or both) and edge…
Features Section Demo 3Aceternity UI · React
MasonryReact Bits · ReactResponsive masonry layout with animated reflow + gaps optimization.
Three-panel layout with animated pill handlesReUI · ReactThree-panel layout with animated pill handles
Sticky RevealAmicro Micro Transitions · ReactApple-style scroll-linked side sticky content reveal.
Stack PanelKokonut UI · ReactA panel that drills into pages like settings on a phone. The tapped row's label flies up into the title, and a swipe…
Why Us BentoVengeance UI · React
Stack Scroll Revealuselayouts · ReactScroll-linked case-study cards that pin in the viewport and peel, scale, and fade as you move down the page.
Sticky StackUI Lab · ReactCards pile up and sink back as you scroll.
Parallax GridVelora UI · ReactGallery columns drifting at different rates for depth.
SplitterReactFrame · ReactResizable panels divided by draggable handles, with min/max size constraints, keyboard resizing, double-click reset…
Layout GridAceternity UI · React
Scroll StackReact Bits · ReactOverlapping card stack reveals on scroll with depth layering.
Card Time MachineAmicro Micro Transitions · React
Toast StackUI Lab · ReactStacks with depth, fans out on hover, and each toast's edge drains as its timer.
Sticky ScrollVelora UI · ReactCopy scrolls past a pinned panel that swaps per section.
TerminalReactFrame · ReactA macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking…
Parallax ScrollAceternity UI · React
StackReact Bits · ReactLayered stack with swipe animations, autoplay and smooth transitions.
Card Deck CascadeAmicro Micro Transitions · React
Wallet CardsUI Lab · React
Parallax Scroll 2Aceternity UI · React
Sticky Scroll RevealAceternity UI · React
Libraries with Animated layout components
Related categories
- Layout Components
- React Layout Components
- Tailwind CSS Layout Components
- Svelte Layout Components
- shadcn/ui Layout Components
- Animated Grid Components
- Animated Stack Components
- Animated Bento Grid Components
- Animated Sticky Scroll Components
- Animated Container Components
- Animated Window Frame Components
- Animated Scroll Area Components
- Animated Split Pane Components