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
A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.
A cool tooltip that reveals on hover, follows mouse pointer
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.
A skewed grid layout with Title, description and a header component
Cards stack on top of each other after some interval. Perfect for showing testimonials.
Container Scroll Animation
A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.
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.
A scroll effect with rotation, translation and opacity animations.
Infinite Moving Cards
A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.
Lamp Section Header
A lamp effect as seen on linear, great for section headers.
A layout effect that animates the grid item on click, powered by framer motion layout
A group of beams in the background of a container, sort of like meteors.
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.
A customizable form built on top of shadcn's input and label, with a touch of framer motion
A configurable sparkles component that can be used as a background or as a standalone component.
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.
Tabs to switch content, click on a tab to check background animation.
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.
Text generates as if it is being typed on the screen.
A cool background effect with waves that move.
3D Animated Pin
A gradient pin that animates on hover, perfect for product links
A full width background box container that highlights on hover
An animated gradient that sits at the background of a card, button or anything.
Hover over the cards and the effect slides to the currently hovered card.
Direction Aware Hover
A sticky Navbar that hides on scroll, reveals when scrolled up.
A custom pointer that follows mouse arrow and animates in pointer and content.
A full page slider with images that can be navigated with the keyboard.
A navbar menu that animates its children on hover, makes a beautiful bignav
Tailwind CSS buttons
A curated list of awesome, battle tested Tailwind CSS buttons components
We are working hard to bring you more components. Bookmark this page to stay tuned!