Prompt & style library

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

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

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

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

Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit,…

StyleKit

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

A premium SaaS aesthetic built on a real-time WebGL fragment-shader mesh gradient. A slowly breathing iridescent field flows across a near-black canvas while frosted-glass panels float above it, paired with a clean mode…

StyleKit