Changelog

World Map Illustration - Interactive dotted world map with customizable location pins featuring teardrop-shaped markers and avatar support.

Keyboard Illustration - Compact Mac keyboard with blue hover glow effects and size variants (sm, md, lg, xl) for cards and bento grids.

• MacBook Illustration - Interactive MacBook with 3D lid animation, blur fade-in content, and Dynamic Island with AirPods connection sequence
• iPhone Illustration - Realistic iPhone with side buttons, Dynamic Island animation, and blur fade-in screen content
• iPad Illustration - Interactive iPad with volume and power buttons, Dynamic Island animation, and blur fade-in screen content
• Dynamic Island - Standalone animated status indicator cycling through idle, loading, and processed states with customizable text
• Bento Grid Illustrations - Minimal bento grid showcasing all device illustrations with compound components

All illustrations feature:

• Spring physics for smooth animations using Motion's useAnimate hook
• Imperative animation control with useImperativeHandle pattern
• Declarative infinite animations with repeat: Infinity
• Auto-looping animations with configurable timing
• Custom props for flexible content and text
• Full dark mode support with matching color schemes

New free component: Parallax Hero Images - absolutely positioned images with mouse-driven parallax effect for hero sections.

Features include blur fade-in animations, depth-based movement speeds, and two variants: default (middle images closest) and edge-focus (top/bottom images closest). Fully responsive with touch support on mobile.

Features With Stacked Isometric Boxes - A two-column feature section with interactive stacked isometric boxes. Features autoplay that cycles through items every 5 seconds, with timer reset on click. The left column displays feature cards with titles and descriptions, while the right column shows stacked isometric boxes with the active one highlighted in blue. Built with Framer Motion for smooth spring animations.

CTA With Masonry Images - A two-column call-to-action block with left-aligned heading, supporting text, and a blue primary button styled like the brand button system. The right side uses a two-column masonry-style image grid with rectangular cards, subtle shadow/ring treatment, and soft edge fading for a polished static presentation.

Premium Auth Split - A full-screen split authentication layout with a live WebGL raymarched shader on the left panel featuring three rotating torus shapes. Right panel has a sign-in form with Google OAuth, email input, and a gradient continue button. Full dark mode support.

New free component: Scales - a repeating line pattern for backgrounds.

Works in three directions: diagonal, horizontal, or vertical. You can change the size and color. There's also a ScalesContainer wrapper if you want to place content on top of it.

Isometric Box - Minimal isometric box illustration with smooth hover animations. Features rounded corners on the top face with sharp structural edges. On hover, the faces animate outward creating an exploded view effect using spring physics.

Features With Isometric Blocks - Feature cards with animated isometric box illustrations. Each card showcases a different animation direction on hover - left, right, or top face movement. Active cards highlight the moving face with a sky-500 stroke color.

Login Signup Minimal - Clean and minimal login form with email and password fields, followed by Google and Apple social login buttons. Features a dashed divider with gradient effect, subtle input styling with ring borders, and full dark mode support.

Pricing Minimal - Clean minimal pricing with three tiers and dashed grid line accents on the featured card. Features a decorative divider with plus icon for additional features, and self-contained mock data for easy customization.

Contact Section With Shader - Two-column contact form with WebGL gradient background and rotating testimonials. Pass your own colors via the colors prop.

Feature Section Bento Skeletons - Bento grid with 4 cards. Each card has an animated skeleton showing the feature in action: messaging, file transfer, team collaboration, and testimonials.

Uptime Status Illustration - Interactive uptime status bar with 45 days of history. Hover over each bar to reveal date, status, and uptime percentage with smooth blur animations. Color-coded for operational, degraded, partial outage, and major outage states.

Rotating Tabs With Text - Stacked notification cards that automatically rotate every 3 seconds. Features spring animations, 3D depth stacking, and full light/dark mode support.

Flipping Images With Bar - Animated image carousel with a scanning bar reveal effect. Images start grayscale and transition to full color as a glowing bar sweeps across with trailing sparkles. Features blur in/out transitions between images.

New component drop: ASCII Art - Transform any image into beautiful ASCII art with customizable charsets and animations.

Features

• Canvas-based rendering - Highly performant, renders thousands of characters smoothly
• 15+ charset presets - Standard, blocks, binary, braille, dots, circles, stars, and more
• Multiple animation styles - Fade, typewriter, matrix rain effects
• Color support - Use original image colors or custom colors including Tailwind CSS variables
• Object-fit control - Cover, contain, or fill modes for image fitting
• Responsive design - Adapts to container size with proper scaling
• Visibility-aware animations - Only animates when component enters viewport

Props

Perfect for creative portfolios, retro-themed sites, or anywhere you want a unique visual effect.

Introducing Explore Mode - a new way to browse and discover components on Aceternity UI.

Explore mode gives you a visual overview of all available components, blocks, and templates in a grid layout. Quickly scan through designs, find inspiration, and jump directly to any component that catches your eye.

How to use

• Click the Explore button in the navigation to enter explore mode
• Browse through the visual grid of all components
• Click any card to view the full component details and code

