animated-beam
An animated beam of light which travels along a path.
animated-circular-progress-bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
animated-gradient-text
An animated gradient background which transitions between colors for text.
animated-grid-pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
animated-list
A list that animates each item in sequence with a delay.
animated-shiny-text
A light glare effect which pans across text making it appear as if it is shimmering.
animated-subscribe-button
An animated subscribe button useful for showing a micro animation from intial to final result.
bento-grid
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
border-beam
An animated beam of light which travels along the border of its container.
box-reveal
Sliding box animation that reveals text behind it.
confetti
Confetti animations are best used to delight your users when something special happens.
dock
An implementation of the MacOS dock using react + tailwindcss + framer motion.
dot-pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
file-tree
A component used to showcase the folder and file structure of a directory.
flickering-grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
globe
An autorotating, interactive, and highly performant globe made using WebGL.
grid-pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
hyper-text
A text animation that scrambles letters before revealing the final text.
interactive-grid-pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
interactive-hover-button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
line-shadow-text
A line shadow text component for Magic UI.
magic-card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
marquee
An infinite scrolling component that can be used to display text, images, or videos.
morphing-text
A dynamic text morphing component for Magic UI.
number-ticker
Animate numbers to count up or down to a target number.
orbiting-circles
A collection of circles which move in orbit along a circular path.
particles
Particles are a fun way to add some visual flair to your website.
pulsating-button
An animated pulsating button useful for capturing attention of users.
ripple
An animated ripple effect typically used behind elements to emphasize them.
ripple-button
An animated button with ripple useful for user engagement.
scratch-to-reveal
The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
scroll-based-velocity
Scrolling text whose speed changes based on scroll speed.
scroll-progress
Animated Scroll Progress for your pages.
shimmer-button
A button with a shimmering light which travels around the perimeter.
shine-border
Shine border is an animated background border effect.
shiny-button
A shiny button component with dynamic styles in the dark mode or light mode.
sparkles-text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
text-animate
A text animation component that animates text using a variety of different animations.
warp-background
A container component that applies a warp animation effect to its children.