Macbook Scroll
Scroll through the page and see the image come out of the screen.
3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
Google Gemini Effect
An effect of SVGs as seen on the Google Gemini Website
Animated Tooltip
A cool tooltip that reveals on hover, follows mouse pointer
Aurora Background
A subtle Aurora or Southern Lights background for your website.
Background Beams
Multiple background beams that follow a path of SVG, makes a good hero section background.
Background Gradient Animation
A smooth and elegant background gradient animation that changes the gradient position over time.
Canvas Reveal Effect
A dot background that expands on hover, as seen on Clerk's website
GitHub Globe
A globe animation as seen on GitHub's homepage. Interactive and customizable.
Glowing Background Stars Card
Card background stars that animate on hover and animate anyway
Hero Highlight
A background effect with a text highlight component, perfect for hero sections.
Hero Parallax
A scroll effect with rotation, translation and opacity animations.
Lamp Section Header
A lamp effect as seen on linear, great for section headers.
Layout Grid
A layout effect that animates the grid item on click, powered by framer motion layout
Meteor Effect
A group of beams in the background of a container, sort of like meteors.
Moving Border
A border that moves around the container. Perfect for making your buttons stand out.
Placeholders And Vanish Input
Sliding in placeholders and vanish effect of input on submit
Sparkles
A configurable sparkles component that can be used as a background or as a standalone component.
Spotlight
A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.
Sticky Scroll Reveal
A sticky container that sticks while scrolling, text reveals on scroll
SVG Mask Effect
A mask reveal effect, hover the cursor over a container to reveal what's underneath.
Text Generate Effect
A cool text effect that fades in text on page load, one by one.
Text Reveal Card
Mousemove effect to reveal text content at the bottom of the card.
Typewriter Effect
Text generates as if it is being typed on the screen.
Vortex Background
A wavy, swirly, vortex background ideal for CTAs and backgrounds.
Wavy Background
A cool background effect with waves that move.
Wobble Card
A card effect that translates and scales on mousemove, perfect for feature cards.
Multi Step Loader
A step loader for screens that take a lot of time to load.
3D Animated Pin
A gradient pin that animates on hover, perfect for product links
Background Boxes
A full width background box container that highlights on hover
Background Gradient
An animated gradient that sits at the background of a card, button or anything.
Hover Effect
Hover over the cards and the effect slides to the currently hovered card.
Following Pointer
A custom pointer that follows mouse arrow and animates in pointer and content.
Images Slider
A full page slider with images that can be navigated with the keyboard.
We are working hard to bring you more components. Bookmark this page to stay tuned!