Components

AndroidA mockup of an Android device.

Animated BeamAn animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

Animated Circular Progress BarAnimated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

Animated Gradient TextAn animated gradient background which transitions between colors for text.

Animated Grid PatternA animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Animated ListA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

Animated Shiny TextA light glare effect which pans across text making it appear as if it is shimmering.

Theme TogglerAnimated theme toggle using the View Transitions API with configurable clip-path shapes and origin.

Aurora TextA beautiful aurora text effect

Avatar CirclesOverlapping circles of avatars.

BacklightA backlight glow effect for videos, images, and SVGs.

Bento GridA bento grid layout component that showcases content in a grid of cards with hover effects.

Blur FadeBlur fade in and out animation. Used to smoothly fade in and out content.

Border BeamAn animated beam of light which travels along the border of its container.

Code ComparisonA component which compares two code snippets.

Comic TextComic text animation that looks like a comic book text

ConfettiConfetti animations are best used to delight your users when something special happens

Cool ModeCool mode effect for buttons, links, and other DOMs

Dia Text RevealA horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.

DockAn implementation of the macOS dock using SolidJS + TailwindCSS + motion.

Dot PatternA background dot pattern made with SVGs, fully customizable using Tailwind CSS.

Dotted MapA component with a svg dotted map.

File TreeA component used to showcase the folder and file structure of a directory.

Flickering GridA flickering grid background made with SVGs, fully customizable using Tailwind CSS.

Glare HoverA diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.

GlobeAn autorotating, interactive, and highly performant globe made using WebGL.

Glyph MatrixAn animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.

Grid PatternA background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Hero Video DialogA hero video dialog component that opens a video player with configurable animations.

Hexagon PatternA background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.

Text HighlighterA text highlighter that mimics the effect of a human-drawn marker stroke.

Hyper TextA text animation that scrambles letters before revealing the final text.

Icon CloudAn interactive 3D tag cloud component.

Interactive Grid PatternA interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Interactive Hover ButtonA visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

iPhoneA mockup of the iPhone

Kinetic TextA text component that animates font weight of characters on hover.

LensA interactive component that enables zooming into images, videos and other elements.

Light RaysA component with animated light rays which shine down from above.

Line Shadow TextA text component with a moving line shadow.

Magic CardA spotlight effect that follows your mouse cursor and highlights borders on hover.

MarqueeAn infinite scrolling component that can be used to display text, images, or videos.

MeteorsA meteor shower effect.

Morphing TextA dynamic text morphing component for Magic UI.

Neon Gradient CardA beautiful neon card effect

Noise TextureAn SVG fractal noise layer using feTurbulence for subtle texture overlays.

Number TickerAnimate numbers to count up or down to a target number.

Orbiting CirclesA collection of circles which move in orbit along a circular path.

ParticlesParticles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.

Pixel ImageA component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.

PointerA component that displays a pointer when hovering over an element.

Progressive BlurAdd a progressive blur effect to scrollable content

Pulsating ButtonAn animated pulsating button useful for capturing attention of users.

Rainbow ButtonAn animated button with a rainbow effect

Retro GridAn animated scrolling retro grid effect

RippleAn animated ripple effect typically used behind elements to emphasize them.

Ripple ButtonAn animated button with ripple useful for user engagement

SafariA safari browser mockup to showcase your website.

Scroll Based VelocityScrolling text whose speed changes based on scroll speed

Scroll ProgressAnimated Scroll Progress for your pages

Shimmer ButtonA button with a shimmering light which travels around the perimeter

Shine BorderShine border is an animated background border effect.

Shiny ButtonA shiny button component with dynamic styles in the dark mode or light mode.

Smooth CursorA customizable, physics-based smooth cursor animation component.

Sparkles TextA dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

Spinning TextThe Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.

Striped PatternA background striped pattern made with SVGs, fully customizable using Tailwind CSS.

TerminalAn implementation of the MacOS terminal. Useful for showcasing a command line interface.

Text 3D FlipA text effect that flips each letter in 3D with a staggered animation on hover.

Text AnimateA text animation component that animates text using a variety of different animations.

Text RevealFade in text as you scroll down the page.

Tweet CardA card that displays a tweet with the author's name, handle, and profile picture.

Typing AnimationCharacters appearing in typed animation.

Video TextA text component with a video background.

Warp BackgroundA card with a time warping background effect.

Word RotateA vertical rotation of words