@magicui

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

A mockup of an Android device.

A card with a time warping background effect.

A text component with a moving line shadow.

A beautiful aurora text effect

A dynamic text morphing component for Magic UI.

Animated Scroll Progress for your pages

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

A component that displays a pointer when hovering over an element

A customizable, physics-based smooth cursor animation component with spring animations and rotation effects

The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.

A beautiful neon card effect

An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.

A meteor shower effect.

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

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

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

A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.

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

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

A hero video dialog component.

A component which compares two code snippets.

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

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

An animated grid of subtly shifting glyphs with fade effect and theme support.

A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).

A button with a shimmering light which travels around the perimeter.

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

A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.

Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

Particles 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.

Animate numbers to count up or down to a target number

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

An animated scrolling retro grid effect

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

A light glare effect which pans across text making it appear as if it is shimmering.

A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

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

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

Fade in text as you scroll down the page.

A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.

A text animation that scrambles letters before revealing the final text.

An animated gradient background which transitions between colors for text.

A collection of circles which move in orbit along a circular path

An implementation of the MacOS dock using react + tailwindcss + motion

A vertical rotation of words

Overlapping circles of avatars.

Characters appearing in typed animation

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

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

Comic text animation

An interactive 3D tag cloud component

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

Scrolling text whose speed changes based on scroll speed

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

Shine border is an animated background border effect.

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

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

Cool mode effect for buttons, links, and other DOMs

An animated pulsating button useful for capturing attention of users.

An animated button with ripple useful for user engagement.

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

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

A safari browser mockup to showcase your website.

A mockup of the iPhone

An animated button with a rainbow effect.

A terminal component

A component that displays text with a video playing in the background.

A component that displays an image with a pixelated effect, creating a retro aesthetic.

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

Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin.

A component with animated light rays which shine down from above.

A component with a dotted map.

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

A text component that animates font weight of characters on hover.

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

Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.

Example showing a magic card with an orb effect.

Example showing a mockup of an Android device.

Second example showing a mockup of an Android device.

Third example showing a mockup of an Android device.

Example showing a card with a time warping background effect.

Example showing a text component with a moving line shadow.

Example showing a beautiful aurora text effect.

Example showing a dynamic text morphing component.

Example showing animated scroll progress for your pages.

Example showing a lens effect component

Second example showing a lens effect component

Third example showing a lens effect component

Example showing a pointer effect component

Basic smooth cursor example

Example showing progressive blur effect for scrollable content.

Example showing a beautiful neon card effect.

Example showing the SVG noise texture in a framed panel with a radial mask.

Example showing a newsletter signup card with email input over a noise texture.

Example showing NoiseTexture behind a button label inside a relative button.

Example showing a labeled input field with NoiseTexture filling the input container.

Example showing a meteor shower effect.

Example showing a background grid pattern made with SVGs.

Example showing a background striped pattern made with SVGs.

Example showing a background striped pattern with a dashed stroke.

Example showing a background striped pattern slanting to the right using SVG.

Example showing a grid pattern with linear gradient effects.

Example showing a dashed grid pattern.

Example showing a background hexagon pattern made with SVGs.

Example showing a hexagon pattern with linear gradient effects.

Example showing a dashed hexagon pattern.

Example showing a hexagon pattern with extra spacing between cells.

Example showing a background dot pattern made with SVGs.

Example showing a dot pattern with linear gradient effects.

Example showing a dot pattern with glow effect

Example showing a flickering grid background.

Example showing a flickering grid background with rounded corners.

Example showing a hero video dialog component.

Example showing a hero video dialog with top-in bottom-out animation.

Example showing a component which compares two code snippets.

Example showing an infinite scrolling component.

Example showing a vertical infinite scrolling component.

Example showing an infinite scrolling logo carousel.

Example showing a 3D infinite scrolling component.

Example showing an autorotating, interactive WebGL globe.

Example showing an animated grid of subtly shifting glyphs.

Pricing card with diagonal hover glare (duration 600ms).

CTA card with hover glare (700ms).

Three alerts with custom glare colors and opacity.

Example showing a tweet card with author info.

Example showing a tweet card with images.

Example showing a tweet card with meta preview.

Example showing a button with a shimmering light effect.

Example showing a bento grid layout for showcasing features.

Example showing a vertical bento grid layout.

Example showing animated counting numbers.

Example showing animated counting numbers.

Example showing animated counting decimal numbers.

