Prompt & style library

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

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

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

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

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

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

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

Elegant magazine typography style with serif headings, sans-serif body text, refined whitespace and grid systems. Inspired by high-end fashion magazines and newspaper layouts. Warm cream background, soft black text, fin…

StyleKit