Perfect for discovering new components or getting a quick overview of what's available.

New component drop: Canvas Text - An animated text component with colorful curved lines rendered on canvas, clipped to the text shape.

Features

• Canvas-based animation - Smooth bezier curve lines animated using requestAnimationFrame
• Background clip text - Lines are clipped to the text shape using CSS background-clip
• Dark mode support - Automatically adapts to light/dark mode via backgroundClassName prop
• CSS variable colors - Pass Tailwind CSS variables like var(--color-blue-500) for colors
• Inline flow - Works seamlessly inline with other text elements
• Customizable - Control line density, animation speed, curve intensity, and colors

Props

Perfect for hero sections, landing pages, or anywhere you want eye-catching animated text effects.

Added a new Features Section With Skeletons block to the feature sections collection.

A three-column features grid with animated skeleton illustrations for each feature. Includes a real-time messaging chat interface, secure file transfer with folder animations, and team collaboration with interactive cursor selections. Full dark mode support.

Introducing a new Illustrations category with four animated blocks for feature sections and landing pages.

• Chat Conversation - Animated messaging bubbles with avatars and staggered entrance animations
• Folder With Files - Interactive 3D folder with hover-reveal files and animated pulse beams
• Collaborative Cursors - Multiplayer cursors drawing selection boxes over a code file
• Testimonials Hover Illustration - Interactive testimonial cards with hover lift and rotate animations

Each illustration triggers on scroll using Motion's useInView hook. Full dark mode support included.

Added a new Testimonials With Carousel block to the testimonials collection.

This block shows three testimonials at a time with smooth animated transitions between pages. It includes previous and next controls, staggered entrance animation for cards, and wrap-around pagination for continuous browsing.

Each card includes quote text, avatar, name, and designation with responsive layout and dark mode support.

Added a new Hero Section with Mesh Gradient to the hero sections collection.

A modern hero section featuring a vibrant mesh gradient background created using multiple overlapping radial gradients positioned at different points. The colors blend smoothly to create a dynamic appearance without any hard edges, with CSS blend modes helping create seamless transitions where colors overlap.

Content is centered using flexbox, with large typography for the headline and lighter weight description text styled in contrasting colors for readability against the colorful background. Includes call-to-action buttons for quick user engagement.

Perfect for SaaS landing pages, creative agency sites, modern app launches, and any project that needs a bold, contemporary first impression.

Added a new Hero Section with Tabs to the hero sections collection.

A modern hero section featuring an interactive tabbed browser window preview. Tabs auto-rotate through different content sections with smooth fade and blur animations, showcasing multiple features or pages in a single component.

The hero includes a bold headline, descriptive subtext, dual CTA buttons, and a social proof section with avatars and star ratings. The browser window features macOS-style traffic light buttons and a scrollable tab bar with dividers. Content images animate in with opacity, translation, and blur effects using Framer Motion.

Perfect for SaaS landing pages, portfolio showcases, feature demonstrations, template galleries, and any product that benefits from showing multiple views in an engaging, interactive format.

Added a new Hero Section with Flickering Lights to the hero sections collection.

A cinematic hero section featuring animated light bulbs arranged on a steel grid that flicker to life in a dramatic staggered sequence. Each bulb transitions through off, flickering, and on states with realistic timing, while random bulbs occasionally fuse with spark particle effects before reigniting.

The component includes a bold headline, description text, and CTA buttons that brighten in sync with the grid illumination. Features a 3D-rotated steel grid with perspective transforms for added depth.

Perfect for industrial product launches, creative agency sites, entertainment platforms, and gaming landing pages.

You can now view components, blocks, and templates in full screen mode. Click the maximize icon in the preview toolbar to open a distraction-free view in a new tab.

New component drop: Keyboard - A beautiful Mac-style keyboard with mechanical key sound effects and keystroke preview.

Features

• Realistic Mac keyboard layout - Complete with function keys, modifiers, and arrow keys
• Mechanical key sounds - Cherry MX Black sound effects using audio sprites
• Keystroke preview - Animated display showing the current key being pressed
• Responsive design - Scales from 0.8x on mobile to 2x on xl screens
• Visibility-aware - Event listeners only active when keyboard is in viewport
• Fully interactive - Click keys or use your physical keyboard

Props

Perfect for landing pages, developer portfolios, or anywhere you want to showcase keyboard interactions.

New component drop: Testimonials Background With Drag.

A super simple panning motion effect for testimonials. Showcases thousands (assumption, infact there are just 15 but repeated), yet focuses on one with panning movements.

Added 3 new Hero Sections to the hero sections collection.

These new hero components feature modern designs with stunning visual effects, perfect for creating impactful landing pages and capturing your visitors' attention right from the start.

The latest addition includes an Infinite Scroll Canvas hero section with an interactive draggable canvas featuring scattered image cards, momentum-based scrolling, and a clean center content area - perfect for showcasing portfolios, galleries, or product showcases.

Added a new Shaders collection - a set of reusable shaders for your backgrounds.

