aceternity
animated-beam-path-illustrationAnimated beam path illustration with glowing SVG animation following a dotted path
background-dotsBackground Dots
background-dots-maskedBackground Dots Masked
background-dots-masked-verticalBackground Dots Masked Vertical
background-grid-with-dotsBackground Grid with Dots
background-grid-with-dots-and-animationsBackground Grid with Dots and Animations
background-linesBackground Lines
background-noise-gridBackground Noise Grid
background-with-full-videoBackground With Full Video
background-with-shooting-starsBackground With Shooting Stars
background-with-skewed-linesBackground With Skewed Lines
background-with-skewed-rectanglesBackground With Skewed Rectangles
bento-grid-example-threeBento Grid Example Three
bento-grid-illustrationsBento grid showcasing MacBook, iPhone, iPad, and Dynamic Island illustrations
bento-grid-with-skeletonsA grid of 6 with skeletons, title and descriptions. Skeletons are modern and designed to be minimal. With chat like interfaces for skeletons, perfect for showcasing features or demos of product.
blog-content-centeredBlog Content Centered
blog-content-with-tocBlog Content With Toc
blog-with-categoriesBlog listing with three featured cards and a denser four-column grid below, category labels on each post
blog-with-searchBlog With Search
blog-with-search-magazineBlog With Search — magazine layout with cover story and card grid
box-illustrationInteractive box illustration with popout cards on hover
cards-demo-1Background Overlay Card
cards-demo-2Content Card
cards-demo-3Feature Block Animated Card
centered-around-testimonialsCentered Around Testimonials
centered-with-logoCentered With Logo
chat-conversationChat Conversation
collaborative-cursorsCollaborative Cursors
collapsible-sidebarCollapsible Sidebar
contact-form-grid-with-detailsContact Form Grid With Details
contact-section-with-shaderContact Section With Shader Background and Rotating Testimonials
contact-with-dither-imageContact section with dithered landscape background, testimonial card, and split form
cta-centered-masonry-galleryCTA Centered Masonry Gallery
cta-with-background-noiseCTA With Background Noise
cta-with-centered-textCTA With Centered Text
cta-with-dashed-grid-linesCTA With Dashed Grid Lines
cta-with-masonry-imagesCTA With Masonry Images
dither-featuresFeature section with dithered image backdrop, tabbed content cards, and chat conversation skeletons
dot-distortion-shaderA dot distortion shader for creating dynamic background effects.
draggable-cardsSwipeable stack of profile cards with spring physics; flick cards off the deck and they cycle to the back
dynamic-islandAnimated Dynamic Island with customizable idle, loading, and processed states
empty-state-vertical-gridFull-height empty state on a dotted canvas with three image cards for choosing how to start
empty-state-with-cardsEmpty project state with corner grid lines, CTAs, and fanned template thumbnails
empty-state-with-draggable-cardsEmpty hiring-style layout with a swipeable card deck above primary actions
empty-state-with-picturesCentered empty state with stacked photo frames and gentle motion
empty-state-with-stacked-cardsSoft panel empty state with overlapping template previews and doc link
expandable-card-on-clickExpandable Card On Click
faqs-with-dashed-linesFAQs With Dashed Lines and Accordion
faqs-with-gridFaqs With Grid
feature-section-bento-skeletonsBento Grid Feature Section With Animated Skeletons
feature-section-with-centered-skeletonThree-column feature section with icon-led copy on the sides and a centered showcase area (image backdrop plus animated reveal)
feature-section-with-horizontal-skeletonsFeature section with horizontal device skeletons (iPhone, MacBook, iPad) with animated beams, Dynamic Island interactions, and compliance/security cards
feature-section-with-terminalFeature section with animated terminal and expandable feature tabs
feature-section-with-vertical-gridsFeature section with vertical grid layout, animated skeletons including login form, world map, chat conversation, and keyboard
feature-with-inline-iconsMinimal feature grid with inline icons and responsive separators
features-grid-with-large-skeletonsA grid of 3 with micro-interactions and animations. Title and descriptions are flex row aligned on desktop screens and column on mobile screens. There are skeleton items with perspective designs, adding depth into the design. Cards have title, description, badge, and tags.
features-section-demo-1Simple with card gradient
features-section-demo-2Simple with hover effects
features-section-demo-3Bento Grid
features-section-with-skeletonsFeatures Section With Skeletons
features-with-accordion-and-imageFeature section with accordion list, CTAs, and a cinematic image preview with floating assistant UI
features-with-hover-and-text-animationFeature grid with hover-driven headline and Motion text swap, responsive cell dividers
features-with-isometric-blocksFeature cards with animated isometric box illustrations
features-with-stacked-isometric-boxesFeature section with stacked isometric boxes and autoplay animation
features-with-sticky-scrollFeatures with sticky scroll
flipping-images-with-barAnimated Image Carousel with Scanning Bar Reveal and Sparkle Effects
folder-with-filesFolder With Files
footer-with-big-textFooter With Big Text
footer-with-gridFooter With Grid
frequently-asked-questions-accordionFrequently Asked Questions Accordion
full-background-image-with-textFull Background Image With Text
grouped-sidebarGrouped Sidebar with Collapsible Groups and Persistent State
hero-section-with-beams-and-gridHero Section With Beams and Grid
hero-section-with-dither-backgroundHero Section With Dither Background
hero-section-with-flickering-lightsHero Section With Flickering Lights
hero-section-with-images-grid-and-navbarHero Section With Images Grid and Navbar
hero-section-with-infinite-scroll-cardsHero Section With Infinite Scroll Cards
hero-section-with-mesh-gradientHero Section With Mesh Gradient
hero-section-with-mousemoveHero section with hover highlight showing element dimensions and sliding number animation
hero-section-with-multi-color-backgroundHero Section With Multi Color Background
hero-section-with-noise-backgroundHero Section With Noise Background
hero-section-with-shadow-and-scalesHero Section With Shadow and Scales
hero-section-with-tabsHero Section With Tabs
hero-with-background-and-navbarHero With Background And Navbar
hero-with-centered-imageHero With Centered Image
hero-with-chat-inputHero with navbar, large chat-style prompt textarea, action bar, and sample work grid
hero-with-image-and-scalesA modern hero section with image and scales. Incorporates tailwind's blue 500 variant of color. A beautiful hero section with title, description, 2 CTA buttons and an Image. Image has a mouse move event that shows the scales behind the image. Perfect for hero sections that require a modern look.
inline-icon-illustrationHeadline with inline logo badge, periodic wiggle, and dashed connector to icon callouts
ipad-illustrationInteractive iPad illustration with Dynamic Island animation
iphone-illustrationInteractive iPhone illustration with Dynamic Island animation
isometric-boxMinimal Isometric Box Illustration with Hover Animation
keyboard-illustrationMini Mac keyboard illustration with blue hover glow and size variants
lines-gradient-shaderA lines gradient shader for creating animated gradient backgrounds.
login-form-with-gradientLogin Form With Gradient
login-signup-minimalLogin Signup Minimal
login-with-socials-and-emailLogin With Socials And Email
logo-cloud-marqueeLogo Cloud Marquee
logo-cloud-with-blur-animationA collection of 6 logos of modern companies, animation is staggered and logos are aligned in a grid of 3. Perfect for logo clouds that require a modern look.
logo-cloud-with-swap-animationA logo cloud with 10 logos in a 5x2 grid that swap every 3 seconds. Logos animate horizontally with blur effect and staggered timing for a smooth transition.
logos-with-blur-flipLogos With Blur Flip
macbook-illustrationInteractive MacBook illustration with lid animation and Dynamic Island
macbook-illustration-with-iconsMacBook illustration with floating icon cards on hover
masonry-bento-grid-with-imagesMasonry Bento Grid With Images, useful for showcasing brands or products
meeting-illustrationMeeting confirmation card with highlighted time, avatar, and join or reschedule actions
minimal-hero-section-with-parallax-imagesMinimal Hero Section With Parallax Images, images are displayed on top of each other with animation. Simple hero section with Title, description, CTA Buttons and images.
modern-hero-with-gradientsModern Hero With Gradients
multi-illustration-bentoMulti-illustration bento grid with world map, keyboard, and login skeletons
multi-level-features-with-illustrationsFeature section with sticky nav, scroll-spy feature levels, and landscape illustration panels
multicolored-featuresFeature section with YouTube creator highlights, multicolor gradient rows, thumbnails, and embedded video modal
navbar-classicClassic navbar with search
navbar-dark-shadowDark navbar with ridge shadows, dropdown mega menu with blog panel, and light/dark mode
navbar-megaNavbar with Mega Menu and Hover Effects
navbar-pillNavbar with Pills and tabs
navbar-underlineNavbar with Underline and hover effects
navbar-with-childrenNavbar With Children
playful-hero-sectionPlayful Hero Section
premium-auth-splitPremium Auth Split with WebGL Shader
pricing-minimalMinimal Pricing with Enterprise Section
pricing-page-with-featured-and-enterprisePricing Page With Featured And Enterprise. This pricing page is designed to showcase the features of the product and the enterprise plan. It includes a featured plan with a discount, a regular plan, a bigger plan and an enterprise plan. Featured plan has an immersive shadow to make it stand out.
pricing-with-header-and-iconsData-driven pricing cards with featured plan styling and dark mode support
pricing-with-switchPricing With Switch
pricing-with-switch-and-add-onPricing With Switch And Add On
registration-form-with-imagesRegistration Form With Images
rotating-tabs-with-textRotating Notification Cards with Stacked Animation
simple-blog-with-gridSimple Blog With Grid
simple-centered-contact-formSimple Centered Contact Form
simple-cta-with-imagesSimple CTA With Images
simple-faqs-with-backgroundSimple FAQs With Background
simple-footer-with-four-gridsSimple Footer With Four Grids
simple-login-with-grid-linesSimple login form with dashed grid lines border decoration
simple-navbar-with-hover-effectsSimple Navbar With Hover Effects
simple-pricing-with-three-tiersSimple Pricing With Three Tiers
simple-sidebar-with-hoverSimple Sidebar With Hover
single-row-logo-cloudA single row logo cloud with 5 logos that flips in an interval.
slider-illustrationPricing copy with inline badge, text highlights, and draggable slider with floating segment preview
spotlight-logo-cloudSpotlight Logo Cloud
spotlight-shaderA spotlight shader for creating dynamic spotlight background effects with customizable positions and animations.
stats-for-changelogStats For Changelog
stats-with-gradientStats With Gradient
stats-with-grid-backgroundStats With Grid Background
stats-with-number-tickerStats With Number Ticker
team-section-with-light-backgroundTeam Section With Light Background
team-section-with-scalesTeam Section With Scales
team-section-with-small-avatarsTeam Section With Small Avatars
team-section-with-timeline-cardsTeam Section With Timeline Cards
testimonials-background-with-dragTestimonials Background With Drag
testimonials-grid-with-centered-carouselTestimonials Grid With Centered Carousel
testimonials-hover-illustrationTestimonials Hover Illustration
testimonials-marquee-gridTestimonials Marquee Grid
testimonials-marquee-grid-boxedTwo-row testimonial marquee with framed section and bordered cards
testimonials-masonry-gridTestimonials Masonry Grid
testimonials-with-carouselTestimonials With Carousel
testimonials-with-centered-highlightTestimonials grid with title, subtitle, and optional centered highlight card
text-animation-blur-fade-in-demoText Animation Blur Fade In Demo
text-animation-flipping-words-demoText Animation Flipping Words Demo
text-animation-typewriter-effect-demoText Animation Typewriter Effect Demo
text-generate-typewriterText Generate Typewriter with Keyboard Sounds
text-highlight-illustrationStory text with animated highlight reveal and floating formatting toolbar
three-column-bento-gridThree Column Bento Grid
three-columns-with-imagesThree Columns With Images
two-column-with-imageTwo Column With Image
uptime-status-illustrationInteractive Uptime Status Illustration
world-map-illustrationInteractive world map with dotted continents and customizable location pins with avatars