UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui.
Example showing a meteor shower effect.
A dynamic text morphing component for Magic UI.
Example showing a dynamic text morphing component.
A beautiful neon card effect
Example showing a beautiful neon card effect.
An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.
Example showing the SVG noise texture in a framed panel with a radial mask.
Example showing NoiseTexture behind a button label inside a relative button.
Example showing a labeled input field with NoiseTexture filling the input container.
Example showing a newsletter signup card with email input over a noise texture.
Animate numbers to count up or down to a target number
Example showing animated counting decimal numbers.
Example showing animated counting numbers.
Example showing animated counting numbers.
A collection of circles which move in orbit along a circular path
Example showing circles moving in orbital paths.
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.
Example showing interactive particle effects.
A component that displays an image with a pixelated effect, creating a retro aesthetic.
Example showing a pixelated image effect.
A component that displays a pointer when hovering over an element
Example showing a pointer effect component
The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.
Example showing progressive blur effect for scrollable content.
An animated pulsating button useful for capturing attention of users.
Example showing an animated pulsating button.
Example showing an animated pulsating button with a ripple varaint.
An animated button with a rainbow effect.
Example showing an animated button with rainbow effect.
Example showing an animated button with rainbow effect.
An animated scrolling retro grid effect
Example showing an animated scrolling retro grid effect.
An animated ripple effect typically used behind elements to emphasize them.
An animated button with ripple useful for user engagement.
Example showing an animated button with ripple effect.
Example showing an animated ripple effect.
A safari browser mockup to showcase your website.
Example showing a Safari browser mockup.
Second example showing a Safari browser mockup.
Third example showing a Safari browser mockup.
Fourth example showing a Safari browser mockup.
Scrolling text whose speed changes based on scroll speed
Example showing text speed changes based on scroll velocity.
Example showing Unsplash images scrolling with speed reacting to scroll velocity.
Animated Scroll Progress for your pages
Example showing animated scroll progress for your pages.
A button with a shimmering light which travels around the perimeter.
Example showing a button with a shimmering light effect.