Prompt & style library

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

An animated gradient background which transitions between colors for text.

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

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

Magic UI

Easily animate numbers.

Motion-Primitives

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

Magic UI

Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigation…

Motion-Primitives

Motion-Primitives

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

Animate numbers to count up or down to a target number

Magic UI

An animated pulsating button useful for capturing attention of users.

Magic UI

An animated button with a rainbow effect.

Magic UI

An animated button with ripple useful for user engagement.

Magic UI

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

Magic UI

Animated Scroll Progress for your pages

Magic UI

Shine border is an animated background border effect.

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

Animated border effect that moves along the edges of its parent container.

Motion-Primitives

Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

Motion-Primitives

Animated scroll progress for your web pages.

Motion-Primitives

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

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

Motion-Primitives