@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