Components

A tooltip card container that follows mouse pointer when hovered over

Scroll through the page and see the image come out of the screen, as seen on Fey.com website.

A collection of hero sections that are modern and stand out

Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.

A collection of reusable shaders for your backgrounds.

A search-style input that expands with a gooey SVG filter and shared layout animation

A mac style terminal component with bash syntax highlighting and typewriter effect.

A collection of logo clouds with micro interactions and minimal animations

A card perspective effect, hover over the card to elevate card elements.

A set of feature sections ranging from bento grids to simple layouts

Convert any image to ASCII art with customizable charsets, colors, and animations.

Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.

A realistic globe component with tooltips and avatar tips

A set of beautiful, creative backgrounds for landing pages

A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

A set of bento grids for various use cases

A background effect with opacity animation, glow effect and more.

A text component that reveals the text gradually, gibberish effect.

A badge with images that can be hovered to reveal more images.

Content sections for your single blog posts

A mac style keyboard component with mechanical keys sound effects.

Blog sections with search and filters

A dynamic background effect with animated gradients, noise texture, and smooth motion.

A repeating diagonal, horizontal, or vertical line pattern background effect.

A text hover effect that animates and outlines gradient on hover, as seen on x.ai

A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.

A set of cards that can be used for different use cases

Minimal testimonials sections with image and quote.

A sleek and minimal carousel implementation, as seen on apple.com

Contact sections with forms and micro interactions

CTA sections with modern and minimalist styles

Exploding beams in the background

A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app

A grid of cells that ripple when clicked.

A card component with a spotlight effect revealing a radial gradient background

Elegant and minimal FAQs with grid, accordions and micro-interactions

A customizable carousel with microinteractions and slider.

A configurable code block component built on top of react-syntax-highlighter.

Clean footers with a variety of styles and layouts

A set of motion illustrations for blocks, sections and pages

A text component with various colours, filter and scale effects.

A perspective, 3D, Tilt card as seen on Perplexity Comet's website.

A comparison component between two images, slide or drag to compare

A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.

Login, registration and authentication form sections

Simple and elegant headers for your website.

A container that flips through words, animating the width.

A tiltable, draggable card component that jumps on bounds.

Minimal and elegant pricing sections.

Click cards to expand them and show additional information

A set of feature sections ranging from bento grids to simple layouts

A minimal file upload form with background grid, drag and drop, and micro interactions.

A floating dock mac os style component, acts as a navigation bar.

Elegant sidebars with hover effects and open, close states

Hover over the card to focus on it, blurring the rest of the cards.

Perfect for displaying numbers, stats and changelogs

A set of hero sections ranging from simple to complex layouts

Testimonials sections for social proof and trust

A text flip effect that changes the layout of surrounding text

A lens component to zoom into images, videos, or practically anything.

A set of simple and minimal loaders for your loading screens and components.

Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.

Text animations components for headings and paragraphs

A component that highlights text when it's in view, with a pointer and border.

A navbar that changes width on scroll, responsive and animated.

A button that shows a loading state when clicked, and a success state when the action is completed.

A banner component that sticks to top, hides when user scrolls down

A world map with animated lines and dots, programatically generated.

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 3D Marquee effect with grid, good for showcasing testimonials and hero sections

A customizable, compound modal component with animated transitions

A cool tooltip that reveals on hover, follows mouse pointer

A subtle Aurora or Southern Lights background for your website.

Multiple background beams that follow a path of SVG, makes a good hero section background.

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

A dot background that expands on hover, as seen on Clerk's website

Cards stack on top of each other after some interval. Perfect for showing testimonials.

A set of cards that can be used for different use cases

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.

A component that flips through a list of words

A globe animation as seen on GitHub's homepage. Interactive and customizable.

A glare effect that happens on hover, as seen on Linear's website

A border glowing effect that adapts to any container or card, as seen on Cursor's website.

Card background stars that animate on hover and animate anyway

A simple grid and dots background to make your sections stand out.

A background effect with a text highlight component, perfect for hero sections.

A scroll effect with rotation, translation and opacity animations.

A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.

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

Dynamic link previews for your anchor tags

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.

A grid where two columns scroll in oposite directions, giving a parallax effect.

Sliding in placeholders and vanish effect of input on submit

A shooting star animation on top of a starry background, as seen on figmaplug.in

Expandable sidebar that expands on hover, mobile responsive and dark mode support

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 new spotlight component with left and right spotlight, configurable and customizable.

A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.

A sticky container that sticks while scrolling, text reveals on scroll

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.

A cool text effect that fades in text on page load, one by one.

Mousemove effect to reveal text content at the bottom of the card.

Text generates as if it is being typed on the screen.

A wavy, swirly, vortex background ideal for CTAs and backgrounds.

A cool background effect with waves that move.

A card effect that translates and scales on mousemove, perfect for feature cards.

A hover effect that expands to the entire container with a gradient border.

A step loader for screens that take a lot of time to load.

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.

A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.

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

A curated list of awesome, battle tested Tailwind CSS buttons components

A timeline component with sticky header and scroll beam follow.