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 card perspective effect, hover over the card to elevate card elements.

A collection of hero sections that are modern and stand out

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 real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

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

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

A collection of reusable shaders for your backgrounds.

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

A mac style keyboard component with mechanical keys sound effects.

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

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.

Minimal testimonials sections with image and quote.

A collection of logo clouds with micro interactions and minimal animations

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

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

A customizable carousel with microinteractions and slider.

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

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

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.

A container that flips through words, animating the width.

A set of beautiful, creative backgrounds for landing pages

A tiltable, draggable card component that jumps on bounds.

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.

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

A set of bento grids for various use cases

A set of hero sections ranging from simple to complex layouts

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.

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

Content sections for your single blog posts

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.

Blog sections with search and filters

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 set of cards that can be used for different use cases

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.

Contact sections with forms and micro interactions

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.

CTA sections with modern and minimalist styles

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

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

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

Clean footers with a variety of styles and layouts

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.

A set of motion illustrations for blocks, sections and pages

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.

Login, registration and authentication form sections

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.

Simple and elegant headers for your website.

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

Minimal and elegant pricing sections.

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

A timeline component with sticky header and scroll beam follow.

Elegant sidebars with hover effects and open, close states

Perfect for displaying numbers, stats and changelogs

Testimonials sections for social proof and trust

Text animations components for headings and paragraphs