Prompt & style library

Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive. Best for Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components.

UI/UX Pro Max

Characters appearing in typed animation

Magic UI

Adjusts width dynamically to accommodate varying tool requirements. Starts small and expands to offer more tools as needed.

Motion-Primitives

Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a sing…

StyleKit

Josh's Frogs presents as a high-volume specialty e-commerce site for captive-bred

niveau-grotesk

Awesome DESIGN.md — e-commerce

Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions. Best for Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative,…

UI/UX Pro Max

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

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 light glare effect which pans across text making it appear as if it is shimmering.

Magic UI

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

Magic UI

A beautiful aurora text effect

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

Comic text animation that looks like a comic book text

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

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

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

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

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 text component that animates font weight of characters on hover.

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 text component with a moving line shadow.

Magic UI

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

Magic UI

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

Magic UI

A meteor shower effect.

Magic UI

A dynamic text morphing component for Magic UI.

Magic UI

A beautiful neon card effect

Magic UI

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

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