FeaturedAnimated componentspro available
@aceternity
Animated components · data updated 2026-07-28
Popular copy-paste React component library with 200+ animated, visually striking components and blocks built with Tailwind CSS and Framer Motion (Motion for React). Notable components include: background beams/boxes/lines/aurora, sparkles, vortex, spotlight, canvas reveal effect, 3D card effect, card stack, sticky scroll reveal, tracing beam, lamp effect, wobble card, infinite moving cards, parallax scroll, and many more. Freemium: most components are free; a paid All-Access tier unlocks premium blocks and templates. Targets Next.js + Tailwind CSS v3. Use for: SaaS or portfolio landing pages that need high-impact animated sections without a design team.
3daestheticanimationbackgroundsblocksbuttonscardsdashboarddesign-systemformsloadersmapsmarketingmedianavigationoverlayspro-availableretrosaastablestext-effects
Install
npx shadcn@latest add https://ui.aceternity.com/registry/registry.jsonHealth
StatusUnknown
Last commit—
License—
Open issues—
ArchivedNo
Stars—
Components (270)
gridmoving-linesparklesspotlightglowing-starstext-reveal-cardanimated-tooltipfollowing-pointerbackground-beamssvg-mask-effectinfinite-moving-cards3d-pinevervault-cardparallax-scrollparallax-scroll-2parallax-hero-imagestracing-beamcontainer-scroll-animationtext-generate-effectmeteorscard-stackmoving-borderlampsticky-scroll-revealfloating-navbarnavbar-menutailwindcss-buttonsbento-gridcard-hover-effectgoogle-gemini-effectgooey-inputtypewriter-effectbackground-boxes3d-cardimages-sliderdirection-aware-hovertabshero-parallaxwavy-backgroundbackground-gradientlayout-gridbackground-gradient-animationmacbook-scrollinputlabelmulti-step-loaderglobeaurora-backgroundcanvas-reveal-effecthover-border-gradienthero-highlightvortexwobble-cardplaceholders-and-vanish-inputflip-wordslink-previewglare-cardanimated-modalsidebarapple-cards-carousel
Components: grid, moving-line, sparkles, spotlight, glowing-stars, text-reveal-card, animated-tooltip, following-pointer, background-beams, svg-mask-effect, infinite-moving-cards, 3d-pin, evervault-card, parallax-scroll, parallax-scroll-2, parallax-hero-images, tracing-beam, container-scroll-animation, text-generate-effect, meteors, card-stack, moving-border, lamp, sticky-scroll-reveal, floating-navbar, navbar-menu, tailwindcss-buttons, bento-grid, card-hover-effect, google-gemini-effect, gooey-input, typewriter-effect, background-boxes, 3d-card, images-slider, direction-aware-hover, tabs, hero-parallax, wavy-background, background-gradient, layout-grid, background-gradient-animation, macbook-scroll, input, label, multi-step-loader, globe, aurora-background, canvas-reveal-effect, hover-border-gradient, hero-highlight, vortex, wobble-card, placeholders-and-vanish-input, flip-words, link-preview, glare-card, animated-modal, sidebar, apple-cards-carousel, shooting-stars, stars-background, compare, card-spotlight, cover, file-upload, floating-dock, focus-cards, background-beams-with-collision, timeline, text-hover-effect, lens, background-lines, animated-testimonials, world-map, code-block, carousel, colourful-text, squiggly-text, magnetic-button, notch, spotlight-new, glowing-effect, 3d-marquee, container-text-flip, resizable-navbar, draggable-card, sticky-banner, pointer-highlight, stateful-button, loader, comet-card, background-ripple-effect, pixelated-canvas, canvas-text, layout-text-flip, dotted-glow-background, tooltip-card, encrypted-text, noise-background, dither-shader, webcam-pixel-grid, images-badge, keyboard, terminal, 3d-globe, ascii-art, scales, text-flipping-board, cards-demo-1, cards-demo-2, cards-demo-3, expandable-card-on-click, features-section-demo-1, features-section-demo-2, features-section-demo-3, features-with-sticky-scroll, hero-with-centered-image, modern-hero-with-gradients, two-column-with-image, full-background-image-with-text, centered-around-testimonials, hero-section-with-images-grid-and-navbar, hero-section-with-beams-and-grid, hero-section-with-noise-background, logo-cloud-marquee, logos-with-blur-flip, spotlight-logo-cloud, three-column-bento-grid, three-columns-with-images, bento-grid-example-three, simple-cta-with-images, cta-with-masonry-images, cta-centered-masonry-gallery, cta-with-background-noise, cta-with-centered-text, cta-with-dashed-grid-lines, testimonials-grid-with-centered-carousel, testimonials-marquee-grid, testimonials-marquee-grid-boxed, testimonials-masonry-grid, simple-pricing-with-three-tiers, pricing-with-switch, pricing-with-switch-and-add-on, pricing-minimal, simple-navbar-with-hover-effects, navbar-with-children, simple-footer-with-four-grids, footer-with-grid, footer-with-big-text, centered-with-logo, registration-form-with-images, login-with-socials-and-email, login-signup-minimal, premium-auth-split, contact-form-grid-with-details, simple-centered-contact-form, blog-with-search, blog-with-search-magazine, blog-with-categories, simple-blog-with-grid, playful-hero-section, frequently-asked-questions-accordion, simple-faqs-with-background, faqs-with-grid, simple-sidebar-with-hover, collapsible-sidebar, grouped-sidebar, blog-content-centered, blog-content-with-toc, stats-for-changelog, stats-with-number-ticker, stats-with-grid-background, stats-with-gradient, background-with-full-video, background-lines, background-with-shooting-stars, background-dots, background-dots-masked, background-dots-masked-vertical, background-grid-with-dots, background-grid-with-dots-and-animations, background-with-skewed-rectangles, background-with-skewed-lines, background-noise-grid, text-animation-flipping-words-demo, text-animation-typewriter-effect-demo, text-animation-blur-fade-in-demo, text-generate-typewriter, login-form-with-gradient, navbar-classic, navbar-mega, navbar-dark-shadow, navbar-pill, navbar-underline, masonry-bento-grid-with-images, minimal-hero-section-with-parallax-images, hero-with-image-and-scales, logo-cloud-with-blur-animation, logo-cloud-with-swap-animation, single-row-logo-cloud, features-grid-with-large-skeletons, pricing-page-with-featured-and-enterprise, bento-grid-with-skeletons, dot-distortion-shader, lines-gradient-shader, spotlight-shader, hero-with-background-and-navbar, hero-section-with-multi-color-background, hero-section-with-infinite-scroll-cards, testimonials-background-with-drag, hero-section-with-flickering-lights, hero-section-with-tabs, hero-section-with-mesh-gradient, hero-section-with-shadow-and-scales, hero-section-with-dither-background, hero-with-chat-input, testimonials-with-carousel, testimonials-with-centered-highlight, features-section-with-skeletons, chat-conversation, folder-with-files, collaborative-cursors, testimonials-hover-illustration, contact-section-with-shader, contact-with-dither-image, team-section-with-scales, team-section-with-light-background, team-section-with-small-avatars, team-section-with-timeline-cards, empty-state-vertical-grid, empty-state-with-cards, empty-state-with-pictures, empty-state-with-draggable-cards, empty-state-with-stacked-cards, feature-section-bento-skeletons, uptime-status-illustration, rotating-tabs-with-text, flipping-images-with-bar, isometric-box, features-with-isometric-blocks, features-with-stacked-isometric-boxes, macbook-illustration, iphone-illustration, dynamic-island, ipad-illustration, bento-grid-illustrations, world-map-illustration, keyboard-illustration, simple-login-with-grid-lines, animated-beam-path-illustration, multi-illustration-bento, feature-section-with-vertical-grids, feature-section-with-horizontal-skeletons, feature-section-with-centered-skeleton, feature-section-with-terminal, box-illustration, feature-with-inline-icons, features-with-hover-and-text-animation, pricing-with-header-and-icons, hero-section-with-mousemove, macbook-illustration-with-icons, text-highlight-illustration, meeting-illustration, inline-icon-illustration, slider-illustration, draggable-cards, faqs-with-dashed-lines, dither-features, multicolored-featuresPreview
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.