Perfect for adding depth and visual interest to your hero sections, landing pages, and backgrounds.

Added a new Webcam Pixel Grid component - a real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.

Added a new Bento Grid with Skeletons to the bento grids collection.

Added a new Pricing Page with Featured and Enterprise component to the pricing sections collection.

This pricing page is designed to showcase multiple pricing tiers with a focus on highlighting the featured plan. Includes:

• Featured Plan Highlight: Immersive shadow effect to make the featured plan stand out
• Four Tier Structure: Starter, Pro, Business, and Enterprise plans
• Enterprise Section: Dedicated enterprise tier with custom contact option
• Flexible Pricing Display: Shows both actual and discounted prices with percentage savings
• Feature Lists: Detailed feature breakdown for each plan with checkmark icons
• Responsive Design: Adapts seamlessly from mobile to desktop layouts

Perfect for SaaS products, platforms, and services that need a comprehensive pricing presentation with emphasis on featured offerings.

Added the new Agenforce Marketing Template. A marketing template designed for various use cases, including AI Agents, Agency, Chatbots and SaaS. Includes delightful micro-interactions and animations.

Agenforce focuses on delivering a modern, minimal and clean design that is tastefully filled with microinteractions to keep your users engaged.

Loved building this template, took a lot of time to design and develop, micro-interactions and animations are my favourite part of the template.

Perfect for AI agent companies, agencies, chatbot services, and SaaS products looking for a professional and engaging web presence.

Added a new Features Grid with Large Skeletons component to the feature sections collection.

This component showcases a modern 3-column grid layout with interactive skeleton cards that feature:

• 3D Perspective Design: Each skeleton card uses CSS transforms with rotateX, rotateY, and rotateZ for depth and visual appeal
• Interactive Micro-animations: Hover effects and smooth transitions on skeleton elements
• Responsive Layout: Flexbox alignment that adapts from column layout on mobile to row layout on desktop
• Rich Content Structure: Each card includes titles, descriptions, status badges, and categorization tags
• Visual Status Indicators: Color-coded badges (success, warning, danger) with animated icons
• Dotted Glow Background: Integration with the dotted-glow-background component for enhanced visual effects

Perfect for showcasing product features, service capabilities, or workflow processes with an engaging and modern interface that emphasizes visual hierarchy and user interaction.

The component includes three distinct skeleton variations:

1. Stacked Cards Skeleton - Multiple overlapping cards with different z-indices
2. Process Timeline Skeleton - Step-by-step workflow visualization with progress indicators
3. Security Shield Skeleton - Centered shield icon with animated dotted background

Built with Tabler Icons and full TypeScript support for seamless integration into any React application.

Added a new logo cloud component collection with beautiful micro interactions and animations.

These components are perfect for showcasing client logos, partners, or trusted brands with smooth animations and modern design patterns.

• Logo Cloud With Blur Animation - Staggered blur-to-focus animation for logo reveals

Added a new hero section component with parallax images with perspective.

Simple and monochromatic, multipurpose and useful for a lot of use cases.

• Minimal Hero Section With Parallax Images

Added a new hero section component with image and scales.

• Hero With Image And Scales

Useful for a modern hero sections with images that require micro interactions.

Added a new masonry bento grid with images block into the Bento Grids components and registry

• Masonry Bento Grid With Images

Useful for showcasing brands or products.

Added 4 new navbar blocks into the Navbars components and registry

• Navbar Classic
• Navbar Mega
• Navbar Pill
• Navbar Underline

Simple and effective, covers majority of the use cases.

Added a login form component with gradient using WebGL and Motion for React. Perfect for login pages that want to add some flare to the page without actually having to compromise on the form elements.

Today we bring you a page where you can see all the changes and updates to Aceternity UI Pro.

I'll try my best to keep it up to date with the latest changes and updates.

Aceternity UI and Aceternity UI Pro now support ShadCN CLI 3.0.

Which means you can now use ShadCN CLI 3.0 to add components to your project.

npx shadcn@latest add @aceternity-pro [component]
Copy

Example:

npx shadcn@latest add @aceternity-pro/bento-grid-example-three
Copy

Visit the complete documentation here

If you want to use PRO components with the CLI, generate an API KEY in the dashboard and use it with the cli.

Added the new Nodus Marketing Template. Filled with amazing micro-interactions and animations.

Nodus focuses on bringing out the best part of your product in a minimal and concise manner.

Some of the key features are:

• Multi page - Landing, About, Features, Pricing, Careers and Blogs.
• Dark mode support
• Responsive design and follows best practices for SEO.
• Easy to customize and deploy.
• Built with Next.js, Tailwind CSS and Framer Motion.
• Typescript support.
• Easy to deploy and customize.
• Help and support.

Added the new minimal portfolio template and bento grids components.

Now you can view any component in full screen mode. Click on the full screen button in the component preview to view it in full screen mode.

Improved website speed and User Experience. It is now faster and easier to use.

Added the first public release with core components and templates. Including 30+ blocks and 7+ templates