https://motion-lab-5v1.pages.dev/New web effects with live demos and AI prompts.https://motion-lab-5v1.pages.dev/library/fullscreen-menu-staggerhttps://motion-lab-5v1.pages.dev/library/fullscreen-menu-staggerWed, 07 Oct 2026 00:00:00 GMTA burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.https://motion-lab-5v1.pages.dev/library/image-trail-cursorhttps://motion-lab-5v1.pages.dev/library/image-trail-cursorWed, 07 Oct 2026 00:00:00 GMTMoving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.https://motion-lab-5v1.pages.dev/library/infinite-3d-gallery-tunnelhttps://motion-lab-5v1.pages.dev/library/infinite-3d-gallery-tunnelWed, 07 Oct 2026 00:00:00 GMTTwenty-four procedurally painted posters spiral down a fog-filled tunnel; wheel, drag or swipe sets the camera's speed, idle autoplay keeps it drifting, and plane depths wrap modulo the loop so the archive never ends.https://motion-lab-5v1.pages.dev/library/liquid-hover-distortionhttps://motion-lab-5v1.pages.dev/library/liquid-hover-distortionWed, 07 Oct 2026 00:00:00 GMTA Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.https://motion-lab-5v1.pages.dev/library/luxury-product-herohttps://motion-lab-5v1.pages.dev/library/luxury-product-heroWed, 07 Oct 2026 00:00:00 GMTA drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.https://motion-lab-5v1.pages.dev/library/particle-morph-shapeshttps://motion-lab-5v1.pages.dev/library/particle-morph-shapesWed, 07 Oct 2026 00:00:00 GMTThirty thousand additive points morph between a sphere, a torus knot, a cube and a heart; every particle starts on its own random schedule and takes a swirling detour, so each change of shape reads as a swarm rather than a slide.https://motion-lab-5v1.pages.dev/library/pinned-horizontal-galleryhttps://motion-lab-5v1.pages.dev/library/pinned-horizontal-galleryWed, 07 Oct 2026 00:00:00 GMTA full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.https://motion-lab-5v1.pages.dev/library/refractive-glass-blobhttps://motion-lab-5v1.pages.dev/library/refractive-glass-blobWed, 07 Oct 2026 00:00:00 GMTA noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.https://motion-lab-5v1.pages.dev/library/scramble-texthttps://motion-lab-5v1.pages.dev/library/scramble-textWed, 07 Oct 2026 00:00:00 GMTA mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.https://motion-lab-5v1.pages.dev/library/scroll-image-sequencehttps://motion-lab-5v1.pages.dev/library/scroll-image-sequenceWed, 07 Oct 2026 00:00:00 GMTA pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.https://motion-lab-5v1.pages.dev/library/splittext-char-revealhttps://motion-lab-5v1.pages.dev/library/splittext-char-revealWed, 07 Oct 2026 00:00:00 GMTA headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.https://motion-lab-5v1.pages.dev/library/zoom-through-herohttps://motion-lab-5v1.pages.dev/library/zoom-through-heroWed, 07 Oct 2026 00:00:00 GMTA pinned hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.https://motion-lab-5v1.pages.dev/library/tilt-card-glarehttps://motion-lab-5v1.pages.dev/library/tilt-card-glareWed, 07 Oct 2026 00:00:00 GMTThree product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.https://motion-lab-5v1.pages.dev/library/smooth-accordionhttps://motion-lab-5v1.pages.dev/library/smooth-accordionWed, 07 Oct 2026 00:00:00 GMTFive hairline-ruled FAQ items open with a true height-from-zero-to-auto tween; the plus rotates into a cross, the copy slides up a beat later, the index turns lime and the previously open item closes at the same time.https://motion-lab-5v1.pages.dev/library/gradient-border-buttonhttps://motion-lab-5v1.pages.dev/library/gradient-border-buttonWed, 07 Oct 2026 00:00:00 GMTThree button variants share a 1px conic-gradient ring that orbits forever via a GSAP-tweened --angle; hovering triples the orbit speed, sweeps a highlight across the face and rolls the label up to a second copy. Active presses scale to 0.97.https://motion-lab-5v1.pages.dev/library/before-after-sliderhttps://motion-lab-5v1.pages.dev/library/before-after-sliderWed, 07 Oct 2026 00:00:00 GMTA 16:10 comparison frame with a warm graded 'after' and a flat, desaturated 'before' derived from it on canvas; a lime Draggable handle clips the top layer, with keyboard, click-to-jump and an intro sweep to 60% and back.https://motion-lab-5v1.pages.dev/library/bento-grid-flip-filterhttps://motion-lab-5v1.pages.dev/library/bento-grid-flip-filterWed, 07 Oct 2026 00:00:00 GMTA bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.https://motion-lab-5v1.pages.dev/library/blend-mode-cursorhttps://motion-lab-5v1.pages.dev/library/blend-mode-cursorWed, 07 Oct 2026 00:00:00 GMTA white disc in mix-blend-mode: difference trails the pointer with a 0.12 lerp, inverting headlines, a lime block and an image as it passes, swelling from 24px to 120px over links with a tiny label and pulsing a ring on click.https://motion-lab-5v1.pages.dev/library/counter-preloader-revealhttps://motion-lab-5v1.pages.dev/library/counter-preloader-revealWed, 07 Oct 2026 00:00:00 GMTA full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.https://motion-lab-5v1.pages.dev/library/curtain-logo-transitionhttps://motion-lab-5v1.pages.dev/library/curtain-logo-transitionWed, 07 Oct 2026 00:00:00 GMTClicking a nav link closes six vertical slats over the page from the top, draws a monogram and wordmark with a 00→100 counter, swaps the content underneath, then opens the slats from the bottom as the new page rises in.https://motion-lab-5v1.pages.dev/library/hover-image-reveal-listhttps://motion-lab-5v1.pages.dev/library/hover-image-reveal-listWed, 07 Oct 2026 00:00:00 GMTAn editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.https://motion-lab-5v1.pages.dev/library/infinite-marqueehttps://motion-lab-5v1.pages.dev/library/infinite-marqueeWed, 07 Oct 2026 00:00:00 GMTTwo bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.https://motion-lab-5v1.pages.dev/library/interactive-3d-producthttps://motion-lab-5v1.pages.dev/library/interactive-3d-productWed, 07 Oct 2026 00:00:00 GMTA GLB perfume flask idles on a slow turntable under a key/fill/rim studio rig with a soft contact shadow; drag to orbit with damping, pick a finish to tween the PBR colour, and labels track points on the model.https://motion-lab-5v1.pages.dev/library/kinetic-typography-loophttps://motion-lab-5v1.pages.dev/library/kinetic-typography-loopWed, 07 Oct 2026 00:00:00 GMTA self-running motion poster: seven stacked rows of the same word, from hairline to black, shear and slide in alternating directions on a yoyo loop while a secondary word flips over in 3D every 1.6 seconds.https://motion-lab-5v1.pages.dev/library/line-mask-revealhttps://motion-lab-5v1.pages.dev/library/line-mask-revealWed, 07 Oct 2026 00:00:00 GMTAn editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).https://motion-lab-5v1.pages.dev/library/magnetic-buttonhttps://motion-lab-5v1.pages.dev/library/magnetic-buttonWed, 07 Oct 2026 00:00:00 GMTThree pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.https://motion-lab-5v1.pages.dev/library/morphing-svg-preloaderhttps://motion-lab-5v1.pages.dev/library/morphing-svg-preloaderWed, 07 Oct 2026 00:00:00 GMTA glowing SVG form morphs circle → square → blob → star → mark while a hairline outline traces each new shape and a percentage climbs; at 100% the form scales 40× to fill the viewport and fades into the page.https://motion-lab-5v1.pages.dev/library/noise-gradient-meshhttps://motion-lab-5v1.pages.dev/library/noise-gradient-meshWed, 07 Oct 2026 00:00:00 GMTA full-screen fragment shader blends four drifting colour fields through domain-warped simplex noise, adds animated film grain and a soft vignette, and lets the pointer gently pull the warp; a CSS gradient stands in when WebGL or motion is unavailable.https://motion-lab-5v1.pages.dev/library/panel-wipe-transitionhttps://motion-lab-5v1.pages.dev/library/panel-wipe-transitionWed, 07 Oct 2026 00:00:00 GMTA three-page demo where every navigation runs one timeline: a surface panel and a lime panel wipe up from the bottom (0.8s power4.inOut, stagger 0.08), the page swaps beneath, then they exit upward as the new content rises in.https://motion-lab-5v1.pages.dev/library/parallax-depth-layershttps://motion-lab-5v1.pages.dev/library/parallax-depth-layersWed, 07 Oct 2026 00:00:00 GMTA tall hero built from five depth layers — sky, far ridge, mid ridge, foreground and headline — each scrubbed at its own yPercent speed from a data-speed attribute, plus a lerped pointer parallax on desktop that tilts the scene toward the cursor.https://motion-lab-5v1.pages.dev/library/rgb-shift-image-hoverhttps://motion-lab-5v1.pages.dev/library/rgb-shift-image-hoverWed, 07 Oct 2026 00:00:00 GMTFour image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.https://motion-lab-5v1.pages.dev/library/scroll-velocity-skewhttps://motion-lab-5v1.pages.dev/library/scroll-velocity-skewWed, 07 Oct 2026 00:00:00 GMTA long grid of gradient tiles and oversized words shears up to ±8° and shrinks slightly in proportion to scroll velocity, then eases back to zero in 0.8s; a mono readout shows the live velocity and skew.https://motion-lab-5v1.pages.dev/library/scroll-svg-path-drawhttps://motion-lab-5v1.pages.dev/library/scroll-svg-path-drawWed, 07 Oct 2026 00:00:00 GMTA long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.https://motion-lab-5v1.pages.dev/library/shared-element-flip-transitionhttps://motion-lab-5v1.pages.dev/library/shared-element-flip-transitionWed, 07 Oct 2026 00:00:00 GMTClicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.https://motion-lab-5v1.pages.dev/library/stacking-cardshttps://motion-lab-5v1.pages.dev/library/stacking-cardsWed, 07 Oct 2026 00:00:00 GMTFive full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.https://motion-lab-5v1.pages.dev/library/sticky-split-storytellinghttps://motion-lab-5v1.pages.dev/library/sticky-split-storytellingWed, 07 Oct 2026 00:00:00 GMTA two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.https://motion-lab-5v1.pages.dev/library/text-highlight-fillhttps://motion-lab-5v1.pages.dev/library/text-highlight-fillWed, 07 Oct 2026 00:00:00 GMTA large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.https://motion-lab-5v1.pages.dev/library/toast-micro-interactionhttps://motion-lab-5v1.pages.dev/library/toast-micro-interactionWed, 07 Oct 2026 00:00:00 GMTFour triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.https://motion-lab-5v1.pages.dev/library/variable-font-wavehttps://motion-lab-5v1.pages.dev/library/variable-font-waveWed, 07 Oct 2026 00:00:00 GMTA single display word split into characters whose font weight (300 → 900) and SOFT axis follow the pointer with a Gaussian falloff; leaving sends a left-to-right ripple back to rest, and touch devices get an automatic looping wave.https://motion-lab-5v1.pages.dev/library/wavy-image-planehttps://motion-lab-5v1.pages.dev/library/wavy-image-planeWed, 07 Oct 2026 00:00:00 GMTFour figures in a normal scrolling page are mirrored by WebGL planes on one fixed canvas, matched to their DOM rectangles every frame; the planes bow and ripple with scroll velocity in the vertex shader and zoom slightly on hover.