Prompt & style library

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

Scrolling text whose speed changes based on scroll speed

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 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 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 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 card that displays a tweet with the author's name, handle, and profile picture.

Magic UI

A text component with a video background.

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

A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

Motion-Primitives

A customizable glow effect with animation modes, colors, blur-sm, and transitions.

Motion-Primitives

Interactively compare two images with a draggable slider to reveal differences.

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

Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, mar…

Motion-Primitives

A magnetic effect for elements that allows them to be attracted to the mouse cursor.

Motion-Primitives

A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.

Motion-Primitives

A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

Motion-Primitives

A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

Motion-Primitives

Animated scroll progress for your web pages.

Motion-Primitives

A component that slides numbers.

Motion-Primitives

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

Motion-Primitives

A dynamic spotlight effect component that follows cursor movement.

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

3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.

Motion-Primitives

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

Motion-Primitives

Changes height based on content, expanding to display more tools and shrinking to save space. Keeps your screen organized and efficient.

Motion-Primitives

Motion-Primitives

An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas p…

StyleKit

Scrolling is the narrative timeline. A sticky canvas pins to the viewport while text steps scroll past it, each step triggering a state change — numbers count, shapes morph, layers light up. Information reveals frame by…

StyleKit

StyleKit

A floating particle network on deep dark tech backgrounds, using connection lines, pulses, and trails to create a sense of data flow. Ideal for tech companies, data visualization, and creative portfolios.

StyleKit

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

wshobson agents

Apple's revolutionary design language from WWDC 2025, creating an organic, fluid visual experience beyond traditional frosted glass through SVG refraction filters, rainbow edge halos, fluid morphing animations, and mult…

StyleKit

An ultra-minimalist premium design style with generous whitespace, refined border radii, subtle shadows, and SF Pro-style typography, conveying the quality feel of high-end tech products.

StyleKit