Prompt & style library

An animated gradient background which transitions between colors for text.

Magic UI

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

Magic UI

A beautiful aurora text effect

Magic UI

Comic text animation that looks like a comic book text

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

A text component with a moving line shadow.

Magic UI

A dynamic text morphing component for Magic UI.

Magic UI

An SVG fractal noise layer using feTurbulence for subtle texture overlays.

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

Fade in text as you scroll down the page.

Magic UI

A text component with a video background.

Magic UI

Easily animate text circularly. Customize the animation with variants and transitions.

Motion-Primitives

Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.

Motion-Primitives

Text animation that transitions between multiple items, creating an engaging looping effect.

Motion-Primitives

Animates text by morphing shared letters between words, creating fluid transitions.

Motion-Primitives

A text roll component that rotates each character, fully customizable for nice text animations.

Motion-Primitives

Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.

Motion-Primitives

Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.

Motion-Primitives

Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.

Motion-Primitives

Characters appearing in typed animation

Magic UI

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

Magic UI

Scrolling text whose speed changes based on scroll speed

Magic UI

A mockup of an Android device.

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

Overlapping circles of avatars.

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

A component which compares two code snippets.

Magic UI

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

Magic UI

Cool mode effect for buttons, links, and other DOMs

Magic UI

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

Magic UI

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

Magic UI

A component with a svg dotted map.

Magic UI

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

Magic UI

A canvas-based pseudo-3D particle field with perspective projection, continuous rotation, buoyant drift and depth-aware rendering.

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

A hero video dialog component.

Magic UI

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

Magic UI

An interactive 3D tag cloud component

Magic UI

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

Magic UI

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

Magic UI

A mockup of the iPhone

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI