Prompt & style library

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

Magic UI

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

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 animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.

Magic UI

A text component that animates font weight of characters on hover.

Magic UI

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

Magic UI

Scrolling text whose speed changes based on scroll speed

Magic UI

A text effect that flips each letter in 3D with a staggered animation on hover.

Magic UI

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

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

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 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

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

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

Motion-Primitives