Pixel Perfect components

Pixel Perfect UI is a precision-crafted UI library built for developers and designers who care about details.

Components: 316
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 743
Source: https://github.com/vansh-nagar/Pixel-Perfect
Website: https://www.pixel-perfect.space

All Pixel Perfect components

3D Button: 3D push button with press/hover physics and 8 color variants: amber, emerald, rose, sky, violet, slate, coral, mint.
Abhinav Bento Button: A large bento-style button.
Accordion Carousel: An accordion of vertical image panels — the active panel springs wide to reveal its photo and caption while the rest compress into slim…
Accordion Fold: A paper map of hinged panels that folds itself up like an accordion and flattens back out.
Animated Texture: Helper that builds an animated (GIF/video-capable) Three.js texture for image shaders.
Antinomy Button: Text label that slides right on hover as two gooey pills bloom and merge behind an action word, in subtle and solid variants.
Aperture Mask Reveal: A camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an inline SVG mask.
Arrow Letter Background: A field of diagonal arrows where a red letter spells out a word one character at a time, each change sweeping across in the arrows' own…
Aurora Curtain: Drifting ribbons of green and violet light over a deep night sky.
Bar Wave Animation: Bar Wave Animation component.
Bayer Sunset Background: A 1-bit retro sunset: a banded sun over a scrolling perspective grid, rendered in two colours with a Bayer ordered dither.
Before After: Drag the handle to wipe between two images with a liquid seam.
Bend Button Follower: A rounded pill button with text that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.
Bend Image Reveal: A pixel-art frame that flies in and warps with an air-friction bend, deformed on a WebGL plane by a GSAP-driven vertex shader.
Bend Mouse Follower: A pixel-art frame that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.
Bevel Button: Compact dark button with a top-light to bottom-dark gradient stroke and layered inset bevel shadows for a tactile chiseled feel.
Blinds Mask Reveal: A venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then every slat opens at…
Blob Sphere: A sphere displaced by 3D noise in the vertex shader — drag to spin.
Blue Chrome Button: A chrome-style button with layered glow border and smooth motion.
Blur Toggle Button: A button with blur transition effect on toggle using Framer Motion.
Book Demo Button: Lime square with animated dotted chevron arrows that expands a dark panel on hover to reveal a label.
Border 1: A dashed border design with corner elements.
Border 2: A solid border design with corner elements.
Border Gradient Button: A button with a gradient border effect.
Bounce Smiley Animation: Bounce Smiley Animation component.
Braille Terrain Background: A slowly drifting terrain drawn in Unicode braille, so every character carries its own 2×4 dither cell.
Brick Blobs Background: Toy-brick cats on a studded baseplate, outlined in purple and red-orange bricks, snapping a stud at a time as they wander; on hover the…
Brush Mask Reveal: A brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask whose stroked path…
Capsule Equalizer Background: Rounded capsule bars that pulse like an audio equaliser, gathering into drifting diamond silhouettes with split segments and end dots.
Car Lock Drive Motion: Side-view car with a clean lock/drive pill switch that springs the car forward on drive.
Card Animation: Framer Motion card animation.
Card Scan: Hover it and it turns holographic: thin-film foil that shifts as you move, light rippling out from the cursor, and a soft flash as you…
Cards Slider: Cards Slider — an infinite deck of product cards. The active card sits
Cd: An animated ASCII CD render with responsive scaling.
Cd Envelope Player: A CD slides out of a paper sleeve and spins up into a now-playing card — grooved disc, moving sheen and a play/pause that eases the spin…
Center Split Reveal: A center-split mask reveal — the image is clipped to a closed vertical seam down the middle, then the clip-path opens left and right to…
Chat Ui: A streaming chat UI built on MessageScroller — anchored turns, follow-the-edge auto-scroll, a dot-matrix thinking indicator, and…
Checker Blocks Background: A two-colour poster grid of solid blocks, rings, dots and checkerboards at many scales, whose cells glitch through finer checkers as they…
Circle Credits: Two credit columns that wrap a round hole, easing in from the centre and scrambling into symbols on hover.
Claude Sidebar: Claude-style sidebar built on shadcn/ui's <Sidebar> primitives. Smooth icon-rail collapse animation, playful icon micro-interactions on…
Clock Mask Reveal: A radial clock-sweep mask reveal — a conic-gradient CSS mask sweeps a wedge around the center like a clock hand, uncovering the image…
Cloud Ring: A frame of white cloud that breathes in and out around a blurred sky, drawn to fit whatever box it's in.
Cloud Sky: A soft sky: a cloud photo blurred 12.5px, fading out toward the bottom over white, with a white glow at the edges.
Coin Read: Glowing coins slide in under the left edge, and each one sends a wave of light and holographic foil across.
Coin Spin Animation: A 3D spinning coin animation with layered faces and side depth.
Color Flair Button: A pill button with a directional color flair: stacked concentric circles bloom from
Contour Map Background: Animated topographic contour lines over a slowly morphing landscape, with a bolder index line every fifth level.
Cover Flow Carousel: A classic cover-flow carousel: the centre cover faces you while the side covers angle inward with depth and a floor reflection. Drag to…
Coverflow Marquee: An endless coverflow: cards glide across the stage, swinging flat as they pass center, with floor reflections.
Creative Space Gallery: A draggable constellation of image planes rotates in three dimensions with inertia while every image faces the viewer.
Crop Marks: Printer's crop marks: hairlines just outside each corner, with a registration target above and below.
Crosshair Frame: Hairlines that run past a box's edges and fade out, with a plus mark where they cross at each corner.
Currency Sky Background: A dark flowing terrain of currency glyphs, with layered waves and bright contour bands.
Cursor Reveal: Drag to paint colour back into a B&W photo, or scratch off frosted glass — strokes linger.
Cursor Spotlight: A noise-wobbled glow that tracks your cursor across the dark — hover to move it.
Cursor Trail Smear: Your cursor drags a liquid streak across the image that trails and fades.
Custom: Layout-aware custom renderers from the `animate-text` catalog that cannot be
Cyber Button: A cyberpunk-style button with neon borders and glitch effects.
Cylinder Carousel: Orbs line the inside wall of a 3D cylinder, seen from its rim: they fly in from a wide spin, bob gently in place, and the ring turns as…
Day Night Sky: A shader sky that glides from day to night — sun, moon, drifting clouds and stars, with an optional scrub slider.
Depth Tunnel: Concentric frames flying out of the screen toward the viewer in an endless, slowly twisting depth tunnel.
Dial Knob Motion: Tactile rotary knob with layered bevel discs, two tick rings, and an amber dot-arc indicator. Drag or scroll to change value.
Dimension Border: A redline that measures its own box: live width and height on dimension lines, with extension lines from the corners.
Directional Mask Reveal: A directional mask reveal — the image wipes in from a chosen edge (top, bottom, left, or right) via an animated clip-path inset.
Dither Cursor Trail: A pale blue Bayer-dithered cursor trail with a softly tapered tail that fades at rest.
Dither Field Background: A woven field of hard-edged dashes on flat colour, switched on and off by a drifting noise field so the blobs flow while every mark stays…
Dither Wave Background: Slowly drifting blue-and-paper Bayer bands with a gently pointer-warped halftone texture.
Dreamy Clouds: Soft photographic cumulus clouds drifting across a periwinkle-to-pink dream sky — layered for depth, with lit tops and cool shadowed…
Drifting Clouds: Soft warped fbm clouds rolling across a clear blue sky.
Effects: Scroll-typography effect builders — faithful GSAP ScrollTrigger ports of the
Engine: Generic-stagger text animation engine.
Exploding Dice Cube: A spinning 3D die whose six pip faces fly apart into an exploded view on hover and spring back together.
Fanned Deck Carousel: A tall row of image cards fanned along a flat diagonal (no depth recede); each card is angled about Y. It auto-slides, loops infinitely…
Ferris Wheel Carousel: Gondola cards hang from a slowly turning ferris wheel — they stay upright as the wheel rotates and swing like pendulums when it speeds up…
Fisheye Faq: A vertical FAQ list with macOS-Dock fisheye magnification — rows scale by their distance from the cursor and the nearest one springs open…
Flip Clock Counter: A split-flap clock digit that folds down every tick like a mechanical departure board.
Flip Text Reveal: A GSAP Flip orb transition followed by a staggered word reveal.
Flip Tile Wave: A grid of two-faced tiles flipping in a diagonal 3D wave, revealing their dark side and back again.
Floating Logo Intro: A 3D logo that draws itself in (SVG stroke), rises with an easeOutBack overshoot and floats, over a cursor-distorted pixel-text…
Flow Field: Particles stream along curl-noise currents that reform the image.
Fluid Cube Scroll: A scroll-driven 3D cube that slides across the viewport while a GPU fluid simulation masks its colourful faces in under the cursor.
Fluid Image: A real-time GPU fluid simulation — move your cursor to flow one image into another.
Focus Brackets: Viewfinder brackets that close in on the corners when you hover or focus inside, with a reticle fading in at the centre.
Footer Reveal: A scroll-driven footer reveal — the footer sits pinned in place while the content above slides up to uncover it. Pure CSS sticky, no JS.
Framer Cta Button: Framer-style CTA pill button with brand icon and dark/light variants.
Free Premium Toggle: Free Premium Toggle component.
Gentle Waves: A calm light-to-blue gradient rolling with slow, soft waves.
Glass Button: A frosted glass button with gradient border and 10 color variants: blue, purple, emerald, rose, amber, cyan, lime, slate, red, indigo.
Glass Circle Button: A circular icon glass button with conic gradient ring and frosted core. 10 color variants and a swappable Lucide icon.
Glass Icon Button: A frosted glass pill button with an embedded icon capsule. 10 color variants and a swappable Lucide icon.
Glass Scroll Navbar: A fixed glass navbar refracts scrolling editorial images through a curved lens with spectral color separation.
Glass Square Button: A rounded-square frosted glass button with diagonal gradient border and 10 color variants: blue, purple, emerald, rose, amber, cyan, lime…
Glassy Button: Chunky square glass/metal button with vertical gradient ring, layered floating shadow, and animated press state with icon dimming.
Glow Card Animation: Glow Card Animation component.
Glyph Blocks Background: Acid-green glyph zones — targets, rounded squares, crosses, plus signs and dots — drifting across a black grid while solid blocks snap to…
God Rays: Warm volumetric rays streaming from a glowing core, carved from angular value noise.
Goe Button: A gooey SVG filter button effect using Framer Motion.
Gooey Text: Gooey text hover morph — faithful GSAP ports of the three Codrops
Gravity Image Trail: A GSAP image trail where images cascade from the cursor, fall, and bounce off the bottom edge.
Guitar Svg: Guitar SVG path effect animation.
Halftone Blobs Background: A print-style halftone screen whose dots swell and shrink as unseen blobs drift beneath it — ink on paper.
Helix Spinner: A column of bars, each offset a few degrees on the Y axis, spinning together as a twisting 3D helix.
Hero Cover Reveal: A scroll-driven hero cover reveal — the hero pins in place while the next section slides up and covers it, scrubbed by GSAP ScrollTrigger.
Hover Expand Player: A compact player pill that springs open on hover — the corners morph, the album art grows into place, and the full controls resolve out of…
Hover Layer Stack: An isometric stack of UI layers that lifts apart on hover, exploding the interface into its depth layers.
Image Hover Animation: An image hover animation with scaling and opacity effects.
Image Particles: The image is shattered into a drifting grid of particles — move your cursor to disturb them.
Image Shader Canvas: A reusable image-shader canvas (Three.js) that loads one or two images, exposes time/mouse/progress uniforms and runs a custom fragment…
Image Trail Effects: A cursor image trail with six switchable reveal effects — flame, venetian, curtain, hexagon, liquid and zoom split.
Img Anaglyph: Red/cyan stereo split driven by brightness-as-depth — grab your 3D glasses.
Img Ascii Art: Rebuilds the image from terminal glyphs whose density tracks brightness.
Img Ballpoint Drawing: A ballpoint-pen cross-hatch rendering — strokes follow the image's form on grainy paper with a vignette. Adapted (single-pass) from…
Img Blinds Transition: Hover to flip open a stack of horizontal blinds, each strip wiping to the second image.
Img Burn Dissolve: Hover and the first image burns away along a glowing ember edge, revealing the next through the noise.
Img Checker Flip: Hover and the image tiles into a checkerboard whose squares flip over, staggered, to the next image.
Img Chromatic Aberration: Red and blue channels drift apart toward the edges with a slow pulse.
Img Comic Cel: Posterised flat colours with bold inked outlines — cel-shaded comic look.
Img Crt Scanlines: Curved tube, scanlines, RGB fringe and a rolling bar — vintage television.
Img Crystallize: Shatters the image into flat Voronoi cells with dark stained-glass leading.
Img Depth Parallax: Fake 2.5D — brightness becomes depth, so the scene tilts as you move.
Img Dot Matrix Scatter: An LED-style dot grid of the image — move your cursor to scatter the dots into a dispersing cloud.
Img Duotone: Maps brightness onto a two-colour gradient that shifts through the spectrum.
Img Edge Sketch: Sobel edge detection lights up the outlines in their own colour on black.
Img Engraving: Renders the image as inked woodcut hatch-lines on warm paper.
Img Gameboy: Four-shade DMG green palette with ordered dithering and chunky pixels.
Img Glass Shatter: The image is cracked into Voronoi glass shards — move your cursor to blow them outward, leaving dark leading between the pieces.
Img Glitch: Random horizontal slices tear and shift with bursts of RGB noise.
Img Halftone: Rebuilds the image from ink dots that grow where the picture is darker.
Img Hex Mosaic: Pixelates the image onto a honeycomb grid of hexagons.
Img Ink Bleed: Colour blooms outward from your cursor like ink dropped into water.
Img Kaleidoscope: Folds the image into six-fold mirrored symmetry that slowly rotates.
Img Led Dot Matrix: Rebuilds the image from a grid of glowing round LEDs on a black panel.
Img Liquid Transition: Hover to ripple both frames through a flowing noise warp as one dissolves into the other.
Img Low Poly: Flat-shades the image across a grid split into triangles, geometric-art style.
Img Magnifier Lens: A fish-eye loupe follows your cursor, zooming the image right beneath it.
Img Oil Paint: Kuwahara filtering smears the image into soft painterly brush strokes.
Img Ordered Dither: Bayer-matrix ordered dithering crunched down to a few colour levels.
Img Pixel Dissolve: The image materialises from chunky mosaic blocks into full resolution.
Img Pixel Distortion: Move your cursor to crunch the image into chunky pixel blocks that jitter, distort and RGB-split around the pointer.
Img Pixel Melt Transition: Hover to crunch both images into chunky mosaic blocks that flip over, staggered, into the second.
Img Pixel Rise Reveal: Hover and a ragged wall of pixels climbs from the bottom, dissolving the old image block by block as the new one rises into place.
Img Pixelate: Snaps the image to a square grid whose resolution breathes over time.
Img Posterize: Flattens the image into a handful of colour bands, screen-print style.
Img Ripple: Concentric water ripples radiate from your cursor and warp the image.
Img Ripple Reveal: Hover to send a rippling ring out from the centre, warping the first image aside as the next floods in.
Img Shery Cyber Squares: Retro cyber squares pulse across the image and brighten around your cursor. Adapted from Shery.js (style 7), MIT — Sheryians Coding School.
Img Shery Liquid: A mesmerising simplex-noise liquid warp drifting across the image. Adapted from Shery.js (style 1), MIT — Sheryians Coding School.
Img Shery Liquid Cursor: A flowing liquid distortion that bends around your cursor. Adapted from Shery.js (style 5), MIT — Sheryians Coding School.
Img Shery Perlin: A pulsing Perlin-noise displacement that breathes the image in and out. Adapted from Shery.js (style 6), MIT — Sheryians Coding School.
Img Shery Wind: A natural simplex-noise sway, like the image fluttering in a breeze. Adapted from Shery.js (style 4), MIT — Sheryians Coding School.
Img Spotlight Reveal: A flashlight of full colour follows your cursor through a darkened image.
Img Thermal Vision: Maps brightness onto an infrared heat ramp — cold indigo to white-hot.
Img Twirl: Swirls the pixels into a spinning vortex centred on your cursor.
Img Vhs: Tape warble, chroma bleed and a rolling tracking band — worn-out VHS.
Img Wave: Gently ripples the whole image like a flag in a slow breeze.
Img Wipe Reveal: Hover to sweep a glowing diagonal seam across the frame, wiping one image into the next.
Img Zoom Blur Transition: Hover to punch through a radial zoom-blur — the first image streaks outward as the second rushes in.
Index: Index component.
Inertia Arrow Card: A notched card with a magnetic pill button: the pill flings with GSAP inertia in the
Inertia Particles: Move your cursor to shove the particles aside — a damped spring snaps them back.
Infinite Carousel: A seamless infinite carousel where one GSAP timeline powers idle drift, scroll-velocity speed/reverse, hover-slow, and drag-to-scrub — all…
Ink Blob Mask Reveal: An ink-blob mask reveal — a drop splats in the middle, then spreads outward as an organic wobbling blob clip-path until it floods the frame.
Intersection 1: A circular border with gradient intersection lines.
Intersection 2: A scoped intersection design with patterned borders.
Iris Mask Reveal: A camera-iris mask reveal — a circular clip-path opens from wherever you click and expands until it reaches the farthest corner…
Jelly Bulge: A glassy lens of jelly follows your cursor, magnifying the image.
Kaleidoscope: Eight-fold mirrored noise that slowly rotates through the spectrum.
Keyhole Mask Reveal: A keyhole mask reveal — a keyhole clip-path pops in with a slight tilt, then the view zooms through it until the image fills the frame.
Learn More Button: An animated learn more button with hover effects using Framer Motion.
Line Hover: Line text hover decode animations — faithful GSAP ports of the four Codrops
Liquid Button: Frosted-glass pill button with gradient ring and a hover slide that swaps two stacked text labels.
Liquid Caustics: Sunlight refracting through rippling water onto a pool floor.
Liquid Gradient Button: Premium gradient button with image overlay, loading animation, and 8 color variants: pink, cyan, emerald, amber, crimson, violet, ocean…
Liquid Melt: Hover to heat the image — the columns you linger over sag and melt.
Liquid Metal: Layered domain warping that pools into a flowing chrome surface.
Liquid Pause Animation: Liquid Pause Animation component.
Logo Animation: Logo animation with Framer Motion and custom background.
Magnetic Swarm: Particles are sucked into a swirling swarm around your cursor.
Magnetic Warp: The image gathers toward your cursor like iron filings, then relaxes back.
Matte Dark Button: A matte dark button with #222 base and layered shadow depth.
Matte Shadow Button: A dark matte button with layered depth shadow.
Mesh Gradient: Six color spots drifting on sine paths, blended by inverse-distance weights under a center swirl.
Metaballs: Gooey blobs orbiting the center and merging through a classic inverse-square field.
Metal Button: A metallic button with 8 metal variants: silver, chrome, gold, copper, bronze, titanium, rose-gold, gunmetal.
Milestone Odometer: Milestone Odometer component.
Misprint Background: A misregistered risograph print: flowing brush-stroke shapes printed as offset cyan, blue, red and yellow separations, Bayer-dithered over…
Mitosis Button: Share pill that buds gooey drops from its underside on hover, which stretch, split apart and settle into a row of icon buttons.
Moire Rings Background: Two sets of concentric rings drifting over each other, their overlap blooming into moiré interference; one set follows the pointer.
Morph Button: A button that morphs its shape on hover using GSAP.
Morph Image Button: A button that morphs an image mask on hover using GSAP.
Mosaic Mask Reveal: A mosaic mask reveal — the image is rebuilt from a grid of square tiles that pop in with a staggered order (from the center, edges…
Motion Trail Classic: A GSAP cursor trail where images appear at the cursor, glide to it, then scale and fade out.
Mouse Follower 1: Image trail mouse follower using GSAP.
Mouse Follower 2: Mouse follower image trail with pure DOM.
Mouse Follower Button: A button that follows the mouse cursor with hover effects.
Neon Rings: Pulsing, wobbling concentric rings glowing through a cosine spectrum.
Neuro Noise: A glowing neural web woven from fifteen rotated sine layers, after zozuar's algorithm.
Noise Dissolve Reveal: A fragment-shader noise dissolve reveal — the image materialises in through a drifting cloud of fbm noise, with a warm grainy glow riding…
Noise Mask Reveal: A fragment-shader noise mask reveal — the image dissolves in through a drifting cloud of fbm noise, with a warm grainy glow riding the…
Op Art Stripes Background: Op-art stripes in the spirit of Bridget Riley: bold bands that ripple and swell in slow waves, with a magnifying lens under the pointer.
Orange Premium Button: Glossy gradient button with soft glow and 8 color variants: orange, pink, emerald, violet, sky, ocean, gold, magenta.
Orbit Carousel: Cards orbit an ellipse in faux-3D — swinging to the front they scale up, sharpen and stack forward; passing behind they shrink, dim and…
Orbit Dot Motion: A 3D orbiting dot animation with perspective and rotateY motion.
Orbit Smiley Animation: Orbit Smiley Animation component.
Paint Reveal: A pencil sketch paints itself in with organic, noisy brush edges.
Particle Shape Morph: A field of dots that flies between six generated forms — sphere, torus, helix, knot, cube, wave — on every click, swept around the axis by…
Pearl Toggle Button: Pearl Toggle Button component.
Perspective Deck Carousel: A row of image cards fanned along a 3D diagonal that recedes up-and-to-the-right; it auto-slides, loops infinitely with no seam, and can…
Perspective Text Crawl: An opening-crawl of text scrolling up a tilted plane and fading into the distance, movie-style.
Photo Coverflow Cycle: A cover-flow of photos that steps forward one at a time, the back of the deck blurred and dimmed.
Photo Flip Wall: A wall of cubes tiled with one photo; sweep the cursor across it and each cube flips to reveal the next photo piece by piece, until the…
Photo Lemniscate Flight: Photos flying a figure-eight through real depth, swapping which lobe is in front.
Photo Magnet Grid: A tidy grid of photos that scatters away from the cursor like same-pole magnets, each tile leaning away in 3D as it flees, then springing…
Photo Pile Sort: Prints are tossed onto a loose pile as you scroll, then slide out and straighten into a tidy contact sheet.
Photo Ring Orbit: Photos evenly spaced on a circle that expands open, then turns forever.
Photo Sphere Drift: Photos scattered over a sphere by the golden angle, tumbling on two axes at once.
Photo Spiral Vortex: Photos spiralling endlessly inward, shrinking away as they are drawn into the centre.
Photo Sweep Conveyor: Photos sweep across a pinned stage on scroll, blooming to full size at random heights before collapsing back to nothing, with a live count…
Pinwheel Mask Reveal: A pinwheel mask reveal — N wedges sweep open around the center like a windmill (or a camera shutter), cut from an animated…
Pixel Credits Button: A soft keycap-style button for Pixel Credits.
Pixel Cursor Trail: A pixelated cursor trail: hovered grid cells flash and fade, leaving a trail behind the mouse, with blend-mode text on top.
Pixel Displace Field: A pixelated spiral of grid-locked squares that scatter away from the cursor and spring back.
Pixel Distortion: Move your cursor to smear the image pixels along a relaxing grid.
Pixel Map Background: A pixel world map that pans slowly around the globe while live "user" squares pop on across the continents, ripple, and fade.
Plasma Flow: Classic interfering sine fields cycling through a vivid cosine palette.
Premium Button: Neumorphic premium button with layered shadows and 8 color variants: neutral, dark, gold, mint, rose, sky, lavender, sand.
Prism Glass Button: A thick domed glass button that refracts the content behind it via an feDisplacementMap lens, with a heavy chromatic-aberration fringe…
Project Slice Scroll: A pinned project showcase where each next project wipes up over the last, slicing the title and preview card along the seam.
Radial Carousel: A radial arc carousel: cards fan along a circle's top arc and the whole wheel spins around its center as you scroll, carrying velocity…
Radial Gradient Button: Radial gradient button with inset glow and 8 color variants: blue, purple, emerald, crimson, amber, cyan, violet, rose.
Rainbow Glowing Button: Dark pill button with a rainbow glow that auto-cycles through 6 color variants (red, orange, yellow, green, blue, pink) using radial blur…
Raycaster Shapes: Geometries on a 3D plane: a raycaster lights up the hovered shape's edges with a Fresnel rim shader, and clicking pops it up and spins it.
Recessed Stepper Button: Recessed Stepper Button component.
Rect Mask Reveal: A rectangular mask reveal — the image stays fixed while a clip-path inset rectangle grows from the center, keeping the video aspect ratio…
Red Fire: ASCII flame animation rendered in a red terminal style.
Ridgeline Background: Stacked pulse lines that rise into restless peaks, each one hiding the lines behind it — the classic ridgeline plot, set in motion.
Ripple Touch: Move or click to drop water ripples that expand and refract the image.
Rotating Ring Carousel: Numbered panels arranged in a 3D ring, slowly orbiting the Y axis like a cylindrical carousel.
Ruler Border: Design-tool rulers along the top and left edges: a tick every 8px and a numbered major tick every 40px.
Scale Image Trail: A GSAP image trail that pops each image in with a bouncy scale, then shrinks it away behind the cursor.
Scroll Direction Carousel: An infinite carousel whose travel direction follows your scroll direction and whose speed ramps with scroll velocity before easing back to…
Scroll Warp Gallery: A gallery rendered in WebGL where scroll velocity bends each image's own vertices, smears it into an RGB-split motion blur, and the cursor…
Selection Marquee: A design-tool selection: a marching-ants border with resize handles at the corners and edge midpoints.
Seventies Melt: Iterated sine domain-warping melts the plane into a wobbling 70s lava haze.
Shader Canvas: A reusable full-screen fragment-shader canvas powered by Three.js, with shared GLSL helpers (noise/fbm), time/mouse/resolution uniforms…
Shiny Button: A shiny button with hover effects.
Silver Button: Glossy silver pill button with a vertical white-to-gray gradient stroke and embossed letterpress text, in slim steel and chunky pearl…
Slat Flip Carousel: The image is split into horizontal louver slats that flip 180° about their own axis in a stagger — the new slide rides in on the back of…
Sliced Reveal Carousel: Slide transitions slice the photo into vertical strips that cascade in one column at a time — the new image sweeps up while the old sweeps…
Smiley Orb Animation: Smiley Orb Animation component.
Smoke Ring: A wispy torus of smoke — polar fbm streams outward and breathes the ring into drifting tendrils.
Soft Pill Button: Frosted-glass pill button with layered highlights, gradient border, and primary/secondary variants.
Sonar Mask Reveal: A sonar mask reveal — concentric rings cut from a repeating-radial-gradient CSS mask thicken outward from the center, filling the gaps…
Sparkle Grid Background: A dark grid where drifting clusters grow from dots into circles and bloom into four-point sparkles at their hearts; one cluster follows…
Specs: Generic-stagger specs ported verbatim from the `animate-text` catalog.
Spinning Cube Motion: A 3D cube continuously spinning on its Y axis, built with CSS 3D transforms and driven by Framer Motion.
Spotlight Mask Reveal: A spotlight mask reveal — the image stays dark except for a soft circle that follows your cursor like a flashlight; click to flood the…
Squircle Counter Button: Squircle Counter Button component.
Stacking Cards Parallax: A scroll-driven stacking card parallax — sticky cards pin and scale down as later cards scroll up over them, building a layered depth stack.
Stagger 1: GSAP stagger animation component.
Star Border: Star border decorator with animated corners.
Star Mask Reveal: A star-shaped mask reveal — a sparkle clip-path spins 360° once while scaling up from nothing to uncover the full image.
Stripe Button: A Stripe-inspired button with inset shadow effect.
Success Ripple Animation: A looping success ripple animation with expanding rings and a checkmark draw.
Svg 1: Animated SVG asset with GSAP.
Svg 2: Animated SVG asset.
Svg 4: Animated SVG asset.
Svg 5: Animated SVG asset.
Svg 6: Animated SVG asset.
Svg 8: Animated SVG asset.
Svg 9: Animated SVG asset.
Swing Door Reveal: A door that swings open on hover with a springy 3D hinge, revealing the room behind it.
Swinging Sign: A hanging shop sign swinging toward and away from the camera on its strings like a pendulum.
Tab Background Animation: A tab background animation using Framer Motion.
Text Along Path: Text that slides around a curved SVG path as you scroll inside the card — a GSAP take on Olivier Larose's text-along-path, with eased…
Text Assemble: Text assembles from scattered pieces using GSAP ScrollTrigger.
Text Black Hole: Letters come from center, stretched and sucked outward.
Text Block Transitions: Codrops "Text Block Transitions" — faithful ports of all 12 demos from
Text Broken Glass: Letters start shattered and rotated then snap into place.
Text Burn Neon: Random flicker then letters glow red and turn white.
Text Clip Mask Reveal: A scroll-driven text-clip mask reveal — a video is clipped to the shape of a word, and as you scroll the text-shaped mask scales up until…
Text Editor Italic: Soft cream "Text Editor" mock with a neumorphic toolbar. The cursor drifts
Text Fade: Text fades in/out on scroll using GSAP.
Text Glitch Portal: RGB split plus scale blur then collapse into clean text.
Text Gradient: Gradient text effect using CSS.
Text Highlight Wave: A highlight colour washes across a headline character by character, lifting each glyph out of a dimmed rest state as it passes, line after…
Text Inertia: Text follows mouse with inertia using GSAP.
Text Inline Chip Reveal: A headline whose words resolve from a hue-shifting glow into solid ink, around inline chips that sit in the text flow.
Text Matrix Rain: Columns of random symbols fall then lock into real text.
Text Reveal: Text reveal animation effect.
Text Reveal2: Text reveal animation variant.
Text Scatter: Text scatters and assembles with animation.
Text Scatter1: Text scatter variant animation.
Text Typewriter Glitch: Types then deletes then types wrong then finally correct.
Text Video: Video masked text effect.
Text X Rotate: 3D X-axis rotation effect with stagger.
Text X Rotate2: Y-axis text animation with blur using GSAP SplitText.
Text Y Animation: Y-axis slide animation with stagger.
Text Y Animation2: Variant Y-axis animation effect.
Text Y Animation3: Variant Y-axis animation effect.
Text Y Animation4: Variant Y-axis animation effect.
Text Z Rotate: Z-axis rotation text animation.
Text Z Rotate2: Z-axis rotation text animation variant.
Text Zoom Mask Reveal: A text-zoom mask reveal — the image shows through the giant word "PIXEL", which then dives through the X until the whole frame is uncovered.
Tilt Card Glare: A mouse-tracked 3D tilt card with parallax depth layers.
Toggle Button: An animated toggle switch with spring physics using Framer Motion.
Toss Deck Carousel: A messy pile of polaroids — flick the top one away and it flies off with your throw while the pile shuffles up and a new photo slips in…
Truchet Weave Background: A Truchet tiling of quarter-circle arcs whose tiles spin a quarter turn as slow waves sweep across, re-routing the maze as it goes.
Twisted Blob: A vertex-twisted sphere with domain-warped noise — drag to spin.
Vector Field Background: A living vector-field plot: a grid of short strokes that turn to follow a drifting flow and swirl into a vortex around the pointer.
Visit Button: A compact visit button with label and icon swap on hover.
Voronoi Glass: Animated stained-glass voronoi cells with dark grout lines and a soft glow at every border.
Vortex Pull: A whirlpool chases your cursor with momentum — it lags, then catches up.
Wave Lines: Stacked glowing sine lines drifting at staggered speeds through a cosine palette.
Wave Mask Reveal: A liquid-wave mask reveal — the image fills from the bottom like rising water, with a living sine-wave crest cut from an inline SVG mask.
Yoga Invite Card: Soft cream invite card with clean subtle micro-animations on mount —

Pixel Perfect components

All Pixel Perfect components

Browse by category