3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
Apple Cards Carousel
A sleek and minimal carousel implementation, as seen on apple.com
Card Spotlight
A card component with a spotlight effect revealing a radial gradient background
Compare
A comparison component between two images, slide or drag to compare
Expandable Cards
Click cards to expand them and show additional information
Feature Sections
A set of feature sections ranging from bento grids to simple layouts
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.
Bento Grid
A skewed grid layout with Title, description and a header component
Canvas Reveal Effect
A dot background that expands on hover, as seen on Clerk's website
Card Stack
Cards stack on top of each other after some interval. Perfect for showing testimonials.
Cards
A set of cards that can be used for different use cases
Evervault Card
A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.
GitHub Globe
A globe animation as seen on GitHub's homepage. Interactive and customizable.
Glare Card
A glare effect that happens on hover, as seen on Linear's website
Glowing Effect
A border glowing effect that adapts to any container or card, as seen on Cursor's website.
Glowing Background Stars Card
Card background stars that animate on hover and animate anyway
Grid and Dot Backgrounds
A simple grid and dots background to make your sections stand out.
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.
Parallax Grid Scroll
A grid where two columns scroll in oposite directions, giving a parallax effect.
Shooting Stars and Stars Background
A shooting star animation on top of a starry background, as seen on figmaplug.in
SVG Mask Effect
A mask reveal effect, hover the cursor over a container to reveal what's underneath.
Text Reveal Card
Mousemove effect to reveal text content at the bottom of the card.
Wobble Card
A card effect that translates and scales on mousemove, perfect for feature cards.
Hover Border Gradient
A hover effect that expands to the entire container with a gradient border.
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.
Direction Aware Hover
A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.
We are working hard to bring you more components. Bookmark this page to stay tuned!