Example showing an animated ripple effect.

Example showing an animated scrolling retro grid effect.

Example showing a list with sequenced item animations.

Example showing text with a shimmering light effect.

Example showing interactive particle effects.

Example showing an animated grid pattern background.

Example showing an interactive grid pattern background.

Second example showing an interactive grid pattern background.

Example showing an animated border beam effect.

Example showing an animated border beam effect.

Example showing an animated border beam effect.

Example showing an animated border beam effect.

Example showing an animated beam of light effect.

Example showing a unidirectional animated beam effect.

Example showing a bidirectional animated beam effect.

Example showing animated beams with multiple input points.

Example showing animated beams with multiple output points.

Example showing text that fades in on scroll.

Example showing a sweeping color band reveal on headline text.

Custom gradient colors and settled text color on a light background.

Rotating phrases with repeat and repeat delay.

Slower sweep with delay — custom duration and timing.

Example showing text with animated gradient backgrounds.

Second example showing text with animated gradient backgrounds.

Example showing circles moving in orbital paths.

Example showing a MacOS-style dock implementation.

Second example showing a MacOS-style dock implementation.

Third example showing a MacOS-style dock implementation.

Example showing vertical word rotation animation.

Example showing text with scrambling letter animations.

Example showing overlapping avatar circles.

Example showing typed character animations.

Example showing multiple words with looping.

Example showing custom typing and deleting speeds.

Example showing animation that starts when in viewport.

Example showing typing animation without cursor.

Example showing single play without looping.

Example showing cursor blinking control.

Example showing different cursor styles (line, block, underscore).

Example showing text speed changes based on scroll velocity.

Example showing Unsplash images scrolling with speed reacting to scroll velocity.

Example showing text with animated sparkle effects.

Example showing spinning text animation.

Example showing spinning text animation.

Example showing comic text animation.

Example showing an interactive 3D icon cloud.

Second example showing an interactive 3D icon cloud.

Third example showing an interactive 3D icon cloud.

Example showing various text animations.

Second example showing various text animations.

Third example showing various text animations.

Fourth example showing various text animations.

Fifth example showing various text animations.

Sixth example showing various text animations.

Seventh example showing various text animations.

Eighth example showing various text animations.

Ninth example showing various text animations.

Example showing a shiny button with dynamic styles.

Example showing an animated circular progress gauge.

Example showing an animated shining border effect.

Second example showing an animated shining border effect.

Example showing confetti animations for celebrations.

Example showing basic confetti cannon animation.

Example showing confetti with random directions.

Example showing fireworks-style confetti animation.

Example showing star-shaped confetti animation.

Example showing side-mounted confetti cannons.

Example showing confetti with custom shape particles.

Example showing confetti with emoji particles.

Example showing cool mode effect for buttons and links.

Example showing customized cool mode effects.

Example showing an animated pulsating button.

Example showing an animated pulsating button with a ripple varaint.

Example showing an animated button with ripple effect.

Example showing a component that displays folder and file structure.

Example showing blur fade in and out animations.

Example showing blur fade animations with text.

Example showing a Safari browser mockup.

Second example showing a Safari browser mockup.

Third example showing a Safari browser mockup.

Fourth example showing a Safari browser mockup.

Example showing an iPhone mockup.

Second example showing an iPhone mockup.

Third example showing an iPhone mockup.

Example showing an animated button with rainbow effect.

Example showing an animated button with rainbow effect.

Example showing an interactive button with hover effects.

Example showing a terminal with animated text.

Example showing a terminal with animated text and custom delays

Example showing text with a video background.

Example showing a pixelated image effect.

Example showing the demo of a Highlighter

Example showing animation while changing the theme.

Theme transition with a square clip reveal.

Theme transition with a diamond-shaped clip reveal.

Theme transition with a rectangle clip reveal.

Theme transition with a hexagon clip reveal.

Theme transition with a triangle clip reveal.

Theme transition with a star-shaped clip reveal.

Controlled usage with next-themes so useTheme() subscribers stay in sync on toggle.

Demo of the light-rays component showcasing animated light rays

Example showing a dotted map.

Example showing a dotted map.

Example showing a dotted map with pulse animation.

An example of the backlight component with a video.

An example of the backlight component with a image.

An example of the backlight component with SVGs.

An example of the kinetic text component.

Example showing a 3D text animation that rotates each letter on hover.

Example showing a 3D text flip with stagger from center.