Prompt & style library

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

A meteor shower effect.

Magic UI

A beautiful neon card effect

Magic UI

Animate numbers to count up or down to a target number

Magic UI

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

Magic UI

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.

Magic UI

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

Magic UI

A component that displays a pointer when hovering over an element

Magic UI

Add a progressive blur effect to scrollable content

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

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

Magic UI

Shine border is an animated background border effect.

Magic UI

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

Magic UI

A customizable, physics-based smooth cursor animation component for React applications.

Magic UI

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

Magic UI

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

Magic UI

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

Magic UI

A card with a time warping background effect.

Magic UI

A vertical rotation of words

Magic UI

A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.

Motion-Primitives

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

Easily animate numbers.

Motion-Primitives

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

Motion-Primitives

A flexible and easy-to-use carousel with customizable navigation and indicators.

Motion-Primitives

A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

Motion-Primitives

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Customize the dialog with variants and transition.

Motion-Primitives

The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

Motion-Primitives