{ "version": 1, "site": "https://motionprompts.dev", "count": 236, "generated_from": "components/*/meta.json → bloque motion (ver DECISIONS.md D1)", "note": "Los valores null significan 'no determinable leyendo el componente', no 'cero'. Ver UNRESOLVED.md.", "components": [ { "slug": "404", "title": "ScrollTrigger 404 Horizontal Scroll + Parallax", "category": "scroll", "description": "A 404 page where a pinned full-width headline section is driven by ScrollTrigger scrub: as you scroll, the .wrapper-404 translates horizontally (gsap.to x in vw, power3.out) while four absolutely-positioned image cards parallax sideways and rotate at different rates, revealing a closing outro message.", "demo": "https://motionprompts.dev/components/404/index.html", "prompt": "https://motionprompts.dev/prompts/404.md", "page": "https://motionprompts.dev/component/404/", "thumb": "https://motionprompts.dev/thumbs/404.webp", "preview": "https://motionprompts.dev/previews/404.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 4, "pinned": true, "viewport_heights": 1200, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 0.5 ], "stagger": null, "assets_required": { "count": 4, "bytes": 849853, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed pinned horizontal track: ScrollTrigger scrub:1 drives an onUpdate handler that fires a fresh 0.5s power3.out catch-up tween per frame (wrapper x in vw; four cards x in px + rotate), so the smoothing comes from overlapping tweens rather than from the scrub tween itself", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "247artists-trail", "title": "24/7 Artists Image Trail", "category": "interactive", "description": "A cursor-driven image trail across a full-viewport hero: as the mouse moves past a distance threshold, a new 175px image spawns at the cursor and slides toward it, revealed through 10 horizontal clip-path mask layers that open from the center outward with a staggered ease, then collapse and fade back to the center after a ~1s lifespan. Pure vanilla JS with CSS transitions and requestAnimationFrame (no GSAP); disabled below 1000px width.", "demo": "https://motionprompts.dev/components/247artists-trail/index.html", "prompt": "https://motionprompts.dev/prompts/247artists-trail.md", "page": "https://motionprompts.dev/component/247artists-trail/", "thumb": "https://motionprompts.dev/thumbs/247artists-trail.webp", "preview": "https://motionprompts.dev/previews/247artists-trail.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 21, "bytes": 2243195, "root_absolute_paths": true }, "mobile_behavior": { "kind": "touch-branch", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "css-transition", "motion_signature": "pointer-speed image trail: a tile spawns whenever the cursor travels >150px (60px on coarse pointers) inside the hero, born at a lerp-0.1 trailing position and CSS-eased to the live cursor over 1s, revealed as 10 horizontal clip-path bands opening centre-outward (50-450ms stagger, 750ms each) and closing edges-inward 1s later (0-100ms stagger)", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "3d-circular-img-gallery", "title": "3D Circular Image Gallery", "category": "gallery", "description": "32 full-colour film-still tiles (18 on phones) are placed around a circle with CSS 3D transforms to form a tilted ring seen in perspective. On load the tiles are dealt out from a single stacked point to their places around the ring with a staggered GSAP tween. GSAP ScrollTrigger (scrub) spins the ring on scroll and a pointer drag spins it directly with inertia; a mousemove listener parallax-tilts the gallery toward the cursor, and hovering a tile pushes it outward and swaps the large centred preview still, which is mounted with no border or outline of any kind.", "demo": "https://motionprompts.dev/components/3d-circular-img-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/3d-circular-img-gallery.md", "page": "https://motionprompts.dev/component/3d-circular-img-gallery/", "thumb": "https://motionprompts.dev/thumbs/3d-circular-img-gallery.webp", "preview": "https://motionprompts.dev/previews/3d-circular-img-gallery.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 2, "pinned": false, "viewport_heights": 1000, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 15, "bytes": 2324184, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh", "asigna window.onload" ], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scroll-scrubbed tilted 3D CSS ring, cursor parallax", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "document-height", "window-onload" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "3d-crt-display", "title": "3D CRT Display", "category": "3d-webgl", "description": "A 3D CRT monitor (GLB model) fills a dark broadcast-room hero, its screen driven by a custom shader with scanlines, RGB mask, vignette and chromatic aberration. The room and the HUD paint before any asset lands; the tube deliberately holds until the cabinet is there to sit in, and fades up with it (or alone, if the model is still in flight after 2.5s). Hovering the channel buttons at the bottom swaps the on-screen texture and fires a GSAP-driven glitch burst (line tearing, noise, RGB split) that decays over 0.75s, while the whole monitor lazily rotates toward the mouse. Framed as 'Nightfeed', a pirate station broadcasting five districts of an imagined neon city.", "demo": "https://motionprompts.dev/components/3d-crt-display/index.html", "prompt": "https://motionprompts.dev/prompts/3d-crt-display.md", "page": "https://motionprompts.dev/component/3d-crt-display/", "thumb": "https://motionprompts.dev/thumbs/3d-crt-display.webp", "preview": "https://motionprompts.dev/previews/3d-crt-display.webm", "motion": { "trigger": "hover", "libs": [ "gsap", "three", "GLTFLoader" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.75, 1.6 ], "stagger": null, "assets_required": { "count": 7, "bytes": 2403921, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "mouse-lerped 3D monitor with GSAP glitch burst", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "3d-material-finish-switcher", "title": "3D Material Finish Switcher", "category": "3d-webgl", "description": "Full-viewport Three.js hero with a GLB pocket watch whose finish is swapped at runtime from a JSON of PBR presets: three MeshPhysicalMaterial recipes plus a real MeshTransmissionMaterial for the crystal, lit by nothing but a generated studio HDRI whose bright panel is aimed at the exact cone a flat case reflects. The dial stays towards the camera — the case sways instead of turning, and a drag eases back — so the highlight travels across the finish in every frame. A static poster is the LCP, the canvas is only built when the section enters the viewport, and a capability gate plus a runtime frame-time ladder decide whether the visitor gets transmission, plain physical, or the still.", "demo": "https://motionprompts.dev/components/3d-material-finish-switcher/index.html", "prompt": "https://motionprompts.dev/prompts/3d-material-finish-switcher.md", "page": "https://motionprompts.dev/component/3d-material-finish-switcher/", "thumb": "https://motionprompts.dev/thumbs/3d-material-finish-switcher.webp", "preview": "https://motionprompts.dev/previews/3d-material-finish-switcher.webm", "motion": { "trigger": "pointer", "libs": [ "three", "GLTFLoader", "MeshoptDecoder", "HDRLoader", "@pmndrs/vanilla" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 2.4 ], "stagger": null, "assets_required": { "count": 9, "bytes": 1253745, "root_absolute_paths": true }, "mobile_behavior": { "kind": "touch-branch", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "rAF angular integrator with pointer impulse; runtime PBR/transmission material swap", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "3d-scroll-tunnel", "title": "3D Scroll Tunnel", "category": "3d-webgl", "description": "Infinite 3D image tunnel driven by the mouse wheel: six layers of four full-colour images each sit on an ellipse inside a perspective container, and a gsap.ticker loop lerps a virtual scroll value to push layers along the Z axis, wrapping depth modulo the tunnel length for endless looping. A per-item plum-black overlay driven by a --overlay CSS variable fades images in from the depths and darkens them out as they pass the camera. On top of that, a second damped read — the VELOCITY of the lerped scroll, not its position — stretches every plate along its own radial axis and pinches it across, so the frames smear like speed lines while the flight is moving and snap back to clean rectangles the moment it settles.", "demo": "https://motionprompts.dev/components/3d-scroll-tunnel/index.html", "prompt": "https://motionprompts.dev/prompts/3d-scroll-tunnel.md", "page": "https://motionprompts.dev/component/3d-scroll-tunnel/", "thumb": "https://motionprompts.dev/thumbs/3d-scroll-tunnel.webp", "preview": "https://motionprompts.dev/previews/3d-scroll-tunnel.webm", "motion": { "trigger": "wheel", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 2.4 ], "stagger": null, "assets_required": { "count": 12, "bytes": 1289972, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "gsap+raf", "motion_signature": "wheel-driven lerped infinite CSS-3D depth tunnel", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "3d-slider-threejs", "title": "ThreeJS 3D Slider", "category": "3d-webgl", "description": "A Three.js curved plane displays an endless vertical slideshow of captioned images drawn onto a repeating 2D canvas texture. Lenis smooth-scroll progress feeds a scroll listener that shifts the texture offset and re-renders the WebGL scene, so scrolling the tall page pushes the image strip through the 3D wave.", "demo": "https://motionprompts.dev/components/3d-slider-threejs/index.html", "prompt": "https://motionprompts.dev/prompts/3d-slider-threejs.md", "page": "https://motionprompts.dev/component/3d-slider-threejs/", "thumb": "https://motionprompts.dev/thumbs/3d-slider-threejs.webp", "preview": "https://motionprompts.dev/previews/3d-slider-threejs.webm", "motion": { "trigger": "scroll", "libs": [ "three", "lenis" ], "complexity": 4, "pinned": false, "viewport_heights": 1000, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 7, "bytes": 1880590, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh", "reclama el primer canvas del documento" ], "cluster": "SCROLL-WELDED", "engine": "webgl-raf", "motion_signature": "scroll-driven looping texture strip on curved 3D plane (quadratic curl, pow(dist,2)*35), no easing of its own — only Lenis' default smoothing", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height", "first-canvas" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "accordion-frames", "title": "Accordion Frames Spotlight Row", "category": "hover", "description": "Centered accordion row of 20 vertical image slivers (10 on mobile) where hovering a panel (tapping on mobile) expands it to a 400px frame while the others collapse to 20px, eased by a slow decelerating CSS transition. A white focus frame with full-viewport vertical crosshair lines glides along to track the focused panel, and a ResizeObserver recomputes the pixel layout on resize.", "demo": "https://motionprompts.dev/components/accordion-frames/index.html", "prompt": "https://motionprompts.dev/prompts/accordion-frames.md", "page": "https://motionprompts.dev/component/accordion-frames/", "thumb": "https://motionprompts.dev/thumbs/accordion-frames.webp", "preview": "https://motionprompts.dev/previews/accordion-frames.webm", "motion": { "trigger": "hover", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 20, "bytes": 2272254, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "css-transition", "motion_signature": "hover/tap accordion strip: JS writes px left/width per panel (focused 400px desktop / 100px mobile, others 20px, 5px gap, strip re-centered in the track) and a 1s cubic-bezier(0.075,0.82,0.165,1) CSS transition does all the easing; a bordered focus indicator with full-viewport crosshair lines glides to the focused panel on the same curve", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "adaline-scroll-animation", "title": "Adaline Scroll Animation", "category": "scroll", "description": "A pinned hero where a 104-frame image sequence is played back frame-by-frame on a driven by scroll. A single ScrollTrigger (pin + scrub over 7x viewport height, Lenis-smoothed) maps scroll progress to the frame index while its onUpdate also fades the nav out, pushes the headline back on the Z axis and fades it, then flies a framed photo in from translateZ(1000px) to 0 near the end.", "demo": "https://motionprompts.dev/components/adaline-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/adaline-scroll-animation.md", "page": "https://motionprompts.dev/component/adaline-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/adaline-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/adaline-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 106, "bytes": 4600235, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "reclama el primer canvas del documento" ], "cluster": "SCROLL-LAGGED", "engine": "mixed", "motion_signature": "scrubbed pinned canvas image-sequence with Z-axis reveals", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "first-canvas" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "advanced-infinite-scroll", "title": "Advanced Infinite Scroll", "category": "menu", "description": "A fullscreen vertical menu of category/title rows that loops endlessly: a requestAnimationFrame loop lerps the scroll position and calls gsap.set with a y modifier using gsap.utils.wrap to seamlessly recycle items, while gsap.to elastically scales down and rotates the rows proportional to scroll velocity. Driven by mouse wheel and click/touch drag.", "demo": "https://motionprompts.dev/components/advanced-infinite-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/advanced-infinite-scroll.md", "page": "https://motionprompts.dev/component/advanced-infinite-scroll/", "thumb": "https://motionprompts.dev/thumbs/advanced-infinite-scroll.webp", "preview": "https://motionprompts.dev/previews/advanced-infinite-scroll.webm", "motion": { "trigger": "wheel", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 307255, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "gsap+raf", "motion_signature": "rAF-lerped infinite list wrapped by gsap.utils.wrap, with a per-frame velocity-driven scale/rotate skew", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "aladesign-landing-page-reveal", "title": "AlaDesign Landing Page Reveal", "category": "preloader", "description": "Preloader-to-hero landing page reveal driven by three parallel GSAP timelines with a custom 'hop' ease: a dark overlay counts 0 to 100 while masked overlay text steps through three lines, five portrait images rise and collapse their flex gap, the side images wipe away with clip-path as the center image scales up, then the overlay wipes upward and the giant hero name slides in word by word (SplitText). Plays automatically once on page load, about 7 seconds total.", "demo": "https://motionprompts.dev/components/aladesign-landing-page-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/aladesign-landing-page-reveal.md", "page": "https://motionprompts.dev/component/aladesign-landing-page-reveal/", "thumb": "https://motionprompts.dev/thumbs/aladesign-landing-page-reveal.webp", "preview": "https://motionprompts.dev/previews/aladesign-landing-page-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap", "CustomEase", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.3, 5 ], "stagger": 0.1, "assets_required": { "count": 5, "bytes": 825010, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay timed preloader wipe revealing hero", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "aminezegmou-landing-page", "title": "Sci-Fi Preloader Button Hero Reveal", "category": "preloader", "description": "Terminal-styled preloader that auto-plays on load: monospace status lines rise with masked SplitText, a circular SVG button outline draws itself while rotating 270deg, and a progress stroke fills in randomized stops before the logo swaps to an 'Engage' label. Clicking the button scales the preloader down, unwinds the strokes, flips the label to 'Access Granted' and wipes preloader plus white revealer left via clip-path, scaling the hero up as its headline words stagger in.", "demo": "https://motionprompts.dev/components/aminezegmou-landing-page/index.html", "prompt": "https://motionprompts.dev/prompts/aminezegmou-landing-page.md", "page": "https://motionprompts.dev/component/aminezegmou-landing-page/", "thumb": "https://motionprompts.dev/thumbs/aminezegmou-landing-page.webp", "preview": "https://motionprompts.dev/previews/aminezegmou-landing-page.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.3, 2 ], "stagger": 0.05, "assets_required": { "count": 3, "bytes": 50373, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "click-gated preloader: SVG ring draw, clip-path wipe reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "anchored-headline-speech-bubbles", "title": "Anchored Headline with Speech Bubbles", "category": "scroll", "description": "A tall section whose headline is pinned with `position: sticky` at the vertical centre while testimonial speech bubbles arrive around it, one at a time, out of the left and right margins. Each bubble is positioned in percentages of the track with `--x`/`--y` and carries its own ScrollTrigger fired by its own position (`top 78%`), so the visual order and the temporal order are the same datum: move a bubble in the HTML and its arrival moves with it. Bubbles enter from the side they live on with a `back.out(1.9)` landing, and `toggleActions: play none none reverse` empties the field on the way back up. The headline fades to 0.55 opacity across the track via a scrubbed tween, ceding focus without leaving. Below 760px the bubbles stop floating and stack under the headline. Smoothed by Lenis.", "demo": "https://motionprompts.dev/components/anchored-headline-speech-bubbles/index.html", "prompt": "https://motionprompts.dev/prompts/anchored-headline-speech-bubbles.md", "page": "https://motionprompts.dev/component/anchored-headline-speech-bubbles/", "thumb": "https://motionprompts.dev/thumbs/anchored-headline-speech-bubbles.webp", "preview": "https://motionprompts.dev/previews/anchored-headline-speech-bubbles.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "back", "duration_range": [ 0.55, 0.55 ], "stagger": null, "assets_required": { "count": 5, "bytes": 23220, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "sticky-centred headline with scroll-staggered speech bubbles arriving from the margins: one ScrollTrigger per bubble fired by the bubble own position in a 130svh track, back.out landing, play/reverse so the field empties on the way up; a separate scrubbed tween fades the headline to 0.55 across the track", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "arch-portal-reveal", "title": "Arch Portal Reveal", "category": "transition", "description": "A sticky stage where an arch-shaped opening grows from a small doorway to the entire frame as you scroll, revealing the scene behind it. The scene never scales: it keeps its own viewport-sized box and is anchored to the same bottom-centre point as the opening, so it sits perfectly still while the aperture grows around it — scaling the container instead would balloon the type, lose the photograph's crop and read as a zoom rather than as walking through a door. The arch is `border-radius`, not `clip-path` (a real curve, no facets, two numbers to animate instead of a polygon whose vertex count must stay constant), and the radius is pulled down on a `pow(1-p, 1.9)` curve so the shape is unmistakably an arch during the first third, which is the part the reader watches. One ScrollTrigger writing directly on every update, no scrub; Lenis supplies the smoothing. Dressed as a glasshouse: Playfair Display + Kumbh Sans, moss green and chalk.", "demo": "https://motionprompts.dev/components/arch-portal-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/arch-portal-reveal.md", "page": "https://motionprompts.dev/component/arch-portal-reveal/", "thumb": "https://motionprompts.dev/thumbs/arch-portal-reveal.webp", "preview": "https://motionprompts.dev/previews/arch-portal-reveal.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 3, "bytes": 514913, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "sticky stage over a 260svh track where an arch-shaped opening grows from 26vw/34svh to 100vw/100svh by writing --w/--h/--r on every ScrollTrigger update; the radius follows pow(1-p,1.9) so the arch reads as an arch through the first third; the revealed scene keeps a viewport-sized box anchored to the same bottom-centre point and never scales; no tween, no scrub, smoothing from Lenis only", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "aristidebenoist-slider", "title": "Aristide Benoist Slider", "category": "slider", "description": "A full-screen horizontal image carousel where clicking a segment in the top progress-bar nav slides the track with gsap.to and a custom 'hop' CustomEase, tweens the background overlay to a random color, and re-animates two rows of large display-type title letters sliding in with power2.out. Triggered by click on the nav segments.", "demo": "https://motionprompts.dev/components/aristidebenoist-slider/index.html", "prompt": "https://motionprompts.dev/prompts/aristidebenoist-slider.md", "page": "https://motionprompts.dev/component/aristidebenoist-slider/", "thumb": "https://motionprompts.dev/thumbs/aristidebenoist-slider.webp", "preview": "https://motionprompts.dev/previews/aristidebenoist-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 1, 1.5 ], "stagger": null, "assets_required": { "count": 30, "bytes": 4402442, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-driven horizontal slider: a fixed 3000vw flex strip is tweened to -i*100vw over 1.5s on the CustomEase \"hop\" curve (fast-in, long settle) while a fixed full-viewport overlay cross-tints to a new palette colour on the same 1.5s/hop; simultaneously all 14 title letters are re-created as spans set at x:±150 (sign = travel direction) and slid to 0 over 1s power2.out after a 0.125s delay — no scroll, no stagger, no physics", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "arock-menu", "title": "Responsive Fullscreen Menu", "category": "menu", "description": "A fullscreen overlay menu that opens on clicking 'Menu': the panel sweeps up via an animated clip-path polygon on a power4.inOut ease while the hero slides away, then the logo, oversized nav links and footer lines reveal with staggered power3.out y-translations. A stack of four semi-transparent images parallaxes and tilts in 3D (rotate3d) following the mouse via GSAP tweens.", "demo": "https://motionprompts.dev/components/arock-menu/index.html", "prompt": "https://motionprompts.dev/prompts/arock-menu.md", "page": "https://motionprompts.dev/component/arock-menu/", "thumb": "https://motionprompts.dev/thumbs/arock-menu.webp", "preview": "https://motionprompts.dev/previews/arock-menu.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 2 ], "stagger": 0.05, "assets_required": { "count": 2, "bytes": 482271, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "Click-driven fullscreen overlay: a 1.25s power4.inOut clip-path polygon sweep raises .menu from the bottom edge while .hero slides to top:-50% and fades out; content then reveals as delayed power3.out y-translations behind clip-path masks (logo 1s@0.75s, links 1s stagger 0.075@1s, sub-items 0.75s stagger 0.05@1s) and three stacked images rise top:150%→50% with stagger 0.1@0.25s. Independently, every mousemove retargets five 2s power3.out tweens — rotate3d(tiltx, tilty, 0, 15deg) on the image container plus per-image translate offsets scaled by index — giving long-tail inertial easing rather than a spring or lerp loop. No timelines, no scroll, no rAF loop.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "art-tech-nav", "title": "Art Tech Overlay Navigation", "category": "menu", "description": "Clicking the burger button plays a paused GSAP timeline that reveals a fullscreen black overlay by animating the clip-path polygon of eight vertical blocks with a 0.075s stagger on a power3.inOut ease, then fades in the menu title and items with a staggered opacity tween; clicking again reverses the timeline to close.", "demo": "https://motionprompts.dev/components/art-tech-nav/index.html", "prompt": "https://motionprompts.dev/prompts/art-tech-nav.md", "page": "https://motionprompts.dev/component/art-tech-nav/", "thumb": "https://motionprompts.dev/thumbs/art-tech-nav.webp", "preview": "https://motionprompts.dev/previews/art-tech-nav.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.3, 1 ], "stagger": 0.05, "assets_required": { "count": 2, "bytes": 30785, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "Burger click plays one paused timeline: 8 full-height columns wipe top-to-bottom via clip-path polygon (1s, power3.inOut, 0.075s stagger), and 0.5s before that wipe finishes the index title + 4 menu items fade up in opacity (0.3s, power1.out default, 0.05s stagger). A second click reverses the same timeline. No scroll, no rAF, no physics.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "ascii-image-reveal-effect", "title": "ASCII Image Reveal Effect", "category": "gallery", "description": "Editorial photo grid where each frame paints itself as live ASCII on a canvas as it scrolls into view: cells pop in in random order, the lit mid-tones flicker through dense glyphs before locking, and the settled ASCII holds a beat before cross-fading to the real photograph. The glyph grid is measured from the tile's own box, so it stays legible from a 250px desktop frame down to a 170px phone tile; tapping a frame scans it again.", "demo": "https://motionprompts.dev/components/ascii-image-reveal-effect/index.html", "prompt": "https://motionprompts.dev/prompts/ascii-image-reveal-effect.md", "page": "https://motionprompts.dev/component/ascii-image-reveal-effect/", "thumb": "https://motionprompts.dev/thumbs/ascii-image-reveal-effect.webp", "preview": "https://motionprompts.dev/previews/ascii-image-reveal-effect.webm", "motion": { "trigger": "click", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 10 ], "stagger": null, "assets_required": { "count": 15, "bytes": 2446148, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "canvas2d", "motion_signature": "per-cell ASCII grid materializes in shuffled random order at a flat 2ms/cell; dark cells cycle 10 random dense glyphs at 100ms before locking to their final char; when all ~500 cells settle the canvas is hidden and the real photo appears with no crossfade. No easing curves at all — the physics is pure uniform timer spacing.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [], "conflicts_with": [] }, { "slug": "ashfall-3d-image-gallery", "title": "Ashfall 3D Cylinder Gallery", "category": "3d-webgl", "description": "A Three.js WebGL gallery arranges dozens of curved image planes into a tall rotating cylinder that spins continuously. Lenis smooth-scroll drives the camera vertically through the stack while scroll velocity briefly accelerates the group's Y rotation for an inertial, momentum-based spin.", "demo": "https://motionprompts.dev/components/ashfall-3d-image-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/ashfall-3d-image-gallery.md", "page": "https://motionprompts.dev/component/ashfall-3d-image-gallery/", "thumb": "https://motionprompts.dev/thumbs/ashfall-3d-image-gallery.webp", "preview": "https://motionprompts.dev/previews/ashfall-3d-image-gallery.webm", "motion": { "trigger": "scroll", "libs": [ "three", "lenis" ], "complexity": 5, "pinned": false, "viewport_heights": 500, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 50, "bytes": 7826398, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "webgl-raf", "motion_signature": "scroll-driven camera descent inside rotating photo cylinder: camera.position.y lerps at 0.1 toward -(scrollFraction*30 - 15) while galleryGroup.rotation.y advances 0.0025 rad/frame plus an unclamped scroll-velocity kick (velocity*0.005) decaying 0.95/frame", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "ashleybrookecs-smudge-revealer", "title": "Cursor Smudge Revealer", "category": "interactive", "description": "Full-screen hero where moving the cursor (or finger) smudges away the still-wet ink foreground: circles sized by pointer speed are stamped at a lerped pointer position inside a gooey SVG mask, each expanding 2x over 2s then dissolving over 3s, revealing the second-colour layer beneath the title.", "demo": "https://motionprompts.dev/components/ashleybrookecs-smudge-revealer/index.html", "prompt": "https://motionprompts.dev/prompts/ashleybrookecs-smudge-revealer.md", "page": "https://motionprompts.dev/component/ashleybrookecs-smudge-revealer/", "thumb": "https://motionprompts.dev/thumbs/ashleybrookecs-smudge-revealer.webp", "preview": "https://motionprompts.dev/previews/ashleybrookecs-smudge-revealer.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 2, 3 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "gsap+raf", "motion_signature": "lerped pointer stamps gooey SVG mask blobs", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "asset-orb-js", "title": "Asset ORB", "category": "3d-webgl", "description": "A WebGL sphere built from 100 image planes distributed via a Fibonacci-sphere layout, each plane textured with a random editorial photo. Three.js OrbitControls let the user drag to rotate the orb and scroll to zoom, with damping/inertia for smooth momentum.", "demo": "https://motionprompts.dev/components/asset-orb-js/index.html", "prompt": "https://motionprompts.dev/prompts/asset-orb-js.md", "page": "https://motionprompts.dev/component/asset-orb-js/", "thumb": "https://motionprompts.dev/thumbs/asset-orb-js.webp", "preview": null, "motion": { "trigger": null, "libs": [ "three", "OrbitControls" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 30, "bytes": 3332946, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "webgl-raf", "motion_signature": "damped orbit drag around textured photo sphere; OrbitControls inertia (dampingFactor 0.05, rotateSpeed 1.2, pan disabled, zoom clamped to distance 6–10) is the only physics, integrated inside one uncapped rAF loop", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "audemarspiguet-menu", "title": "Audemars Piguet Overlay Menu", "category": "menu", "description": "Fullscreen overlay menu opened from a hamburger toggle: two background halves pre-rotated 180deg with scale(2) sweep in like closing doors on a custom cubic-bezier ease while the bars morph into an X, then SplitText-masked menu links and footer lines slide up with staggered power3.out reveals. Clicking the toggle again reverses the same paused timeline to close.", "demo": "https://motionprompts.dev/components/audemarspiguet-menu/index.html", "prompt": "https://motionprompts.dev/prompts/audemarspiguet-menu.md", "page": "https://motionprompts.dev/component/audemarspiguet-menu/", "thumb": "https://motionprompts.dev/thumbs/audemarspiguet-menu.webp", "preview": "https://motionprompts.dev/previews/audemarspiguet-menu.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.3, 1 ], "stagger": 0.1, "assets_required": { "count": 1, "bytes": 166816, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "click-toggled paused timeline: two doors un-rotating from 180deg (kept at scale 2) while masked lines stagger up", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [ { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "autoplay-hero-progress", "title": "Autoplay Hero with Progress", "category": "slider", "description": "A full-bleed hero carousel driven by a CLOCK rather than by the scroll, with one progress tick per slide filling over exactly that slide's duration. Deliberately built with no GSAP, no ScrollTrigger and no Lenis: wiring a time-driven hero to a scroll library would be pretending. A single rAF loop drives both the advance and the bar fill — a CSS transition on the bar plus a `setInterval` for the slide drift apart the first time the tab is backgrounded or the user pauses, and then the bar lies about when the next slide lands. The loop stops when the hero leaves the viewport (IntersectionObserver) and when the tab is hidden (`visibilitychange`), resuming without a jump because the epoch is rebased rather than the elapsed time preserved. Manual advance restarts the clock. Crossfade is opacity-only: with full-bleed photography a translate reads as a jolt because the eye tracks the image edge. Reduced motion stops the autoplay but keeps the controls working. Dressed as a repertory cinema season: Unbounded + Rethink Sans, near-black, cream and red.", "demo": "https://motionprompts.dev/components/autoplay-hero-progress/index.html", "prompt": "https://motionprompts.dev/prompts/autoplay-hero-progress.md", "page": "https://motionprompts.dev/component/autoplay-hero-progress/", "thumb": "https://motionprompts.dev/thumbs/autoplay-hero-progress.webp", "preview": "https://motionprompts.dev/previews/autoplay-hero-progress.webm", "motion": { "trigger": "click", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.7, 5.2 ], "stagger": null, "assets_required": { "count": 4, "bytes": 474173, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "raf", "motion_signature": "time-driven hero: a single requestAnimationFrame loop advances a four-slide opacity crossfade every 5.2s and writes the active progress tick width from the same clock; paused by IntersectionObserver when off-screen and by visibilitychange when the tab is hidden, resuming by rebasing the epoch so it never jumps; manual advance restarts the clock. No GSAP, no ScrollTrigger, no Lenis", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "barba-js-page-transitions", "title": "BarbaJS Page Transitions", "category": "transition", "description": "A three-page editorial site whose routes swap behind a curtain: click a nav link and two sheets — an accent one leading a solid ink panel that carries the name of the page you are travelling to — ride up over the content area, the route is replaced behind them, and they keep going off the top while the new heading lifts out of its mask and the rows step in. The masthead stays put the whole time, so the swap reads as navigation and not as a loose animation. GSAP timelines (power4.inOut curtain, power3.inOut masked heading) reproducing Barba.js's sync lifecycle with a queued in-page router.", "demo": "https://motionprompts.dev/components/barba-js-page-transitions/index.html", "prompt": "https://motionprompts.dev/prompts/barba-js-page-transitions.md", "page": "https://motionprompts.dev/component/barba-js-page-transitions/", "thumb": "https://motionprompts.dev/thumbs/barba-js-page-transitions.webp", "preview": "https://motionprompts.dev/previews/barba-js-page-transitions.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "CLICK-CURTAIN", "engine": "mixed", "motion_signature": "full-screen curtain wipe with masked heading reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "bennett-clive-scroll-animation", "title": "Barrett & Hale Scroll Animation", "category": "scroll", "description": "A wordmark ('Barrett & Hale'), centered on both axes of the viewport, rides its own fixed full-viewport layer painted with `mix-blend-mode: difference`, so it inverts against everything scrolling behind it — near-black over the paper client index, near-white over the dark stills. A second, un-blended copy of the same wordmark carries only the red ampersand so the accent never inverts. As each row of client names crosses the wordmark's band, two scrubbed ScrollTriggers animate the row's flex `gap` in px so the names spread apart around the title and close again. Reaching the tall footer section, further ScrollTriggers walk the wordmark's center line down the viewport and grow its type into a full-width title card over a sticky full-bleed photograph.", "demo": "https://motionprompts.dev/components/bennett-clive-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/bennett-clive-scroll-animation.md", "page": "https://motionprompts.dev/component/bennett-clive-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/bennett-clive-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/bennett-clive-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 3, "pinned": false, "viewport_heights": 300, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.3, 0.3 ], "stagger": null, "assets_required": { "count": 2, "bytes": 354154, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "row gaps scrub open 1em→15em then closed 15em→1em as each row passes a fixed wordmark, which then descends 50%→92% and grows 1.25vw→9vw over a 300vh sticky footer", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "bitkraft-menu", "title": "Circular Futuristic Navigation Menu", "category": "menu", "description": "A fullscreen overlay menu whose links are arranged as radial clip-path segments around a draggable center joystick. Clicking the bottom hamburger button toggles the overlay with GSAP opacity, scale (back.out/back.in) and randomized yoyo-flicker reveals; dragging the joystick with lerped follow motion highlights the segment it points toward via CSS flicker keyframes, with audio feedback on open/close/select.", "demo": "https://motionprompts.dev/components/bitkraft-menu/index.html", "prompt": "https://motionprompts.dev/prompts/bitkraft-menu.md", "page": "https://motionprompts.dev/component/bitkraft-menu/", "thumb": "https://motionprompts.dev/thumbs/bitkraft-menu.webp", "preview": "https://motionprompts.dev/previews/bitkraft-menu.webm", "motion": { "trigger": "pointer", "libs": [ "gsap", "ionicons" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.05, 0.4 ], "stagger": null, "assets_required": { "count": 4, "bytes": 181486, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap+raf", "motion_signature": "radial clip-path segments, random yoyo flicker, lerped joystick", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "block-reveal-page-transition", "title": "Block Reveal Page Transition", "category": "transition", "description": "Page transition where a fixed fullscreen grid of 60px black blocks flickers in with a random stagger to cover the viewport, the page content swaps behind it, then the blocks fade back out to reveal the new page. Triggered by clicking the bottom nav links that route between four full-viewport sci-fi sections.", "demo": "https://motionprompts.dev/components/block-reveal-page-transition/index.html", "prompt": "https://motionprompts.dev/prompts/block-reveal-page-transition.md", "page": "https://motionprompts.dev/component/block-reveal-page-transition/", "thumb": "https://motionprompts.dev/thumbs/block-reveal-page-transition.webp", "preview": "https://motionprompts.dev/previews/block-reveal-page-transition.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.05, 0.05 ], "stagger": null, "assets_required": { "count": 4, "bytes": 566672, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "random-stagger block curtain covers then reveals page: 60px grid blocks each flip opacity in 0.05s power2.inOut, randomized across a 0.5s window, 0.3s hold covered, then the same random 0.5s dissolve out", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "brandappart-sticky-cards", "title": "BrandAppart Sticky Cards", "category": "cards", "description": "Scroll-pinned deck of four stacked cards: as you scroll through the pinned section (8 viewport heights, scrub-synced with Lenis), the front card flies up while tilting back 35deg in 3D perspective, and the cards behind slide forward and scale up to take its place.", "demo": "https://motionprompts.dev/components/brandappart-sticky-cards/index.html", "prompt": "https://motionprompts.dev/prompts/brandappart-sticky-cards.md", "page": "https://motionprompts.dev/component/brandappart-sticky-cards/", "thumb": "https://motionprompts.dev/thumbs/brandappart-sticky-cards.webp", "preview": "https://motionprompts.dev/previews/brandappart-sticky-cards.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 4, "bytes": 970292, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrub-pinned 3D card deck flying up", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "brutalist-corridor", "title": "Brutalist Sci-fi Corridor", "category": "3d-webgl", "description": "On page load a preloader counter climbs to 100 over a black overlay, then a GSAP timeline fades the overlay, rotates the Three.js camera around a sodium-lit brutalist concrete corridor (ACES grade, UnrealBloom + film-grain post-processing) and scrambles the nav and heading text into view via staggered opacity; afterward the camera follows the mouse with a lerped parallax.", "demo": "https://motionprompts.dev/components/brutalist-corridor/index.html", "prompt": "https://motionprompts.dev/prompts/brutalist-corridor.md", "page": "https://motionprompts.dev/component/brutalist-corridor/", "thumb": "https://motionprompts.dev/thumbs/brutalist-corridor.webp", "preview": "https://motionprompts.dev/previews/brutalist-corridor.webm", "motion": { "trigger": "pointer", "libs": [ "gsap", "three", "GLTFLoader", "EffectComposer", "RenderPass", "ShaderPass", "UnrealBloomPass" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.1, 4 ], "stagger": 0.1, "assets_required": { "count": 6, "bytes": 9410833, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "mixed", "motion_signature": "Load-time preloader: a 4s linear counter to 100, then overlay fade + a 2s power2.inOut camera orbit (180deg swing to the corridor axis) crossfaded with a random-order char scramble; afterwards a permanent rAF loop lerps the camera angle/height toward the pointer at 0.025/0.05. Nothing is scroll-driven.", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "burocratik-image-trail-js", "title": "Burocratik Image Trail", "category": "interactive", "description": "A cursor-driven image trail: while the mouse moves across the central full-viewport panel, a new 200px photo spawns at the cursor once it passes a distance threshold, scaling up from 0 with a random rotation via a CSS transform transition, then collapsing back to scale 0 and unmounting after a ~750ms lifespan. Idle cursors and scroll events also seed images. Pure vanilla JS driven by requestAnimationFrame and CSS cubic-bezier transitions (no GSAP); Lenis provides smooth scrolling.", "demo": "https://motionprompts.dev/components/burocratik-image-trail-js/index.html", "prompt": "https://motionprompts.dev/prompts/burocratik-image-trail-js.md", "page": "https://motionprompts.dev/component/burocratik-image-trail-js/", "thumb": "https://motionprompts.dev/thumbs/burocratik-image-trail-js.webp", "preview": "https://motionprompts.dev/previews/burocratik-image-trail-js.webm", "motion": { "trigger": "scroll", "libs": [ "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 35, "bytes": 4834149, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "css-transition", "motion_signature": "pointer-spawned CSS-transition image trail, rAF-culled", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "camille-mormal-slider", "title": "Camille Mormal Slider", "category": "slider", "description": "A four-plate portrait slider: each photograph is framed as a print on a bone-paper wall (crop marks and all) rather than used as a full-bleed background, with the whole naming rail — title, sampled ground colour, counter, progress and thumbnails — kept beside the picture. Clicking either half of the plate, a thumbnail, an arrow key or one of the rotating '+' marks swaps plates with a GSAP clip-path wipe while the outgoing photograph pushes sideways. A CustomEase 'hop' curve drives the wipe, the three odometers (title, ground hex, counter), the progress fill and the +/-90 degree mark rotation; the accent colour of the whole page is sampled from the seamless paper of the current plate.", "demo": "https://motionprompts.dev/components/camille-mormal-slider/index.html", "prompt": "https://motionprompts.dev/prompts/camille-mormal-slider.md", "page": "https://motionprompts.dev/component/camille-mormal-slider/", "thumb": "https://motionprompts.dev/thumbs/camille-mormal-slider.webp", "preview": "https://motionprompts.dev/previews/camille-mormal-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.25, 1.5 ], "stagger": null, "assets_required": { "count": 4, "bytes": 400413, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-driven clip-path wipe: new slide unmasks from the clicked edge while both images push ±500px, all six tweens on one custom 'hop' ease (fast-out, long settle), with odometer-style y-stepped counter/title and ±90° rotating + marks", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "cappen-fluid-simulation", "title": "Cappen Fluid Simulation", "category": "3d-webgl", "description": "Cappen-style GPU fluid simulation built with Three.js: moving the pointer injects ink and velocity splats into double-buffered HalfFloat render targets, and a Navier-Stokes shader solver (advection, curl/vorticity confinement, divergence, 40 pressure iterations) makes the ink swirl and dissipate. The full-screen canvas sits over a white typographic hero with mix-blend-mode: difference, so the flowing ink inverts the giant text beneath it.", "demo": "https://motionprompts.dev/components/cappen-fluid-simulation/index.html", "prompt": "https://motionprompts.dev/prompts/cappen-fluid-simulation.md", "page": "https://motionprompts.dev/component/cappen-fluid-simulation/", "thumb": "https://motionprompts.dev/thumbs/cappen-fluid-simulation.webp", "preview": "https://motionprompts.dev/previews/cappen-fluid-simulation.webm", "motion": { "trigger": "pointer", "libs": [ "three" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 1.8 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "pointer-driven GPU Navier-Stokes ink splats, difference-blended", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "capsules-animated-columns", "title": "Capsules Animated Sticky Columns", "category": "scroll", "description": "A pinned full-screen section where four rounded 'capsule' columns swap in place as you scroll. A single ScrollTrigger pins the section over 5x viewport height (Lenis-smoothed) while a second ScrollTrigger watches progress and, at the 0.33 and 0.66 thresholds, fires phased gsap.to tweens that slide columns in from X/Y offsets, fade/scale the previous column out, grow a clip-path reveal on an image, and swap SplitText line spans between two stacked text blocks. Scrolling back reverses each phase.", "demo": "https://motionprompts.dev/components/capsules-animated-columns/index.html", "prompt": "https://motionprompts.dev/prompts/capsules-animated-columns.md", "page": "https://motionprompts.dev/component/capsules-animated-columns/", "thumb": "https://motionprompts.dev/thumbs/capsules-animated-columns.webp", "preview": "https://motionprompts.dev/previews/capsules-animated-columns.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 600, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.25, 2.4 ], "stagger": null, "assets_required": { "count": 3, "bytes": 596090, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "pinned phase-swapped capsule columns with clip-path reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "capsules-sticky-cards-javascript", "title": "Capsules Animated Sticky Cards", "category": "cards", "description": "Scroll-driven deck of pinned full-screen cards where the first card grows from a small rounded capsule into a full-bleed image over 300vh (ScrollTrigger scrub via onUpdate, synced to Lenis), fading out a looping horizontal marquee as it expands. Each following card pins, scales/fades the previous one back, morphs its image border-radius and scale, and reveals SplitText title characters plus description with power4.out.", "demo": "https://motionprompts.dev/components/capsules-sticky-cards-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/capsules-sticky-cards-javascript.md", "page": "https://motionprompts.dev/component/capsules-sticky-cards-javascript/", "thumb": "https://motionprompts.dev/thumbs/capsules-sticky-cards-javascript.webp", "preview": "https://motionprompts.dev/previews/capsules-sticky-cards-javascript.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 5, "pinned": true, "viewport_heights": 300, "needs_lenis": true, "ease_family": "power4", "duration_range": [ 0.25, 0.75 ], "stagger": null, "assets_required": { "count": 4, "bytes": 2948981, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned stacking cards, capsule expands, marquee loops — the intro card's .card-img morphs from a 0.5-scale 400px-radius capsule to full-bleed 25px radius over 300vh (inner img counter-scales 1.5->1.0, stroke marquee cross-fades out between progress 0 and 0.5), then each later card scales its wrapper 1->0.75 and fades 1->0 as the next rises, while the incoming image scales 2->1 and its container radius goes 150->25px. All of it is imperative gsap.set inside ScrollTrigger onUpdate; there is no scrub anywhere.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "cards", "title": "Interactive Calendar Cards", "category": "cards", "description": "A column of month cards, each showing a randomized grid of contribution-style pads with a few colored 'active' cells. Clicking an active pad triggers gsap.to to scale it up 20x to flood-fill the card, then reveals an image, title, copy and link that fly in with a staggered elastic.out gsap.fromTo (y and random rotation); a Back button reverses the animation.", "demo": "https://motionprompts.dev/components/cards/index.html", "prompt": "https://motionprompts.dev/prompts/cards.md", "page": "https://motionprompts.dev/component/cards/", "thumb": "https://motionprompts.dev/thumbs/cards.webp", "preview": "https://motionprompts.dev/previews/cards.webm", "motion": { "trigger": "click", "libs": [ "gsap", "ionicons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "elastic", "duration_range": [ 0.075, 2 ], "stagger": 0.1, "assets_required": { "count": 10, "bytes": 615312, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-scaled pad flood-fill (scale 20 in 0.3s, contained by the card's overflow:hidden), then a 2s elastic.out staggered fromTo of 3 content blocks from y:100 with a per-element random rotation (-30..30); Back reverses as a nested chain (fade 0.2s -> unscale 0.3s -> clearProps). No scroll-driven motion at all.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "chromatic-aberration-gallery", "title": "Halide — Chromatic Aberration Lens Archive", "category": "gallery", "description": "Halide, an editorial photo studio, presents its image archive as a full-screen grid that pans with the cursor while a WebGL/GLSL lens magnifies the plates beneath the pointer and splits their RGB channels into a chromatic-aberration fringe. Fixed HUD chips (wordmark, volume, caption, hint) frame the effect; the grid is rasterized to a canvas texture and sampled by the fragment shader every frame, eased via requestAnimationFrame (no GSAP).", "demo": "https://motionprompts.dev/components/chromatic-aberration-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/chromatic-aberration-gallery.md", "page": "https://motionprompts.dev/component/chromatic-aberration-gallery/", "thumb": "https://motionprompts.dev/thumbs/chromatic-aberration-gallery.webp", "preview": "https://motionprompts.dev/previews/chromatic-aberration-gallery.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 2.2, 2.2 ], "stagger": null, "assets_required": { "count": 25, "bytes": 4073838, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "reclama el primer canvas del documento" ], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "rAF lerp pan with WebGL chromatic lens: two independent frame-rate-dependent exponential lerps — 0.035 on the 200vw x 200vh grid's translate (very heavy, long settle) and 0.1 on the lens centre — with no easing curve, no time delta and no scroll involvement", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "first-canvas" ], "conflicts_with": [] }, { "slug": "cielrose-threejs-slider-javascript", "title": "Cielrose Inspired ThreeJS Slider", "category": "slider", "description": "A wheel-driven WebGL image slider built with Three.js: scrolling drives a custom shader that vertically wipes between the current and next texture while a distortion/scale uniform bends and swells the plane, then a smooth lerp snaps to the nearest image and slides the project title back into view. Animation is hand-rolled in a requestAnimationFrame loop plus CSS transitions (no GSAP).", "demo": "https://motionprompts.dev/components/cielrose-threejs-slider-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/cielrose-threejs-slider-javascript.md", "page": "https://motionprompts.dev/component/cielrose-threejs-slider-javascript/", "thumb": "https://motionprompts.dev/thumbs/cielrose-threejs-slider-javascript.webp", "preview": "https://motionprompts.dev/previews/cielrose-threejs-slider-javascript.webm", "motion": { "trigger": "wheel", "libs": [ "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.3, 0.5 ], "stagger": null, "assets_required": { "count": 7, "bytes": 866964, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "webgl-raf", "motion_signature": "wheel/touch-driven double-lerped WebGL vertical UV wipe with sine vertex bulge, ±0.1 plane scale and round-to-nearest snap", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "circular-img-gallery", "title": "Circular Image Gallery", "category": "gallery", "description": "On page load a GSAP timeline lays out 15 image tiles into a full circle, each scaling from 0 to 1 and rotating tangentially with a staggered power2.out entrance. Clicking any tile shrinks the others away (power2.in stagger) and animates the chosen tile to the center, scaling it up 5x; clicking again reverses it back into the ring.", "demo": "https://motionprompts.dev/components/circular-img-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/circular-img-gallery.md", "page": "https://motionprompts.dev/component/circular-img-gallery/", "thumb": "https://motionprompts.dev/thumbs/circular-img-gallery.webp", "preview": "https://motionprompts.dev/previews/circular-img-gallery.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.0001, 1 ], "stagger": 0.05, "assets_required": { "count": 15, "bytes": 2656499, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "staggered radial ring assembly, click zooms tile center", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "clayboan-scroll-animation", "title": "Clayboan Scroll Animation", "category": "scroll", "description": "Full-page scroll gallery with Lenis smooth scroll where each work section is scrubbed by GSAP ScrollTrigger: the image's clip-path morphs from an angular slanted polygon to a full rectangle as the section enters and back to a bottom-slanted polygon as it exits, while SplitText masks each title character and slides them up one-by-one, staggered by scroll position.", "demo": "https://motionprompts.dev/components/clayboan-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/clayboan-scroll-animation.md", "page": "https://motionprompts.dev/component/clayboan-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/clayboan-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/clayboan-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": 150, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 5, "bytes": 995017, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scroll-scrubbed clip-path morph (jagged polygon opens to full-bleed on the way in, collapses back to a wedge on the way out) under a masked title whose characters slide up from y:125% one after another, the stagger produced by 25px scroll-offset increments rather than time", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "contact-form", "title": "Contact Form Reveal", "category": "transition", "description": "A landing hero whose oversized display title reveals on load by splitting into per-character spans that GSAP tweens up from a clipped baseline with a staggered power4.out ease, while nav/tagline/CTA fade in. Clicking 'Apply now' plays a paused GSAP timeline that fades in a fullscreen dark contact-form overlay and staggers a giant 'Apply' wordmark upward; '[ back ]' reverses the same timeline.", "demo": "https://motionprompts.dev/components/contact-form/index.html", "prompt": "https://motionprompts.dev/prompts/contact-form.md", "page": "https://motionprompts.dev/component/contact-form/", "thumb": "https://motionprompts.dev/thumbs/contact-form.webp", "preview": "https://motionprompts.dev/previews/contact-form.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.2, 1 ], "stagger": 0.075, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "staggered char reveal, click-toggled fullscreen overlay timeline", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "converging-card-stack", "title": "Converging Card Stack", "category": "scroll", "description": "Six scattered, rotated photo cards converge into a single stack as you scroll through a sticky section, uncovering the headline they were covering. A single GSAP timeline drives all six from their authored data-x/data-y/data-r offsets to a shared resting point, wired to ScrollTrigger with `scrub: 1.1` — a lagged scrub, so releasing the wheel leaves the cards travelling for about a second and scrolling back up finds them still piled over the headline.", "demo": "https://motionprompts.dev/components/converging-card-stack/index.html", "prompt": "https://motionprompts.dev/prompts/converging-card-stack.md", "page": "https://motionprompts.dev/component/converging-card-stack/", "thumb": "https://motionprompts.dev/thumbs/converging-card-stack.webp", "preview": "https://motionprompts.dev/previews/converging-card-stack.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": 260, "needs_lenis": true, "ease_family": "none", "duration_range": [ 1, 1 ], "stagger": null, "assets_required": { "count": 6, "bytes": 398495, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-SCRUB", "engine": "gsap", "motion_signature": "lagged-scrub convergence of scattered cards into one pile", "systems": [ "scrub-lagged", "scrub-welded", "reveal-on-enter" ], "native_system": "scrub-lagged" }, "capabilities": [], "conflicts_with": [] }, { "slug": "creative-clutter", "title": "Creative Clutter Flip Layouts", "category": "interactive", "description": "A messy-desk hero of 11 floating cut-out items scattered around a centered Space Grotesk display header, with three arrangements (chaos scatter, tidy cleanup grid, notebook cluster) switched via bottom icon buttons. Each switch captures Flip.getState, applies new percent-based positions and rotations with gsap.set, then animates with Flip.from (1.25s, power3.inOut, 0.1s center-out stagger, absolute); the layout recalculates on window resize.", "demo": "https://motionprompts.dev/components/creative-clutter/index.html", "prompt": "https://motionprompts.dev/prompts/creative-clutter.md", "page": "https://motionprompts.dev/component/creative-clutter/", "thumb": "https://motionprompts.dev/thumbs/creative-clutter.webp", "preview": "https://motionprompts.dev/previews/creative-clutter.webm", "motion": { "trigger": "click", "libs": [ "gsap", "Flip" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 1.25, 1.25 ], "stagger": null, "assets_required": { "count": 11, "bytes": 5108022, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 4, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "Click-driven GSAP Flip: one 1.25s power3.inOut FLIP morph (absolute:true) remaps header + 11 cutouts between three hard-coded percent arrangements with a 0.1s center-out stagger; no scroll, rAF or physics involved", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "criticaldanger-rebuild", "title": "CriticalDanger Scroll Cards", "category": "scroll", "description": "A scroll-pinned section (5 viewport heights, Lenis-synced) where a giant heading translates horizontally as you scroll while five product cards fly in from the right, each staggered by a scroll delay and animated across the screen with per-card X/Y offsets and rotation via ScrollTrigger's onUpdate progress and gsap.utils.interpolate.", "demo": "https://motionprompts.dev/components/criticaldanger-rebuild/index.html", "prompt": "https://motionprompts.dev/prompts/criticaldanger-rebuild.md", "page": "https://motionprompts.dev/component/criticaldanger-rebuild/", "thumb": "https://motionprompts.dev/thumbs/criticaldanger-rebuild.webp", "preview": "https://motionprompts.dev/previews/criticaldanger-rebuild.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 5, "bytes": 259541, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "pinned horizontal header with progress-driven flying cards", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "cursor-driven-material-spotlight", "title": "Cursor-Driven Material Spotlight", "category": "3d-webgl", "description": "Full-viewport Three.js scene with a GLB sculpture whose PBR material is patched via onBeforeCompile: moving the cursor raycasts a world-space hit point and a smoothstep mask around it lowers roughness and darkens diffuse, revealing a glossy spotlight that trails the mouse with a lerped follow.", "demo": "https://motionprompts.dev/components/cursor-driven-material-spotlight/index.html", "prompt": "https://motionprompts.dev/prompts/cursor-driven-material-spotlight.md", "page": "https://motionprompts.dev/component/cursor-driven-material-spotlight/", "thumb": "https://motionprompts.dev/thumbs/cursor-driven-material-spotlight.webp", "preview": "https://motionprompts.dev/previews/cursor-driven-material-spotlight.webm", "motion": { "trigger": "hover", "libs": [ "three", "GLTFLoader", "RoomEnvironment", "PMREMGenerator" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 2.4 ], "stagger": null, "assets_required": { "count": 1, "bytes": 5563016, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "rAF lerped raycast spotlight on PBR shader", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "detroit-paris-infinite-slider", "title": "DetroitParis Infinite Slider", "category": "slider", "description": "Infinite draggable image slider with exponential perspective sizing: slides anchored to the bottom edge grow exponentially wider toward the right, creating a perpetual-motion depth effect. Wheel, touch and pointer-drag update a scroll target that is lerped each rAF frame, with slide images wrapped modulo 10 for endless looping in both directions.", "demo": "https://motionprompts.dev/components/detroit-paris-infinite-slider/index.html", "prompt": "https://motionprompts.dev/prompts/detroit-paris-infinite-slider.md", "page": "https://motionprompts.dev/component/detroit-paris-infinite-slider/", "thumb": "https://motionprompts.dev/thumbs/detroit-paris-infinite-slider.webp", "preview": "https://motionprompts.dev/previews/detroit-paris-infinite-slider.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 2.6 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1438274, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "rAF-lerped infinite exponential-width slide track", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "direction-aware-hover-effect-javascript", "title": "Direction-Aware Hover Effect (JavaScript)", "category": "hover", "description": "A grid of labeled cells where a solid highlight block glides beneath the hovered cell, snapping to its exact bounds and swapping to a per-cell accent color. Driven by mousemove + elementFromPoint hit-testing and pure CSS transitions on transform/width/height/background (no GSAP).", "demo": "https://motionprompts.dev/components/direction-aware-hover-effect-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/direction-aware-hover-effect-javascript.md", "page": "https://motionprompts.dev/component/direction-aware-hover-effect-javascript/", "thumb": "https://motionprompts.dev/thumbs/direction-aware-hover-effect-javascript.webp", "preview": "https://motionprompts.dev/previews/direction-aware-hover-effect-javascript.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "css-transition", "motion_signature": "CSS-transitioned highlight block snaps between hovered grid cells: transform/width/height/background-color all tween 0.25s ease from the previous cell's rect to the new one, so it reads as a single block gliding and resizing; on load it slides in from translate(0,0) at zero size to the first cell. Fully static under prefers-reduced-motion.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "dotted-path-traveller", "title": "Dotted Path Traveller", "category": "scroll", "description": "A sticky scene where a dot travels along a drawn dashed SVG path as you scroll, the line revealing itself behind it and lettered milestones lighting up as it passes each one. The whole geometry lives in the path's `d` and nowhere else: the traveller and every milestone are placed by asking the path itself with `getPointAtLength()` (milestones carry a `data-t` fraction, not coordinates), so changing the curve moves all five things at once and the route can never drift from its labels. Reveal is done by putting the full length as a trailing gap in `stroke-dasharray` and retracting it, which preserves the dotted pattern instead of sliding it. A ResizeObserver re-places everything when the SVG box changes without a window resize. A flatter path swaps in below 760px so the labels stop colliding.", "demo": "https://motionprompts.dev/components/dotted-path-traveller/index.html", "prompt": "https://motionprompts.dev/prompts/dotted-path-traveller.md", "page": "https://motionprompts.dev/component/dotted-path-traveller/", "thumb": "https://motionprompts.dev/thumbs/dotted-path-traveller.webp", "preview": "https://motionprompts.dev/previews/dotted-path-traveller.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.35, 0.35 ], "stagger": null, "assets_required": { "count": 6, "bytes": 119364, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scroll-driven traveller along an SVG path: a single ScrollTrigger onUpdate reads progress, places a dot with getPointAtLength converted from viewBox space to painted-box pixels, retracts a trailing gap in stroke-dasharray to reveal the dotted line behind it, and toggles milestone classes by comparing progress against each milestone data-t; no tween on the traveller, smoothing from Lenis only. A ResizeObserver on the svg re-places milestones.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "draggable-menu", "title": "Draggable Pill Menu", "category": "menu", "description": "Pill-shaped floating menu drawer that can be dragged anywhere in the viewport with GSAP Draggable (bounds: window); a dashed drop-zone outline fades in within a 200px snap threshold of its origin and the drawer springs back to its corner with power2.out on release. Clicking the hamburger toggler expands the pill: the items row animates from width 0 to full width (power3.inOut, 0.5s) while each link fades and scales in with a 0.05s stagger, reversed from the end on close.", "demo": "https://motionprompts.dev/components/draggable-menu/index.html", "prompt": "https://motionprompts.dev/prompts/draggable-menu.md", "page": "https://motionprompts.dev/component/draggable-menu/", "thumb": "https://motionprompts.dev/thumbs/draggable-menu.webp", "preview": "https://motionprompts.dev/previews/draggable-menu.webm", "motion": { "trigger": "drag", "libs": [ "gsap", "Draggable" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.1, 0.5 ], "stagger": 0.05, "assets_required": { "count": 1, "bytes": 288, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "draggable pill menu with snap-back and staggered expand", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "eduardbodak-scroll-animation", "title": "Eduardbodak Animated Cards", "category": "scroll", "description": "A scroll-driven card sequence with Lenis smooth scroll where GSAP ScrollTrigger scrubs three stacked hero cards apart and fades them out, then pins the services section and, using per-card progress math on scrub, flies three floating cards up from tiny scaled thumbnails into full-size, rotating them 180deg on the Y axis to flip from front to back.", "demo": "https://motionprompts.dev/components/eduardbodak-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/eduardbodak-scroll-animation.md", "page": "https://motionprompts.dev/component/eduardbodak-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/eduardbodak-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/eduardbodak-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": [ 2, 2 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "scrubbed pinned card deck with 3D flip", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "epic-scroll-anims-scrolltrigger-gsap", "title": "Epic Scroll Animations", "category": "scroll", "description": "A long scroll story where two sections (a pinned 'revealer' shape and the header-info block) are pinned with ScrollTrigger while a white cross/plus shape rotates 360deg, expands its clip-path into a full cross, drifts horizontally, then scales up 13x to wipe the screen and reveal the final content. Driven entirely by multiple scrub/onUpdate ScrollTriggers over Lenis-smoothed scroll.", "demo": "https://motionprompts.dev/components/epic-scroll-anims-scrolltrigger-gsap/index.html", "prompt": "https://motionprompts.dev/prompts/epic-scroll-anims-scrolltrigger-gsap.md", "page": "https://motionprompts.dev/component/epic-scroll-anims-scrolltrigger-gsap/", "thumb": "https://motionprompts.dev/thumbs/epic-scroll-anims-scrolltrigger-gsap.webp", "preview": "https://motionprompts.dev/previews/epic-scroll-anims-scrolltrigger-gsap.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 300, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.5, 0.5 ], "stagger": null, "assets_required": { "count": 5, "bytes": 506987, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "pinned clip-path cross rotates, drifts, scales to wipe", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "eseagency-scroll-carousel-javascript", "title": "ESEAgency Scroll-Powered Carousel", "category": "slider", "description": "A full-screen project carousel pinned by ScrollTrigger (scrub, Lenis-smoothed) where scroll progress drives slides in and out: each transition animates a clip-path polygon wipe plus opposing y-translations on the image and copy with power4.inOut, while a looping GSAP linear marquee scrolls the title and five progress bars fill via a --progress CSS variable.", "demo": "https://motionprompts.dev/components/eseagency-scroll-carousel-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/eseagency-scroll-carousel-javascript.md", "page": "https://motionprompts.dev/component/eseagency-scroll-carousel-javascript/", "thumb": "https://motionprompts.dev/thumbs/eseagency-scroll-carousel-javascript.webp", "preview": "https://motionprompts.dev/previews/eseagency-scroll-carousel-javascript.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 1500, "needs_lenis": true, "ease_family": "power4", "duration_range": [ 0.25, 10 ], "stagger": null, "assets_required": { "count": 5, "bytes": 415408, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned ~15-viewport scroll drives a quintile step-index; each step fires a fixed 1s power4.inOut clip-path wipe with counter-sliding image (±25%) and copy (±100%), plus a linear 10s infinite marquee — only the progress bars are truly scrub-linked, the wipes are discrete and direction-aware", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "ethnocare", "title": "Méridien Arc Card Scroll", "category": "scroll", "description": "A pinned full-screen section where five image cards are laid out along a circular arc and rotate through the viewport as you scroll, driven by ScrollTrigger's onUpdate progress feeding a trigonometric positionCards() function (cos/sin/rotation) via gsap.set, while an IntersectionObserver syncs a vertically sliding step counter (01-05) with the currently centered card using a power1.out tween. Scroll-triggered, smoothed by Lenis.", "demo": "https://motionprompts.dev/components/ethnocare/index.html", "prompt": "https://motionprompts.dev/prompts/ethnocare.md", "page": "https://motionprompts.dev/component/ethnocare/", "thumb": "https://motionprompts.dev/thumbs/ethnocare.webp", "preview": "https://motionprompts.dev/previews/ethnocare.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 900, "needs_lenis": true, "ease_family": "power1", "duration_range": [ 0.25, 0.3 ], "stagger": null, "assets_required": { "count": 7, "bytes": 1733839, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 3, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned scroll-driven cards rotating along a circular arc: 7 cards (5 content + 2 invisible spacers) placed by trig on a circle of radius innerWidth*2.5 (innerWidth*7.5 below 900px) across a 0.4π arc; ScrollTrigger progress is remapped ((p*(1+7/7.5))-1)*0.75 and applied with gsap.set (x/y/rotation) — no scrub, no tween, so smoothing comes only from Lenis", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "exo-ape-infinite-carousel", "title": "Exo Ape Infinite Carousel", "category": "slider", "description": "A full-screen infinite image carousel driven by wheel and touch input: each scroll builds a fresh slide and reveals it with a GSAP timeline that wipes a full-bleed background via animated clip-path polygons, scales the outgoing image to 1.5, and slides a centered portrait thumbnail plus masked title, description and counter text in the scroll direction. All tweens share a 1.25s duration and a custom '.87,0,.13,1' CustomEase, with a one-second cooldown between slides.", "demo": "https://motionprompts.dev/components/exo-ape-infinite-carousel/index.html", "prompt": "https://motionprompts.dev/prompts/exo-ape-infinite-carousel.md", "page": "https://motionprompts.dev/component/exo-ape-infinite-carousel/", "thumb": "https://motionprompts.dev/thumbs/exo-ape-infinite-carousel.webp", "preview": "https://motionprompts.dev/previews/exo-ape-infinite-carousel.webm", "motion": { "trigger": "wheel", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "cubic-bezier", "duration_range": [ 1.25, 1.25 ], "stagger": null, "assets_required": { "count": 7, "bytes": 2305260, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "wheel/touch-driven slide swap: one 11-tween parallel GSAP timeline, all 1.25s at position 0 on an anonymous CustomEase(.87,0,.13,1) — a clip-path polygon wipe opens the incoming full-bleed background from the scroll direction while the outgoing background image scales to 1.5, the centered 25%x50% thumbnail wrapper wipes with an inverse clip-path and its image counter-parallaxes from y ±50% to 0%, and masked title/description/counter swap by y ±50/±20/±18px. No easing chain, no rAF, no scroll position — discrete, throttled state changes gated by a ~1s cooldown.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "exoape-menu-javascript", "title": "ExoApe-Inspired Overlay Menu", "category": "menu", "description": "A fullscreen overlay navigation menu inspired by ExoApe. Clicking the Menu toggle drives a synchronized GSAP timeline: the page container rotates/scales/translates away (power4.inOut), the overlay's clip-path polygon skews open, the menu content settles from a rotated-scaled state, and the links stagger up from below (power3.out). Hovering a link swaps a stacked preview image in with a scale/rotate fade (power2.out).", "demo": "https://motionprompts.dev/components/exoape-menu-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/exoape-menu-javascript.md", "page": "https://motionprompts.dev/component/exoape-menu-javascript/", "thumb": "https://motionprompts.dev/thumbs/exoape-menu-javascript.webp", "preview": "https://motionprompts.dev/previews/exoape-menu-javascript.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.3, 1.25 ], "stagger": 0.1, "assets_required": { "count": 5, "bytes": 959047, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "clip-path wipe overlay: the page container swings away larger (rotate 10°, x300 y450, scale 1.5, origin right top) while the menu content settles in from scale 1.5 / rotate -15° / opacity 0.25 — all three 1.25s power4.inOut — then links rise from translateY(120%) staggered 0.1s with power3.out; hover swaps a stacked preview image in from scale 1.25 / rotate 10° over 0.75s", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "explode-text-on-scroll-matterjs", "title": "Explode Text On Scroll (Matter.js)", "category": "scroll", "description": "A pinned sticky paragraph whose highlighted keywords progressively recolor as you scroll, then shatter into individual characters that fall and bounce under Matter.js physics. Driven by a scrubbed GSAP ScrollTrigger timeline that toggles gravity past 60% progress and syncs each character element to its physics body via an afterUpdate transform.", "demo": "https://motionprompts.dev/components/explode-text-on-scroll-matterjs/index.html", "prompt": "https://motionprompts.dev/prompts/explode-text-on-scroll-matterjs.md", "page": "https://motionprompts.dev/component/explode-text-on-scroll-matterjs/", "thumb": "https://motionprompts.dev/thumbs/explode-text-on-scroll-matterjs.webp", "preview": "https://motionprompts.dev/previews/explode-text-on-scroll-matterjs.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitType", "lenis", "matter-js" ], "complexity": 5, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.1, 2 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "mixed", "motion_signature": "pinned 400vh scrubbed word-colour sweep (two shuffled, randomly scattered phases) that at progress 0.6 flips Matter.js gravity from 0 to 1, un-statics every glyph body and kicks it with a random impulse (vx ±2.5, vy 0..-5, spin ±0.125 rad/s) so the letters tumble and bounce (restitution 0.75, friction 0.5, frictionAir 0.0175) onto a static floor at the viewport bottom; scrolling back up re-statics, re-seats and re-fades everything", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "exploded-product-labels", "title": "Exploded Product with Leader Labels", "category": "scroll", "description": "A pinned stage where a six-layer product separates along Z as you scroll and each part names itself with a hairline leader. The label is bound to its layer by `data-for` → `data-i`, and BOTH its vertical position and the leader's width are computed from the layer's live bounding box every frame — hand-placed labels survive exactly until somebody adds a part or swaps two, and a wrong label is worse than none because it still looks authoritative. The separation is staggered per layer (each gets its own slice of the progress) rather than uniform: moving all six at the same rate keeps them evenly spaced the whole way, so the object never reads as coming apart, only as getting taller. The leader stops at the edge of the stack rather than chasing its own layer, so its length does not jitter with the separation. Layers are CSS ellipses in a shallow 58° rotation — a photograph of a product cannot come apart. Dressed as a refillable compact: Antonio + Bitter, ink, blush and brass.", "demo": "https://motionprompts.dev/components/exploded-product-labels/index.html", "prompt": "https://motionprompts.dev/prompts/exploded-product-labels.md", "page": "https://motionprompts.dev/component/exploded-product-labels/", "thumb": "https://motionprompts.dev/thumbs/exploded-product-labels.webp", "preview": "https://motionprompts.dev/previews/exploded-product-labels.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 121151, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "sticky stage over 320svh where six CSS ellipses in a 58deg rotateX separate along Z with a per-layer staggered slice of progress (offset i/n*0.55, span 0.45, cubic ease-out) written by gsap.set on every ScrollTrigger update; labels bound by data-for fade and slide in on their own offset, with vertical position and leader width recomputed from each layer live bounding box; no tween, no scrub, smoothing from Lenis", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "fameestate-scroll-animation", "title": "FameEstate Scroll Animation", "category": "scroll", "description": "Pinned hero scrubbed over seven viewport heights with Lenis smooth scroll: a red panel opens from a thin clip-path slit to full screen, three images cascade in with staggered clip-path and scale reveals, then an outro panel scales in and splits into two clip-path halves that slide apart to uncover the about section.", "demo": "https://motionprompts.dev/components/fameestate-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/fameestate-scroll-animation.md", "page": "https://motionprompts.dev/component/fameestate-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/fameestate-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/fameestate-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.16, 0.5 ], "stagger": null, "assets_required": { "count": 4, "bytes": 924969, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned hero scrubbed clip-path reveal cascade", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "fanned-steps-scrub", "title": "Fanned Steps on an Arc", "category": "scroll", "description": "A sticky-pinned scene where ticket-shaped step cards rest on the rim of a giant wheel below the viewport and roll through it as you scroll: each card swings up from the right, passes upright through the centre and swings off to the left, staying tangent to the arc. One ScrollTrigger writes every position with `gsap.set` from trigonometry — no tween, no timeline on the cards, so the smoothing comes entirely from Lenis. The radius is derived from viewport width (never a constant) and the opacity falloff is deliberately gentle, because both are the parameters that empty the stage when set wrong. Cards are masked into tickets with two radial-gradient notches. A thin progress bar is the only cue of position inside a pinned section. Reduced motion drops the arc and stacks the steps.", "demo": "https://motionprompts.dev/components/fanned-steps-scrub/index.html", "prompt": "https://motionprompts.dev/prompts/fanned-steps-scrub.md", "page": "https://motionprompts.dev/component/fanned-steps-scrub/", "thumb": "https://motionprompts.dev/thumbs/fanned-steps-scrub.webp", "preview": "https://motionprompts.dev/previews/fanned-steps-scrub.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 5, "bytes": 229592, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 0, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "sticky-pinned scene over a 300svh track where N ticket cards sit on a wheel of radius max(560, innerWidth*0.7) across a 0.9pi arc; a single ScrollTrigger onUpdate remaps progress and writes x/y/rotation/opacity/scale with gsap.set — no tween, no scrub, smoothing comes only from Lenis; the vertical component of the arc is squashed to 0.55", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "fiddle-digital-hover-effect", "title": "Fiddle Digital Scramble Hover Effect", "category": "hover", "description": "A centered hero image is covered by an invisible grid of 25px blocks, some holding random symbols (O X * > $ W). Moving the mouse over the image activates the nearest block plus a random cluster of up to 7 neighbors (cobalt background, cream glyph) for ~300ms, while a subset of blocks scrambles its symbol every 150ms, leaving a digital-noise trail behind the cursor. Framed as a risograph print studio's catalogue plate.", "demo": "https://motionprompts.dev/components/fiddle-digital-hover-effect/index.html", "prompt": "https://motionprompts.dev/prompts/fiddle-digital-hover-effect.md", "page": "https://motionprompts.dev/component/fiddle-digital-hover-effect/", "thumb": "https://motionprompts.dev/thumbs/fiddle-digital-hover-effect.webp", "preview": "https://motionprompts.dev/previews/fiddle-digital-hover-effect.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 187820, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "none", "motion_signature": "pointer-nearest grid blocks flash with scrambling glyphs", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "fiddle-digital-scroll-animation", "title": "Fiddle Digital Scroll Animation", "category": "scroll", "description": "A grid of editorial portraits scattered across a multi-column layout where each row's images scale up from 0 to full size as the row scrolls into the viewport, then the row pins and its images scale back down to 0 as it scrolls out. Per-row ScrollTrigger pairs (a scrub scaleIn from 'top bottom' to 'bottom bottom-=10%' and a pinned scaleOut from 'top top' to 'bottom top') drive gsap.set scale via onUpdate, with transform-origin swinging left/right per data-origin, all Lenis-smoothed.", "demo": "https://motionprompts.dev/components/fiddle-digital-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/fiddle-digital-scroll-animation.md", "page": "https://motionprompts.dev/component/fiddle-digital-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/fiddle-digital-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/fiddle-digital-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 17, "bytes": 2039336, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "Zero-tween scrub component: per-row, images scale 0→1 linearly as the row enters the viewport (progress clamped by a 1.2x fudge so they finish early, snapped to 1 past 0.95), then the row pins at top top and the images scale 1→0 linearly while pinned. All smoothing comes from scrub:1 alone — there is no ease anywhere. Scale is corner-anchored: transform-origin alternates 0% 0% / 100% 0% via data-origin, so images grow and collapse toward their outer corner rather than their centre.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "filters-fielddaysound", "title": "Field Day Sound — Filter Gallery", "category": "gallery", "description": "A two-column masonry work archive for an independent audio studio, paired with oversized discipline filters; clicking a filter splits its heading into per-character spans and tweens each span's font-size with a staggered power2.out ease while gsap fades the item grid out and back in to swap the filtered items. The giant active word multiplies over the photo grid like an ink stamp.", "demo": "https://motionprompts.dev/components/filters-fielddaysound/index.html", "prompt": "https://motionprompts.dev/prompts/filters-fielddaysound.md", "page": "https://motionprompts.dev/component/filters-fielddaysound/", "thumb": "https://motionprompts.dev/thumbs/filters-fielddaysound.webp", "preview": "https://motionprompts.dev/previews/filters-fielddaysound.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.25, 0.6 ], "stagger": 0.025, "assets_required": { "count": 34, "bytes": 2128890, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-swapped grid fade with staggered per-char font-size", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "flowing-menu-curtain", "title": "Meridian — Flowing Menu Curtain", "category": "hover", "description": "A vertical list of large rows where hovering pulls an inverted sheet across the row, carrying the row's own name on an endless marquee with a photographic still between each repetition. The sheet enters from whichever horizontal edge the pointer actually crossed and leaves towards the edge it exits by, measured on both events with a squared-distance test against the top and bottom midpoints. Panel and strip travel in opposite directions — the panel from ∓101%, its content from ±101% — so the marquee holds almost still against the window while the sheet wipes over it, which is what makes it read as a physical sheet rather than a div sliding up. The loop is seamless because exactly one measured copy of the content is animated, and the copy count is derived from that width against the viewport and recomputed on resize.", "demo": "https://motionprompts.dev/components/flowing-menu-curtain/index.html", "prompt": "https://motionprompts.dev/prompts/flowing-menu-curtain.md", "page": "https://motionprompts.dev/component/flowing-menu-curtain/", "thumb": "https://motionprompts.dev/thumbs/flowing-menu-curtain.webp", "preview": "https://motionprompts.dev/previews/flowing-menu-curtain.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 6, "bytes": 224108, "root_absolute_paths": true }, "mobile_behavior": { "kind": "touch-branch", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "Five rows, each a link with an absolutely positioned curtain clipped to the row. On mouseenter the handler measures which horizontal edge of the row the pointer is nearer — squared distance against (w/2, 0) and (w/2, h) — and a 0.6s expo timeline SETS the panel to yPercent ∓101 and its strip to the opposite ±101 at time 0, then tweens both to 0 together. On mouseleave the same measurement runs again and both tween back out towards the edge the pointer is leaving by. The counter-movement between panel and strip is the whole illusion: the marquee text barely moves against the window while the sheet wipes across it. Independently of that, each strip runs an endless x tween of exactly one measured copy width at ease none over 18s, with the copy count derived from that width against the viewport and rebuilt on a 120ms-debounced resize. Rows without hover never build their copies or their loop at all. One load-time flourish outside the mechanic: the row numerals rise 60% with a 0.06 stagger.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "fluid-splash-cursor", "title": "Nocturne Baths — Fluid Splash Cursor", "category": "3d-webgl", "description": "A GPU fluid simulation that lives on top of a whole page instead of behind a hero. Pointer movement injects a force and a puff of dye into double-buffered half-float render targets, and a Navier-Stokes solver — curl, vorticity confinement, divergence, 20 Jacobi pressure passes, semi-Lagrangian advection — makes the ink swirl and dissipate. The display pass derives alpha from the dye's own brightness and blends premultiplied, so unpainted water is fully transparent and the document underneath is untouched. No library: raw WebGL2 with a WebGL1 fallback and per-format probing. Hue cycles by default or holds one brand colour; the loop caps device pixel ratio, stops itself after four idle seconds and restarts on the next movement.", "demo": "https://motionprompts.dev/components/fluid-splash-cursor/index.html", "prompt": "https://motionprompts.dev/prompts/fluid-splash-cursor.md", "page": "https://motionprompts.dev/component/fluid-splash-cursor/", "thumb": "https://motionprompts.dev/thumbs/fluid-splash-cursor.webp", "preview": "https://motionprompts.dev/previews/fluid-splash-cursor.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "No timeline and no tween: a requestAnimationFrame loop steps a Navier-Stokes solver on the GPU and blits the dye field into a fixed, transparent, full-window canvas at z-index 50. Each pointermove converts the travel since the last event into a normalised delta, multiplies it by splatForce and writes one gaussian into the velocity field and one into the dye field at the same point; a pointerdown writes a single burst ten times brighter with a random kick. Per frame: curl, vorticity confinement, divergence, a pressure decay, 20 Jacobi pressure iterations, gradient subtraction, then semi-Lagrangian advection of velocity and of dye, each divided by 1 + dissipation*dt. Hue is re-rolled every 1/colorUpdateSpeed seconds while rainbow is on. The loop is not unconditional: it cancels itself four seconds after the last pointer input and on visibilitychange, and any movement or a splat() call restarts it.", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "followart-scroll-animation", "title": "FollowArt Scroll Animation", "category": "scroll", "description": "Stacked full-screen sections that swing in from a 30-degree tilt as you scroll, each panel scrubbing back to level before pinning underneath the next one for a layered card-deck reveal.", "demo": "https://motionprompts.dev/components/followart-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/followart-scroll-animation.md", "page": "https://motionprompts.dev/component/followart-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/followart-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/followart-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 200, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 3, "bytes": 537199, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrubbed tilt-to-level sections pinned into a stack", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "fractal-glass-effect", "title": "Fractal Glass Parallax Effect", "category": "3d-webgl", "description": "Full-viewport Three.js hero where a custom fragment shader refracts a full-bleed portrait through vertical fractal-glass ribbons (mod-based stripe displacement averaged over 11 samples, smoothstep-faded at the edges), slicing the figure into overlapping shards. Moving the mouse feeds a lerped uMouse uniform that drives a horizontal parallax amplified inside the distorted stripes.", "demo": "https://motionprompts.dev/components/fractal-glass-effect/index.html", "prompt": "https://motionprompts.dev/prompts/fractal-glass-effect.md", "page": "https://motionprompts.dev/component/fractal-glass-effect/", "thumb": "https://motionprompts.dev/thumbs/fractal-glass-effect.webp", "preview": "https://motionprompts.dev/previews/fractal-glass-effect.webm", "motion": { "trigger": "pointer", "libs": [ "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 6, "bytes": 668087, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "rAF-lerped mouse (factor 0.035, no GSAP) drives a uMouse uniform; fragment shader mod-stripes the UV (35 stripes, 11-tap smoothing) and adds a horizontal-only parallax offset scaled by |mouse.x-0.5| and edge-faded", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "frame-collapse-reveal", "title": "Frame Collapse Reveal", "category": "scroll", "description": "A rounded frame contracts from the edges of a sticky section down to the size of a centre window; the full-bleed photograph behind it then fades out, and because that window carries the same shot at the same screen coordinates, the picture appears to shrink into the rectangle without a single pixel moving. Only once the fade finishes do six slabs slide out from behind the window, innermost first, and lock in place. Welded to scroll (`scrub: true`), no lag.", "demo": "https://motionprompts.dev/components/frame-collapse-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/frame-collapse-reveal.md", "page": "https://motionprompts.dev/component/frame-collapse-reveal/", "thumb": "https://motionprompts.dev/thumbs/frame-collapse-reveal.webp", "preview": "https://motionprompts.dev/previews/frame-collapse-reveal.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 4, "pinned": false, "viewport_heights": 360, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.05, 0.16 ], "stagger": 0.03, "assets_required": { "count": 7, "bytes": 559607, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-SCRUB", "engine": "gsap", "motion_signature": "frame contracts while the bleed cross-fades into its own window", "systems": [ "scrub-welded", "scrub-lagged", "reveal-on-enter" ], "native_system": "scrub-welded" }, "capabilities": [], "conflicts_with": [] }, { "slug": "full-screen-slider", "title": "Full Screen Slider", "category": "slider", "description": "A fullscreen vertical image slider driven by the mouse wheel: each wheel step reveals or hides a slide by tweening its clip-path polygon while gsap.to zooms the underlying image from scale 2 to 1, and three stacked text columns (number, name, year) slide by 30px each with staggered power4.inOut tweens. Triggered by the wheel event with an isAnimating lock.", "demo": "https://motionprompts.dev/components/full-screen-slider/index.html", "prompt": "https://motionprompts.dev/prompts/full-screen-slider.md", "page": "https://motionprompts.dev/component/full-screen-slider/", "thumb": "https://motionprompts.dev/thumbs/full-screen-slider.webp", "preview": "https://motionprompts.dev/previews/full-screen-slider.webm", "motion": { "trigger": "wheel", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": 400, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 2, 2.6 ], "stagger": null, "assets_required": { "count": 5, "bytes": 809079, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "wheel-stepped clip-path slide reveal (bottom edge sweeps up over 2s power4.inOut) with a counter-moving power3.inOut image zoom from scale 2 / top 4em to scale 1 / top 0, plus a three-band odometer: .prefix/.names/.years translate in fixed 30px steps behind a 30px clip-path window, staggered 0.15s apart. Discrete, non-scrubbed, gated by an isAnimating boolean — no rAF loop, no inertia, no ScrollTrigger.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "gabrielcontassot-scroll", "title": "Scroll Image Reveal Sequence", "category": "scroll", "description": "A long vertical scroll photo essay ('Close Range — Essay No. 04: Skin') where seven big centered chapter-headers (Ornament, Repose, Surface, Gaze, Mouth, Rain, Close) pass over a fixed 500x700 image stack of close-up body photographs. GSAP ScrollTrigger drives two scrubbed animations per section: a clip-path polygon that wipes each preview up into view then off again as the next chapter arrives, plus a continuous scale-to-3 zoom on the active image, ease 'none', so images grow and cross-dissolve through clip-path masks as you scroll.", "demo": "https://motionprompts.dev/components/gabrielcontassot-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/gabrielcontassot-scroll.md", "page": "https://motionprompts.dev/component/gabrielcontassot-scroll/", "thumb": "https://motionprompts.dev/thumbs/gabrielcontassot-scroll.webp", "preview": "https://motionprompts.dev/previews/gabrielcontassot-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 2, "pinned": false, "viewport_heights": 150, "needs_lenis": false, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 6, "bytes": 742763, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed clip-path wipes over scaling fixed image stack", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "gentlerain", "title": "Water Ripple Text Simulation", "category": "3d-webgl", "description": "A full-screen Three.js water-ripple simulation over giant canvas-drawn wordmark text: moving the pointer injects pressure into double-buffered FloatType render targets running a ping-pong wave-equation shader, and a render pass refracts and adds specular highlights to the text beneath, so the cursor leaves rippling wakes across the surface. Driven entirely by mousemove on the WebGL canvas (no GSAP).", "demo": "https://motionprompts.dev/components/gentlerain/index.html", "prompt": "https://motionprompts.dev/prompts/gentlerain.md", "page": "https://motionprompts.dev/component/gentlerain/", "thumb": "https://motionprompts.dev/thumbs/gentlerain.webp", "preview": "https://motionprompts.dev/previews/gentlerain.webm", "motion": { "trigger": "hover", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "ping-pong wave-equation ripples refracting canvas wordmark", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "gradual-blur-edge", "title": "Kiln Seven — Gradual Blur Edges", "category": "scroll", "description": "A progressive blur band that softens the edge of a scrolling page instead of cutting it. Rather than one blurred layer behind a gradient mask — which still shows the line where blurring starts — the band is a stack of N backdrop-filter layers, each with its own blur radius and its own linear-gradient mask window, and the windows deliberately overlap so each layer fades out where the next has already faded in. A falloff curve distributes the radii (linear, smoothstep or exponential), the same builder serves top, bottom, left and right edges, and one scrubbed ScrollTrigger breathes the fixed bottom band from 3rem to 11rem as the index runs.", "demo": "https://motionprompts.dev/components/gradual-blur-edge/index.html", "prompt": "https://motionprompts.dev/prompts/gradual-blur-edge.md", "page": "https://motionprompts.dev/component/gradual-blur-edge/", "thumb": "https://motionprompts.dev/thumbs/gradual-blur-edge.webp", "preview": "https://motionprompts.dev/previews/gradual-blur-edge.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 14, "bytes": 969323, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "Almost all of the effect is static CSS: three .edge containers are filled at load with N stacked layers, each carrying its own backdrop-filter radius and its own overlapping linear-gradient mask window (5 layers top, 6 right, 6 bottom). Top and bottom bands are position: fixed at page level; the right band is absolute inside the rail wrapper. The only scroll-driven motion is the height of the fixed bottom band: two scrubbed (0.4) ScrollTriggers on .book animate the :root custom property --edge-height 8rem -> 11rem across the index's entry (top 80% -> top 20%) and 11rem -> 3rem across its exit (bottom 90% -> bottom 40%). Both are skipped entirely under prefers-reduced-motion, leaving the band at its CSS default of 8rem. Three dial buttons rebuild the bottom stack; that is a rebuild, not a transition.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "gregorylalle", "title": "Gregory Lalle Awwwards Rebuild", "category": "scroll", "description": "A scroll-driven vertical portfolio gallery where a fixed project index number reveals and pushes up via masked GSAP digit tweens as each section enters the viewport center. ScrollTrigger drives a side progress bar, a moving project-name indicator, and a bottom-right preview image that syncs to whichever gallery image is currently centered, with Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/gregorylalle/index.html", "prompt": "https://motionprompts.dev/prompts/gregorylalle.md", "page": "https://motionprompts.dev/component/gregorylalle/", "thumb": "https://motionprompts.dev/thumbs/gregorylalle.webp", "preview": "https://motionprompts.dev/previews/gregorylalle.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.3, 0.75 ], "stagger": null, "assets_required": { "count": 50, "bytes": 7861809, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap+raf", "motion_signature": "scroll-pinned index numerals swap over fixed preview", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "grid-deformation-effect", "title": "Grid Deformation Effect", "category": "3d-webgl", "description": "A fullscreen hero photograph is rendered as a Three.js texture on a shader plane; moving the pointer injects velocity into a 25-cell grid DataTexture that displaces the UVs with RGB chromatic aberration, and the distortion relaxes back smoothly (0.925/frame) when the cursor stops. Styled as the landing page of Moiré, a dance and digital-image festival: the photo is monochrome, so the aberration is the only color on the page.", "demo": "https://motionprompts.dev/components/grid-deformation-effect/index.html", "prompt": "https://motionprompts.dev/prompts/grid-deformation-effect.md", "page": "https://motionprompts.dev/component/grid-deformation-effect/", "thumb": "https://motionprompts.dev/thumbs/grid-deformation-effect.webp", "preview": "https://motionprompts.dev/previews/grid-deformation-effect.webm", "motion": { "trigger": "pointer", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 2.4 ], "stagger": null, "assets_required": { "count": 1, "bytes": 172717, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "pointer-velocity grid distortion with RGB aberration, relaxing", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "grid-shutter-page-transition", "title": "Grid Shutter Page Transition", "category": "transition", "description": "Page transition where a fixed 4x16 grid of cream blocks scales in horizontally with a per-block stagger, even rows sweeping from the left and odd rows from the right, shuttering the viewport closed before the page swaps and the same animation reverses to reveal the new page. Triggered by clicking the top navbar links routing between three full-viewport hero pages.", "demo": "https://motionprompts.dev/components/grid-shutter-page-transition/index.html", "prompt": "https://motionprompts.dev/prompts/grid-shutter-page-transition.md", "page": "https://motionprompts.dev/component/grid-shutter-page-transition/", "thumb": "https://motionprompts.dev/thumbs/grid-shutter-page-transition.webp", "preview": "https://motionprompts.dev/previews/grid-shutter-page-transition.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 0.6 ], "stagger": 0.025, "assets_required": { "count": 3, "bytes": 334868, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "row-alternating scaleX shutter closes then reopens: 4 bands of 16 blocks, transform-origin left on even rows and right on odd rows, each band wiping from its own edge with a 0.025s per-block stagger under power3.inOut; all 4 rows fire together at '<', so a full close (or open) takes ~0.975s", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "griflan-hover-effect", "title": "Griflan Hover Effect", "category": "hover", "description": "Three stacked service rows expand on hover with an elastic GSAP tween: a fanned stack of three images slides up behind the title, the title recolors from red to cream, and after 0.2s pill-shaped tags drop into the row under Matter.js gravity, bouncing and settling on an invisible floor. On mouseleave the tags fade out and the row springs back closed.", "demo": "https://motionprompts.dev/components/griflan-hover-effect/index.html", "prompt": "https://motionprompts.dev/prompts/griflan-hover-effect.md", "page": "https://motionprompts.dev/component/griflan-hover-effect/", "thumb": "https://motionprompts.dev/thumbs/griflan-hover-effect.webp", "preview": "https://motionprompts.dev/previews/griflan-hover-effect.webm", "motion": { "trigger": "hover", "libs": [ "gsap", "matter-js" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "elastic", "duration_range": [ 0.2, 0.75 ], "stagger": 0.075, "assets_required": { "count": 9, "bytes": 966261, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "Hover rows that spring open on elastic.out(1,0.5) over 0.75s (collapse 0.5s, elastic.out(1,0.75)) while a 0.075s-staggered image stack slides through; 0.2s later Matter.js drops 5 chamfered pill tags per row under doubled gravity (y:2) with restitution 0.15, friction 0.6, density 0.002, onto a static floor 50px (25px under 1000px) above the row bottom, DOM-transformed each frame by a per-row rAF loop at a fixed 1000/60 timestep", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "gsap-clip-carousel", "title": "GSAP Clip Carousel", "category": "slider", "description": "A click-to-advance fullscreen product carousel: each click reveals the next image from a center clip-path box that scales to fill the viewport while the active image zooms (scale 2), and the product name transitions via per-character span staggers sliding up and out as the next name rises in. Driven entirely by gsap.to with power3.out eases and animated clipPath polygons.", "demo": "https://motionprompts.dev/components/gsap-clip-carousel/index.html", "prompt": "https://motionprompts.dev/prompts/gsap-clip-carousel.md", "page": "https://motionprompts.dev/component/gsap-clip-carousel/", "thumb": "https://motionprompts.dev/thumbs/gsap-clip-carousel.webp", "preview": "https://motionprompts.dev/previews/gsap-clip-carousel.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 2 ], "stagger": 0.05, "assets_required": { "count": 10, "bytes": 2174734, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-advanced clip-path slide reveal with char stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "gta-vi-landing-page-scroll-final", "title": "GTA VI Landing Page Scroll", "category": "scroll", "description": "A GTA-VI-style pinned hero reveal driven by scroll, art-directed as 'Casa Vicente', a Lisbon tailoring house AW26 campaign. A single ScrollTrigger (pin + scrub over 5x viewport height, Lenis-smoothed) fades out the intro wordmark/copy, scales down the hero portrait, and shrinks a giant SVG-masked overlay (500x) so the dark screen retracts into the CASA / VICENTE lockup revealing the scene, then an ivory fade-overlay blooms and a Space Grotesk headline is unveiled with an animated bottom-up gradient wipe.", "demo": "https://motionprompts.dev/components/gta-vi-landing-page-scroll-final/index.html", "prompt": "https://motionprompts.dev/prompts/gta-vi-landing-page-scroll-final.md", "page": "https://motionprompts.dev/component/gta-vi-landing-page-scroll-final/", "thumb": "https://motionprompts.dev/thumbs/gta-vi-landing-page-scroll-final.webp", "preview": "https://motionprompts.dev/previews/gta-vi-landing-page-scroll-final.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 500, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 2, "bytes": 305016, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed pinned hero with shrinking SVG-mask logo reveal — zero tweens, every property is a direct function of ScrollTrigger progress under scrub:1 (overlay scale 500→1 exponentially over progress 0→0.85, hero image 1.5→1, headline gradient wipe 0.7→0.85)", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "guiding-light", "title": "Guiding Light Cursor Spotlight", "category": "interactive", "description": "Cursor-following spotlight: a dark full-section mask with a radial-gradient cutout reveals content around the pointer while a Lottie fire flame with a pulsing glow trails the cursor via lerped rAF transforms. Activates on mousemove inside the spotlight section.", "demo": "https://motionprompts.dev/components/guiding-light/index.html", "prompt": "https://motionprompts.dev/prompts/guiding-light.md", "page": "https://motionprompts.dev/component/guiding-light/", "thumb": "https://motionprompts.dev/thumbs/guiding-light.webp", "preview": "https://motionprompts.dev/previews/guiding-light.webm", "motion": { "trigger": "scroll", "libs": [ "lenis", "lottie-web" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.25, 2 ], "stagger": null, "assets_required": { "count": 1, "bytes": 54014, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "raf-lerp", "motion_signature": "rAF-lerped cursor spotlight mask with trailing flame", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "henriheymans-hover", "title": "Vanguardia Award List Hover", "category": "hover", "description": "An awards list where hovering each row slides a three-layer wrapper via gsap.to (y translate, power2.out) so the row flips between the award panel and a cobalt project/year panel depending on whether the cursor enters from the top or bottom, while a fixed corner preview stacks the row’s image scaling it in and out with GSAP for a cursor-driven hover reveal.", "demo": "https://motionprompts.dev/components/henriheymans-hover/index.html", "prompt": "https://motionprompts.dev/prompts/henriheymans-hover.md", "page": "https://motionprompts.dev/component/henriheymans-hover/", "thumb": "https://motionprompts.dev/thumbs/henriheymans-hover.webp", "preview": "https://motionprompts.dev/previews/henriheymans-hover.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.4, 0.4 ], "stagger": null, "assets_required": { "count": 18, "bytes": 2652168, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "hover-driven row panel slide with corner image stack", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "heurebleue-scroll-animation", "title": "HeureBleue Scroll Animation", "category": "scroll", "description": "A scroll-driven zoom-through gallery: a fixed grid of five image columns sits behind the page and, as a tall spacer section scrolls past, a single ScrollTrigger (scrub 1) reads its progress and scales the whole gallery wrapper up (to ~2.65x, or 4x under 900px), pushes the side columns down and shrinks the centered main image from scale 2 to ~1.15, so the viewer appears to fly forward through the images. Lenis drives smooth scrolling synced to GSAP's ticker.", "demo": "https://motionprompts.dev/components/heurebleue-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/heurebleue-scroll-animation.md", "page": "https://motionprompts.dev/component/heurebleue-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/heurebleue-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/heurebleue-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": 1000, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 14, "bytes": 1634370, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "scrubbed fixed-grid zoom fly-through on scroll", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "hypnotic-gallery-gsap-flip", "title": "Hypnotic Image Gallery (GSAP Flip)", "category": "gallery", "description": "A 14-image still-life gallery for a set-design studio (Plinth) that morphs between three layouts — Grid, Index, Stack — when you click the nav items; GSAP Flip records the DOM state, swaps a layout class, and animates every image from its old to new position with a custom hop ease and staggered timing. The Index layout becomes a Lenis-smoothed vertical scroll list with a floating minimap and preview column driven by a scroll handler.", "demo": "https://motionprompts.dev/components/hypnotic-gallery-gsap-flip/index.html", "prompt": "https://motionprompts.dev/prompts/hypnotic-gallery-gsap-flip.md", "page": "https://motionprompts.dev/component/hypnotic-gallery-gsap-flip/", "thumb": "https://motionprompts.dev/thumbs/hypnotic-gallery-gsap-flip.webp", "preview": "https://motionprompts.dev/previews/hypnotic-gallery-gsap-flip.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "Flip", "CustomEase", "ScrollToPlugin", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.1, 1.5 ], "stagger": 0.025, "assets_required": { "count": 14, "bytes": 1517525, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "STEP-MACHINE", "engine": "gsap+raf", "motion_signature": "Flip layout morph plus scroll-parallaxed index column", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-owner", "page-scroll-lock" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" }, { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "image-explosion-scroll-animation", "title": "Image Explosion Scroll Animation", "category": "footer", "description": "As the footer scrolls into view, fifteen images burst upward from the bottom of the footer and arc back down under simulated gravity. Pure vanilla JS: a requestAnimationFrame loop drives a custom particle physics system (velocity, gravity, friction, rotation) with no GSAP, fired by a scroll listener that checks the footer's bounding rect against the viewport.", "demo": "https://motionprompts.dev/components/image-explosion-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/image-explosion-scroll-animation.md", "page": "https://motionprompts.dev/component/image-explosion-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/image-explosion-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/image-explosion-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 17, "bytes": 2561515, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "hand-rolled per-frame gravity sim: 15 particles launched from the footer bottom with vx = (rand-0.5)*20, vy = -15 - rand*10, rotationSpeed = (rand-0.5)*10 deg/frame; each frame vy += 0.25 (gravity) then vx/vy/rotationSpeed *= 0.99 (friction), integrated into an inline translate()+rotate() transform; loop ends when every particle's y exceeds explosionContainer.offsetHeight/2", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "image-explosion-scroll-animation-js", "title": "Image Explosion with JS Physics", "category": "scroll", "description": "As the footer scrolls into view, 15 images burst upward from the bottom edge and rain back down with a hand-rolled requestAnimationFrame physics simulation (per-particle velocity, gravity, friction and rotation). A scroll listener watches the footer's bounding rect and fires the one-shot explosion, resetting after the particles fall past the container midpoint. Lenis provides the smooth scroll.", "demo": "https://motionprompts.dev/components/image-explosion-scroll-animation-js/index.html", "prompt": "https://motionprompts.dev/prompts/image-explosion-scroll-animation-js.md", "page": "https://motionprompts.dev/component/image-explosion-scroll-animation-js/", "thumb": "https://motionprompts.dev/thumbs/image-explosion-scroll-animation-js.webp", "preview": "https://motionprompts.dev/previews/image-explosion-scroll-animation-js.webm", "motion": { "trigger": "scroll", "libs": [ "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 17, "bytes": 2803422, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "footer-triggered rAF gravity burst of images — 15 particles launched with vy = -15 - rand*10 and vx = (rand-0.5)*20, gravity +0.25/frame, friction 0.99 on vx/vy/rotationSpeed (terminal velocity ~25px/frame), transform translate()+rotate() rewritten every frame until all particles pass the container midpoint", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "image-reveal-on-scroll", "title": "Image Reveal On Scroll", "category": "scroll", "description": "A staggered grid of tall portrait images that each unmask as they enter the viewport: GSAP animates a clip-path polygon from a zero-height sliver to a full rectangle (power1.out, 2s) driven by ScrollTrigger, while onEnter/onEnterBack tween the fixed background gradient to the current item's accent color and a fixed counter tracks scroll percentage.", "demo": "https://motionprompts.dev/components/image-reveal-on-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/image-reveal-on-scroll.md", "page": "https://motionprompts.dev/component/image-reveal-on-scroll/", "thumb": "https://motionprompts.dev/thumbs/image-reveal-on-scroll.webp", "preview": "https://motionprompts.dev/previews/image-reveal-on-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 2, 2 ], "stagger": null, "assets_required": { "count": 8, "bytes": 1036935, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "enter-triggered clip-path unmask, tweened gradient background", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "img-trail", "title": "Mouse Image Trail", "category": "hover", "description": "A cursor-driven image trail: moving the mouse spawns positioned image tiles that follow the pointer, and after a brief pause of no movement GSAP animates the whole batch downward with a staggered scale-and-fade drop before removing them. Purely hover/mousemove triggered using gsap.to with y, scale, opacity and a 0.025s stagger.", "demo": "https://motionprompts.dev/components/img-trail/index.html", "prompt": "https://motionprompts.dev/prompts/img-trail.md", "page": "https://motionprompts.dev/component/img-trail/", "thumb": "https://motionprompts.dev/thumbs/img-trail.webp", "preview": "https://motionprompts.dev/previews/img-trail.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.5, 0.5 ], "stagger": 0.025, "assets_required": { "count": 15, "bytes": 957917, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "cursor-spawned tiles pile up (max 20), then on a 100ms rest a staggered fall-away — y+1000, scale 0.5, fade — with no ease passed, so GSAP's default power1.out, not real gravity", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "infinite-column-wall", "title": "Infinite Column Wall", "category": "scroll", "description": "Six columns of photographs scroll vertically on their own clock — one up, the next down — and never stop, their top and bottom edges dissolving into the background. Scrolling through the sticky section darkens the ground to near-black, turns the headline hiding behind the grid lime, and slides the columns apart as two rigid blocks until only one column is left at each edge. The opening is ratcheted (scrolling back up does not rebuild the wall) while the colour change is a plain scrub and does rewind.", "demo": "https://motionprompts.dev/components/infinite-column-wall/index.html", "prompt": "https://motionprompts.dev/prompts/infinite-column-wall.md", "page": "https://motionprompts.dev/component/infinite-column-wall/", "thumb": "https://motionprompts.dev/thumbs/infinite-column-wall.webp", "preview": "https://motionprompts.dev/previews/infinite-column-wall.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 4, "pinned": false, "viewport_heights": 300, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.16, 49 ], "stagger": null, "assets_required": { "count": 24, "bytes": 434116, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "endless vertical belts that ratchet open into a corridor", "systems": [ "reveal-on-enter", "scrub-lagged", "scrub-welded" ], "native_system": "reveal-on-enter" }, "capabilities": [], "conflicts_with": [] }, { "slug": "infinite-draggable-image-gallery-javascript", "title": "Infinite Draggable Image Gallery", "category": "gallery", "description": "An endless, draggable grid of thumbnails that recycles DOM items as you pan (custom lerp animation loop with velocity-based momentum on release). Clicking a thumbnail hides it, dims the rest, and expands a clone to a large frame via a GSAP fromTo tween on a CustomEase 'hop', while a SplitType word-by-word project title staggers up; clicking the overlay reverses the animation.", "demo": "https://motionprompts.dev/components/infinite-draggable-image-gallery-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/infinite-draggable-image-gallery-javascript.md", "page": "https://motionprompts.dev/component/infinite-draggable-image-gallery-javascript/", "thumb": "https://motionprompts.dev/thumbs/infinite-draggable-image-gallery-javascript.webp", "preview": "https://motionprompts.dev/previews/infinite-draggable-image-gallery-javascript.webm", "motion": { "trigger": "drag", "libs": [ "gsap", "CustomEase", "SplitType" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.3, 1 ], "stagger": 0.1, "assets_required": { "count": 20, "bytes": 2296753, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "gsap+raf", "motion_signature": "rAF lerp (0.075) infinite drag canvas with release momentum (velocity * 200), click-to-expand", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "infinite-horizontal-scroll", "title": "Infinite Horizontal Scroll", "category": "scroll", "description": "A seamless looping horizontal scroll gallery driven by raw wheel and touch input. Vertical wheel/touch deltas are mapped to horizontal movement with a lerp-smoothed translateX, cloned section buffers on both sides create an endless loop, and a synced progress bar and percentage counter track position.", "demo": "https://motionprompts.dev/components/infinite-horizontal-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/infinite-horizontal-scroll.md", "page": "https://motionprompts.dev/component/infinite-horizontal-scroll/", "thumb": "https://motionprompts.dev/thumbs/infinite-horizontal-scroll.webp", "preview": "https://motionprompts.dev/previews/infinite-horizontal-scroll.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 4, "bytes": 1429657, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "wheel/touch delta accumulated into targetScrollX, exponentially smoothed onto the track with lerp factor 0.05 (~critically damped, no overshoot), wrapped seamlessly at ±0.5 sequence widths against 2 cloned buffers per side; touch flicks add a *20 impulse decaying at 0.95/frame; the progress bar follows the same 0.05 lerp except on wrap frames, where it snaps", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "infinite-horizontal-slider", "title": "Infinite Horizontal Parallax Slider", "category": "slider", "description": "A seamless, infinitely looping horizontal image slider driven by mouse wheel, drag and touch. A custom requestAnimationFrame loop lerps the track position (no GSAP), recycles duplicated slide sequences for the endless loop, and shifts each image inside its frame based on distance from the viewport center for a parallax effect; hovering a slide reveals its title and arrow overlay while the track is idle.", "demo": "https://motionprompts.dev/components/infinite-horizontal-slider/index.html", "prompt": "https://motionprompts.dev/prompts/infinite-horizontal-slider.md", "page": "https://motionprompts.dev/component/infinite-horizontal-slider/", "thumb": "https://motionprompts.dev/thumbs/infinite-horizontal-slider.webp", "preview": "https://motionprompts.dev/previews/infinite-horizontal-slider.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.35 ], "stagger": null, "assets_required": { "count": 8, "bytes": 1136119, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "rAF lerp infinite drag track with image parallax", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "infinite-parallax-scroll-with-minimap", "title": "Infinite Parallax Scroll with Minimap", "category": "scroll", "description": "Infinite vertical scroll through fullscreen project images with a synchronized centered minimap that mirrors the scroll at miniature scale. A hand-rolled rAF loop lerps a virtual scroll target driven by wheel and touch drag, recycles DOM slides around the current index for endless looping, applies per-image parallax (0.2x translateY on scale(1.5) images), and snaps to the nearest project with a 500ms cubic ease-out after 100ms of idle.", "demo": "https://motionprompts.dev/components/infinite-parallax-scroll-with-minimap/index.html", "prompt": "https://motionprompts.dev/prompts/infinite-parallax-scroll-with-minimap.md", "page": "https://motionprompts.dev/component/infinite-parallax-scroll-with-minimap/", "thumb": "https://motionprompts.dev/thumbs/infinite-parallax-scroll-with-minimap.webp", "preview": "https://motionprompts.dev/previews/infinite-parallax-scroll-with-minimap.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 5, "bytes": 473076, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "virtual wheel-driven infinite lerped slide track", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "ingamana-scroll-animation", "title": "Ingamana Scroll Animation", "category": "scroll", "description": "A 10-row project grid whose rows expand from 125% to 500% width (250% to 750% on mobile) based on each row's individual scroll progress through the viewport, producing a continuous zoom-in on the images as you scroll. Driven by a gsap.ticker callback reading window.scrollY (no ScrollTrigger) with Lenis smooth scroll; the section height is pre-computed for the fully expanded state.", "demo": "https://motionprompts.dev/components/ingamana-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/ingamana-scroll-animation.md", "page": "https://motionprompts.dev/component/ingamana-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/ingamana-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/ingamana-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 16, "bytes": 2240078, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "linear per-row width expansion (125%→500%; 250%→750% below 1000px viewport) mapped straight from document scrollY with no easing or inertia of its own, recomputed for all 10 rows on every gsap.ticker frame; Lenis supplies the only smoothing", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "inkfish-horizontal-scroll", "title": "Inkfish Inspired Horizontal Scroll", "category": "gallery", "description": "A full-screen editorial gallery where a 500vw horizontal track of text and image sections is panned by a draggable timeline scroller pinned to the bottom. GSAP Draggable (type x, bounded) drives the interaction: onDrag converts the scroller's position to a 0-1 progress and gsap.to tweens the track's x (duration 1, ease power3.out) for smooth momentum-style horizontal scrolling, over a bottom ruler of 50 generated tick markers.", "demo": "https://motionprompts.dev/components/inkfish-horizontal-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/inkfish-horizontal-scroll.md", "page": "https://motionprompts.dev/component/inkfish-horizontal-scroll/", "thumb": "https://motionprompts.dev/thumbs/inkfish-horizontal-scroll.webp", "preview": "https://motionprompts.dev/previews/inkfish-horizontal-scroll.webm", "motion": { "trigger": "drag", "libs": [ "gsap", "Draggable" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 9, "bytes": 1690801, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "asigna window.onload" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "gsap", "motion_signature": "drag-scrubbed horizontal track with eased follow: a bounded Draggable handle maps to 0-1 progress, and a 1s power3.out tween chases the 500vw track's x toward -400vw, so the panel lags and settles behind the finger", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock", "window-onload" ], "conflicts_with": [] }, { "slug": "inkwell-image-gallery-javascript", "title": "Inkwell-Inspired Image Gallery", "category": "gallery", "description": "A ring of 25 small cards arranged in a circle that reacts to cursor proximity: nearby cards flip 180deg on rotationY, scale up and push outward via per-frame lerp, while the whole ring parallax-tilts (rotateX/Y) toward the mouse. Clicking a card runs a GSAP power4 timeline that spins and scales the gallery 5x downward into a full preview and reveals the card title with a SplitText word stagger; clicking anywhere or pressing Escape reverses it.", "demo": "https://motionprompts.dev/components/inkwell-image-gallery-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/inkwell-image-gallery-javascript.md", "page": "https://motionprompts.dev/component/inkwell-image-gallery-javascript/", "thumb": "https://motionprompts.dev/thumbs/inkwell-image-gallery-javascript.webp", "preview": "https://motionprompts.dev/previews/inkwell-image-gallery-javascript.webm", "motion": { "trigger": "hover", "libs": [ "gsap", "SplitText" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.3, 2.5 ], "stagger": 0.1, "assets_required": { "count": 20, "bytes": 782705, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "gsap+raf", "motion_signature": "rAF-lerped 3D card ring with zoom-to-preview", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "interactive-particle-logo", "title": "Interactive Fluid Particle Logo", "category": "interactive", "description": "Full-viewport WebGL canvas that rasterizes a PNG logo into thousands of soft GL_POINTS particles on a dark background. Moving the mouse applies an inverse-square repulsion force to nearby particles, which scatter and then spring back to their origin via velocity damping and a return-force, capped by an exponentially damped max-displacement clamp; no GSAP, raw WebGL physics on requestAnimationFrame.", "demo": "https://motionprompts.dev/components/interactive-particle-logo/index.html", "prompt": "https://motionprompts.dev/prompts/interactive-particle-logo.md", "page": "https://motionprompts.dev/component/interactive-particle-logo/", "thumb": "https://motionprompts.dev/thumbs/interactive-particle-logo.webp", "preview": "https://motionprompts.dev/previews/interactive-particle-logo.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 33431, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "rAF WebGL point-sprite logo, cursor repulsion spring-back", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "interactive-team-section-javascript", "title": "Interactive Team Section", "category": "hover", "description": "A row of small monochrome team thumbnails sits above a giant clip-masked headline. Hovering a thumbnail scales it up (power4.out) while GSAP slides that member's name into view, animating the SplitText characters vertically with a center-out stagger; hovering the whole row reveals the default 'Nine of us' title.", "demo": "https://motionprompts.dev/components/interactive-team-section-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/interactive-team-section-javascript.md", "page": "https://motionprompts.dev/component/interactive-team-section-javascript/", "thumb": "https://motionprompts.dev/thumbs/interactive-team-section-javascript.webp", "preview": "https://motionprompts.dev/previews/interactive-team-section-javascript.webm", "motion": { "trigger": "hover", "libs": [ "gsap", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 0.75 ], "stagger": 0.02, "assets_required": { "count": 9, "bytes": 927019, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "hover a portrait: the 70px tile grows to 140px (0.5s power4.out) while that person's giant name slides up behind an overflow mask, letters staggered 0.025s from the center out (0.75s power4.out); leaving the strip slides the default title back down", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "inversa-scroll-animation", "title": "Inversa Scroll Animation", "category": "scroll", "description": "Hero pinned over four viewport heights where a single scrubbed onUpdate drives phase-based animations from scroll progress with smoothstep easing: text blocks slide up, a 200svh aerial image parallaxes in three phases, a fixed dark layer with a subtractive bar-code SVG mask scales from 2.5 to 1 to frame the image while it desaturates and darkens, and a grid overlay, two pulsing location markers, and a side progress bar fade in and out at precise progress windows.", "demo": "https://motionprompts.dev/components/inversa-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/inversa-scroll-animation.md", "page": "https://motionprompts.dev/component/inversa-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/inversa-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/inversa-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": [ 1.5, 1.5 ], "stagger": null, "assets_required": { "count": 3, "bytes": 158504, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "pinned hero, scrubbed phase-based mask reveal parallax", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "ironhill-scroll-animation", "title": "IronHill Scroll Animation", "category": "scroll", "description": "Scroll-scrubbed WebGL dissolve over a tall 175svh hero: a Three.js fullscreen quad with an fbm-noise shader sweeps a solid near-black fill up over the hero image with an organic ragged edge, its uProgress driven by Lenis scroll position. As scrolling continues, GSAP SplitText splits the hero paragraph into words and a ScrollTrigger fades them in one by one over the freshly revealed background.", "demo": "https://motionprompts.dev/components/ironhill-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/ironhill-scroll-animation.md", "page": "https://motionprompts.dev/component/ironhill-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/ironhill-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/ironhill-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "three", "lenis" ], "complexity": 5, "pinned": false, "viewport_heights": 175, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.1, 0.1 ], "stagger": null, "assets_required": { "count": 1, "bytes": 806769, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "mixed", "motion_signature": "scroll-driven fbm-noise WebGL dissolve plus word fade", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "jamarea-menu", "title": "Jam Area Overlay Menu", "category": "menu", "description": "Full-screen overlay menu that wipes open with a clip-path reveal when the Menu toggle is clicked, staggering in oversized SplitText links with per-character hover swaps. A lerped accent highlighter bar tracks the hovered link while the whole link strip pans with the mouse.", "demo": "https://motionprompts.dev/components/jamarea-menu/index.html", "prompt": "https://motionprompts.dev/prompts/jamarea-menu.md", "page": "https://motionprompts.dev/component/jamarea-menu/", "thumb": "https://motionprompts.dev/thumbs/jamarea-menu.webp", "preview": "https://motionprompts.dev/previews/jamarea-menu.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "expo", "duration_range": [ 0.3, 1.5 ], "stagger": 0.03, "assets_required": { "count": 1, "bytes": 164608, "root_absolute_paths": true }, "mobile_behavior": { "kind": "disabled-below-breakpoint", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap+raf", "motion_signature": "clip-path overlay wipe with lerped highlighter bar", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "javascript-responsive-minimap", "title": "JavaScript Responsive Minimap", "category": "gallery", "description": "A vertical thumbnail minimap (horizontal on mobile) whose framed indicator scrubs through 15 images as you scroll the wheel or drag on touch; a requestAnimationFrame loop lerps the strip toward its target offset, dims the thumbnail with the greatest overlap inside the indicator, and swaps that image into the large centered preview. Clicking a thumbnail eases the strip to center it with a slower lerp factor.", "demo": "https://motionprompts.dev/components/javascript-responsive-minimap/index.html", "prompt": "https://motionprompts.dev/prompts/javascript-responsive-minimap.md", "page": "https://motionprompts.dev/component/javascript-responsive-minimap/", "thumb": "https://motionprompts.dev/thumbs/javascript-responsive-minimap.webp", "preview": "https://motionprompts.dev/previews/javascript-responsive-minimap.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 15, "bytes": 1922702, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "Frame-rate-dependent exponential lerp (factor 0.075, or 0.05 during a click-to-center move) drives a thumbnail strip's translateX/translateY toward a target that wheel/touch deltas push by clamp(delta*0.5, -20, 20) per event and clicks snap to a centred plate; target is clamped to [-maxTranslate, 0]. The strip element with the greatest overlap against a fixed indicator box is dimmed to opacity 0.3 and swapped into the large preview. No tweening engine, no scroll space, no inertia beyond the lerp tail.", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner", "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "js-image-minimap", "title": "Scroll-Synced Image Minimap", "category": "gallery", "description": "A tall vertical image gallery paired with a sticky sidebar minimap of thumbnails. As the user scrolls, a scroll listener maps the page scroll fraction onto a translateY of the thumbnail strip so the minimap glides through its images in sync, while a fixed bordered indicator marks the active thumbnail via mix-blend-mode; past a threshold the whole page inverts to a light theme.", "demo": "https://motionprompts.dev/components/js-image-minimap/index.html", "prompt": "https://motionprompts.dev/prompts/js-image-minimap.md", "page": "https://motionprompts.dev/component/js-image-minimap/", "thumb": "https://motionprompts.dev/thumbs/js-image-minimap.webp", "preview": "https://motionprompts.dev/previews/js-image-minimap.webm", "motion": { "trigger": "scroll", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.5, 0.5 ], "stagger": null, "assets_required": { "count": 11, "bytes": 1760665, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "css-transition", "motion_signature": "scroll-mapped sticky thumbnail strip translate (linear, no lerp, no easing)", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "js-page-transitions", "title": "JS Page Transitions", "category": "transition", "description": "A full-screen curtain page transition: clicking a nav link runs a GSAP tween that scales a 2x5 grid of purple blocks up on the Y axis (power4.inOut, staggered per column) to cover the viewport, swaps the hero heading, then scales the blocks back down to reveal the incoming page. The same reveal also plays on initial load.", "demo": "https://motionprompts.dev/components/js-page-transitions/index.html", "prompt": "https://motionprompts.dev/prompts/js-page-transitions.md", "page": "https://motionprompts.dev/component/js-page-transitions/", "thumb": "https://motionprompts.dev/thumbs/js-page-transitions.webp", "preview": "https://motionprompts.dev/previews/js-page-transitions.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 1 ], "stagger": 0.1, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "staggered 2x5 block curtain scaleY cover/reveal — 1s power4.inOut per block, 0.1s per-column offset (axis x), top-origin top row / bottom-origin bottom row, ~1.4s per phase", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "junni", "title": "Junni Tile Flip Board", "category": "interactive", "description": "A full-screen 6x6 grid of 3D tiles, each showing a slice of a shared image split by background-position. Hovering a tile triggers a GSAP timeline that spins it a full turn on rotateX with a column-based rotateY tilt; a 'Flip Tiles' button flips the whole board with gsap.to and a random stagger, swapping between the front and back images. A fixed grid overlay highlights cells under the cursor on mousemove.", "demo": "https://motionprompts.dev/components/junni/index.html", "prompt": "https://motionprompts.dev/prompts/junni.md", "page": "https://motionprompts.dev/component/junni/", "thumb": "https://motionprompts.dev/thumbs/junni.webp", "preview": "https://motionprompts.dev/previews/junni.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 2, "bytes": 753811, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "mixed", "motion_signature": "hover-triggered 3D tile flips with per-column tilt, random-stagger board-wide flip, plus a CSS-transition cursor grid highlight", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "title": "Kaitonote 3D Gallery Showcase", "category": "3d-webgl", "description": "A pinned spotlight section scrubbed over fifteen viewport heights with Lenis smooth scroll: twenty editorial portrait and movement images fly from deep z-space (z:-1000, scale 0) toward the viewer and scatter outward in staggered 3D perspective driven by ScrollTrigger onUpdate, while SplitText fades an intro headline out word-by-word and reveals an outro headline word-by-word, ending with a cover portrait zooming into frame.", "demo": "https://motionprompts.dev/components/kaitonote-3d-gallery-showcase-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/kaitonote-3d-gallery-showcase-scroll-animation.md", "page": "https://motionprompts.dev/component/kaitonote-3d-gallery-showcase-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/kaitonote-3d-gallery-showcase-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/kaitonote-3d-gallery-showcase-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 1500, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 21, "bytes": 2322380, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "mata todos los ScrollTrigger" ], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrub-pinned 3D images flying past camera", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "karim-saab-scroll-animation", "title": "Halide — Masked Portrait Reveal Scroll", "category": "scroll", "description": "A pinned spotlight section where a tall grid of desaturated images scrolls vertically while an SVG-masked banner image is revealed and scaled up through a growing CSS mask-size, finishing with a word-by-word headline fade-in. A single ScrollTrigger (pin + scrub over 7x viewport height, Lenis-smoothed) drives everything from its onUpdate, mapping scroll progress to image translateY, mask-size, image scale and SplitText word opacity across staged progress ranges.", "demo": "https://motionprompts.dev/components/karim-saab-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/karim-saab-scroll-animation.md", "page": "https://motionprompts.dev/component/karim-saab-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/karim-saab-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/karim-saab-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 12, "bytes": 1187547, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "700vh scrubbed pin (scrub 1): image grid translateY 5% → -(H + 0.05H + innerHeight)/H*100% over progress 0–0.5; CSS mask-size 0% → 450% with the masked image scaling 1.5 → 1 over progress 0.25–0.75; then index-ordered per-word opacity snap (0 → 1) over 0.75–0.95. All state is set imperatively per frame — no tweens, no eases, no inertia beyond Lenis's own smoothing.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "karim-saab-work-carousel", "title": "Karim Saab Work Carousel", "category": "slider", "description": "A fullscreen one-slide-at-a-time work carousel where each wheel or touch swipe fires a GSAP transition: the outgoing slide scales down, rotates 30deg, fades and flings off-screen with power4.inOut, while the incoming slide flies in from a clip-path window that opens to full frame with power4.out. Title words and info lines are revealed with masked SplitText staggers on each slide entry.", "demo": "https://motionprompts.dev/components/karim-saab-work-carousel/index.html", "prompt": "https://motionprompts.dev/prompts/karim-saab-work-carousel.md", "page": "https://motionprompts.dev/component/karim-saab-work-carousel/", "thumb": "https://motionprompts.dev/thumbs/karim-saab-work-carousel.webp", "preview": "https://motionprompts.dev/previews/karim-saab-work-carousel.webm", "motion": { "trigger": "wheel", "libs": [ "gsap", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": 200, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.3, 2 ], "stagger": 0.1, "assets_required": { "count": 4, "bytes": 475032, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "wheel-stepped fullscreen slide swap: outgoing slide scales/rotates and flings off-screen over 2s while the incoming slide rises from ±100vh and opens a centered clip-path window to full frame in 1.5s, with staggered masked word/line reveals layered on top", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "kin-landing-page", "title": "Kin Landing Page Reveal", "category": "preloader", "description": "On page load a two-panel white revealer wipes open with a custom 'hop' ease, a stack of full-bleed images scales in from 1.5x and fades sequentially, then GSAP Flip morphs the final three images into a small stacked cluster in the bottom-left corner while masked hero text (logo, nav, address, SplitType heading lines) slides up and a team image clip-path reveals. Fully automatic, plays once on DOMContentLoaded.", "demo": "https://motionprompts.dev/components/kin-landing-page/index.html", "prompt": "https://motionprompts.dev/prompts/kin-landing-page.md", "page": "https://motionprompts.dev/component/kin-landing-page/", "thumb": "https://motionprompts.dev/thumbs/kin-landing-page.webp", "preview": "https://motionprompts.dev/previews/kin-landing-page.webm", "motion": { "trigger": "load", "libs": [ "gsap", "Flip", "CustomEase", "SplitType" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 1.25, 3 ], "stagger": 0.1, "assets_required": { "count": 8, "bytes": 999396, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay clip-path wipe, image scale-in, Flip stack", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "konpo-lp-reveal", "title": "Konpo Landing Page Reveal", "category": "preloader", "description": "Auto-playing landing page intro: three vertical rolling counters tick to 100 while a background wipe scales up and 15 rounded thumbnails pop in from scale 0. On load complete, GSAP Flip animates every image from the top-left corner to the bottom-right with a staggered scale-punch, then masked SplitText lines rise into place for the nav, heading, side info and footer. Triggered entirely on DOMContentLoaded.", "demo": "https://motionprompts.dev/components/konpo-lp-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/konpo-lp-reveal.md", "page": "https://motionprompts.dev/component/konpo-lp-reveal/", "thumb": "https://motionprompts.dev/thumbs/konpo-lp-reveal.webp", "preview": "https://motionprompts.dev/previews/konpo-lp-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap", "Flip", "SplitText" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.3, 3 ], "stagger": 0.1, "assets_required": { "count": 16, "bytes": 2845340, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "auto-play load reveal: 3s bottom-anchored bg wipe, three independent digit columns rolling on power2.inOut, then a Flip travel of 15 thumbnails from top-left to bottom-right with a 0.1s per-image stagger and a 2.5x scale punch, closing with power4.out line-mask text", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "kpverse-menu", "title": "KPVERSE Sliding Menu with Text-Shuffle Hover", "category": "menu", "description": "A black rounded side-panel navigation menu that slides in from the left (CSS cubic-bezier transition) when the 'Menu' toggle is clicked, staggering each link into place. Menu labels are split into characters with SplitType and, on hover or open, run a random character-shuffle scramble effect while a clip-path 'bg-hover' block and per-character color sweep animate underneath.", "demo": "https://motionprompts.dev/components/kpverse-menu/index.html", "prompt": "https://motionprompts.dev/prompts/kpverse-menu.md", "page": "https://motionprompts.dev/component/kpverse-menu/", "thumb": "https://motionprompts.dev/thumbs/kpverse-menu.webp", "preview": "https://motionprompts.dev/previews/kpverse-menu.webm", "motion": { "trigger": "hover", "libs": [ "split-type", "ionicons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.3, 1 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "CLICK-CURTAIN", "engine": "css-transition", "motion_signature": "CSS-transition slide-in panel with setTimeout char scramble", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "kvs-studio-image-reveal", "title": "KVS Studio Scroll-Powered Image Reveal", "category": "scroll", "description": "Pinned full-viewport stack of five images scrubbed over four viewport heights: each image's clip-path wipes upward to reveal the next while an orange ASCII-character dissolve band (a 16px grid of random glyphs with hash-based scatter and density falloff) dithers the wipe edge, all synced to Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/kvs-studio-image-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/kvs-studio-image-reveal.md", "page": "https://motionprompts.dev/component/kvs-studio-image-reveal/", "thumb": "https://motionprompts.dev/thumbs/kvs-studio-image-reveal.webp", "preview": "https://motionprompts.dev/previews/kvs-studio-image-reveal.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": [ 1.8, 1.8 ], "stagger": null, "assets_required": { "count": 5, "bytes": 1280207, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrubbed pinned clip-path wipe with ASCII dissolve band", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "landing-page-gravity", "title": "Physics Gravity Landing Page", "category": "interactive", "description": "A full-viewport hero for a cinematic frame archive (Freefall) where twelve scattered film-still tiles toggle between a floating grid and a physics drop. A [ Release / Restore ] button switches Matter.js gravity on so the rectangles fall, tumble and pile on a floor with restitution and friction, then a manual eased requestAnimationFrame lerp glides them back to their start positions. GSAP simultaneously animates the overlay clip-path, the huge 'Freefall' headline font-size/left, button color and the reveal of the nav link columns.", "demo": "https://motionprompts.dev/components/landing-page-gravity/index.html", "prompt": "https://motionprompts.dev/prompts/landing-page-gravity.md", "page": "https://motionprompts.dev/component/landing-page-gravity/", "thumb": "https://motionprompts.dev/thumbs/landing-page-gravity.webp", "preview": "https://motionprompts.dev/previews/landing-page-gravity.webm", "motion": { "trigger": "click", "libs": [ "gsap", "matter-js" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.75, 1.5 ], "stagger": null, "assets_required": { "count": 12, "bytes": 374118, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "INTEGRATOR", "engine": "mixed", "motion_signature": "Matter.js gravity drop, eased rAF return", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "landing-page-reveal", "title": "Kudos Landing Page Reveal", "category": "preloader", "description": "A fullscreen preloader plays automatically on load: a randomized 0-to-100% counter runs while a stack of ten portrait images wipes across the frame via animated 'left' offsets, then GSAP power3.inOut tweens slide the counter out and a masked logo in, fade the overlay away, scale the hero image from 2 to 1, and slide the giant hero name and top nav into place. Triggered once on page load, roughly 8 seconds total.", "demo": "https://motionprompts.dev/components/landing-page-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/landing-page-reveal.md", "page": "https://motionprompts.dev/component/landing-page-reveal/", "thumb": "https://motionprompts.dev/thumbs/landing-page-reveal.webp", "preview": "https://motionprompts.dev/previews/landing-page-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 2 ], "stagger": -0.1, "assets_required": { "count": 2, "bytes": 439410, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "timed preloader counter into staggered fullscreen reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "landing-page-reveal-no-webgl", "title": "Landing Page Reveal With Circular Gallery", "category": "preloader", "description": "On load a numeric preloader counts up to 100, then 30 photo cards rise from below into a centered horizontal strip and, using GSAP Flip, morph into a rotating circular gallery while the nav labels slide up into view. Fully load-triggered with a CustomEase 'hop' curve.", "demo": "https://motionprompts.dev/components/landing-page-reveal-no-webgl/index.html", "prompt": "https://motionprompts.dev/prompts/landing-page-reveal-no-webgl.md", "page": "https://motionprompts.dev/component/landing-page-reveal-no-webgl/", "thumb": "https://motionprompts.dev/thumbs/landing-page-reveal-no-webgl.webp", "preview": "https://motionprompts.dev/previews/landing-page-reveal-no-webgl.webm", "motion": { "trigger": "load", "libs": [ "gsap", "Flip", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 2 ], "stagger": -0.03, "assets_required": { "count": 30, "bytes": 1729855, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "load-triggered strip rise, Flip morph to circle", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "larevoltosa-scroll-animation", "title": "Larevoltosa Scroll Animation", "category": "scroll", "description": "Pinned spotlight section scrubbed over three viewport heights with Lenis smooth scroll: a giant inline doodle character zooms up to 22x toward its glasses while white glare bands sweep across each lens via runtime-generated clipPaths, a photo fades in inside the lens shapes past 50% progress, and a SplitText word-by-word header reveal plays between 65-85% progress.", "demo": "https://motionprompts.dev/components/larevoltosa-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/larevoltosa-scroll-animation.md", "page": "https://motionprompts.dev/component/larevoltosa-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/larevoltosa-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/larevoltosa-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 125867, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned, scrubbed SVG zoom driven entirely by gsap.set from ScrollTrigger progress — no tweens, no easing, so the physics is pure linear mapping of scroll: scale = 1 + progress*2*(22-1), i.e. 1x → 43x (22x at mid-scroll), transform-origin 47% 21% with transformBox fill-box, while white glare rects sweep x = min(progress/0.75,1) * sweepDistance across each lens clipPath, an in-lens photo fades 0→1 over progress 0.5→1, and header words pop on one-by-one (opacity 0/1, no fade) over progress 0.65→0.85", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "title": "LaserBySonyMusic Landing Page Reveal", "category": "preloader", "description": "Preloader-to-hero reveal that plays automatically on page load: a giant counter ticks 0 to 100 while scaling up and a thin progress bar grows, then the hero background is unmasked via a clip-path polygon (collapsed center point, to a small centered rectangle, to full viewport) with a custom 'hop' ease as the image de-zooms from 2x to 1x. Masked SplitText finishes the sequence: header chars slide in from the right, nav and footer words rise from below; about 8.5 seconds total.", "demo": "https://motionprompts.dev/components/laserbysonymusic-landing-page-reveal-animation/index.html", "prompt": "https://motionprompts.dev/prompts/laserbysonymusic-landing-page-reveal-animation.md", "page": "https://motionprompts.dev/component/laserbysonymusic-landing-page-reveal-animation/", "thumb": "https://motionprompts.dev/thumbs/laserbysonymusic-landing-page-reveal-animation.webp", "preview": "https://motionprompts.dev/previews/laserbysonymusic-landing-page-reveal-animation.webm", "motion": { "trigger": "load", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.75, 3 ], "stagger": 0.075, "assets_required": { "count": 1, "bytes": 247230, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay counter preloader then clip-path hero unmask: a 3s power3.out count 0->100 with the numeral scaling 0.25->1 and a progress rail growing, then a two-step custom 'hop' (0.9,0,0.1,1 — near-hold, violent middle, hard settle) clip-path from a collapsed centre point to a 30% rectangle to full viewport while the image de-zooms 2x -> 1.5x -> 1x, closing with power4.out masked SplitText (chars from the right, words from below) at 0.075 stagger; ~8.5s total, no scroll input", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "lava-buster", "title": "Lava Buster Fluid Simulation", "category": "3d-webgl", "description": "A fullscreen Three.js WebGL fluid/particle simulation running multi-pass GLSL shaders in ping-pong float render targets; molten lava-like particles are continuously blasted from the center and swirl toward the cursor, reacting to mouse move and mouse-down in real time.", "demo": "https://motionprompts.dev/components/lava-buster/index.html", "prompt": "https://motionprompts.dev/prompts/lava-buster.md", "page": "https://motionprompts.dev/component/lava-buster/", "thumb": "https://motionprompts.dev/thumbs/lava-buster.webp", "preview": "https://motionprompts.dev/previews/lava-buster.webm", "motion": { "trigger": "pointer", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 3.4 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "GPU ping-pong particle-in-cell fluid on a bare rAF loop: dt=8.5 advection with pressure gradient (P=0.01), 0.9995-per-frame velocity damping, and a time-rotating force jet injected at the exact center of the field (gaussian r=8). The cursor only steers while the mouse button is HELD (iMouse.z>0 gates a gaussian r=25 swirl); plain mousemove moves the sample point but injects nothing.", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "lightbox", "title": "Sliding Lightbox Gallery", "category": "gallery", "description": "A click-triggered image lightbox for a ceramics-studio archive: clicking any thumbnail in the 4x4 plate grid slides a large preview in from the right while the previous one scales up and slides off left, and the page background tweens to a tone sampled from that image. Driven purely by gsap.to animating right/left/scale over a 1s duration.", "demo": "https://motionprompts.dev/components/lightbox/index.html", "prompt": "https://motionprompts.dev/prompts/lightbox.md", "page": "https://motionprompts.dev/component/lightbox/", "thumb": "https://motionprompts.dev/thumbs/lightbox.webp", "preview": "https://motionprompts.dev/previews/lightbox.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.35, 1 ], "stagger": null, "assets_required": { "count": 16, "bytes": 1496267, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-swapped preview slides in, old one scales off", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "lottie-scroll-animation", "title": "Lottie Scroll Animation", "category": "scroll", "description": "A full-screen Lottie animation is scrubbed frame-by-frame by scroll position. A GSAP ScrollTrigger with scrub tweens a playhead from frame 0 to the Lottie's last frame, calling goToAndStop on each update, so the fixed background animation plays and reverses smoothly as the user scrolls the tall page.", "demo": "https://motionprompts.dev/components/lottie-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/lottie-scroll-animation.md", "page": "https://motionprompts.dev/component/lottie-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/lottie-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/lottie-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lottie-web" ], "complexity": 2, "pinned": false, "viewport_heights": 500, "needs_lenis": false, "ease_family": "none", "duration_range": [ 0.25, 8 ], "stagger": null, "assets_required": { "count": 2, "bytes": 22503381, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "linear (ease:'none') lottie frame scrub mapped 1:1 to a 500vh scroll range, softened by scrub:2 — the playhead lags the scroll by up to ~2s and keeps easing to rest after the wheel stops; everything else on screen is static except an 8s stepped CSS grain loop over a fixed full-viewport background", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "lp-reveal-anim", "title": "Norrwood Landing Page Reveal", "category": "preloader", "description": "An on-load hero intro for the Norrwood furniture atelier where a single paused GSAP timeline orchestrates the whole reveal: two giant 'NORR / WOOD' word-marks slide up letter-by-letter with a staggered mask, spread apart and scale up, while the center product image un-clips from its center point and scales to full size; the surrounding side images then wipe open via clip-path stagger, the headline drops to the bottom, product captions slide up, and the nav drops in. Runs once on DOMContentLoaded after a 0.5s delay using power3.out.", "demo": "https://motionprompts.dev/components/lp-reveal-anim/index.html", "prompt": "https://motionprompts.dev/prompts/lp-reveal-anim.md", "page": "https://motionprompts.dev/component/lp-reveal-anim/", "thumb": "https://motionprompts.dev/thumbs/lp-reveal-anim.webp", "preview": "https://motionprompts.dev/previews/lp-reveal-anim.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 1 ], "stagger": 0.1, "assets_required": { "count": 7, "bytes": 713843, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "one-shot staggered clip-path and wordmark load reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "page-scroll-lock", "entry-veil" ], "conflicts_with": [] }, { "slug": "lukebaffait-animated-footer", "title": "LukeBaffait Animated Footer", "category": "footer", "description": "Fixed full-viewport footer revealed behind the page on scroll: a spacer div fires ScrollTrigger callbacks (in at top 50%, out on leave-back at top 85%) that stagger SplitText chars of the split 'Half tone' wordmark heading from the center, unmask footer links/paragraph lines, and slide two hand images in from the sides. The hands render as orange ASCII art on canvas (brightness sampling) with random cluster highlights on hover and lerped mouse parallax; Lenis drives the smooth scroll.", "demo": "https://motionprompts.dev/components/lukebaffait-animated-footer/index.html", "prompt": "https://motionprompts.dev/prompts/lukebaffait-animated-footer.md", "page": "https://motionprompts.dev/component/lukebaffait-animated-footer/", "thumb": "https://motionprompts.dev/thumbs/lukebaffait-animated-footer.webp", "preview": "https://motionprompts.dev/previews/lukebaffait-animated-footer.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.2, 1 ], "stagger": 0.01, "assets_required": { "count": 2, "bytes": 186237, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "mixed", "motion_signature": "fixed footer reveal: ASCII canvas hands, lerped parallax", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "lusion-fluid-particles", "title": "Lusion Fluid Particle Simulation", "category": "interactive", "description": "A full-screen p5.js particle physics simulation where hundreds of small shapes (triangles, squares, circles) fall under gravity and pile up with fluid-like collision resolution using a spatial grid. Pressing and dragging the mouse pushes and swirls nearby particles. It is not GSAP-driven — the physics integrate every frame inside p5's draw loop.", "demo": "https://motionprompts.dev/components/lusion-fluid-particles/index.html", "prompt": "https://motionprompts.dev/prompts/lusion-fluid-particles.md", "page": "https://motionprompts.dev/component/lusion-fluid-particles/", "thumb": "https://motionprompts.dev/thumbs/lusion-fluid-particles.webp", "preview": "https://motionprompts.dev/previews/lusion-fluid-particles.webm", "motion": { "trigger": null, "libs": [ "p5" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "p5 grid-based particle physics, mouse-drag push", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "lusion-lp-reveal", "title": "Lusion Landing Page Reveal", "category": "preloader", "description": "Full-screen preloader-to-content reveal that plays once on load. Three digit columns spin upward with gsap.to (power2.inOut) to count toward 100 while a two-segment loader bar fills, then at ~6s the digits lift away and the loader rotates, scales 40x and flies off-screen (power2.inOut); the black loading screen fades out and the 'Website Content' heading slides up from behind a white revealer using a staggered gsap.to on the h1 elements.", "demo": "https://motionprompts.dev/components/lusion-lp-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/lusion-lp-reveal.md", "page": "https://motionprompts.dev/component/lusion-lp-reveal/", "thumb": "https://motionprompts.dev/thumbs/lusion-lp-reveal.webp", "preview": "https://motionprompts.dev/previews/lusion-lp-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.1, 6 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "time-based preloader: odometer counters, bar, screen wipe", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "madeinuxstudio-page-transition", "title": "Silhouette Page Transition", "category": "transition", "description": "Full-page route transition where clicking a nav link runs a GSAP timeline that wipes 20 vertical blocks across the screen (scaleX stagger), then draws an SVG logo via strokeDashoffset and fills it before the incoming page is revealed with a reverse block wipe. Page headings animate in with a SplitText masked-character stagger and the archive route uses Lenis smooth scroll.", "demo": "https://motionprompts.dev/components/madeinuxstudio-page-transition/index.html", "prompt": "https://motionprompts.dev/prompts/madeinuxstudio-page-transition.md", "page": "https://motionprompts.dev/component/madeinuxstudio-page-transition/", "thumb": "https://motionprompts.dev/thumbs/madeinuxstudio-page-transition.webp", "preview": "https://motionprompts.dev/previews/madeinuxstudio-page-transition.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.2, 2 ], "stagger": 0.02, "assets_required": { "count": 4, "bytes": 323400, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "mata todos los ScrollTrigger" ], "cluster": "CLICK-CURTAIN", "engine": "gsap+raf", "motion_signature": "20 full-height flex blocks scaleX 0->1 from the left in a 0.02s-staggered 0.4s power2.out curtain (reversed to scaleX 0 from the right on reveal), overlapped by a 2s power2.inOut strokeDashoffset draw of the SVG logo plus a 1s power2.out fill and 0.25s fade-out; incoming h1 arrives as masked SplitText chars sliding y 100%->0% over 1s power4.out, 0.03s stagger, 0.3s delay, gated by a once:true ScrollTrigger at 'top 75%'", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "magnetic-marquee", "title": "Magnetic Spotlight Marquee", "category": "interactive", "description": "Infinitely auto-scrolling image marquee strip (gsap.to with x-wrap modifiers) that magnetically follows the cursor's vertical position on mousemove, lerped in gsap.ticker (0.05 ease) and clamped 175px from the section edges. SplitText-split heading and copy lines rise out of the strip's way as it descends and receive a gaussian velocity 'wake' offset, while the content sits in mix-blend-mode: difference over the passing images.", "demo": "https://motionprompts.dev/components/magnetic-marquee/index.html", "prompt": "https://motionprompts.dev/prompts/magnetic-marquee.md", "page": "https://motionprompts.dev/component/magnetic-marquee/", "thumb": "https://motionprompts.dev/thumbs/magnetic-marquee.webp", "preview": "https://motionprompts.dev/previews/magnetic-marquee.webm", "motion": { "trigger": "pointer", "libs": [ "gsap", "SplitText" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "none", "duration_range": [ 8, 17.28 ], "stagger": null, "assets_required": { "count": 6, "bytes": 660136, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "gsap+raf", "motion_signature": "cursor-magnetic infinite marquee strip with text wake", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "mask-reveal", "title": "Mask Reveal On Scroll", "category": "scroll", "description": "As each image row enters the viewport, a 3x3 grid of clip-path masks unveils the picture piece by piece: GSAP injects nine overlay divs per image and a ScrollTrigger timeline (start 'top 75%') animates their clip-path polygons from collapsed points to full cells in a diagonal wave (power2.out, 0.5s, staggered), producing a tiled mosaic reveal. Lenis drives smooth scrolling synced to ScrollTrigger.", "demo": "https://motionprompts.dev/components/mask-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/mask-reveal.md", "page": "https://motionprompts.dev/component/mask-reveal/", "thumb": "https://motionprompts.dev/thumbs/mask-reveal.webp", "preview": "https://motionprompts.dev/previews/mask-reveal.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.25, 0.5 ], "stagger": 0.1, "assets_required": { "count": 7, "bytes": 1339856, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "enter-triggered 3x3 clip-path mosaic reveal, diagonal wave", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "mat-voyce-scroll-animation", "title": "Mat Voyce Scroll Animation", "category": "scroll", "description": "A pinned scroll section (scrub over 5x viewport height, Lenis-smoothed) drives a horizontal reel of four huge italic project titles while ten rounded image cards fly toward the viewer from deep translateZ. A single ScrollTrigger onUpdate maps progress to the titles' x offset and, per card, staggers each one's Z position and scale; scroll velocity adds a springy layered x-jitter to two color copies of every title for a Mat Voyce style kinetic-type effect.", "demo": "https://motionprompts.dev/components/mat-voyce-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/mat-voyce-scroll-animation.md", "page": "https://motionprompts.dev/component/mat-voyce-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/mat-voyce-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/mat-voyce-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 500, "needs_lenis": true, "ease_family": "power1", "duration_range": [ 0.2, 0.3 ], "stagger": null, "assets_required": { "count": 11, "bytes": 1786716, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned scrub: horizontal titles + cards flying from deep Z", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "maximatherapy-sticky-cards", "title": "MaximaTherapy Sticky Cards", "category": "cards", "description": "Scroll-pinned hero (700svh of scrub scroll, Lenis-smoothed) where a stack of cards rises into view while the headline exits upward; past the halfway mark the front card 3D-flips with an elastic rotationY to reveal four tilted colored cards, which then get dismissed upward one by one with increasing rotation across staggered progress ranges.", "demo": "https://motionprompts.dev/components/maximatherapy-sticky-cards/index.html", "prompt": "https://motionprompts.dev/prompts/maximatherapy-sticky-cards.md", "page": "https://motionprompts.dev/component/maximatherapy-sticky-cards/", "thumb": "https://motionprompts.dev/thumbs/maximatherapy-sticky-cards.webp", "preview": "https://motionprompts.dev/previews/maximatherapy-sticky-cards.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis", "ionicons" ], "complexity": 3, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": "elastic", "duration_range": [ 1, 1 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned 700vh scrub, elastic 3D card-deck flip", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "maxmilkin-preloader", "title": "Maxmilkin Orbit Text Preloader", "category": "preloader", "description": "Portfolio preloader where eight words ride concentric SVG circular orbits, stretching and sliding around their rings via animated textPath textLength/startOffset while the whole SVG wobbles in random ±25° rotations and a central counter tweens 0 to 100. After ~6s the orbit words fade out ring by ring, the loader dissolves away and the hero reveals with a 1.25→1 background zoom-out and word-masked SplitText copy sliding up on a custom ease. Plays automatically on page load.", "demo": "https://motionprompts.dev/components/maxmilkin-preloader/index.html", "prompt": "https://motionprompts.dev/prompts/maxmilkin-preloader.md", "page": "https://motionprompts.dev/component/maxmilkin-preloader/", "thumb": "https://motionprompts.dev/thumbs/maxmilkin-preloader.webp", "preview": "https://motionprompts.dev/previews/maxmilkin-preloader.webm", "motion": { "trigger": "load", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 0.3, 4 ], "stagger": 0.1, "assets_required": { "count": 1, "bytes": 92808, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay page veil: 8 concentric SVG textPaths stretch/slide along their orbits on power2.inOut yoyo loops (index-staggered 0.7s, per-ring duration scaled 1.08-1.25s by radius) while the whole SVG creeps ±25° in endless 2s randomized turns and a 4s power1.out counter runs 0-100; at t=6s the rings fade out inner-first and the fixed overlay dissolves (1s) and deletes itself as the hero image un-scales 1.25->1 and masked words rise on the 'hop' ease (0.9,0,0.1,1)", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "media-monks-hover", "title": "Media Monks Hover", "category": "hover", "description": "A dark film-studio work-list where hovering each project flips the whole panel to that project's pastel tint and lifts every row's opacity via CSS transitions, while a tilted strip of film-still previews behind the text repositions (top/left) and swaps its active card to reveal the matching project, plus an arrow icon that slides in from the left edge of a pill button on the hovered row.", "demo": "https://motionprompts.dev/components/media-monks-hover/index.html", "prompt": "https://motionprompts.dev/prompts/media-monks-hover.md", "page": "https://motionprompts.dev/component/media-monks-hover/", "thumb": "https://motionprompts.dev/thumbs/media-monks-hover.webp", "preview": "https://motionprompts.dev/previews/media-monks-hover.webm", "motion": { "trigger": "hover", "libs": [ "phosphor-icons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.2, 1 ], "stagger": null, "assets_required": { "count": 3, "bytes": 836905, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "css-transition", "motion_signature": "row hover tints the whole panel (background-color 0.5s ease) and slides the tilted preview strip to a new top/left over 1s, while the active .prev nudges rotate(10deg)->rotate(12.5deg) and the strip fades 0.45->0.9 opacity; an arrow pill wipes in with a 0.2s delay on the incoming glyph", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "meetings-slider", "title": "Meetings Arc Slider", "category": "slider", "description": "A click-driven fullscreen slider showing three cards on an arc (prev/active/next); clicking a side card or a list item fires a 2s GSAP CustomEase 'hop' transition where cards orbit into position while their inner images counter-rotate, the incoming card's clip-path opens from a centered window, the outgoing card scales to zero and fades, and the title swaps via per-character span y-staggers. A blurred background preview image cross-fades and a slow CSS pan animation runs continuously.", "demo": "https://motionprompts.dev/components/meetings-slider/index.html", "prompt": "https://motionprompts.dev/prompts/meetings-slider.md", "page": "https://motionprompts.dev/component/meetings-slider/", "thumb": "https://motionprompts.dev/thumbs/meetings-slider.webp", "preview": "https://motionprompts.dev/previews/meetings-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 1, 2 ], "stagger": 0.02, "assets_required": { "count": 7, "bytes": 3423972, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-driven arc orbit with clip-path card swap", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "menu-root-food", "title": "Ember & Rye Fullscreen Menu", "category": "menu", "description": "A minimal Menu button expands a right-docked panel to a fullscreen overlay of five vertical menu columns (Eat, Grill, Burgers, Visit, Order) for a wood-fired burger house, with per-letter staggered reveals of oversized serif labels and image clip-path reveals on hover. Triggered by clicking Menu/Close; GSAP tweens the panel width with a CustomEase 'hop' curve and staggers letter spans with power3.out.", "demo": "https://motionprompts.dev/components/menu-root-food/index.html", "prompt": "https://motionprompts.dev/prompts/menu-root-food.md", "page": "https://motionprompts.dev/component/menu-root-food/", "thumb": "https://motionprompts.dev/thumbs/menu-root-food.webp", "preview": "https://motionprompts.dev/previews/menu-root-food.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.5, 1 ], "stagger": null, "assets_required": { "count": 6, "bytes": 1419004, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "mixed", "motion_signature": "click-toggled fullscreen panel with per-letter stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "menuxl-text-displacement-animation", "title": "Text Displacement Cursor Repel", "category": "text", "description": "Headings and paragraph text are split into individual letters and words that get pushed away from the cursor within a 150px radius, the displacement force scaling with proximity. Pure requestAnimationFrame with per-element lerp smoothing (no GSAP) drives the elastic follow-and-settle motion via CSS transforms on mousemove.", "demo": "https://motionprompts.dev/components/menuxl-text-displacement-animation/index.html", "prompt": "https://motionprompts.dev/prompts/menuxl-text-displacement-animation.md", "page": "https://motionprompts.dev/component/menuxl-text-displacement-animation/", "thumb": "https://motionprompts.dev/thumbs/menuxl-text-displacement-animation.webp", "preview": "https://motionprompts.dev/previews/menuxl-text-displacement-animation.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "raf-lerp", "motion_signature": "rAF lerp letters/words repelled from cursor", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "metalab-lp-rebuild", "title": "Merle Photo-Studio Hover Index", "category": "hover", "description": "A dark full-screen index for a photography & art-direction studio where hovering a series in the left list crossfades a full-bleed background image and reveals a positioned project preview (image, title, tags, description). GSAP tweens a clip-path wipe on the preview image plus staggered x/y + opacity transforms driven by per-item layout variants, all triggered on mouseenter/mouseleave.", "demo": "https://motionprompts.dev/components/metalab-lp-rebuild/index.html", "prompt": "https://motionprompts.dev/prompts/metalab-lp-rebuild.md", "page": "https://motionprompts.dev/component/metalab-lp-rebuild/", "thumb": "https://motionprompts.dev/thumbs/metalab-lp-rebuild.webp", "preview": "https://motionprompts.dev/previews/metalab-lp-rebuild.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.1, 1 ], "stagger": null, "assets_required": { "count": 21, "bytes": 2071353, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "hover-swapped clip-path preview with directional text slides", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "moblinks-interactive-logo", "title": "Moblinks Interactive Logo", "category": "interactive", "description": "Depth-tunnel hero around a 3D logo: six stacked layers, five of them with SVG mask cutouts at decreasing sizes (mask-composite: subtract), trail the cursor on mousemove. A gsap.ticker buffers the cursor path and each layer reads a progressively older position (8-frame stagger) smoothed with lerp, creating a cascading parallax tunnel with per-layer drop shadows.", "demo": "https://motionprompts.dev/components/moblinks-interactive-logo/index.html", "prompt": "https://motionprompts.dev/prompts/moblinks-interactive-logo.md", "page": "https://motionprompts.dev/component/moblinks-interactive-logo/", "thumb": "https://motionprompts.dev/thumbs/moblinks-interactive-logo.webp", "preview": "https://motionprompts.dev/previews/moblinks-interactive-logo.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 2.4 ], "stagger": null, "assets_required": { "count": 1, "bytes": 203, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "gsap+raf", "motion_signature": "frame-delayed cursor-trail lerp parallax depth layers", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "modular-slider", "title": "Modular Carousel", "category": "slider", "description": "A click-driven modular image carousel: each click advances a horizontal strip of slide titles via a 2s gsap.to power4.out tween, while two split image panels (top/bottom, shaped with CSS clip-path polygons) are freshly injected and revealed by animating their clip-path and scale from collapsed to full with a 0.15s stagger. Hovering the image widens the top/bottom clip-path windows; excess stacked images are trimmed on tween complete.", "demo": "https://motionprompts.dev/components/modular-slider/index.html", "prompt": "https://motionprompts.dev/prompts/modular-slider.md", "page": "https://motionprompts.dev/component/modular-slider/", "thumb": "https://motionprompts.dev/thumbs/modular-slider.webp", "preview": "https://motionprompts.dev/previews/modular-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 2 ], "stagger": 0.15, "assets_required": { "count": 8, "bytes": 1568841, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-advanced title strip, clip-path split image reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "mormal", "title": "Camille Mormal Grid Reveal", "category": "preloader", "description": "An on-load intro reveal built from a single GSAP timeline: five vertical columns of images slide in from off-screen top/bottom (alternating positive and negative staggers per column with a power4.inOut ease), then the whole image grid scales up 6x while the nav links, masked hero title, slide counter and footer preview thumbnails slide up into their clip-path frames and the two '+' icons scale from 0 to 1. Plays automatically once on page load.", "demo": "https://motionprompts.dev/components/mormal/index.html", "prompt": "https://motionprompts.dev/prompts/mormal.md", "page": "https://motionprompts.dev/component/mormal/", "thumb": "https://motionprompts.dev/thumbs/mormal.webp", "preview": "https://motionprompts.dev/previews/mormal.webm", "motion": { "trigger": "click", "libs": [ "gsap", "ionicons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 4 ], "stagger": -0.25, "assets_required": { "count": 15, "bytes": 2278175, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay staggered column grid reveal then zoom", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "page-scroll-lock", "entry-veil" ], "conflicts_with": [] }, { "slug": "mosaic-flip-hover-effect", "title": "Mosaic Flip Hover Effect", "category": "hover", "description": "A 12x9 grid of 3D cube tiles displays an image sliced via per-tile background-position, each tile gently floating on the z-axis in an endless 'breathe' loop. Hovering a project link flips every tile 180deg on rotateY with a center-out grid stagger (power3.inOut), revealing the hovered project's image on the cubes' hidden faces; leaving the list flips back to the default image.", "demo": "https://motionprompts.dev/components/mosaic-flip-hover-effect/index.html", "prompt": "https://motionprompts.dev/prompts/mosaic-flip-hover-effect.md", "page": "https://motionprompts.dev/component/mosaic-flip-hover-effect/", "thumb": "https://motionprompts.dev/thumbs/mosaic-flip-hover-effect.webp", "preview": "https://motionprompts.dev/previews/mosaic-flip-hover-effect.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "sine", "duration_range": [ 0.3, 0.5 ], "stagger": 0.05, "assets_required": { "count": 7, "bytes": 1599087, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "center-out 3D cube-grid flip on hover (108 tiles, 0.5s power3.inOut, grid-staggered 0.05 each from center), over a perpetual randomized z-drift breathe (0.6-1.4s sine.inOut, self-recursive)", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "mouse-trail-animation-svg-js", "title": "Mouse Trail with SVG and GSAP", "category": "interactive", "description": "Seven layered SVG polyline paths in a rainbow palette follow the cursor as an interpolated, snake-like ribbon trail. A single mousemove listener eases a shared smooth pointer toward the cursor via gsap.to (duration 0.5, power2.out), and a requestAnimationFrame loop prepends that point to each path's history (40 to 10 points per layer) to redraw the M/L path data every frame, producing staggered trailing tails.", "demo": "https://motionprompts.dev/components/mouse-trail-animation-svg-js/index.html", "prompt": "https://motionprompts.dev/prompts/mouse-trail-animation-svg-js.md", "page": "https://motionprompts.dev/component/mouse-trail-animation-svg-js/", "thumb": "https://motionprompts.dev/thumbs/mouse-trail-animation-svg-js.webp", "preview": "https://motionprompts.dev/previews/mouse-trail-animation-svg-js.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.2, 1.6 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "POINTER-LATCHED", "engine": "gsap+raf", "motion_signature": "GSAP-eased pointer feeds rAF SVG polyline trails", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "nakedcityfilms-scroll-animation", "title": "NakedCity Films Navbar Scroll Animation", "category": "scroll", "description": "A fixed, centered 16:9 navbar window (cream panel with nav links over a full-viewport fixed image) expands from 50% width to fullscreen as you scroll the first viewport, scrubbed via ScrollTrigger onUpdate with gsap.utils.interpolate while a paused Flip timeline flies the oversized logo from bottom-center to a pinned top position. Lenis drives the smooth scrolling.", "demo": "https://motionprompts.dev/components/nakedcityfilms-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/nakedcityfilms-scroll-animation.md", "page": "https://motionprompts.dev/component/nakedcityfilms-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/nakedcityfilms-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/nakedcityfilms-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "Flip", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": 200, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 2, "bytes": 609652, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "mata todos los ScrollTrigger" ], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed fixed navbar window expanding to fullscreen", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" } ] }, { "slug": "navigate-scroll-animated-text-javascript", "title": "Scroll Animated Text Reveal", "category": "text", "description": "A scroll-driven, word-by-word text reveal where Lenis smooth scroll feeds GSAP ScrollTrigger, which pins each text section over four viewport heights and, via manual per-word progress math in onUpdate, fades words in behind a grey highlight pill that then dissolves to expose the letters; select keywords reveal inside colored rounded pills, and past 70% progress the sequence re-highlights the words in reverse.", "demo": "https://motionprompts.dev/components/navigate-scroll-animated-text-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/navigate-scroll-animated-text-javascript.md", "page": "https://motionprompts.dev/component/navigate-scroll-animated-text-javascript/", "thumb": "https://motionprompts.dev/thumbs/navigate-scroll-animated-text-javascript.webp", "preview": "https://motionprompts.dev/previews/navigate-scroll-animated-text-javascript.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "pinned scroll-progress word-by-word highlight reveal", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "nextjs-text-reveal-animation", "title": "Line-by-Line Text Reveal", "category": "text", "description": "A scroll-driven line-by-line text reveal. GSAP SplitText breaks each heading and paragraph into masked lines, gsap.set pushes them to y:100%, and a ScrollTrigger fired once at 'top 75%' tweens them back to y:0% (duration 1, stagger 0.1, power4.out); the hero headline runs on load with a 0.5s delay. Lenis provides smooth scrolling.", "demo": "https://motionprompts.dev/components/nextjs-text-reveal-animation/index.html", "prompt": "https://motionprompts.dev/prompts/nextjs-text-reveal-animation.md", "page": "https://motionprompts.dev/component/nextjs-text-reveal-animation/", "thumb": "https://motionprompts.dev/thumbs/nextjs-text-reveal-animation.webp", "preview": "https://motionprompts.dev/previews/nextjs-text-reveal-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power4", "duration_range": [ 1, 1 ], "stagger": 0.1, "assets_required": { "count": 2, "bytes": 763163, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "once-triggered masked line reveal, staggered upward", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "nextjs-view-transitions", "title": "Next.js View Transitions", "category": "transition", "description": "A multi-page portfolio where clicking a nav link fires a full-page transition built on the native View Transitions API: the outgoing page slides up and fades to 20% opacity while the incoming page is revealed from the bottom via an animated clip-path, both over 1.5s with a cubic-bezier(0.87,0,0.13,1) ease. Each destination also runs its own GSAP intro on mount, the home headline reveals character-by-character and the info paragraph reveals line-by-line (SplitType, power4.out y-translate).", "demo": "https://motionprompts.dev/components/nextjs-view-transitions/index.html", "prompt": "https://motionprompts.dev/prompts/nextjs-view-transitions.md", "page": "https://motionprompts.dev/component/nextjs-view-transitions/", "thumb": "https://motionprompts.dev/thumbs/nextjs-view-transitions.webp", "preview": "https://motionprompts.dev/previews/nextjs-view-transitions.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "SplitType", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power4", "duration_range": [ 0.3, 2 ], "stagger": 0.075, "assets_required": { "count": 5, "bytes": 725788, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "mixed", "motion_signature": "Whole-document View Transition: the outgoing root fades 1->0.2 while translating Y 0->-35% as the incoming root is wiped in by a bottom-to-top clip-path polygon, both 1500ms on cubic-bezier(0.87,0,0.13,1); per-route SplitType intros slide chars/lines y:400->0 on power4.out with a 0.075 stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "nite-riot-landing-page-reveal-javascript", "title": "Nite Riot Landing Page Reveal", "category": "preloader", "description": "Autoplay landing-page intro: a black overlay reveals a gradient-fill logo and staggered project/location lists, then a centered 3x3 image grid clips open and rapidly cycles through random fashion photos. The outer cells clip away and the central hero image scales up (clip-path zoom) while two banner images pop and rotate outward, the nav drops in, and masked SplitType word reveals push in the intro copy and title. Runs on DOMContentLoaded via three parallel GSAP timelines with a custom 'hop' CustomEase.", "demo": "https://motionprompts.dev/components/nite-riot-landing-page-reveal-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/nite-riot-landing-page-reveal-javascript.md", "page": "https://motionprompts.dev/component/nite-riot-landing-page-reveal-javascript/", "thumb": "https://motionprompts.dev/thumbs/nite-riot-landing-page-reveal-javascript.webp", "preview": "https://motionprompts.dev/previews/nite-riot-landing-page-reveal-javascript.webm", "motion": { "trigger": "load", "libs": [ "gsap", "CustomEase", "SplitType" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.15, 1.5 ], "stagger": 0.05, "assets_required": { "count": 35, "bytes": 3880036, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "timed preloader: clip-path grid reveal into hero", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "nm-menu-rebuild", "title": "Fullscreen Portfolio Menu", "category": "menu", "description": "A fullscreen overlay navigation that toggles open on clicking the burger button: a GSAP timeline sweeps a clip-path polygon over the whole viewport on a power4.inOut ease, then staggers the oversized menu items up from a y offset with power4.out, grows a CSSRulePlugin-animated underline on the active item, and fades the social sub-nav up into place. Clicking again reverses the same timeline.", "demo": "https://motionprompts.dev/components/nm-menu-rebuild/index.html", "prompt": "https://motionprompts.dev/prompts/nm-menu-rebuild.md", "page": "https://motionprompts.dev/component/nm-menu-rebuild/", "thumb": "https://motionprompts.dev/thumbs/nm-menu-rebuild.webp", "preview": "https://motionprompts.dev/previews/nm-menu-rebuild.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CSSRulePlugin" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 1.5 ], "stagger": 0.2, "assets_required": { "count": 1, "bytes": 639250, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "clip-path overlay sweep (top edge expanding downward, power4.inOut, 1.5s) with a 0.2s-staggered masked y:225->0 menu rise overlapping 1s early, then an underline width grow and sub-nav fade", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "nordquantique-scroll", "title": "Nordquantique Scroll", "category": "scroll", "description": "A scroll-driven pixelated block transition between full-bleed sections. Each image section is 200vh tall and overlaid with two grids of 4 rows x 16 blocks (top and bottom); a scrubbed ScrollTrigger per row maps scroll progress, plus a per-row delay and a gsap.utils.shuffle randomized per-block offset, to each block's opacity so the top blocks dissolve away to reveal the photo while the bottom blocks build up to cover it as the section scrolls through the viewport.", "demo": "https://motionprompts.dev/components/nordquantique-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/nordquantique-scroll.md", "page": "https://motionprompts.dev/component/nordquantique-scroll/", "thumb": "https://motionprompts.dev/thumbs/nordquantique-scroll.webp", "preview": "https://motionprompts.dev/previews/nordquantique-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 2, "pinned": false, "viewport_heights": 200, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 2, "bytes": 290095, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "mixed", "motion_signature": "scrub-driven per-row, random-order block opacity dissolve — no GSAP tweens at all; ScrollTrigger.onUpdate writes inline opacity per block and a 250ms CSS opacity transition supplies all the easing", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "nvg8-scroll-animation", "title": "Nvg8 Scroll Animation", "category": "scroll", "description": "Intro section pinned for eight viewport heights and scrubbed with Lenis smooth scroll: nine thick rounded SVG strokes draw on in a staggered order via strokeDashoffset (each with a cloned darker border path behind it for an outlined look), two large curved strokes then draw and un-draw, the section flips to a dark theme with swapped headline text at 50% progress, and the three stroke rows finally slide out with a staggered xPercent exit.", "demo": "https://motionprompts.dev/components/nvg8-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/nvg8-scroll-animation.md", "page": "https://motionprompts.dev/component/nvg8-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/nvg8-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/nvg8-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": true, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.25, 2 ], "stagger": 0.15, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "scrubbed pinned SVG stroke-draw with theme flip", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "nvg8-scroll-animation-2", "title": "Assembly Icon-to-Text Scroll Animation", "category": "scroll", "description": "A pinned hero for the 'Assembly' creative workspace, driven by a single scrubbed ScrollTrigger (smoothed with Lenis). As you scroll, the wordmark fades out, a bottom row of five flat app tiles (built as inline SVG) rises with a staggered offset, gathers to center while scaling down, the background flips from near-black to warm paper, the tiles are cloned and flown one-by-one into inline placeholders inside a headline, and the headline words fade in one at a time in a shuffled order.", "demo": "https://motionprompts.dev/components/nvg8-scroll-animation-2/index.html", "prompt": "https://motionprompts.dev/prompts/nvg8-scroll-animation-2.md", "page": "https://motionprompts.dev/component/nvg8-scroll-animation-2/", "thumb": "https://motionprompts.dev/thumbs/nvg8-scroll-animation-2.webp", "preview": "https://motionprompts.dev/previews/nvg8-scroll-animation-2.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 0.3 ], "stagger": null, "assets_required": { "count": 5, "bytes": 4954972, "root_absolute_paths": false }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed pinned icons fly into headline", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "offficestud", "title": "Three.js 3D Scroll Experience", "category": "3d-webgl", "description": "A fixed Three.js chair model (GLB) scales in on load, floats with a sine bob, and tilts on its X axis proportionally to scroll progress driven by a Lenis + GSAP ticker loop; a SplitType-lined outro headline reveals via a staggered translateY masked by ScrollTrigger.", "demo": "https://motionprompts.dev/components/offficestud/index.html", "prompt": "https://motionprompts.dev/prompts/offficestud.md", "page": "https://motionprompts.dev/component/offficestud/", "thumb": "https://motionprompts.dev/thumbs/offficestud.webp", "preview": "https://motionprompts.dev/previews/offficestud.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "three", "GLTFLoader", "lenis", "SplitType" ], "complexity": 5, "pinned": false, "viewport_heights": 400, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.3, 1 ], "stagger": 0.1, "assets_required": { "count": 1, "bytes": 1866416, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-THRESHOLD", "engine": "mixed", "motion_signature": "scroll-mapped 3D model tilt with floating sine bob", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "orchestra-3d-scroll-animation", "title": "Orchestra 3D Scroll Animation", "category": "scroll", "description": "A pinned hero where six image-mapped CSS 3D cubes fly in from deep translateZ(-30000px) and assemble into a spread as you scroll. A single Lenis-smoothed ScrollTrigger (pin + scrub over 4x viewport height) drives an onUpdate that interpolates each cube's top/left/rotateX/Y/Z and Z-depth, blurs and fades the block logo, scales and fades the intro headline, then reveals a second de-blurring headline; two cubes get an extra 180 flip in the second half.", "demo": "https://motionprompts.dev/components/orchestra-3d-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/orchestra-3d-scroll-animation.md", "page": "https://motionprompts.dev/component/orchestra-3d-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/orchestra-3d-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/orchestra-3d-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 600, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 33, "bytes": 2961700, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "single scrub-pinned ScrollTrigger (scrub:1) driving hand-rolled LINEAR interpolation — no tweens, no ease curve: 6 CSS-3D cubes fly from z:-30000px / off-screen top and ±360° rotations to their assembled grid over the first half of the scrub, cube-2 and cube-4 add a further ±180° rotateY over the second half, while the logo blurs 0→20px and fades out, header-1 scales 1→1.5 + blurs 0→20px + fades out, and header-2 scales 0.75→1 + un-blurs 10→0px + fades in after 40% progress", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "orken-world-scroll-animation", "title": "OrkenWorld Scroll Animation", "category": "scroll", "description": "A pinned section where scrolling drags a horizontal row of product cards across the viewport while a full-screen canvas grid of triangles progressively fills with orange color. A single ScrollTrigger (pin + scrub over 5x viewport height, Lenis-smoothed) maps scroll progress via onUpdate to translate the cards on X and to reveal randomly-ordered triangles that ease-fill on two stacked canvases.", "demo": "https://motionprompts.dev/components/orken-world-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/orken-world-scroll-animation.md", "page": "https://motionprompts.dev/component/orken-world-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/orken-world-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/orken-world-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 4, "bytes": 1062563, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "mixed", "motion_signature": "pinned scroll drives canvas triangle fill + horizontal cards", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "oshane-howard-lp-responsive", "title": "O'Shane Howard Landing Page", "category": "preloader", "description": "On load, an animated numeric counter (three stacked digit reels tweened with gsap.to and power2.inOut) counts up to 100% behind a filling progress bar, then a stack of hero images each wipe in via a staggered clip-path polygon reveal while the hero scales up, the nav drops in, and the 'Howard' headline rises letter-by-letter with a staggered per-span reveal.", "demo": "https://motionprompts.dev/components/oshane-howard-lp-responsive/index.html", "prompt": "https://motionprompts.dev/prompts/oshane-howard-lp-responsive.md", "page": "https://motionprompts.dev/component/oshane-howard-lp-responsive/", "thumb": "https://motionprompts.dev/thumbs/oshane-howard-lp-responsive.webp", "preview": "https://motionprompts.dev/previews/oshane-howard-lp-responsive.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 1, 6 ], "stagger": 0.1, "assets_required": { "count": 7, "bytes": 1135225, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "timeline-less delayed preloader counter then clip-path reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "page-scroll-lock", "entry-veil" ], "conflicts_with": [] }, { "slug": "our-revolution-lp", "title": "Our Revolution Landing Page Reveal", "category": "preloader", "description": "A preloader-to-hero landing reveal driven by a single GSAP timeline: a row of seven tall portrait images rises from below and staggers in, the whole strip slides horizontally, the side images and then the full black loader wipe away upward via clip-path, and finally the nav, hero headline and footer thumbnails slide up and fade in. Plays automatically once on page load using power3.inOut easing, about 6 seconds total.", "demo": "https://motionprompts.dev/components/our-revolution-lp/index.html", "prompt": "https://motionprompts.dev/prompts/our-revolution-lp.md", "page": "https://motionprompts.dev/component/our-revolution-lp/", "thumb": "https://motionprompts.dev/thumbs/our-revolution-lp.webp", "preview": "https://motionprompts.dev/previews/our-revolution-lp.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.3, 3 ], "stagger": 0.1, "assets_required": { "count": 11, "bytes": 1202310, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "one-shot 4s power3.inOut intro: staggered y-rise of a 7-image strip + a 3s horizontal x:500->0 slide of the strip, then upward clip-path wipes (polygon bottom edge collapsed to the top) on the images and on the fixed black loader, ending with a staggered y/opacity rise of nav, headline and footer thumbs. No scroll, no rAF, no easing curve other than power3.inOut.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "page-scroll-lock", "entry-veil" ], "conflicts_with": [] }, { "slug": "outfit-landing-page-reveal", "title": "Outfit Landing Page Reveal", "category": "preloader", "description": "Preloader reveal for a fashion-archive landing page: six stacked centered images with random tilts scale up and un-clip with stagger while a SplitText title animates in and a 000-to-100 counter ticks; everything then exits and the preloader clips away upward, revealing the hero with masked char/word slide-ups on the header, nav and footer. Plays automatically once on page load.", "demo": "https://motionprompts.dev/components/outfit-landing-page-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/outfit-landing-page-reveal.md", "page": "https://motionprompts.dev/component/outfit-landing-page-reveal/", "thumb": "https://motionprompts.dev/thumbs/outfit-landing-page-reveal.webp", "preview": "https://motionprompts.dev/previews/outfit-landing-page-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.75, 2 ], "stagger": 0.075, "assets_required": { "count": 6, "bytes": 543508, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "autoplay preloader timeline: a deck of six pre-rotated, scale-0 images blooms open via clip-path inset→full-bleed on a 0.2s stagger, a masked SplitText wordmark and a 000→100 counter ride up, everything scales back out on a negative stagger, then the fixed dark panel clips upward to hand off to masked hero/nav/footer text", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "outline-text-over-media", "title": "Outline Text Filled by Media", "category": "text", "description": "A pinned stage where a giant word sits hollow — stroked, transparent fill — over a photograph, and a scroll-driven wipe uncovers a second copy of the same word filled with that photograph via `background-clip: text`. Two pixel-aligned copies rather than one element that changes: `-webkit-text-stroke` with a transparent fill and a clipped background are different paint paths, and any crossfade between them flickers on the sub-pixel edge of every letter, while two stacked copies with a `clip-path` wipe are exact, cheap and reversible. Both copies share a single grid cell and identical typography — nothing may differ but colour, stroke and clip, because a one-pixel drift shows the outline as a ghost beside the fill and the effect is dead. The fill image is set from JS off the background's own `src`, so the letters are in register with what is behind them and read as a window cut into the photograph. The wipe completes at 78% of the track so the finished word lands while the section is still on screen. Dressed as a dance season: Young Serif + Geologica, deep teal and bone.", "demo": "https://motionprompts.dev/components/outline-text-over-media/index.html", "prompt": "https://motionprompts.dev/prompts/outline-text-over-media.md", "page": "https://motionprompts.dev/component/outline-text-over-media/", "thumb": "https://motionprompts.dev/thumbs/outline-text-over-media.webp", "preview": "https://motionprompts.dev/previews/outline-text-over-media.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 3, "bytes": 290801, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "sticky stage over 280svh where a ScrollTrigger writes --wipe 0→100% into a clip-path inset on a background-clip:text copy of a word stacked pixel-aligned over a stroked hollow copy; the wipe saturates at 78% of the track so the finished word holds on screen, and the stage background opacity rises 0.42→0.72 in step; no tween, no scrub, smoothing from Lenis", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "overlay-menu", "title": "Meristem Overlay Menu", "category": "menu", "description": "Fullscreen overlay menu toggled by a hamburger button: a paused GSAP timeline scales four stacked green background layers in from the top (scaleY 0 to 1, 0.1s stagger, power3.inOut), then wipes the nav panel in with a clip-path polygon reveal while SplitText line-masked links slide up from y:100% with a 0.05s stagger (power3.out). Clicking again reverses the timeline and resets the link lines on close.", "demo": "https://motionprompts.dev/components/overlay-menu/index.html", "prompt": "https://motionprompts.dev/prompts/overlay-menu.md", "page": "https://motionprompts.dev/component/overlay-menu/", "thumb": "https://motionprompts.dev/thumbs/overlay-menu.webp", "preview": "https://motionprompts.dev/previews/overlay-menu.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 0.75 ], "stagger": 0.05, "assets_required": { "count": 2, "bytes": 2318800, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "click-toggled stack of 4 staggered scaleY curtains (0.1 stagger, power3.inOut, top-origin except a bottom-origin mint sliver) overlapped -=0.6 by a top-down clip-path reveal of .nav-items, then masked link lines rising y 100%→0% after a 0.85s delay with 0.05 stagger; reverse plays the whole thing backwards and resets lines to y:100%", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "oversized-year-scroll", "title": "Oversized Year, Counter-Scrolled", "category": "scroll", "description": "A timeline where each era band carries an enormous four-digit year as a watermark behind its content, drifting AGAINST the scroll while the copy rises with it. One ScrollTrigger per band tweens the numeral on `xPercent` across the band's entire passage through the viewport (`top bottom` → `bottom top`, scrub 1), and the direction alternates band to band so consecutive years do not read as one long background pan. The numeral is `aria-hidden` at 7% opacity and the readable date lives in the copy: in front it stops being atmosphere and competes with the paragraph it dates. Each band clips horizontally because the numeral is deliberately wider than the viewport. Smoothed by Lenis; reduced motion parks every numeral centred. The demo is dressed as a Gotland ceramics studio: Vollkorn + Martian Mono, oat and kiln-black with an ember accent.", "demo": "https://motionprompts.dev/components/oversized-year-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/oversized-year-scroll.md", "page": "https://motionprompts.dev/component/oversized-year-scroll/", "thumb": "https://motionprompts.dev/thumbs/oversized-year-scroll.webp", "preview": "https://motionprompts.dev/previews/oversized-year-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.9, 0.9 ], "stagger": null, "assets_required": { "count": 4, "bytes": 199236, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "per-band watermark numeral tweened on xPercent against the scroll across the band full passage (top bottom → bottom top, scrub 1), direction alternating band to band, while the band content rises with a power3.out entrance at top 72%", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "p10-landing-page-reveal-gsap", "title": "P10 Landing Page Reveal", "category": "preloader", "description": "A preloader-driven landing reveal that plays automatically on load: SplitText masked characters slide the studio name and a large '10' into view, the intro character slides and scales into a logo mark while animated corner tags flip in and out, then two dark overlays split apart along a clip-path seam to unveil a full-bleed hero image, a center card and a masked per-character card heading. Driven by a single GSAP timeline using a custom 'hop' CustomEase and staggered clip-path/transform tweens.", "demo": "https://motionprompts.dev/components/p10-landing-page-reveal-gsap/index.html", "prompt": "https://motionprompts.dev/prompts/p10-landing-page-reveal-gsap.md", "page": "https://motionprompts.dev/component/p10-landing-page-reveal-gsap/", "thumb": "https://motionprompts.dev/thumbs/p10-landing-page-reveal-gsap.webp", "preview": "https://motionprompts.dev/previews/p10-landing-page-reveal-gsap.webm", "motion": { "trigger": "load", "libs": [ "gsap", "CustomEase", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.75, 1 ], "stagger": 0.05, "assets_required": { "count": 1, "bytes": 163241, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "Autoplay ~7.25s preloader takeover: masked char/word reveals on a custom 'hop' ease (.8,0,.3,1 — fast-out, long glide, hard settle), then two identical stacked full-viewport layers are clip-path-split at the 50% seam and driven apart with a function-based value (y:(i)=>i===0?'-50%':'50%') while the underlying .container clip-path expands from a 4%-tall horizontal seam to the full frame and the card wipes open", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "page-transitions", "title": "Block Grid Page Transitions", "category": "transition", "description": "A fullscreen 10x11 grid of blocks acts as a curtain between routes: clicking a nav link grows the blocks up from the bottom (scaleY 0->1) to cover the viewport, the page title swaps behind them, then a second grid shrinks the blocks up from the top (scaleY 1->0) to reveal the new page. Each block uses a per-row random GSAP stagger with a CustomEase reproduction of the [0.22,1,0.36,1] cubic-bezier over a 1s duration.", "demo": "https://motionprompts.dev/components/page-transitions/index.html", "prompt": "https://motionprompts.dev/prompts/page-transitions.md", "page": "https://motionprompts.dev/component/page-transitions/", "thumb": "https://motionprompts.dev/thumbs/page-transitions.webp", "preview": "https://motionprompts.dev/previews/page-transitions.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "staggered block-grid curtain covers then reveals", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "page-transitions-view-transition-api", "title": "Page Transitions with the View Transition API", "category": "transition", "description": "A multi-page portfolio where clicking a nav link is intercepted by the native Navigation API, which fetches the target HTML, swaps the document body inside document.startViewTransition(): the outgoing page fades to 40% and slides up while the incoming page wipes in from the bottom via an animated clip-path, both over 1.5s with a cubic-bezier(0.87,0,0.13,1) ease. Each destination then runs its own GSAP intro on mount, the home headline reveals character-by-character and the about paragraph reveals line-by-line (SplitType, power4.out y-translate), with Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/page-transitions-view-transition-api/index.html", "prompt": "https://motionprompts.dev/prompts/page-transitions-view-transition-api.md", "page": "https://motionprompts.dev/component/page-transitions-view-transition-api/", "thumb": "https://motionprompts.dev/thumbs/page-transitions-view-transition-api.webp", "preview": "https://motionprompts.dev/previews/page-transitions-view-transition-api.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "lenis", "split-type" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power4", "duration_range": [ 0.25, 2 ], "stagger": 0.075, "assets_required": { "count": 5, "bytes": 705809, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "mixed", "motion_signature": "native view-transition clip wipe plus GSAP text reveals", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "parallax-effect", "title": "Smooth Scroll Parallax Images", "category": "scroll", "description": "Musician landing page where every image inside an overflow-hidden container drifts on scroll: a Lenis smooth-scroll instance feeds a target translateY (0.2x the relative scroll) and a requestAnimationFrame loop lerps toward it (factor 0.1), applying translateY plus scale(1.5) for a soft parallax lag on each portrait.", "demo": "https://motionprompts.dev/components/parallax-effect/index.html", "prompt": "https://motionprompts.dev/prompts/parallax-effect.md", "page": "https://motionprompts.dev/component/parallax-effect/", "thumb": "https://motionprompts.dev/thumbs/parallax-effect.webp", "preview": "https://motionprompts.dev/previews/parallax-effect.webm", "motion": { "trigger": "scroll", "libs": [ "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": 125, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 0.25 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1717039, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "raf-lerp", "motion_signature": "rAF-lerped translateY parallax driven by Lenis scroll", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "parallax-snap-infinite-scroll", "title": "Infinite Scroll with Parallax", "category": "scroll", "description": "An endlessly looping vertical project list where wheel and touch scrolling drive a lerp-smoothed translateY on recycled full-screen slides. Each slide's image gets an independent parallax offset, and when scrolling stops the list eases (cubic ease-out) to snap the nearest slide fully into view.", "demo": "https://motionprompts.dev/components/parallax-snap-infinite-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/parallax-snap-infinite-scroll.md", "page": "https://motionprompts.dev/component/parallax-snap-infinite-scroll/", "thumb": "https://motionprompts.dev/thumbs/parallax-snap-infinite-scroll.webp", "preview": "https://motionprompts.dev/previews/parallax-snap-infinite-scroll.webm", "motion": { "trigger": "wheel", "libs": [], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 2.1, 2.1 ], "stagger": null, "assets_required": { "count": 6, "bytes": 1269452, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "rAF lerp virtual scroll, recycled slides, snap", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner", "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "permianworld-landing-page-animation", "title": "PermianWorld Landing Page Reveal Animation", "category": "preloader", "description": "Preloader reveal on page load: SplitText masked lines slide the preloader copy and counter up while a randomized counter climbs from 00 to 100 and a centered square revealer scales in stepped increments, then the black preloader collapses via clip-path as nav, hero image and hero content slide into place. Runs automatically on DOMContentLoaded.", "demo": "https://motionprompts.dev/components/permianworld-landing-page-animation/index.html", "prompt": "https://motionprompts.dev/prompts/permianworld-landing-page-animation.md", "page": "https://motionprompts.dev/component/permianworld-landing-page-animation/", "thumb": "https://motionprompts.dev/thumbs/permianworld-landing-page-animation.webp", "preview": "https://motionprompts.dev/previews/permianworld-landing-page-animation.webm", "motion": { "trigger": "load", "libs": [ "gsap", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.5, 4.5 ], "stagger": 0.075, "assets_required": { "count": 1, "bytes": 381106, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "load-triggered preloader: staggered masked lines rise, centered square revealer scales in 5 discrete steps (0.1/0.25/0.5/0.75/1) with power2/power3 out, then a 1.25s clip-path wipe uncovers the page while nav + hero-img + hero-content ride up from y:35svh on the same overlapping beat; ~6s total, no scroll, no rAF", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "phantom-gallery-javascript", "title": "Halation — Phantom Draggable Infinite Gallery", "category": "gallery", "description": "A Three.js orthographic full-screen plane renders an infinite grid of captioned images via a fragment shader, using image and text texture atlases and a barrel-distortion lens with a radial fade. Pointer/touch dragging pans the grid (offset lerped for inertia) and momentarily zooms in while dragging; a quick tap on a cell navigates to its project link.", "demo": "https://motionprompts.dev/components/phantom-gallery-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/phantom-gallery-javascript.md", "page": "https://motionprompts.dev/component/phantom-gallery-javascript/", "thumb": "https://motionprompts.dev/thumbs/phantom-gallery-javascript.webp", "preview": "https://motionprompts.dev/previews/phantom-gallery-javascript.webm", "motion": { "trigger": "drag", "libs": [ "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 2.4, 2.4 ], "stagger": null, "assets_required": { "count": 25, "bytes": 2728799, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "webgl-raf", "motion_signature": "drag-lerped infinite WebGL grid with zoom-out", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "phive-sticky-cards", "title": "Phive Sticky Cards", "category": "scroll", "description": "A vertical stack of full-height sticky cards that fold away on scroll: each card is pinned (pinSpacing false) while ScrollTrigger scrub-animates its inner panel translating up 50%, pushing back -250px in Z and tilting 45deg on rotationX in 3D perspective, with a black overlay fading in via an animated --after-opacity variable as the next card arrives. Driven by GSAP ScrollTrigger synced to Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/phive-sticky-cards/index.html", "prompt": "https://motionprompts.dev/prompts/phive-sticky-cards.md", "page": "https://motionprompts.dev/component/phive-sticky-cards/", "thumb": "https://motionprompts.dev/thumbs/phive-sticky-cards.webp", "preview": "https://motionprompts.dev/previews/phive-sticky-cards.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 125, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 4, "bytes": 1820857, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrub-pinned cards folding back and down in 3D (y -50%, z -250, rotationX 45 about a bottom-edge origin under 1000px perspective) while a black ::after overlay fades in; no explicit ease, so GSAP's default power1.out shapes the scrub non-linearly", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "phive-text-scroll-animation", "title": "Phive Text Scroll Animation", "category": "text", "description": "Scroll-driven sequence of pinned full-screen sections where giant uppercase words stretch open vertically (scaleY driven by each ScrollTrigger's scrub progress) and collapse as they leave; the final word scales up 10x while its dark backdrop fades to reveal a background image, then a SplitText headline reveals word-by-word.", "demo": "https://motionprompts.dev/components/phive-text-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/phive-text-scroll-animation.md", "page": "https://motionprompts.dev/component/phive-text-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/phive-text-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/phive-text-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 5, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 210430, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "Pure linear scrub (no eases, no durations): each of three pinned sections stretches its headline on scaleY from 0 up to a measured sectionHeight/textHeight ratio on approach, then back to 0 while pinned; the third pinned section additionally zooms its text panel scale3d 1→10 over the first 75% of a 400vh pin, cross-fades the panel background alpha (0.25→0.5) and its opacity (0.5→0.75) to zero, and reveals the header word-by-word by index threshold over 0.75→0.95. Smoothing comes only from scrub:1 and Lenis inertia.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "physics-anim", "title": "Interactive Divs with Physics", "category": "interactive", "description": "Twelve grayscale polaroid-style image cards float over a full-screen p5.js canvas inside a zero-gravity Matter.js world, each DOM div repositioned every frame from its physics body. Moving the mouse near a card fires a random Matter.js Body.applyForce, so nearby cards scatter, drift with air friction and restitution, and bounce off the invisible viewport walls.", "demo": "https://motionprompts.dev/components/physics-anim/index.html", "prompt": "https://motionprompts.dev/prompts/physics-anim.md", "page": "https://motionprompts.dev/component/physics-anim/", "thumb": "https://motionprompts.dev/thumbs/physics-anim.webp", "preview": "https://motionprompts.dev/previews/physics-anim.webm", "motion": { "trigger": null, "libs": [ "p5", "matter-js" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 12, "bytes": 1744163, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "zero-gravity Matter.js cards scattered by cursor", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "pixelated-text-hover-shaders", "title": "Pixelated Text Hover Shaders", "category": "hover", "description": "A large wordmark is rendered to a 2D canvas texture and drawn on a full-screen Three.js orthographic plane. A custom fragment shader quantizes the UVs into a 40x40 pixel grid and, near the cursor, displaces the texture along the mouse's movement direction to create a rippling pixelated smear. Movement is eased frame-by-frame in JS (requestAnimationFrame lerp, no GSAP) on mousemove/enter/leave.", "demo": "https://motionprompts.dev/components/pixelated-text-hover-shaders/index.html", "prompt": "https://motionprompts.dev/prompts/pixelated-text-hover-shaders.md", "page": "https://motionprompts.dev/component/pixelated-text-hover-shaders/", "thumb": "https://motionprompts.dev/thumbs/pixelated-text-hover-shaders.webp", "preview": "https://motionprompts.dev/previews/pixelated-text-hover-shaders.webm", "motion": { "trigger": "hover", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "rAF-lerped cursor smear on pixelated shader plane", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "playable-objects", "title": "Playable Objects", "category": "footer", "description": "A dark footer where tech-tag pills drop in from above and pile up under Matter.js physics (gravity, restitution, friction, staggered spawn heights). A ScrollTrigger with once:true fires the physics engine the first time the footer scrolls into view, Lenis drives smooth scrolling, and a Matter MouseConstraint lets you grab and fling each pill in real time.", "demo": "https://motionprompts.dev/components/playable-objects/index.html", "prompt": "https://motionprompts.dev/prompts/playable-objects.md", "page": "https://motionprompts.dev/component/playable-objects/", "thumb": "https://motionprompts.dev/thumbs/playable-objects.webp", "preview": "https://motionprompts.dev/previews/playable-objects.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis", "matter-js" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 1.6 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "Matter.js pills drop from off-screen and pile up under gravity {x:0,y:1} with restitution 0.5 / friction 0.15 / frictionAir 0.02 / density 0.002; the ceiling wall is only added 3s in so they can fall through; a MouseConstraint (stiffness 0.6) makes each pill grab-and-fling, with inertia frozen and velocity clamped to ±20 while dragging", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "poly-app-photo-dump", "title": "Photo Dump Scroll Scatter", "category": "gallery", "description": "A pinned photo-dump gallery for a photo studio archive: 15 randomly rotated print-style photo cards scattered in a ring around a centered serif chapter heading. The section pins for 6 viewport heights of scroll split into 4 chapters (still life, location, studies, portraits); on each chapter change the current cards fly out to their nearest screen edge (power2.in) while 15 cards from the next set fly in from the edges (power2.out, 0.5s overlap) and the heading cross-fades. Built with GSAP ScrollTrigger pinning and Lenis smooth scroll.", "demo": "https://motionprompts.dev/components/poly-app-photo-dump/index.html", "prompt": "https://motionprompts.dev/prompts/poly-app-photo-dump.md", "page": "https://motionprompts.dev/component/poly-app-photo-dump/", "thumb": "https://motionprompts.dev/thumbs/poly-app-photo-dump.webp", "preview": "https://motionprompts.dev/previews/poly-app-photo-dump.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 600, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.5, 0.75 ], "stagger": null, "assets_required": { "count": 60, "bytes": 7947388, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap+lenis", "motion_signature": "pinned scroll-quantized card scatter swap — no scrub, no inertia: progress buckets at 0/.25/.5/.75 fire discrete 1.25s eased left/top/rotation tweens that fling 15 cards to the nearest viewport edge (power2.in) while 15 new ones fly in from an edge to a radial-random ring (power2.out, offset 0.5s)", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "poppr-menu", "title": "Poppr Gooey Overlay Menu", "category": "menu", "description": "Fullscreen overlay menu with a gooey liquid-curtain reveal: clicking the Menu/Close toggle morphs an SVG path's d attribute through a quadratic-Bezier bulge into a full-screen sheet (power4.in/out, reversed with power3 on close), while SplitText characters of each nav link snap in from x:750% with an elastic.out(1, 0.25) ease and staggered fades, and contact info items stagger up from y:100.", "demo": "https://motionprompts.dev/components/poppr-menu/index.html", "prompt": "https://motionprompts.dev/prompts/poppr-menu.md", "page": "https://motionprompts.dev/component/poppr-menu/", "thumb": "https://motionprompts.dev/thumbs/poppr-menu.webp", "preview": "https://motionprompts.dev/previews/poppr-menu.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "none", "duration_range": [ 0.1, 1.5 ], "stagger": 0.01, "assets_required": { "count": 3, "bytes": 496964, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "SVG path-morph curtain with elastic SplitText chars", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "products-lightbox-gallery", "title": "Products Lightbox Gallery", "category": "gallery", "description": "A large draggable canvas holds a 12x12 grid of sneaker product tiles that the user pans by mouse-dragging, with movement GSAP-tweened (x/y, power1.out) for inertial smoothing. Clicking a tile (drag vs click is disambiguated via mousedown/mousemove flags) fades in a full-screen lightbox modal populated with that product's image, name and info via gsap.to opacity 0 to 1.", "demo": "https://motionprompts.dev/components/products-lightbox-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/products-lightbox-gallery.md", "page": "https://motionprompts.dev/component/products-lightbox-gallery/", "thumb": "https://motionprompts.dev/thumbs/products-lightbox-gallery.webp", "preview": "https://motionprompts.dev/previews/products-lightbox-gallery.webm", "motion": { "trigger": "drag", "libs": [ "gsap", "ionicons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 0.2, 0.5 ], "stagger": null, "assets_required": { "count": 5, "bytes": 208771, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "gsap", "motion_signature": "drag-panned giant tile grid, fade lightbox", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "project-page-overlay-animation", "title": "Project Overview Modal", "category": "interactive", "description": "A project index where clicking any list item plays a paused GSAP timeline that slides a white detail overlay up from off-screen (bottom -1200px to 0) while un-rotating it from a 20deg tilt to flat with a power2.out ease; clicking Close or anywhere outside reverses the same timeline, and the overlay content (name, category, copy, link, image) is swapped in from a data array on open.", "demo": "https://motionprompts.dev/components/project-page-overlay-animation/index.html", "prompt": "https://motionprompts.dev/prompts/project-page-overlay-animation.md", "page": "https://motionprompts.dev/component/project-page-overlay-animation/", "thumb": "https://motionprompts.dev/thumbs/project-page-overlay-animation.webp", "preview": "https://motionprompts.dev/previews/project-page-overlay-animation.webm", "motion": { "trigger": "click", "libs": [ "gsap", "phosphor-icons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.2, 0.5 ], "stagger": null, "assets_required": { "count": 5, "bytes": 637615, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "click-triggered overlay slides up from bottom:-1200px to 0 while un-rotating from a CSS-set 20deg about 'bottom center', 0.5s power2.out; close button and any outside click reverse the same paused timeline", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "prototypestudio-scroll-animation", "title": "PrototypeStudio Scroll Animation", "category": "scroll", "description": "Pinned spotlight section scrubbed over five viewport heights with Lenis smooth scroll: a 01/10 counter travels down the section while a centered column of ten project images translates upward, the image crossing the viewport midline brightens to full opacity, and each project name slides up in its own progress window and turns white while active.", "demo": "https://motionprompts.dev/components/prototypestudio-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/prototypestudio-scroll-animation.md", "page": "https://motionprompts.dev/component/prototypestudio-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/prototypestudio-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/prototypestudio-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 500, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.3, 0.3 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1644553, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned scrubbed spotlight column with active-item highlight", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "pure-js-vanilla-image-slider", "title": "Pure JS Vanilla Image Slider", "category": "slider", "description": "A horizontal image slider driven by vertical page scroll: scrollY is mapped to a target translateX and eased toward it with a lerp inside a requestAnimationFrame loop. Each card and its inner image are scaled per-frame by a position-based lens function, so cards grow to 1.5x as they pass the viewport center and shrink toward the edges.", "demo": "https://motionprompts.dev/components/pure-js-vanilla-image-slider/index.html", "prompt": "https://motionprompts.dev/prompts/pure-js-vanilla-image-slider.md", "page": "https://motionprompts.dev/component/pure-js-vanilla-image-slider/", "thumb": "https://motionprompts.dev/thumbs/pure-js-vanilla-image-slider.webp", "preview": "https://motionprompts.dev/previews/pure-js-vanilla-image-slider.webm", "motion": { "trigger": "scroll", "libs": [], "complexity": 3, "pinned": false, "viewport_heights": 1000, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.1, 0.1 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1168368, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "raf-lerp", "motion_signature": "scroll-mapped horizontal lerp track with coverflow lens scaling", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "push-over-overlay-menu", "title": "Minimal Push Overlay Menu", "category": "menu", "description": "A fullscreen overlay menu triggered by clicking the hamburger toggle: a GSAP timeline with a custom 'hop' ease pushes the page content down 100svh while the dark overlay expands via an animated clip-path polygon, its inner content slides up from -50% to 0, the media image fades in, and SplitText line-masked links stagger in with a negative stagger. Clicking again reverses the timeline.", "demo": "https://motionprompts.dev/components/push-over-overlay-menu/index.html", "prompt": "https://motionprompts.dev/prompts/push-over-overlay-menu.md", "page": "https://motionprompts.dev/component/push-over-overlay-menu/", "thumb": "https://motionprompts.dev/thumbs/push-over-overlay-menu.webp", "preview": "https://motionprompts.dev/previews/push-over-overlay-menu.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "CustomEase", "SplitText", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "custom", "duration_range": [ 0.4, 2 ], "stagger": -0.075, "assets_required": { "count": 3, "bytes": 499287, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap+raf", "motion_signature": "click-toggled clip-path overlay pushing page down", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" }, { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "qindustrial-scroll", "title": "Lenis Smooth Scroll + ScrollTrigger", "category": "scroll", "description": "A services list where each row's thumbnail expands from 30% to 100% width while the row itself grows in height as it scrolls into view. Lenis drives smooth scrolling synced to gsap.ticker, and two per-row scrubbed ScrollTrigger instances (created lazily via IntersectionObserver) read self.progress to tween the image width and row height with ease 'none'.", "demo": "https://motionprompts.dev/components/qindustrial-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/qindustrial-scroll.md", "page": "https://motionprompts.dev/component/qindustrial-scroll/", "thumb": "https://motionprompts.dev/thumbs/qindustrial-scroll.webp", "preview": "https://motionprompts.dev/previews/qindustrial-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": 500, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.1, 0.25 ], "stagger": null, "assets_required": { "count": 7, "bytes": 714027, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "per-row scrubbed reveal: as each .service row crosses the viewport its thumbnail widens 30% -> 100% and the row itself grows 150px -> 450px, both linearly mapped from ScrollTrigger progress and then re-issued every frame as a 0.1s ease:'none' gsap.to(), so the geometry lags the scroll by a fixed ~100ms catch-up rather than tracking it rigidly", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "radga-horizontal-scroll-animation", "title": "RADGA Horizontal Scroll Animation", "category": "scroll", "description": "A pinned section turns vertical scroll into a horizontal slide-strip: one ScrollTrigger (pin + scrub over 6x viewport height, Lenis-smoothed) maps scroll progress to translateX of the slides track, adds an opposing parallax x-shift on the current/next images, and an IntersectionObserver slides each slide's title up into view (y: -200 to 0, power2.out) as it becomes visible.", "demo": "https://motionprompts.dev/components/radga-horizontal-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/radga-horizontal-scroll-animation.md", "page": "https://motionprompts.dev/component/radga-horizontal-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/radga-horizontal-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/radga-horizontal-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.5, 0.5 ], "stagger": null, "assets_required": { "count": 5, "bytes": 686532, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-LAGGED", "engine": "gsap+raf", "motion_signature": "scrubbed pinned horizontal track (scrub 1) with counter-parallax on the current and next slide image (0.25x track speed, constant scale 1.35), plus IntersectionObserver-driven title reveals (y -200 -> 0, 0.5s power2.out)", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "radial-rotating-texts", "title": "Radial Rotating Text Layout", "category": "gallery", "description": "Sixty uppercase text labels are laid out in a huge ring using gsap.set with cosine/sine positioning and a per-item rotation. Scrolling the very tall page feeds window.scrollY into an angle offset so gsap.to spins the whole ring with an elastic.out ease, while a gsap-driven custom cursor trails the mouse (power3.out) and hovering any label reveals a preview image inside the cursor via an animated clip-path polygon wipe.", "demo": "https://motionprompts.dev/components/radial-rotating-texts/index.html", "prompt": "https://motionprompts.dev/prompts/radial-rotating-texts.md", "page": "https://motionprompts.dev/component/radial-rotating-texts/", "thumb": "https://motionprompts.dev/thumbs/radial-rotating-texts.webp", "preview": "https://motionprompts.dev/previews/radial-rotating-texts.webm", "motion": { "trigger": "scroll", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": 3000, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.05, 1 ], "stagger": null, "assets_required": { "count": 60, "bytes": 12698956, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scroll-mapped ring rotation with cursor image reveal", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "react-pan-canvas", "title": "Pan-Canvas Video Gallery", "category": "gallery", "description": "A full-viewport canvas holds an oversized 200vw x 200vh grid of film tiles centered with translate(-50%, -50%); on mousemove the gallery is translated the opposite way of the cursor relative to the container center, eased by a 2000ms cubic-bezier CSS transition, so moving the mouse smoothly pans across the grid. Each tile hover-fades its preview still out and a second frame plus a lower-third film credit in; fixed studio chrome (wordmark, nav, viewfinder corner brackets, pan hint) frames the canvas, and on touch devices the reel auto-drifts via a CSS keyframe animation with credits always visible.", "demo": "https://motionprompts.dev/components/react-pan-canvas/index.html", "prompt": "https://motionprompts.dev/prompts/react-pan-canvas.md", "page": "https://motionprompts.dev/component/react-pan-canvas/", "thumb": "https://motionprompts.dev/thumbs/react-pan-canvas.webp", "preview": "https://motionprompts.dev/previews/react-pan-canvas.webm", "motion": { "trigger": "pointer", "libs": [], "complexity": 1, "pinned": false, "viewport_heights": 200, "needs_lenis": false, "ease_family": null, "duration_range": [ 2.4, 52 ], "stagger": null, "assets_required": { "count": 23, "bytes": 2495787, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "css-transition", "motion_signature": "cursor-inverse pan: mousemove writes an absolute translate() on an oversized canvas and a single 2000ms cubic-bezier(0.075,0.82,0.165,1) transition supplies all the inertia — no rAF loop, no lerp, no easing library", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "rejoice-menu", "title": "Rejoice Fullscreen Overlay Menu", "category": "menu", "description": "A fullscreen overlay navigation menu that opens on clicking the 'Menu' button and closes on 'Close'. A single paused GSAP timeline plays/reverses: it animates the overlay clip-path open, staggers the nav links and CTA up with a fade, grows the video preview thumbnail and draws the footer divider from 0 to 100% width.", "demo": "https://motionprompts.dev/components/rejoice-menu/index.html", "prompt": "https://motionprompts.dev/prompts/rejoice-menu.md", "page": "https://motionprompts.dev/component/rejoice-menu/", "thumb": "https://motionprompts.dev/thumbs/rejoice-menu.webp", "preview": "https://motionprompts.dev/previews/rejoice-menu.webm", "motion": { "trigger": "click", "libs": [ "gsap", "phosphor-icons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.25, 2 ], "stagger": 0.05, "assets_required": { "count": 2, "bytes": 361921, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "Paused, reversible GSAP timeline: a top-edge clip-path wipe opens a full-viewport overlay (1s power2.out) while, from the same t=0, links stagger up 60px at 0.05s each (0.75s power1.inOut), a video preview grows 0 -> 200px (1s power2.out) and a footer divider draws 0% -> 100% width (2s power4.out, the tail that sets the 2s total). Close plays the exact same curves backwards.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "responsive-landing-page", "title": "Responsive Landing Page Reveal", "category": "preloader", "description": "On page load a full-screen preloader plays: a numeric counter races from 0 to 100 while an anime.js easeOutExpo timeline reveals the label letter-by-letter and slides it away, then GSAP power4.inOut tweens scale the loader down and wipe the black and red panels (animating height to 0) to uncover the hero GIF via clip-path, staggering in the headline (gsap.from y) and footer images. Entirely time-delayed on load with no user interaction.", "demo": "https://motionprompts.dev/components/responsive-landing-page/index.html", "prompt": "https://motionprompts.dev/prompts/responsive-landing-page.md", "page": "https://motionprompts.dev/component/responsive-landing-page/", "thumb": "https://motionprompts.dev/thumbs/responsive-landing-page.webp", "preview": "https://motionprompts.dev/previews/responsive-landing-page.webm", "motion": { "trigger": "load", "libs": [ "gsap", "anime.js (vendored v3.2.2)" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 2 ], "stagger": 0.05, "assets_required": { "count": 3, "bytes": 882565, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "LOAD-ONESHOT", "engine": "mixed", "motion_signature": "time-delayed full-screen preloader wipe reveal: no interaction and no scroll, a fixed absolute-delay schedule (3s-4.5s starts) whose last tween lands at ~6.25s", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "ripple-displacement-slider", "title": "Ripple Displacement Slider", "category": "slider", "description": "Fullscreen Three.js WebGL slider where a click anywhere fires a radial ripple (custom GLSL shader, GSAP-tweened progress over ~3s) that displaces UVs and crossfades to the next image along the expanding wave front. SplitText simultaneously staggers the masked title chars and description lines out (y:-100%) and animates the incoming slide's text in, all overlaid with mix-blend-mode: difference.", "demo": "https://motionprompts.dev/components/ripple-displacement-slider/index.html", "prompt": "https://motionprompts.dev/prompts/ripple-displacement-slider.md", "page": "https://motionprompts.dev/component/ripple-displacement-slider/", "thumb": "https://motionprompts.dev/thumbs/ripple-displacement-slider.webp", "preview": "https://motionprompts.dev/previews/ripple-displacement-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText", "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.5, 3 ], "stagger": 0.02, "assets_required": { "count": 4, "bytes": 503834, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "webgl-raf", "motion_signature": "click-fired radial displacement wave: a single uProgress uniform ramps 0 → maxCornerDist+0.5 on power2.out, and a sin(age*25) wave damped by exp(-age*10) rides the expanding ring, pushing UVs radially outward while a smoothstep crossfade (width 0.05) swaps textures behind it; SplitText masked char/line reveals run in counterpoint", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "sageeast-3d-scroll", "title": "Sage East 3D Scroll", "category": "scroll", "description": "A fixed 3D perspective slider where ten alternating slides sit at staggered translateZ depths and fly toward the viewer as you scroll a 2000vh page. A per-slide ScrollTrigger (scrub) maps scroll progress to a Z increment, recomputes each slide's opacity via a mapRange fade, and cross-fades a blurred full-screen background image with gsap.to power3.out as each slide reaches the front.", "demo": "https://motionprompts.dev/components/sageeast-3d-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/sageeast-3d-scroll.md", "page": "https://motionprompts.dev/component/sageeast-3d-scroll/", "thumb": "https://motionprompts.dev/thumbs/sageeast-3d-scroll.webp", "preview": "https://motionprompts.dev/previews/sageeast-3d-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 3, "pinned": false, "viewport_heights": 2000, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.3, 1.5 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1361082, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrub-driven translateZ tunnel: each slide's CSS-authored initial Z (-22500 → 0 in 2500px steps) is read once via getComputedStyle and advanced linearly by progress*22500 across 2000vh, with opacity piecewise-mapped from Z (0→0.5 over -5000..-2500, 0.5→1 over -2500..0); no easing on the depth motion itself", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "samuelsiebler-js", "title": "Rotating Hand Animation", "category": "scroll", "description": "A single ScrollTrigger pins the section over eight viewport heights and scrubs a clock-like rod that spins 1800deg via gsap.set(rotationZ) on each frame; every 360deg cycle swaps the intro headline, at cycle 3 a portrait fades in and the paragraphs stagger in, then the rod stretches to full height, scales up 20x, fades out and reveals the giant brand wordmark.", "demo": "https://motionprompts.dev/components/samuelsiebler-js/index.html", "prompt": "https://motionprompts.dev/prompts/samuelsiebler-js.md", "page": "https://motionprompts.dev/component/samuelsiebler-js/", "thumb": "https://motionprompts.dev/thumbs/samuelsiebler-js.webp", "preview": "https://motionprompts.dev/previews/samuelsiebler-js.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 1000, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 0.5 ], "stagger": 0.1, "assets_required": { "count": 1, "bytes": 123923, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "pinned clock-hand rotates 1800deg, scales, wordmark reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sarah-bassett", "title": "Zoomable Image Wall", "category": "gallery", "description": "A full-viewport mosaic wall of 1200 image tiles that reveals on load with a random GSAP grid stagger (scale + opacity, power1.out). Zoom-in/out buttons run a 2.5s power4.inOut GSAP tween that explodes each tile outward and scales it up, and a drag layer lets you pan the zoomed wall with a lerp-smoothed translate3d.", "demo": "https://motionprompts.dev/components/sarah-bassett/index.html", "prompt": "https://motionprompts.dev/prompts/sarah-bassett.md", "page": "https://motionprompts.dev/component/sarah-bassett/", "thumb": "https://motionprompts.dev/thumbs/sarah-bassett.webp", "preview": "https://motionprompts.dev/previews/sarah-bassett.webm", "motion": { "trigger": "drag", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": 150, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.3, 2.5 ], "stagger": null, "assets_required": { "count": 50, "bytes": 3342411, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "mixed", "motion_signature": "grid-stagger reveal, tween zoom, lerp-dragged wall", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "savoirfaire-landing-page-reveal-animation", "title": "SavoirFaire Landing Page Reveal Animation", "category": "preloader", "description": "An automatic on-load preloader that runs a slot-machine style number counter (a masked .count strip and its .count-wrapper are stepped across the screen with chained gsap.timeline power4.inOut tweens), then three stacked star/sparkle SVGs scale from 0 to 45 in sequence to wipe the loader away, and the hero brand word tilts in from a 60deg rotateY into place (power3.out) while the toggle button pops and the masked info lines slide up.", "demo": "https://motionprompts.dev/components/savoirfaire-landing-page-reveal-animation/index.html", "prompt": "https://motionprompts.dev/prompts/savoirfaire-landing-page-reveal-animation.md", "page": "https://motionprompts.dev/component/savoirfaire-landing-page-reveal-animation/", "thumb": "https://motionprompts.dev/thumbs/savoirfaire-landing-page-reveal-animation.webp", "preview": "https://motionprompts.dev/previews/savoirfaire-landing-page-reveal-animation.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.85, 2 ], "stagger": 0.1, "assets_required": { "count": 1, "bytes": 193, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "time-based preloader counter, star wipes, 3D headline reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "savoirfaire-lp", "title": "Savoir-Faire Click Reveal", "category": "interactive", "description": "A full-screen dark editorial landing where every click spawns a random image or autoplaying video card at the pointer. Each card is set with gsap.set (scale 0, slight random rotation) then a gsap.timeline scales it up (random 0.5–1) and simultaneously drifts it 500px upward over 4s while fading in, then fades out and self-removes. A custom sparkle cursor trails the mouse via gsap.to with power2.out, and a click SFX plays on each spawn.", "demo": "https://motionprompts.dev/components/savoirfaire-lp/index.html", "prompt": "https://motionprompts.dev/prompts/savoirfaire-lp.md", "page": "https://motionprompts.dev/component/savoirfaire-lp/", "thumb": "https://motionprompts.dev/thumbs/savoirfaire-lp.webp", "preview": "https://motionprompts.dev/previews/savoirfaire-lp.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.5, 4 ], "stagger": null, "assets_required": { "count": 15, "bytes": 7637544, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "click-spawned media cards scale up and drift", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "scroll-powered-svg-stroke", "title": "Scroll-Powered SVG Stroke Draw", "category": "scroll", "description": "A thick serpentine orange SVG stroke draws itself behind the page content as you scroll, using the classic strokeDasharray/strokeDashoffset technique: the path length is measured on load and a scrubbed ScrollTrigger (ease none) animates the dashoffset to 0 across the spotlight section, with Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/scroll-powered-svg-stroke/index.html", "prompt": "https://motionprompts.dev/prompts/scroll-powered-svg-stroke.md", "page": "https://motionprompts.dev/component/scroll-powered-svg-stroke/", "thumb": "https://motionprompts.dev/thumbs/scroll-powered-svg-stroke.webp", "preview": "https://motionprompts.dev/previews/scroll-powered-svg-stroke.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 4, "bytes": 4911, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrubbed SVG stroke-dashoffset draw on scroll", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "scroll-powered-svg-stroke-2", "title": "Scroll-Powered SVG Stroke Drawing", "category": "scroll", "description": "A tall inline SVG path with a thick orange rounded stroke sits behind a column of content rows; using the strokeDasharray/strokeDashoffset technique, a scrubbed ScrollTrigger (Lenis-smoothed) progressively draws the winding stroke from top to bottom as the user scrolls through the section.", "demo": "https://motionprompts.dev/components/scroll-powered-svg-stroke-2/index.html", "prompt": "https://motionprompts.dev/prompts/scroll-powered-svg-stroke-2.md", "page": "https://motionprompts.dev/component/scroll-powered-svg-stroke-2/", "thumb": "https://motionprompts.dev/thumbs/scroll-powered-svg-stroke-2.webp", "preview": "https://motionprompts.dev/previews/scroll-powered-svg-stroke-2.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 8, "bytes": 406551, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrub-drawn SVG stroke via dashoffset", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "scroll-wave-image-gallery", "title": "Scroll Wave Image Gallery", "category": "gallery", "description": "Vertical gallery of 12 JS-generated images that drift horizontally in a sine-wave pattern as you scroll: each image has its own ScrollTrigger whose progress drives a translateX composed of three layered sine waves (base/flow/detail) scaled to viewport width, plus a horizontal clip-path inset that opens fully when the image is centered on screen. Lenis smooth scroll is hooked into the GSAP ticker, and the last quarter of images progressively shrink in height.", "demo": "https://motionprompts.dev/components/scroll-wave-image-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/scroll-wave-image-gallery.md", "page": "https://motionprompts.dev/component/scroll-wave-image-gallery/", "thumb": "https://motionprompts.dev/thumbs/scroll-wave-image-gallery.webp", "preview": "https://motionprompts.dev/previews/scroll-wave-image-gallery.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 12, "bytes": 1367398, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "Scroll-position-driven, tween-free: each plate's horizontal translate is the sum of three layered sines of (normalizedIndex, scroll progress) — base amp 0.10*vw / freq 1.0 / speed 1.0 / phase 5.0 (driven by 1-progress), flow amp 0.15*vw / freq 5.0 / speed 5.0 / phase 10.0, detail amp 0.025*vw / freq 5.0 / speed 1.5 / phase 2.5 (last two offset by +0.5) — laid on a centering term (vw - offsetWidth)/2 minus 0.1*vw. Simultaneously a clip-path inset opens quadratically as the plate centers: inset = (|progress-0.5|*2)^2 * 20%, so plates arrive fully revealed at mid-viewport and pinch back to 20%/side at the extremes. No easing curve exists; the 'ease' is the sine geometry plus Lenis' default smoothing.", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "seventeenagency-scroll-animation", "title": "SeventeenAgency Scroll Animation", "category": "scroll", "description": "Infinite-scrolling contact page (Lenis infinite mode) where the contact-info section is cloned 10x into a seamless loop: two scrubbed ScrollTriggers per row animate its CSS gap from 1rem to 10rem and back as the row crosses the viewport center, while a fixed vignetted still at screen center cycles through seven captured-light images each time a new row locks onto the center.", "demo": "https://motionprompts.dev/components/seventeenagency-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/seventeenagency-scroll-animation.md", "page": "https://motionprompts.dev/component/seventeenagency-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/seventeenagency-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/seventeenagency-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 14, "bytes": 8941970, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 3, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "Lenis infinite:true" ], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "each row's inline column gap is scrub-expanded 1rem → 10rem (5rem under 1000px) as it approaches the fixed viewport centre, then scrub-collapsed back to 1rem 150px later — an expand/contract pulse per row, riding an infinitely looping Lenis scroll; no tween interpolation at all, progress is written straight to style.gap every frame", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "shaped-section-boundary", "title": "Shaped Section Boundary", "category": "transition", "description": "Stacked full-height sections whose top edge is a shape instead of a straight line: each incoming section carries its own boundary element, painted with `background: inherit` so the edge can never drift from the section colour, and clipped by a `clip-path: polygon()` whose vertices are driven by a single `@property`-registered custom property `--forma`. One scrubbed ScrollTrigger per boundary tweens `--forma` from 0 (flat) to 1 (full shape) over a window that closes at `top 55%`, so the edge has finished moving before the section is read. Five forms ship: wave, chevron, oblique, torn (twelve fixed pseudo-random points) and arch (a real curve via `border-radius`, not a polygon). Smoothed by Lenis; honours prefers-reduced-motion by locking the shape open.", "demo": "https://motionprompts.dev/components/shaped-section-boundary/index.html", "prompt": "https://motionprompts.dev/prompts/shaped-section-boundary.md", "page": "https://motionprompts.dev/component/shaped-section-boundary/", "thumb": "https://motionprompts.dev/thumbs/shaped-section-boundary.webp", "preview": "https://motionprompts.dev/previews/shaped-section-boundary.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scroll-scrubbed clip-path morph on section top edges: one ScrollTrigger per boundary tweens an @property-registered custom property --forma 0→1 over start top bottom → end top 55%, and the polygon() vertices of each shape (wave/chevron/oblique/torn) or the border-radius (arch) are calc() expressions of that number; no tween on any content, no pin, no transform", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sidebar-slide-out-menu", "title": "Sidebar Slide-Out Menu", "category": "menu", "description": "Clicking the bottom-right 'Get the Overlay' toggle slides a column of three cards in from the right edge (right: -110% to 0%) with a 0.075s GSAP stagger on a power4.out ease, while the page content blurs to 15px; clicking any card reverses the tween to slide the cards back out and unblur. Cards expand their copy and swap colours on CSS hover.", "demo": "https://motionprompts.dev/components/sidebar-slide-out-menu/index.html", "prompt": "https://motionprompts.dev/prompts/sidebar-slide-out-menu.md", "page": "https://motionprompts.dev/component/sidebar-slide-out-menu/", "thumb": "https://motionprompts.dev/thumbs/sidebar-slide-out-menu.webp", "preview": "https://motionprompts.dev/previews/sidebar-slide-out-menu.webm", "motion": { "trigger": "click", "libs": [ "gsap", "phosphor-icons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 1 ], "stagger": 0.075, "assets_required": { "count": 1, "bytes": 55862, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "click-toggled staggered card slide-in with background blur", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "silenceo", "title": "3D Scroll Scanner Experience", "category": "3d-webgl", "description": "A full-page scroll experience where a Three.js GLTF model floats and rotates as you scroll, its X-rotation mapped to scroll progress via a Lenis-fed render loop. In a pinned scanner section, a ScrollTrigger onEnter handler plays a scan sound, spins the model a full turn with GSAP, then shrinks it and the scan frame to zero; scrolling back reverses the reveal.", "demo": "https://motionprompts.dev/components/silenceo/index.html", "prompt": "https://motionprompts.dev/prompts/silenceo.md", "page": "https://motionprompts.dev/component/silenceo/", "thumb": "https://motionprompts.dev/thumbs/silenceo.webp", "preview": "https://motionprompts.dev/previews/silenceo.webm", "motion": { "trigger": "scroll", "libs": [ "three", "GLTFLoader", "gsap", "ScrollTrigger", "lenis" ], "complexity": 5, "pinned": true, "viewport_heights": 500, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.5, 1 ], "stagger": null, "assets_required": { "count": 3, "bytes": 889632, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "mixed", "motion_signature": "Scroll-rotated GLTF can, pinned scan-and-vanish", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sofihealth-product-scroll-animation", "title": "SofiHealth Product Scroll Animation", "category": "scroll", "description": "A pinned, scrub-driven scroll section where a Three.js GLTF shaker model spins on its Y-axis while a single ScrollTrigger onUpdate handler maps scroll progress to sliding headers, an expanding circular clip-path mask, and staggered SplitText tooltip reveals. Lenis smooth-scroll feeds ScrollTrigger, and a separate ScrollTrigger reveals the split header characters on enter.", "demo": "https://motionprompts.dev/components/sofihealth-product-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/sofihealth-product-scroll-animation.md", "page": "https://motionprompts.dev/component/sofihealth-product-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/sofihealth-product-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/sofihealth-product-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "three", "GLTFLoader", "lenis", "ionicons" ], "complexity": 5, "pinned": true, "viewport_heights": 1000, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.5, 1 ], "stagger": 0.025, "assets_required": { "count": 1, "bytes": 7252200, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "mixed", "motion_signature": "pinned scrub: 3D model spin + clip-path mask reveal", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "spencergabor-magnetic-cards", "title": "SpencerGabor Magnetic Cards", "category": "cards", "description": "A fanned stack of four cards centered on screen reacts magnetically to the cursor: mouse velocity within a 500px proximity radius (cubic falloff) pushes and tilts the cards, with neighbor influence and an elastic spring-and-friction return to their resting fan layout. Custom physics driven per-frame by gsap.ticker and gsap.set, triggered by moving the mouse over the section.", "demo": "https://motionprompts.dev/components/spencergabor-magnetic-cards/index.html", "prompt": "https://motionprompts.dev/prompts/spencergabor-magnetic-cards.md", "page": "https://motionprompts.dev/component/spencergabor-magnetic-cards/", "thumb": "https://motionprompts.dev/thumbs/spencergabor-magnetic-cards.webp", "preview": "https://motionprompts.dev/previews/spencergabor-magnetic-cards.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.18, 0.2 ], "stagger": null, "assets_required": { "count": 4, "bytes": 608085, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "physics", "motion_signature": "cursor-velocity spring push on fanned card deck", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "stacked-alternating-marquees", "title": "Stacked Alternating Marquees", "category": "scroll", "description": "Four full-width marquee rows stacked with no gap, running continuously in ALTERNATING directions at non-harmonic speeds (26/34/30/22), each row inverting the palette so the opposition is visible at a glance. The rows also lean into the scroll: a single ScrollTrigger reads `getVelocity()` and feeds a push term that speeds each row up in its own direction, decaying at 0.92 per frame so stopping does not leave them racing. Written as one `gsap.ticker` loop rather than CSS `@keyframes` precisely because a CSS animation runs on its own clock and cannot know the scroll exists. The strip content is cloned once at runtime (the copy `aria-hidden`, so categories are not read twice) and the transform wraps at exactly half the measured width, re-measured on `load` and on `fonts.ready` because images change that width. Dressed as a print fair: Archivo Black + Syne Mono, teal, cream and red.", "demo": "https://motionprompts.dev/components/stacked-alternating-marquees/index.html", "prompt": "https://motionprompts.dev/prompts/stacked-alternating-marquees.md", "page": "https://motionprompts.dev/component/stacked-alternating-marquees/", "thumb": "https://motionprompts.dev/thumbs/stacked-alternating-marquees.webp", "preview": "https://motionprompts.dev/previews/stacked-alternating-marquees.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 5, "bytes": 189542, "root_absolute_paths": true }, "mobile_behavior": { "kind": "no-mobile-handling", "media_queries": 0, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "gsap", "motion_signature": "four stacked marquee rows on a single gsap.ticker loop, alternating direction at non-harmonic speeds 26/34/30/22 px/s, wrapping at half the measured strip width after a runtime clone; a lone ScrollTrigger feeds getVelocity()/900 clamped to ±2.5 as a push term that decays 0.92 per frame — no tween, no scrub, no CSS keyframes", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "steelworks-landing-page-reveal", "title": "Steelworks Landing Page Reveal", "category": "preloader", "description": "On-load preloader and hero reveal: a white progress bar scales across a dark overlay that wipes away via clip-path, five small rotated images glide in as a centered row with CustomEase, then the side images fly off-screen while the center one expands to a fullscreen hero as nav, headline and social links reveal line by line with SplitText masks.", "demo": "https://motionprompts.dev/components/steelworks-landing-page-reveal/index.html", "prompt": "https://motionprompts.dev/prompts/steelworks-landing-page-reveal.md", "page": "https://motionprompts.dev/component/steelworks-landing-page-reveal/", "thumb": "https://motionprompts.dev/thumbs/steelworks-landing-page-reveal.webp", "preview": "https://motionprompts.dev/previews/steelworks-landing-page-reveal.webm", "motion": { "trigger": "load", "libs": [ "gsap", "SplitText", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 1, 1.5 ], "stagger": 0.1, "assets_required": { "count": 5, "bytes": 861073, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "single on-load GSAP timeline (~7.4s wall incl. 1s delay), zero scroll input: brass bar scales in on left origin then retracts from right, black full-viewport overlay clip-path wipes up overlapping it, five 0.2-scaled rotated cards slide from off-screen-left into a centered row on a 0.025s cascade, the outer four fly off ±100vw while the middle card scales to fullscreen, then masked SplitText lines rise y 125%->0 at 0.1 stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "sticky-cards", "title": "Sticky Stacking Cards on Scroll", "category": "cards", "description": "Full-width service cards that pin at 35% of the viewport on scroll and stack under each incoming card: every pinned card's inner wrapper is scrubbed upward by a decreasing multiple of 14vh, producing a layered peel effect, while the intro headline stays pinned (no pin spacing) between the first and last card. Driven by GSAP ScrollTrigger with Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/sticky-cards/index.html", "prompt": "https://motionprompts.dev/prompts/sticky-cards.md", "page": "https://motionprompts.dev/component/sticky-cards/", "thumb": "https://motionprompts.dev/thumbs/sticky-cards.webp", "preview": "https://motionprompts.dev/previews/sticky-cards.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 5, "bytes": 1149316, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "pinned full-bleed cards stacking via scrubbed vh lift", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sticky-cards-2", "title": "Sticky Cards ScrollTrigger", "category": "scroll", "description": "A stack of full-screen sections is pinned one after another with ScrollTrigger (pin, pinSpacing:false, scrub) so each card holds in place while the next scrolls over it, and each pinned image scales from 1 down to 0.5 as the following section approaches. The hero heading fades its opacity from 1 to 0 across the first 400vh of scroll.", "demo": "https://motionprompts.dev/components/sticky-cards-2/index.html", "prompt": "https://motionprompts.dev/prompts/sticky-cards-2.md", "page": "https://motionprompts.dev/component/sticky-cards-2/", "thumb": "https://motionprompts.dev/thumbs/sticky-cards-2.webp", "preview": "https://motionprompts.dev/previews/sticky-cards-2.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 4, "pinned": true, "viewport_heights": 400, "needs_lenis": false, "ease_family": "none", "duration_range": [ 0.2, 0.2 ], "stagger": null, "assets_required": { "count": 6, "bytes": 889718, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "stacked pinned full-screen cards, images scrub-scale down", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sticky-cards-ashfall-rebuild-js", "title": "Ashfall Sticky Cards Scroll", "category": "cards", "description": "Five image cards stacked in a centered container are revealed one at a time while a Lenis-driven, ScrollTrigger-pinned section (4 viewport heights) is scrubbed: each front card scales down to 0.5 and rotates 10deg while its image zooms to 1.5, and the next card slides up from y:100% to y:0% to take its place.", "demo": "https://motionprompts.dev/components/sticky-cards-ashfall-rebuild-js/index.html", "prompt": "https://motionprompts.dev/prompts/sticky-cards-ashfall-rebuild-js.md", "page": "https://motionprompts.dev/component/sticky-cards-ashfall-rebuild-js/", "thumb": "https://motionprompts.dev/thumbs/sticky-cards-ashfall-rebuild-js.webp", "preview": "https://motionprompts.dev/previews/sticky-cards-ashfall-rebuild-js.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": "none", "duration_range": [ 1, 1 ], "stagger": null, "assets_required": { "count": 5, "bytes": 1649534, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed pinned stack, cards shrink-rotate as next rises", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "sticky-image-minimap", "title": "Sticky Image Minimap", "category": "scroll", "description": "A tall scrolling column of full-size images paired with a sticky vertical minimap of thumbnails; a GSAP ScrollTrigger created per image fires onToggle as each image passes the viewport center (start 'top center', end 'bottom center'), and gsap.to animates the matching thumbnail's border, opacity, scale (1.3) and z-index to highlight it. Triggered by scroll.", "demo": "https://motionprompts.dev/components/sticky-image-minimap/index.html", "prompt": "https://motionprompts.dev/prompts/sticky-image-minimap.md", "page": "https://motionprompts.dev/component/sticky-image-minimap/", "thumb": "https://motionprompts.dev/thumbs/sticky-image-minimap.webp", "preview": "https://motionprompts.dev/previews/sticky-image-minimap.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.3 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1696005, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-THRESHOLD", "engine": "gsap", "motion_signature": "per-image ScrollTrigger toggles sticky thumbnail highlight — discrete boolean state change at viewport center, 0.3s power1.out tween of opacity 0.5↔1, scale 1↔1.3, zIndex 1↔10000; no scrub, no continuous scroll mapping, no inertia", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "reveal-on-enter" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "stories", "title": "Stories Slideshow", "category": "slider", "description": "A fullscreen Stories-style slideshow that auto-advances every 4s and can be stepped forward/back by clicking the left/right half of the screen. GSAP tweens drive an animated clip-path image reveal, a scale-and-rotate crossfade between story images, a segmented progress bar per story, sliding masked text swaps for the profile name and title, and a blurred custom cursor that follows the pointer and reads Prev/Next. Presented as 'Facet', a directory spotlighting independent design studios and their founders.", "demo": "https://motionprompts.dev/components/stories/index.html", "prompt": "https://motionprompts.dev/prompts/stories.md", "page": "https://motionprompts.dev/component/stories/", "thumb": "https://motionprompts.dev/thumbs/stories.webp", "preview": "https://motionprompts.dev/previews/stories.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.3, 4 ], "stagger": null, "assets_required": { "count": 6, "bytes": 329088, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "auto-advancing fullscreen stories: a 4s linear progress segment drives a setTimeout chain; each change wipes in a new image with a 1s power4.inOut clip-path polygon while the outgoing image scales 1->2 and rotates -25deg against the incoming image scaling 2->1 from +25deg (mirrored on 'prev'), and masked text rows slide 24/48px out and back in on 0.5s tweens delayed 0.4s", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "story-world-carousel-slider", "title": "Story World Carousel Slider", "category": "slider", "description": "A fullscreen click-advanced carousel where each click slides the current image left (x:-500) while the next slide is revealed by animating its clip-path from a collapsed right edge to full, its image easing in from x:250. All tweens use a custom GSAP 'hop' CustomEase, and a horizontal 'pm' timeline animates flex-grow so the active hour label expands while the others collapse, looping infinitely.", "demo": "https://motionprompts.dev/components/story-world-carousel-slider/index.html", "prompt": "https://motionprompts.dev/prompts/story-world-carousel-slider.md", "page": "https://motionprompts.dev/component/story-world-carousel-slider/", "thumb": "https://motionprompts.dev/thumbs/story-world-carousel-slider.webp", "preview": "https://motionprompts.dev/previews/story-world-carousel-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "CustomEase" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.3, 1.5 ], "stagger": null, "assets_required": { "count": 5, "bytes": 927140, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "html/body height fija en vh" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-advanced clip-path wipe: the incoming slide's clip-path opens left-to-right over 1.5s on the custom 'hop' ease while its image counter-slides from x:250 to 0 and the outgoing image drifts to x:-500 — a parallax offset between wipe edge and image. In parallel every hour label in the .timeline shifts its flex-grow one slot down the 5/4/3/1.5/1/0 ladder on the same 1.5s 'hop', so the hour strip re-proportions as one continuous width redistribution rather than a translate.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "studiodialect-image-gallery", "title": "StudioDialect 3D Spiral Image Gallery", "category": "3d-webgl", "description": "Scroll-driven 3D spiral gallery built with Three.js: 75 curved tiles textured with 10 photos wind down a five-revolution helix, and a custom shader dims each tile as it turns away from the camera. Lenis scroll velocity spins the spiral (with decay) while scroll progress lerps the camera down through the helix; mouse movement adds a subtle X/Z parallax tilt on desktop.", "demo": "https://motionprompts.dev/components/studiodialect-image-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/studiodialect-image-gallery.md", "page": "https://motionprompts.dev/component/studiodialect-image-gallery/", "thumb": "https://motionprompts.dev/thumbs/studiodialect-image-gallery.webp", "preview": "https://motionprompts.dev/previews/studiodialect-image-gallery.webm", "motion": { "trigger": "scroll", "libs": [ "three", "lenis" ], "complexity": 5, "pinned": false, "viewport_heights": 150, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 2.4 ], "stagger": null, "assets_required": { "count": 12, "bytes": 1806852, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "webgl-raf", "motion_signature": "scroll-velocity spun 3D helix with camera lerp", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "svg-image-hover-effect", "title": "SVG Scribble Draw-On Image Hover", "category": "hover", "description": "A 3x2 grid of square image cards, each overlaid with two oversized scribbled SVG paths. On mouseenter the strokes draw themselves on (strokeDashoffset animated from full path length to 0 via getTotalLength) while their stroke-width swells from 200 to 700, and the card title rises word by word with a SplitText mask; on mouseleave everything reverses.", "demo": "https://motionprompts.dev/components/svg-image-hover-effect/index.html", "prompt": "https://motionprompts.dev/prompts/svg-image-hover-effect.md", "page": "https://motionprompts.dev/component/svg-image-hover-effect/", "thumb": "https://motionprompts.dev/thumbs/svg-image-hover-effect.webp", "preview": "https://motionprompts.dev/previews/svg-image-hover-effect.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "SplitText", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.5, 1.5 ], "stagger": 0.05, "assets_required": { "count": 6, "bytes": 1026000, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap+raf", "motion_signature": "Hover-triggered dual-layer SVG draw-on: two oversized scribble paths per card are dash-offset to their full getTotalLength() at init and tweened to 0 over 1.5s with power2.out (a fast initial sweep that decays into a slow tail, reading like a pencil stroke running out of speed), while the masked SplitText title rises yPercent 100->0 in 0.75s power3.out, 0.075s per word, entering 0.35s into the draw. Exit is deliberately asymmetric and faster — 1s un-draw, 0.5s word retreat staggered 0.05s from the end — and each crossing kills and rebuilds the timeline, so a rapid in/out re-fires from wherever the strokes happen to be. No scroll coupling of any kind; Lenis is present only as ambient page smoothing.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "svg-stroke-page-transition", "title": "SVG Stroke Page Transition", "category": "transition", "description": "Page transition where two full-screen squiggly SVG paths draw themselves in via animated strokeDashoffset while their stroke-width swells from 200 to 700, wiping the viewport, then keep drawing out as the stroke thins back to reveal the new page. Triggered by clicking the navbar links routing between three hero pages.", "demo": "https://motionprompts.dev/components/svg-stroke-page-transition/index.html", "prompt": "https://motionprompts.dev/prompts/svg-stroke-page-transition.md", "page": "https://motionprompts.dev/component/svg-stroke-page-transition/", "thumb": "https://motionprompts.dev/thumbs/svg-stroke-page-transition.webp", "preview": "https://motionprompts.dev/previews/svg-stroke-page-transition.webm", "motion": { "trigger": "click", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 0.3, 1 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "gsap", "motion_signature": "click-triggered SVG stroke draw wipe overlay: two full-screen squiggle paths run strokeDashoffset length->0 while attr stroke-width fattens 200->700 (leave), then offset->-length while stroke-width thins back to 200 (enter); both 1s power1.inOut, simultaneous, no scroll and no inertia", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [], "conflicts_with": [] }, { "slug": "telescope-img-scroll-animation", "title": "Telescope Image Scroll Animation", "category": "scroll", "description": "A pinned banner scrubbed over four viewport heights with Lenis smooth scroll: the image container scales up from zero while seven stacked silhouette-masked copies of the same photo grow at staggered scales, creating a telescoping lens-in-lens depth effect. Two intro words slide apart horizontally and the centered headline reveals word-by-word, all driven by a single ScrollTrigger onUpdate reading self.progress.", "demo": "https://motionprompts.dev/components/telescope-img-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/telescope-img-scroll-animation.md", "page": "https://motionprompts.dev/component/telescope-img-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/telescope-img-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/telescope-img-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 2, "bytes": 212614, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned 400vh scrub where a single onUpdate maps scroll progress linearly onto transforms: container scale 0→1, six silhouette-masked copies each lerping from initialScale 0.9−i*0.2 (layer 6 starts at −0.1, flipped) toward 1 over progress/0.9 — a telescoping lens-in-lens zoom; two intro words counter-slide horizontally ±progress*50vw; headline words fade in one by one across progress 0.7→0.9. No tweens, no eases: all smoothing comes from scrub:1 plus Lenis inertia", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "telescope-scroll-animation", "title": "Telescope Scroll Animation", "category": "scroll", "description": "'Afterimage', a pinned spotlight gallery of long-exposure photographs in colored light. Scrolling first splits the 'After / Image' intro text apart and scales a background image up from zero, then scrolls a vertical column of frame titles through a diamond-shaped (telescope) clip-path viewfinder while thumbnails fly along a quadratic bezier arc; the title nearest the viewport center highlights and swaps the full-bleed background image. Driven by a single ScrollTrigger (pin + scrub over 10x viewport height, Lenis-smoothed) whose onUpdate maps scroll progress across phased ranges with gsap.set.", "demo": "https://motionprompts.dev/components/telescope-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/telescope-scroll-animation.md", "page": "https://motionprompts.dev/component/telescope-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/telescope-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/telescope-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 1000, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.3, 0.3 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1700654, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned scrub gallery, titles column plus bezier-arc thumbnails", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "text-hover-effect", "title": "Text Hover Image Ring", "category": "hover", "description": "Hovering a highlighted word in the hero paragraph reveals a ring of 11 images that continuously orbits around the cursor. The images fan out on a circle via GSAP: a gsap.ticker loop advances the rotation angle each frame while gsap.to tweens each item's x/y, opacity in and out (0.5s, power1.out) with lerped cursor-following.", "demo": "https://motionprompts.dev/components/text-hover-effect/index.html", "prompt": "https://motionprompts.dev/prompts/text-hover-effect.md", "page": "https://motionprompts.dev/component/text-hover-effect/", "thumb": "https://motionprompts.dev/thumbs/text-hover-effect.webp", "preview": "https://motionprompts.dev/previews/text-hover-effect.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power1", "duration_range": [ 0.5, 0.5 ], "stagger": null, "assets_required": { "count": 11, "bytes": 1612120, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh", "asigna window.onload" ], "cluster": "POINTER-CHASE", "engine": "gsap+raf", "motion_signature": "cursor-following orbiting image ring on word hover", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "window-onload" ], "conflicts_with": [] }, { "slug": "text-reveal-animation", "title": "Text Reveal Animation", "category": "text", "description": "Char-level text reveal built on GSAP SplitText: each character slides in from x:100 with a 20-degree skew and fades to place (power3.out, 0.65s), staggered 0.05s by its index within its own line so all lines animate in parallel. Three trigger modes across full-height sections: on page load, on scroll enter (replays entering, resets when scrolled back above), and scrubbed between viewport positions, all under Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/text-reveal-animation/index.html", "prompt": "https://motionprompts.dev/prompts/text-reveal-animation.md", "page": "https://motionprompts.dev/component/text-reveal-animation/", "thumb": "https://motionprompts.dev/thumbs/text-reveal-animation.webp", "preview": "https://motionprompts.dev/previews/text-reveal-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.65, 0.65 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "per-char skewed slide-in (x 100→0, opacity 0→1, skewX 20→0, 0.65s power3.out), stagger by index within each line so all lines fire in parallel", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "the-happy-few", "title": "The Quiet Crowd Landing Reveal", "category": "preloader", "description": "On page load a GSAP timeline wipes a clip-path preloader and spins a loader, then reveals the hero: heading characters (manually split into spans) slide up with a staggered power4.out tween while a circular hero image scales in and rotates infinitely. Moving the cursor during the load spawns emoji particles that pop in with a back.out ease and drop off-screen.", "demo": "https://motionprompts.dev/components/the-happy-few/index.html", "prompt": "https://motionprompts.dev/prompts/the-happy-few.md", "page": "https://motionprompts.dev/component/the-happy-few/", "thumb": "https://motionprompts.dev/thumbs/the-happy-few.webp", "preview": "https://motionprompts.dev/previews/the-happy-few.webm", "motion": { "trigger": "pointer", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.35, 20 ], "stagger": null, "assets_required": { "count": 8, "bytes": 3092436, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "Fixed-delay page-load choreography: a full-viewport clip-path preloader wipes upward on power4.inOut at t=5s while a square loader half-turns twice then shrinks to zero; on its completion the heading characters (manually split into spans, CSS-parked at translateY(200px)) slide up on power4.out with a 0.25s total-amount stagger per row while an inline SVG orbit mark scales 0->1 and enters a 20s linear infinite rotation. During the load window a >400px cursor jump spawns a sized emoji that pops in on back.out(1.75) and, after a ~0.5-0.7s hold, falls past window.innerHeight on power2.in and removes itself. No scroll, no rAF, no interpolation loop.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [] }, { "slug": "thefirstthelast-scroll-animation", "title": "TheFirstTheLast Scroll Animation", "category": "scroll", "description": "A pinned section where six rotated product cards stack up one after another from the bottom of the viewport as you scroll, then fly off toward the top-left corner. A single ScrollTrigger (pin + scrub over 8x viewport height, Lenis-smoothed) drives an onUpdate handler that maps scroll progress to each card's y-entry and staggered x/y exit offset.", "demo": "https://motionprompts.dev/components/thefirstthelast-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/thefirstthelast-scroll-animation.md", "page": "https://motionprompts.dev/component/thefirstthelast-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/thefirstthelast-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/thefirstthelast-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 800, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 6, "bytes": 703746, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned scrubbed card stack, index-staggered sequential fly-off", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "threejs-slider", "title": "ThreeJS Infinite Slider", "category": "slider", "description": "Infinite vertical slider built entirely in Three.js (no GSAP): ten textured planes loop endlessly inside a WebGL scene, driven by mouse wheel, drag and touch with lerped smoothing and momentum friction. Scroll velocity bends each plane's vertices along Z with a sine falloff, creating a directional curvature distortion, while an HTML title and counter track the slide closest to center.", "demo": "https://motionprompts.dev/components/threejs-slider/index.html", "prompt": "https://motionprompts.dev/prompts/threejs-slider.md", "page": "https://motionprompts.dev/component/threejs-slider/", "thumb": "https://motionprompts.dev/thumbs/threejs-slider.webp", "preview": "https://motionprompts.dev/previews/threejs-slider.webm", "motion": { "trigger": "wheel", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 10, "bytes": 681616, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel", "reclama el primer canvas del documento" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "webgl-raf", "motion_signature": "wheel/drag-driven infinite WebGL plane stack, vertex bend", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner", "first-canvas" ], "conflicts_with": [] }, { "slug": "threejs-slider-final", "title": "ThreeJS Curved Distortion Slider", "category": "slider", "description": "An infinite horizontal Three.js image slider built from textured PlaneGeometry meshes whose vertices bend into a radial curve as you scroll or drag. Wheel, touch and arrow-key input feed velocity-tracked position and distortion factors that are lerped every frame, so faster flicks warp the slides more and the whole strip wraps seamlessly.", "demo": "https://motionprompts.dev/components/threejs-slider-final/index.html", "prompt": "https://motionprompts.dev/prompts/threejs-slider-final.md", "page": "https://motionprompts.dev/component/threejs-slider-final/", "thumb": "https://motionprompts.dev/thumbs/threejs-slider-final.webp", "preview": "https://motionprompts.dev/previews/threejs-slider-final.webm", "motion": { "trigger": "wheel", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 5, "bytes": 614728, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden", "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "webgl-raf", "motion_signature": "wheel/drag/arrow-key lerped infinite WebGL strip, velocity-driven radial vertex bend with momentum decay", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner", "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "threejs-video-gallery", "title": "ThreeJS 3D Video Gallery", "category": "3d-webgl", "description": "A Three.js WebGL grid of video-textured planes curved into a parabolic wall, each plane mapped to a looping muted video texture. Mouse movement drives a per-frame requestAnimationFrame loop that applies parallax, oscillation and rotation to every plane, eases the camera lookAt target, and tilts the CSS-3D headline via a cubic-bezier transform.", "demo": "https://motionprompts.dev/components/threejs-video-gallery/index.html", "prompt": "https://motionprompts.dev/prompts/threejs-video-gallery.md", "page": "https://motionprompts.dev/component/threejs-video-gallery/", "thumb": "https://motionprompts.dev/thumbs/threejs-video-gallery.webp", "preview": null, "motion": { "trigger": "pointer", "libs": [ "three" ], "complexity": 4, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 1.8 ], "stagger": null, "assets_required": { "count": 10, "bytes": 10852163, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body overflow:hidden" ], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "mouse-lerped (0.05) camera lookAt across a parabolic WebGL video wall; each of the 49 planes adds randomized parallax and a sin(time+phase)*mouseDistance*0.1 oscillation, while the CSS-3D headline tilts on a 0.5s easeOutCubic transition", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-lock" ], "conflicts_with": [] }, { "slug": "truekindskincare-landing-page-reveal-javascript", "title": "TrueKind Landing Page Reveal", "category": "preloader", "description": "A preloader-to-hero landing reveal driven by a single GSAP timeline with a custom 'hop' ease: a two-digit counter rolls through milestone numbers (00, 27, 65, 98, 99) with a staggered vertical roll, the 'KindRoot' logo words slide together, a vertical divider scales up and fades, then two dark blocks wipe upward via clip-path while the background hero image scales from 1.5 to 1 and the nav, masked headline lines, paragraph and CTA pill slide and scale into place. Plays automatically once on page load.", "demo": "https://motionprompts.dev/components/truekindskincare-landing-page-reveal-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/truekindskincare-landing-page-reveal-javascript.md", "page": "https://motionprompts.dev/component/truekindskincare-landing-page-reveal-javascript/", "thumb": "https://motionprompts.dev/thumbs/truekindskincare-landing-page-reveal-javascript.webp", "preview": "https://motionprompts.dev/previews/truekindskincare-landing-page-reveal-javascript.webm", "motion": { "trigger": "load", "libs": [ "gsap", "CustomEase", "ionicons" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "custom", "duration_range": [ 0.25, 2 ], "stagger": 0.075, "assets_required": { "count": 1, "bytes": 160547, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "Autoplay one-shot preloader: five 2-digit counter pairs roll up and out on a 1s-per-index cadence (0.075s per-digit stagger), all driven by a single CustomEase \"hop\" = cubic-bezier(0.9, 0, 0.1, 1) — an extreme symmetric ease-in-out that holds still, snaps through the middle, then settles, so every move reads as a hard mechanical flick rather than an organic curve. The counter hands off to a vertical divider that scaleY-wipes down from the top, a two-panel clip-path curtain that lifts the .block overlay, and a slow 2s scale 1.5->1 push-out of the hero image on the same hop curve, with nav/headline/CTA sliding up beneath on 1.5s tweens. No scroll input, no rAF, no physics — a fixed-length ~9s scripted sequence.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [ "entry-veil" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" } ] }, { "slug": "tunnel", "title": "3D Tunnel Image Slider Carousel", "category": "3d-webgl", "description": "A full-screen animated monochrome tunnel, rendered as a Three.js fragment-shader plane, sits behind ten framed cinematic film stills laid out along the Z axis inside a CSS perspective container. Smooth scrolling via Lenis feeds a GSAP ScrollTrigger with scrub:1 whose onUpdate handlers push each slide's translateZ toward the camera and fade it in through a Z-to-opacity mapping, while the same scroll progress drives the shader's scrollOffset uniform to warp the tunnel in sync. Presented as the showreel of a film and color studio, 'Tunnel Vision'.", "demo": "https://motionprompts.dev/components/tunnel/index.html", "prompt": "https://motionprompts.dev/prompts/tunnel.md", "page": "https://motionprompts.dev/component/tunnel/", "thumb": "https://motionprompts.dev/thumbs/tunnel.webp", "preview": "https://motionprompts.dev/previews/tunnel.webm", "motion": { "trigger": "scroll", "libs": [ "three", "gsap", "ScrollTrigger", "lenis" ], "complexity": 5, "pinned": false, "viewport_heights": 2000, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.3, 1.8 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1489903, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "webgl-raf", "motion_signature": "scrub-1 z-depth push of 10 fixed cards through a 500px-perspective stage over 2000vh, plus a bounded sine idle drift (±120px Z) whose speed is energised by Lenis scroll velocity and decays 0.94/frame; a full-viewport polar-sine tunnel shader behind it is driven by the same combined value", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "turbulent-inversion-lens-hover-effect-javascript", "title": "Turbulent Inversion Lens Hover Effect", "category": "hover", "description": "A full-viewport Three.js plane renders a portrait through a fragment shader; moving the cursor drives a lerped mask whose radius grows on hover, and inside that circular lens the image is converted to inverted grayscale with animated fBm turbulence jittering the mask edge.", "demo": "https://motionprompts.dev/components/turbulent-inversion-lens-hover-effect-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/turbulent-inversion-lens-hover-effect-javascript.md", "page": "https://motionprompts.dev/component/turbulent-inversion-lens-hover-effect-javascript/", "thumb": "https://motionprompts.dev/thumbs/turbulent-inversion-lens-hover-effect-javascript.webp", "preview": "https://motionprompts.dev/previews/turbulent-inversion-lens-hover-effect-javascript.webm", "motion": { "trigger": "scroll", "libs": [ "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 1, "bytes": 228381, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-CHASE", "engine": "webgl-raf", "motion_signature": "rAF-lerped shader lens inverting image on hover; 8-octave fBm turbulence jitters the circular mask edge", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "var-font-anim", "title": "ScrollTrigger Variable Font Marquee", "category": "text", "description": "Four horizontal image marquees drift sideways as you scroll (gsap.fromTo on x driven by a scrubbed ScrollTrigger), while SplitType splits the interspersed word headings into characters whose variable fontWeight is tweened from 100 to 900 with a staggered, scrubbed ScrollTrigger. Lenis provides the smooth scroll that ScrollTrigger reads.", "demo": "https://motionprompts.dev/components/var-font-anim/index.html", "prompt": "https://motionprompts.dev/prompts/var-font-anim.md", "page": "https://motionprompts.dev/component/var-font-anim/", "thumb": "https://motionprompts.dev/thumbs/var-font-anim.webp", "preview": "https://motionprompts.dev/previews/var-font-anim.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitType", "lenis" ], "complexity": 3, "pinned": false, "viewport_heights": 150, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.5, 1 ], "stagger": 0.35, "assets_required": { "count": 18, "bytes": 2682930, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "scrub-driven marquee drift with per-char weight wave; position is a pure linear function of scroll progress (ease:'none' + scrub:true), all smoothing comes from Lenis and scrub's default catch-up", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "voku-image-slider", "title": "Voku Image Slider", "category": "slider", "description": "Infinite horizontal image slider with 9 slides arranged along a cosine arc: each rAF frame computes a modular wrap position per slide and applies it with gsap.set, enlarging and lifting the center slide while side slides shrink to 0.25x and drop along the arc. Driven by mouse wheel and touch drag with a 0.05 lerp, and a caption at the bottom updates to the slide closest to center.", "demo": "https://motionprompts.dev/components/voku-image-slider/index.html", "prompt": "https://motionprompts.dev/prompts/voku-image-slider.md", "page": "https://motionprompts.dev/component/voku-image-slider/", "thumb": "https://motionprompts.dev/thumbs/voku-image-slider.webp", "preview": "https://motionprompts.dev/previews/voku-image-slider.webm", "motion": { "trigger": "wheel", "libs": [ "gsap" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": null, "stagger": null, "assets_required": { "count": 9, "bytes": 1749427, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "CAPTURED-VIRTUAL-SCROLL", "engine": "raf-lerp", "motion_signature": "rAF-lerped (0.05) infinite coverflow arc over a 900px virtual track: cosine arc drop (200px) + center lift (100px), scale 1→0.25 with distance, zIndex depth; wheel (deltaY*0.5) and touch-drag (delta*1.2) driven", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "voltlites-scroll-animation", "title": "Voltlites Pinned Hero Zoom-Out Reveal", "category": "scroll", "description": "Hero pinned for four viewport heights where a 3x3 spotlight image grid (300% of the viewport) scales from 1 to 0.5 while each image counter-zooms from 1.25 to 1, a fixed logo shrinks from 6x (2x on mobile) and travels from bottom to top, the footer tagline blurs away, and the SplitText headline plus CTA fade in word by word. A second scrubbed ScrollTrigger on the next section slides the hero up 25% under a darkening overlay as an exit parallax; driven by manual lerp/mapRange in onUpdate with Lenis smooth scroll.", "demo": "https://motionprompts.dev/components/voltlites-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/voltlites-scroll-animation.md", "page": "https://motionprompts.dev/component/voltlites-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/voltlites-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/voltlites-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.3, 0.3 ], "stagger": null, "assets_required": { "count": 10, "bytes": 1086519, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "pinned hero grid zoom-out, scroll-mapped lerps", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "voyeurverite-scroll-animation", "title": "VoyeurVerite Scroll Animation", "category": "scroll", "description": "Pinned hero scrubbed over five viewport heights with four manual phases: the foreground image clips into a central vertical slit while a dark overlay fades in, then rotates to 65deg, scales to zero over sliding background text columns as a red overlay flashes on, and finally two outro images wipe in via clip-path from top and bottom before a SplitText line-masked headline staggers up at 90% progress.", "demo": "https://motionprompts.dev/components/voyeurverite-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/voyeurverite-scroll-animation.md", "page": "https://motionprompts.dev/component/voyeurverite-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/voyeurverite-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/voyeurverite-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 500, "needs_lenis": true, "ease_family": "power3", "duration_range": [ 0.25, 0.75 ], "stagger": -0.05, "assets_required": { "count": 3, "bytes": 252243, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned hero, scrubbed multi-phase clip/rotate/scale collapse", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "vucko-scroll-animation-javascript", "title": "Vucko Scroll Animation", "category": "scroll", "description": "A tiny centered video preview grows from a 0.25 thumbnail to full scale as the intro section scrolls into view, driven by a GSAP ScrollTrigger scrub timeline (start top bottom, end top 10%) whose onUpdate interpolates translateY, scale, gap and a two-phase title font-size. A requestAnimationFrame loop applies the transforms and adds an eased mouse-follow horizontal parallax, all under Lenis smooth scroll.", "demo": "https://motionprompts.dev/components/vucko-scroll-animation-javascript/index.html", "prompt": "https://motionprompts.dev/prompts/vucko-scroll-animation-javascript.md", "page": "https://motionprompts.dev/component/vucko-scroll-animation-javascript/", "thumb": "https://motionprompts.dev/thumbs/vucko-scroll-animation-javascript.webp", "preview": "https://motionprompts.dev/previews/vucko-scroll-animation-javascript.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "none", "duration_range": null, "stagger": null, "assets_required": { "count": 1, "bytes": 247841, "root_absolute_paths": true }, "mobile_behavior": { "kind": "disabled-below-breakpoint", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-WELDED", "engine": "gsap+raf", "motion_signature": "scrubbed scale-up reveal with rAF mouse parallax — scroll progress linearly interpolates translateY (-105..-135% → 0), scale (0.25 → 1), gap (2 → 1em) and a two-segment font-size ramp (80→40px over the first 40% of progress, then 40→20px), while horizontal mouse offset is exponentially smoothed at lerp 0.05 and gated off once scale ≥ 0.95", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "waabi-scroll-animation", "title": "Waabi Scroll Animation", "category": "scroll", "description": "Hero pinned for 3.5 viewport heights with Lenis smooth scroll and a scrubbed ScrollTrigger whose progress is mapped manually: the header slides up, the copy is revealed word by word via SplitText then fades out, and the fullscreen hero image shrinks into a 150px rounded card. A following section parallax-scrolls four image columns upward at different speeds.", "demo": "https://motionprompts.dev/components/waabi-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/waabi-scroll-animation.md", "page": "https://motionprompts.dev/component/waabi-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/waabi-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/waabi-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "SplitText", "lenis" ], "complexity": 5, "pinned": true, "viewport_heights": 350, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.2, 0.5 ], "stagger": null, "assets_required": { "count": 17, "bytes": 3273218, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "pinned hero scrub (header slide-up + word-by-word reveal + fullscreen image shrinking to a 150px rounded card), then a 4-column image parallax over the next section", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "warp-slider", "title": "Hero Warp Slider", "category": "slider", "description": "A full-screen WebGL hero slider where clicking anywhere advances to the next image through an expanding lens-warp bubble rendered by a Three.js fragment shader. A gsap.fromTo tween drives the shader's uProgress uniform (2.5s, power2.inOut) to grow the distortion sphere, while a GSAP/SplitText timeline slides the per-character title and per-line description text out and back in.", "demo": "https://motionprompts.dev/components/warp-slider/index.html", "prompt": "https://motionprompts.dev/prompts/warp-slider.md", "page": "https://motionprompts.dev/component/warp-slider/", "thumb": "https://motionprompts.dev/thumbs/warp-slider.webp", "preview": "https://motionprompts.dev/previews/warp-slider.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText", "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.5, 2.5 ], "stagger": 0.025, "assets_required": { "count": 4, "bytes": 627871, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "reclama el primer canvas del documento" ], "cluster": "STEP-MACHINE", "engine": "mixed", "motion_signature": "click-advanced WebGL lens-warp wipe with char stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "first-canvas" ], "conflicts_with": [] }, { "slug": "warp-slider-next", "title": "Warp Lens Slider", "category": "slider", "description": "A full-screen WebGL image slider where clicking anywhere expands a circular lens/bubble mask from the center, warping the incoming photo with a magnifying-glass distortion driven by a custom Three.js fragment shader. GSAP tweens the shader's uProgress uniform (2.5s power2.inOut) while SplitText staggers the title characters and description lines out and back in.", "demo": "https://motionprompts.dev/components/warp-slider-next/index.html", "prompt": "https://motionprompts.dev/prompts/warp-slider-next.md", "page": "https://motionprompts.dev/component/warp-slider-next/", "thumb": "https://motionprompts.dev/thumbs/warp-slider-next.webp", "preview": "https://motionprompts.dev/previews/warp-slider-next.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitText", "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.25, 2.5 ], "stagger": 0.025, "assets_required": { "count": 4, "bytes": 732671, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "STEP-MACHINE", "engine": "mixed", "motion_signature": "click-driven WebGL lens-bubble wipe with text stagger", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "we-go-again", "title": "We Go Again", "category": "gallery", "description": "A three-column documentary-studio film selector where a vertical thumbnail gallery on the right lets you click any item to swap the featured project. On click, GSAP animates the current title/copy/credits lines out (y:-60, power4.in, staggered) while the featured image scales up and collapses away; on completion the details are rebuilt, SplitType re-splits the copy into lines, and the new text (y:40→0, power4.out, stagger) plus image (scale 0→1, power4.out) animate in, while the full-screen blurred background crossfades between the two images.", "demo": "https://motionprompts.dev/components/we-go-again/index.html", "prompt": "https://motionprompts.dev/prompts/we-go-again.md", "page": "https://motionprompts.dev/component/we-go-again/", "thumb": "https://motionprompts.dev/thumbs/we-go-again.webp", "preview": "https://motionprompts.dev/previews/we-go-again.webm", "motion": { "trigger": "click", "libs": [ "gsap", "SplitType" ], "complexity": 2, "pinned": false, "viewport_heights": 280, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.25, 1 ], "stagger": 0.05, "assets_required": { "count": 8, "bytes": 1739231, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "click-swapped detail panel: staggered line exit/enter, image scale, blur crossfade", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [], "conflicts_with": [] }, { "slug": "webgl-interactive-gradient", "title": "WebGL Interactive Gradient", "category": "3d-webgl", "description": "A full-screen animated WebGL gradient built with Three.js and two custom fragment shaders: a fluid-dynamics shader ping-pongs velocity between two float render targets while a display shader warps a flowing multi-color gradient from that field. A requestAnimationFrame loop advances time-based motion, and mousemove events feed cursor position/velocity into the fluid uniform so the gradient ripples and distorts along the cursor's trail in real time.", "demo": "https://motionprompts.dev/components/webgl-interactive-gradient/index.html", "prompt": "https://motionprompts.dev/prompts/webgl-interactive-gradient.md", "page": "https://motionprompts.dev/component/webgl-interactive-gradient/", "thumb": "https://motionprompts.dev/thumbs/webgl-interactive-gradient.webp", "preview": "https://motionprompts.dev/previews/webgl-interactive-gradient.webm", "motion": { "trigger": "hover", "libs": [ "three" ], "complexity": 5, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 1, "bytes": 35241, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "INTEGRATOR", "engine": "webgl-raf", "motion_signature": "cursor-driven fluid shader warping full-screen gradient", "systems": [ "continuous-follow" ], "native_system": "continuous-follow" }, "capabilities": [], "conflicts_with": [] }, { "slug": "werowallet-scroll-animation", "title": "WeroWallet Spotlight Stroke Draw", "category": "scroll", "description": "Pinned spotlight section where 13 thick diagonal SVG strokes draw in with a staggered stroke-dashoffset scrub until they cover the screen, swapping the headline and popping three sparkles before un-drawing in reverse. Driven by scroll (ScrollTrigger pin + scrub with Lenis smooth scrolling).", "demo": "https://motionprompts.dev/components/werowallet-scroll-animation/index.html", "prompt": "https://motionprompts.dev/prompts/werowallet-scroll-animation.md", "page": "https://motionprompts.dev/component/werowallet-scroll-animation/", "thumb": "https://motionprompts.dev/thumbs/werowallet-scroll-animation.webp", "preview": "https://motionprompts.dev/previews/werowallet-scroll-animation.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 400, "needs_lenis": true, "ease_family": "power2", "duration_range": [ 0.5, 1.49 ], "stagger": null, "assets_required": { "count": 0, "bytes": 0, "root_absolute_paths": false }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "gsap", "motion_signature": "scrubbed pinned staggered SVG stroke draw", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "wodniack-work-section-scroll", "title": "Wodniack Work Section Scroll", "category": "scroll", "description": "A pinned scroll section where the word WORK, built from HTML letter divs, streams along four Three.js CatmullRom curves projected to screen space while a warped WebGL plane slides a filmstrip of project images across a scrolling red dot grid. A single ScrollTrigger (pin, scrub, end +=700%) drives the progress that feeds the letter paths, the CanvasTexture card offset and the grid, with Lenis smoothing the scroll and per-frame lerping easing the letters into place.", "demo": "https://motionprompts.dev/components/wodniack-work-section-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/wodniack-work-section-scroll.md", "page": "https://motionprompts.dev/component/wodniack-work-section-scroll/", "thumb": "https://motionprompts.dev/thumbs/wodniack-work-section-scroll.webp", "preview": "https://motionprompts.dev/previews/wodniack-work-section-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis", "three" ], "complexity": 5, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.25, 0.25 ], "stagger": null, "assets_required": { "count": 7, "bytes": 1393530, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "mixed", "motion_signature": "scrubbed pin: rAF-lerped letters over WebGL filmstrip", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "work-carousel-karim-saab", "title": "Karim Saab Fashion Carousel", "category": "slider", "description": "A full-screen fashion carousel where a wheel or touch swipe triggers a GSAP transition: the current slide scales down, rotates and flies off while the incoming slide slides in from an animated clip-path polygon; SplitText then reveals the title words and the description, tags, index and link lines with staggered power4 masked upward moves.", "demo": "https://motionprompts.dev/components/work-carousel-karim-saab/index.html", "prompt": "https://motionprompts.dev/prompts/work-carousel-karim-saab.md", "page": "https://motionprompts.dev/component/work-carousel-karim-saab/", "thumb": "https://motionprompts.dev/thumbs/work-carousel-karim-saab.webp", "preview": "https://motionprompts.dev/previews/work-carousel-karim-saab.webm", "motion": { "trigger": "wheel", "libs": [ "gsap", "SplitText" ], "complexity": 2, "pinned": false, "viewport_heights": 200, "needs_lenis": false, "ease_family": "power4", "duration_range": [ 0.35, 50 ], "stagger": 0.1, "assets_required": { "count": 4, "bytes": 395461, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "preventDefault en wheel" ], "cluster": "STEP-MACHINE", "engine": "gsap", "motion_signature": "wheel-gated slide swap, clip-path entry, staggered text", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "step-advance" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [] }, { "slug": "workingstiff-animated-teams-section", "title": "WorkingStiff Animated Teams Section", "category": "scroll", "description": "Scroll-driven team section with Lenis smooth scroll and two manual scrubbed ScrollTriggers: as the section enters the viewport each member column rises in a stagger while its giant name initial scales up, then the section pins for three viewport heights and the member cards slide in from the right with stagger, rotating from 20deg to 0 and scaling from 0.75 to 1 to cover the initials. Animations are disabled below 1000px width.", "demo": "https://motionprompts.dev/components/workingstiff-animated-teams-section/index.html", "prompt": "https://motionprompts.dev/prompts/workingstiff-animated-teams-section.md", "page": "https://motionprompts.dev/component/workingstiff-animated-teams-section/", "thumb": "https://motionprompts.dev/thumbs/workingstiff-animated-teams-section.webp", "preview": "https://motionprompts.dev/previews/workingstiff-animated-teams-section.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 3, "pinned": true, "viewport_heights": 300, "needs_lenis": true, "ease_family": null, "duration_range": [ 0.4, 0.7 ], "stagger": null, "assets_required": { "count": 3, "bytes": 382890, "root_absolute_paths": true }, "mobile_behavior": { "kind": "width-branch", "media_queries": 3, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "SCROLL-LAGGED", "engine": "mixed", "motion_signature": "scroll-scrubbed, no tweens: columns rise y 125%→0% with a 0.15-progress index offset, then inside a 300vh pin the cards slide x 300/200/100%→-50%, unrotate 20deg→0 and scale 0.75→1, all as linear progress arithmetic written by gsap.set on every tick (scrub:1 is the only smoothing)", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-lagged" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "yard-hover", "title": "YARD Hover Menu", "category": "hover", "description": "A large uppercase project list where hovering a menu item swaps its label lines via GSAP top-position tweens and reveals a stacked image preview that follows the cursor. The preview images grow in and out with an animated clip-path polygon on a power3.out ease, while the trailing cursor position is smoothed with a gsap.to on mousemove.", "demo": "https://motionprompts.dev/components/yard-hover/index.html", "prompt": "https://motionprompts.dev/prompts/yard-hover.md", "page": "https://motionprompts.dev/component/yard-hover/", "thumb": "https://motionprompts.dev/thumbs/yard-hover.webp", "preview": "https://motionprompts.dev/previews/yard-hover.webm", "motion": { "trigger": "hover", "libs": [ "gsap" ], "complexity": 1, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.25, 1 ], "stagger": null, "assets_required": { "count": 5, "bytes": 969089, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "POINTER-LATCHED", "engine": "gsap", "motion_signature": "cursor-trailing clip-path image preview with label swap", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "pointer-latch" }, "capabilities": [], "conflicts_with": [] }, { "slug": "zajno-lp", "title": "Zajno Landing Page Reveal", "category": "preloader", "description": "An on-load intro where a centered number counts up to 100, then triggers the landing-page reveal: the scaled-down hero clip-path opens from the bottom while it scales to full size, a dark overlay wipes upward, the hero image un-zooms from scale 2 to 1, and the giant headline's per-character spans rise into place with a stagger. Driven entirely by GSAP timelines chained via onStart/onComplete callbacks, using a CustomEase named 'hop' plus power3/power4 eases.", "demo": "https://motionprompts.dev/components/zajno-lp/index.html", "prompt": "https://motionprompts.dev/prompts/zajno-lp.md", "page": "https://motionprompts.dev/component/zajno-lp/", "thumb": "https://motionprompts.dev/thumbs/zajno-lp.webp", "preview": "https://motionprompts.dev/previews/zajno-lp.webm", "motion": { "trigger": "load", "libs": [ "gsap", "CustomEase" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power3", "duration_range": [ 0.35, 2.25 ], "stagger": 0.1, "assets_required": { "count": 4, "bytes": 838011, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "on-load counter to 100, then a hop-eased clip-path hero reveal running simultaneously with a 2.25s scale(0.7)->scale(1) un-zoom, a 2.25s image scale(2)->scale(1) push-in, an overlay clip-path wipe and a 0.1s per-character headline rise from translateY(500px); everything is time-based, no scroll or rAF physics", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aminezegmou-landing-page", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "infinite-draggable-image-gallery-javascript", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "laserbysonymusic-landing-page-reveal-animation", "kind": "ease-name" }, { "slug": "maxmilkin-preloader", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "nite-riot-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "steelworks-landing-page-reveal", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "truekindskincare-landing-page-reveal-javascript", "kind": "ease-name" }, { "slug": "zajno-page-transitions", "kind": "ease-name" } ] }, { "slug": "zajno-page-transitions", "title": "Nuvoro Page Transitions", "category": "transition", "description": "A four-view site (home, work, studio, contact) where clicking a nav link runs a native View Transitions API page change: the incoming view is masked by a full-screen clip-path polygon that expands from a thin slit at 75% height to the whole viewport over 2s (cubic-bezier hop ease), while a dark GSAP revealer overlay scales away with a CustomEase 'hop' wipe and the new heading reveals through masked SplitText chars/words/lines on a power4.out stagger. Lenis drives smooth scrolling on the inner pages.", "demo": "https://motionprompts.dev/components/zajno-page-transitions/index.html", "prompt": "https://motionprompts.dev/prompts/zajno-page-transitions.md", "page": "https://motionprompts.dev/component/zajno-page-transitions/", "thumb": "https://motionprompts.dev/thumbs/zajno-page-transitions.webp", "preview": "https://motionprompts.dev/previews/zajno-page-transitions.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "SplitText", "CustomEase", "lenis" ], "complexity": 2, "pinned": false, "viewport_heights": null, "needs_lenis": true, "ease_family": "custom", "duration_range": [ 0.3, 1.5 ], "stagger": 0.1, "assets_required": { "count": 6, "bytes": 1790626, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": false, "solo_reasons": [], "cluster": "CLICK-CURTAIN", "engine": "mixed", "motion_signature": "View-transition clip-path wipe with masked SplitText reveal", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "curtain-toggle" }, "capabilities": [ "page-scroll-owner" ], "conflicts_with": [ { "slug": "aladesign-landing-page-reveal", "kind": "ease-name" }, { "slug": "aristidebenoist-slider", "kind": "ease-name" }, { "slug": "audemarspiguet-menu", "kind": "ease-name" }, { "slug": "camille-mormal-slider", "kind": "ease-name" }, { "slug": "hypnotic-gallery-gsap-flip", "kind": "ease-name" }, { "slug": "kin-landing-page", "kind": "ease-name" }, { "slug": "landing-page-reveal-no-webgl", "kind": "ease-name" }, { "slug": "meetings-slider", "kind": "ease-name" }, { "slug": "menu-root-food", "kind": "ease-name" }, { "slug": "outfit-landing-page-reveal", "kind": "ease-name" }, { "slug": "p10-landing-page-reveal-gsap", "kind": "ease-name" }, { "slug": "push-over-overlay-menu", "kind": "ease-name" }, { "slug": "story-world-carousel-slider", "kind": "ease-name" }, { "slug": "zajno-lp", "kind": "ease-name" }, { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "zentry-scroll", "title": "Zentry Scroll Animations", "category": "scroll", "description": "A long scroll story where a section is pinned for 4x the viewport height and every stage is scrubbed by scroll. As you scroll, letters of the intro copy flicker in with a random stagger, a center image expands from a small rectangle to fullscreen via an animated clip-path while its image scales, then a third image opens from a vertical seam and zooms far in before zooming back out, and finally a rotateY(-75deg) headline swings flat to reveal the closing copy. All driven by GSAP ScrollTrigger (pin + scrub) with Lenis smooth scrolling.", "demo": "https://motionprompts.dev/components/zentry-scroll/index.html", "prompt": "https://motionprompts.dev/prompts/zentry-scroll.md", "page": "https://motionprompts.dev/component/zentry-scroll/", "thumb": "https://motionprompts.dev/thumbs/zentry-scroll.webp", "preview": "https://motionprompts.dev/previews/zentry-scroll.webm", "motion": { "trigger": "scroll", "libs": [ "gsap", "ScrollTrigger", "lenis" ], "complexity": 4, "pinned": true, "viewport_heights": 700, "needs_lenis": true, "ease_family": "none", "duration_range": [ 0.05, 1 ], "stagger": null, "assets_required": { "count": 5, "bytes": 838359, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 2, "reduced_motion": false }, "solo_on_page": true, "solo_reasons": [ "html/body height fija en vh" ], "cluster": "SCROLL-WELDED", "engine": "gsap", "motion_signature": "400vh-pinned sticky section: linear scrubbed clip-path iris reveals (img-2 rectangle opening, img-3 centre-out) layered with continuous image zooms (1 -> 1.125 -> 1.25, and 2.9 -> 1 zoom-out from a top-right transform origin), plus a random-order per-letter opacity flicker on the intro text and a final 3D rotateY(-75deg)+scale(0.5) copy reveal through a 1000px perspective — every motion is scroll-position-driven with ease 'none', no inertia of its own beyond Lenis smoothing", "systems": [ "scrub-lagged", "scrub-welded" ], "native_system": "scrub-welded" }, "capabilities": [ "page-scroll-owner", "document-height" ], "conflicts_with": [ { "slug": "kaitonote-3d-gallery-showcase-scroll-animation", "kind": "kills-all" }, { "slug": "madeinuxstudio-page-transition", "kind": "kills-all" }, { "slug": "nakedcityfilms-scroll-animation", "kind": "kills-all" } ] }, { "slug": "zoom-out-mark-preloader", "title": "Zoom-Out Mark Preloader", "category": "preloader", "description": "A preloader with no veil: the blank white screen IS the interior of the brand's plus-sign mark, blown up until its crossing covers the viewport. A counter ticks 0 to 100 in ink over the white, then the mark zooms out on a logarithmic scale — so the recede reads at a constant rate instead of stalling — and the hero photograph is discovered around it rather than uncovered. The mark lands pixel-exact on the hero's own mark (both are the same two-bar cross, and the landing point and final scale are measured from it, not hard-coded), the two words fly in from opposite edges, and only once they have settled does the mark turn 360 degrees on its axis.", "demo": "https://motionprompts.dev/components/zoom-out-mark-preloader/index.html", "prompt": "https://motionprompts.dev/prompts/zoom-out-mark-preloader.md", "page": "https://motionprompts.dev/component/zoom-out-mark-preloader/", "thumb": "https://motionprompts.dev/thumbs/zoom-out-mark-preloader.webp", "preview": "https://motionprompts.dev/previews/zoom-out-mark-preloader.webm", "motion": { "trigger": "load", "libs": [ "gsap" ], "complexity": 3, "pinned": false, "viewport_heights": null, "needs_lenis": false, "ease_family": "power2", "duration_range": [ 0.3, 1.9 ], "stagger": 0.07, "assets_required": { "count": 1, "bytes": 246714, "root_absolute_paths": true }, "mobile_behavior": { "kind": "css-responsive-only", "media_queries": 1, "reduced_motion": true }, "solo_on_page": false, "solo_reasons": [], "cluster": "LOAD-ONESHOT", "engine": "gsap", "motion_signature": "One paused-free gsap.timeline() fired on module evaluation, in four strictly sequential phases with no overlap between them beyond the two stated. A 1.8s power1.inOut tween counts an object from 0 to 100 and writes the rounded value into a text node while nothing moves on screen. After +=0.12 the counter fades out over 0.35s (power2.in) and, at the same instant, a second 1.9s power1.inOut tween drives a normalized 0-to-1 progress whose onUpdate writes scale = final * (start/final)^(1-p) — the scale is interpolated in LOG space, not linearly, so the recede reads at a constant rate; start is recomputed from the live viewport diagonal every frame and final is measured from the destination element, so neither end of the recede is a constant. On completion a callback swaps the preloader mark for the hero's, and at that same position the nav fades in over 0.6s while two words tween xPercent ±140 to 0 with opacity over 1.05s power4.out, stagger 0.07. Only after those finish does a 1s power2.inOut rotate the mark 360 degrees, with the standfirst and link fading up at <0.2. Total ≈5.9s. No scroll listener, no rAF loop of its own, no ScrollTrigger. Under prefers-reduced-motion the timeline never runs and document.getAnimations() stays at 0.", "systems": [ "curtain-toggle", "entry-veil", "pointer-latch", "reveal-on-enter", "step-advance" ], "native_system": "entry-veil" }, "capabilities": [], "conflicts_with": [] } ] }