Aceternity UI
/
components
Files
Code
Info
Compare Slider
compare-slider
A before/after slider for any two views. While you drag, the divider bends, the view it moves toward slides with a motion blur and a color split, and dots spray off it.
Disintegrating Gallery
disintegrating-gallery
An endless strip of images that come apart into squares at the edges of the screen and assemble again as they move back in. Drag to scroll. Built on WebGL.
Fluid Notch
fluid-notch
A dark notch that melts into a grainy card with one question at a time. Answer it and the card folds back, one fewer to review.
Gooey Waitlist
gooey-waitlist
A waitlist pill that splits like liquid into an email field and a button. Letters rise into place as you type; a wrong address shakes the form.
Gravity Trail
gravity-trail
Images drop from your cursor as you move, flung with its speed, and fall under gravity out of the box. No walls, no bounce.
Grid Zoom Image
grid-zoom-image
An image that swells into a grid of zoomed boxes around your cursor. A faster sweep spreads wider, and a soft trail follows.
Hover Image Links
hover-image-links
A vertical list of links. Hover one and its image appears and follows your pointer, trailing on a spring and tilting with its speed.
Image Particles
image-particles
Turns any image or logo into colored dots. They scatter away from your pointer and spring back home; press for a shockwave.
Image Wave
image-wave
An image on a thin 3D slab that a slow wave rolls through, with light running along the crests. Drag it to turn it and see its edge and back; it keeps turning and settles back.
Infinite Card Grid
infinite-card-grid
An endless grid of cards you drag in any direction. Click one and it flies to the center with a few details; close and it flies back.
Matrix Trail
matrix-trail
A subtle field of characters with thin lines raining down, Matrix style. Move over it and the characters light up behind your cursor, leaving a trail that fades away.
Paper Plane Globe
paper-plane-globe
A chat-style postcard composer that prints your note as you type, folds it into a paper plane and circles it around a globe on a glowing trail. It lands on the destination, where a pin pops up to say it arrived; drag the globe to turn it.
Paper Plane Send
paper-plane-send
A note field that prints your note on a sheet, folds it into a paper plane and flies it into the Send button. The button then opens into a receipt from the person who got it.
Speed Counter
speed-counter
A number whose digits race sideways to the new value, each smeared by its own speed. Commas, decimals, signs, currency and locales stay right.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Compare Slider
compare-slider
A before/after slider for any two views. While you drag, the divider bends, the view it moves toward slides with a motion blur and a color split, and dots spray off it.
Disintegrating Gallery
disintegrating-gallery
An endless strip of images that come apart into squares at the edges of the screen and assemble again as they move back in. Drag to scroll. Built on WebGL.
Fluid Notch
fluid-notch
A dark notch that melts into a grainy card with one question at a time. Answer it and the card folds back, one fewer to review.
Gooey Waitlist
gooey-waitlist
A waitlist pill that splits like liquid into an email field and a button. Letters rise into place as you type; a wrong address shakes the form.
Gravity Trail
gravity-trail
Images drop from your cursor as you move, flung with its speed, and fall under gravity out of the box. No walls, no bounce.
Grid Zoom Image
grid-zoom-image
An image that swells into a grid of zoomed boxes around your cursor. A faster sweep spreads wider, and a soft trail follows.
Hover Image Links
hover-image-links
A vertical list of links. Hover one and its image appears and follows your pointer, trailing on a spring and tilting with its speed.
Image Particles
image-particles
Turns any image or logo into colored dots. They scatter away from your pointer and spring back home; press for a shockwave.
Image Wave
image-wave
An image on a thin 3D slab that a slow wave rolls through, with light running along the crests. Drag it to turn it and see its edge and back; it keeps turning and settles back.
Infinite Card Grid
infinite-card-grid
An endless grid of cards you drag in any direction. Click one and it flies to the center with a few details; close and it flies back.
Matrix Trail
matrix-trail
A subtle field of characters with thin lines raining down, Matrix style. Move over it and the characters light up behind your cursor, leaving a trail that fades away.
Paper Plane Globe
paper-plane-globe
A chat-style postcard composer that prints your note as you type, folds it into a paper plane and circles it around a globe on a glowing trail. It lands on the destination, where a pin pops up to say it arrived; drag the globe to turn it.
Paper Plane Send
paper-plane-send
A note field that prints your note on a sheet, folds it into a paper plane and flies it into the Send button. The button then opens into a receipt from the person who got it.
Speed Counter
speed-counter
A number whose digits race sideways to the new value, each smeared by its own speed. Commas, decimals, signs, currency and locales stay right.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information