Aceternity UI

A tooltip card container that follows mouse pointer when hovered over

Scroll through the page and see the image come out of the screen, as seen on Fey.com website.

A card perspective effect, hover over the card to elevate card elements.

A collection of hero sections that are modern and stand out

A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

A background effect with opacity animation, glow effect and more.

A text component that reveals the text gradually, gibberish effect.

A badge with images that can be hovered to reveal more images.

A dynamic background effect with animated gradients, noise texture, and smooth motion.

A text hover effect that animates and outlines gradient on hover, as seen on x.ai

A collection of reusable shaders for your backgrounds.

A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.

Minimal testimonials sections with image and quote.

A sleek and minimal carousel implementation, as seen on apple.com

Exploding beams in the background

A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app

A grid of cells that ripple when clicked.

A collection of logo clouds with micro interactions and minimal animations

A card component with a spotlight effect revealing a radial gradient background

A customizable carousel with microinteractions and slider.

A configurable code block component built on top of react-syntax-highlighter.

A text component with various colours, filter and scale effects.

A perspective, 3D, Tilt card as seen on Perplexity Comet's website.

A comparison component between two images, slide or drag to compare

A set of feature sections ranging from bento grids to simple layouts

A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.

A container that flips through words, animating the width.

A tiltable, draggable card component that jumps on bounds.

Click cards to expand them and show additional information

A set of feature sections ranging from bento grids to simple layouts

A minimal file upload form with background grid, drag and drop, and micro interactions.

A set of beautiful, creative backgrounds for landing pages

A floating dock mac os style component, acts as a navigation bar.

Hover over the card to focus on it, blurring the rest of the cards.

A set of hero sections ranging from simple to complex layouts

A text flip effect that changes the layout of surrounding text

A lens component to zoom into images, videos, or practically anything.

A set of simple and minimal loaders for your loading screens and components.

A set of bento grids for various use cases

Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.

A component that highlights text when it's in view, with a pointer and border.

A navbar that changes width on scroll, responsive and animated.

A button that shows a loading state when clicked, and a success state when the action is completed.

A banner component that sticks to top, hides when user scrolls down

A world map with animated lines and dots, programatically generated.

Content sections for your single blog posts

An effect of SVGs as seen on the Google Gemini Website

A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.

A 3D Marquee effect with grid, good for showcasing testimonials and hero sections

A customizable, compound modal component with animated transitions

A cool tooltip that reveals on hover, follows mouse pointer

A subtle Aurora or Southern Lights background for your website.

Blog sections with search and filters

Multiple background beams that follow a path of SVG, makes a good hero section background.

A smooth and elegant background gradient animation that changes the gradient position over time.

A skewed grid layout with Title, description and a header component

A dot background that expands on hover, as seen on Clerk's website

Cards stack on top of each other after some interval. Perfect for showing testimonials.

A set of cards that can be used for different use cases

A set of cards that can be used for different use cases

A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.

A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.

A component that flips through a list of words

A globe animation as seen on GitHub's homepage. Interactive and customizable.

A glare effect that happens on hover, as seen on Linear's website

A border glowing effect that adapts to any container or card, as seen on Cursor's website.

Contact sections with forms and micro interactions

Card background stars that animate on hover and animate anyway

A simple grid and dots background to make your sections stand out.

A background effect with a text highlight component, perfect for hero sections.

A scroll effect with rotation, translation and opacity animations.

A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.

A lamp effect as seen on linear, great for section headers.

CTA sections with modern and minimalist styles

A layout effect that animates the grid item on click, powered by framer motion layout

Dynamic link previews for your anchor tags

A group of beams in the background of a container, sort of like meteors.

A border that moves around the container. Perfect for making your buttons stand out.

A grid where two columns scroll in oposite directions, giving a parallax effect.

Sliding in placeholders and vanish effect of input on submit

Elegant and minimal FAQs with grid, accordions and micro-interactions

A shooting star animation on top of a starry background, as seen on figmaplug.in

Expandable sidebar that expands on hover, mobile responsive and dark mode support

A customizable form built on top of shadcn's input and label, with a touch of framer motion

A configurable sparkles component that can be used as a background or as a standalone component.

A new spotlight component with left and right spotlight, configurable and customizable.

A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.

Clean footers with a variety of styles and layouts

A sticky container that sticks while scrolling, text reveals on scroll

A mask reveal effect, hover the cursor over a container to reveal what's underneath.

Tabs to switch content, click on a tab to check background animation.

A cool text effect that fades in text on page load, one by one.

Mousemove effect to reveal text content at the bottom of the card.

Text generates as if it is being typed on the screen.

Login, registration and authentication form sections

A wavy, swirly, vortex background ideal for CTAs and backgrounds.

A cool background effect with waves that move.

A card effect that translates and scales on mousemove, perfect for feature cards.

A hover effect that expands to the entire container with a gradient border.

A step loader for screens that take a lot of time to load.

A gradient pin that animates on hover, perfect for product links.

Simple and elegant headers for your website.

A full width background box container that highlights on hover

An animated gradient that sits at the background of a card, button or anything.

Hover over the cards and the effect slides to the currently hovered card.

A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.

A sticky Navbar that hides on scroll, reveals when scrolled up.

A custom pointer that follows mouse arrow and animates in pointer and content.

Minimal and elegant pricing sections.

A full page slider with images that can be navigated with the keyboard.

A navbar menu that animates its children on hover, makes a beautiful bignav

A curated list of awesome, battle tested Tailwind CSS buttons components

A timeline component with sticky header and scroll beam follow.

Elegant sidebars with hover effects and open, close states

Perfect for displaying numbers, stats and changelogs

Testimonials sections for social proof and trust

Text animations components for headings and paragraphs