All Components

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

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

A stunning animated starfield background with glowing and sharp trail effects.

A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.

Simple animated pattern background to make your sections stand out.

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

A dynamic and interactive 3D carousel component using Three.js and Motion-V, allowing smooth infinite rotation and user-controlled interactions.

A stylish 3D text component with customizable colors, shadows, and animation options.

Skew Animation grid with box shadow.

An SVG beam connecting elements with animation.

Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

A sequentially animated list that introduces each item with a timed delay, perfect for displaying notifications or events on your landing page.

Animated company cloud logs. Usually we can use to show company logos.

A modal dialog with a 3D entrance animation and blurred backdrop.

An engaging and animated testimonial component showcasing user feedback with transitions and auto-play functionality.

A cool tooltip that reveals on hover, follows mouse pointer

A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls.

A subtle Aurora or Southern Lights background for your website.

A dynamic balance slider with adjustable colors, limits, and interactive tooltip.

A curved, scrollable 3D gallery with dynamic image cards and animated text rendered using WebGL and OGL.

A cool grid layout with different child component.

A mesmerizing, canvas-driven background effect that simulates a warped “black-hole” tunnel with animated discs, radial lines, and particles.

A component to smoothly blur fade in content.

A 3D book component featuring customizable sizes and color gradients.

A stylish animated border beam effect with customizable size, duration, colors, and delay.

An animated box reveal effect with customizable colors, duration, and delay.

An animated background with floating bubbles.

A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.

A comprehensive color picker component with support for multiple color formats, accessibility features, and custom swatches.

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

Slide to compare any two pieces of content - images, designs, code, or custom elements

A Vue component for confetti animations.

A container scrolling effect that transforms the content inside based on scroll progress. Features smooth transitions with scaling and rotating effects on scroll.

A container that flips through words, animating the width.

A breathtaking, animated 3D portal built with Three.js that features glowing rings, floating crystals, space distortion, and interdimensional streams.

A premium, design-forward testimonial section featuring cinematic typography, magnetic parallax, word-by-word animations, and auto-cycling navigation.

A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.

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

A macOS-style dock with magnifying icons as you hover over them.

A text reveal effect that starts as scrambled characters and progressively decrypts into the final message when it enters the viewport.

A responsive image gallery with an interactive hover effect that expands images dynamically.

A component used to showcase the folder and file structure of a directory.

A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.

A flickering grid background made with Canvas, fully customizable using Tailwind CSS.

A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.

A component that flips through a list of words.

A GPU-accelerated animated cursor trail that simulates fluid motion.

Highlight words in a sentence with a dynamic blurred effect and animated focus frame. Supports auto-cycling or manual hover focus mode.

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

An interactive rotating globe component.

An animated border effect.

A dynamic proximity-based glow effect that reacts to mouse movements and scroll events, perfect for highlighting interactive elements.

A stylish animated button with a rotating conic gradient border and customizable properties for a vibrant look.

A futuristic search input component featuring multiple glowing rings and subtle animated halos for a vibrant, immersive UI experience.

A hyper changing text animation as you hover..

An interactive 3D tag cloud component

An interactive cursor effect that creates a dynamic trail of images following mouse movement with multiple animation variants.

A full page slider with images that can be navigated with the keyboard.

A high-performance, interactive 3D infinite grid component built with OGL as seen on phantom.land

A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.

A interactive background grid pattern made with SVGs, fully customizable.

A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

An SVG mockup of an iPhone.

A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.

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

Staggered letter pull up text animation.

A highly customizable 3D highway speed visual effect built with Three.js, featuring animated road, cars, lights, and distortion effects for immersive motion simulation.

A line shadow text component for Magic UI that adds a shadow effect to the text, making it visually appealing and engaging.

Dynamic link previews for your anchor tags

A reactive and dynamic background effect using OGL for WebGL-based visuals.

A visually striking glassmorphism effect using SVG displacement filters similar to Apple Liquid Glass.

An advanced WebGL-based component that applies a dynamic, liquid effect to logos or images using custom shaders.

Animated flipping logo with origami effect.

A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.

A component that displays a meteor shower animation with customizable meteor count and styling.

This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.

This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.

A step loader for screens that works with async conditions too.

A visually appealing neon border component with customizable animations and colors.

A dynamic, shader-powered animated background with fluid neural-like visuals using OGL and GLSL.

Animate numbers to count up or down to a target number

A component that animates content in a circular orbit, with customizable duration, delay, and radius. It also offers an optional orbit path display.

Visually appealing particle animation applied to images as seen on NuxtLabs.com

An animated background with swirling particles.

Particles can add a dynamic and engaging element to your website's visuals. They help create a feeling of depth, motion, and interaction, making the site more visually appealing.

Showcase your team with pride using our stunning Photo Gallery Component.

Sliding in placeholders and vanish effect of input on submit

A layered backdrop blur effect that gradually increases intensity in a chosen direction, perfect for depth, focus, and visual separation.

A glare effect on text.

A rainbow effect on button.

An animated ripple effect typically used behind elements to emphasize them.

A stylish ripple button component with customizable colors and animation duration.

An SVG mockup of the Safari browser.

The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.

A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.

A powerful and flexible component to render interactive GLSL shaders from ShaderToy in the browser.

A button with a shimmering animated effect.

A soft, flowing shader-powered background inspired by silk fabric motion and texture, rendered using ShaderToy.

A shader-based background.

A reactive animated cursor trail with smooth wave-like motion, using spring physics and dynamic color waves.

A customizable, physics-based smooth cursor animation component for Vue applications.

A beautifully animated snowfall effect applied as a background.

A configurable sparkles component that can be used as a background or as a standalone component.

A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.

A Vue wrapper component for the Spline 3D tool, providing events and auto-resizing.

An animated calendar widget that expands to reveal events and features smooth, spring‑based Motion‑V transitions.

A parallax-animated starfield background using layered motion and randomized star positions.

A shader-based background inspired by intricate fractal patterns and organic textures, created using raymarching and GLSL. This effect is designed to simulate complex, evolving visual textures.

A dynamic SVG mask component that reveals content with hover and mouse movement.

A smooth, colorful ribbon cursor trail rendered with WebGL using OGL, featuring dynamic shaders and customizable animation effects.

A lightweight testimonial slider with image rotation, text transitions, and optional auto‑rotation.

Tetris background component, you can even click on a block to eliminate it.

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

Creates a vibrant glitch effect on text with customizable speed, shadow colors, and optional hover-triggered animation.

A text effect that fill background of a text to highlight it.

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

Animate text line-by-line using GSAP's SplitText for smooth word or line entrance effects.

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

A component that reveals text word by word as you scroll, with customizable text and styling.

A shader-based background inspired by thunderstorm in clouds.

A visually appealing and interactive timeline component with smooth animations, sticky labels, and a gradient scrolling effect.

A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.

A text component with a video background.

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

A container component that applies a warp animation effect to its children

A cool background effect with waves that move.

Displays a customizable world map with animated arcs and pulse effects for geographical points.