# motionprompts > A library of 236 production-grade web animation components (GSAP, Three.js/WebGL, > vanilla JS). Every component ships a live demo, a build prompt, and motion metadata measured > from the real code. ## When to use this library - **You are building a page that needs scroll, hover, cursor or WebGL animation** and want a proven mechanic instead of inventing one: pick components by their measured `motion` metadata, then follow the build prompt. - **You were asked to make a page "feel like" some award-winning site**: the catalog indexes real mechanics (trigger, cluster, easing, duration), so you can match a feel, not a screenshot. - **You are composing several animated sections into one page**: the composition contract (https://motionprompts.dev/api/composition-rules.json) tells you which combinations are invalid *before* you write code. - **Do NOT use it as a drop-in design system or npm package** — each component is a full demo page with an explicit integration contract. Details below. ## If you are an agent building a page, read this first This library is **not a design system**. Each component is a complete demo page that assumes it is the only thing in the document. Composing them means honoring explicit contracts: 1. **Read https://motionprompts.dev/api/v1/composition-rules.json before choosing anything.** There are hard rules that invalidate an entire page: a single scroll owner (105 of the 236 claim it), a single entry veil, at most one full-viewport WebGL. 2. **Pick one motion system** from https://motionprompts.dev/api/v1/motion-systems.json and use it for the whole page. There are 8 token sets (ease/duration/stagger) derived from the real inventory. Fixing one also resolves a real collision: 22 components register the global ease `hop` with 13 different curves, and the last one evaluated silently wins. 3. **Filter by `motion` in https://motionprompts.dev/api/v1/components.json**, not by category. Category describes how it looks; `motion.cluster` and `motion.trigger` describe how it moves. Measured example: the `slider` label spreads its 22 members across 3 opposing physics. 4. **`null` values mean "not determinable by reading the code"**, never zero. ## What this library does NOT give you (say so before promising it) - **Assets break when copied**: 194 of 236 components use absolute `/c//…` paths that only resolve on this domain. - **No CSS boundary**: 0 of 236 use `@layer`, `@scope` or `contain`. Any two components re-theme each other; paste order decides. - **No mounting contract**: no `script.js` exports anything, and 128 bind to `DOMContentLoaded` without checking `readyState` — they are dead on arrival in React/Next/Astro. - **The code uses bare specifiers** (`import gsap from "gsap"`) with no import map: it needs a bundler. ## Surfaces | resource | what it is | |---|---| | https://motionprompts.dev/api/v1/components.json | all 236 with motion metadata and contract | | https://motionprompts.dev/api/v1/motion-systems.json | the 8 motion systems and their tokens | | https://motionprompts.dev/api/v1/composition-rules.json | the composition rules, machine-readable | | https://motionprompts.dev/prompts/.md | the build prompt for one component | | https://motionprompts.dev/components//index.html | the live demo | | https://motionprompts.dev/component// | the component page with build notes | | https://motionprompts.dev/api/v1/openapi.json | OpenAPI 3.1 spec of this read-only API (no auth, all GET) | | https://motionprompts.dev/developers/ | developer portal: quickstart, rate limits, versioning, errors | Every HTML page also negotiates markdown: request it with `Accept: text/markdown`. ## MCP server A hosted MCP endpoint (Streamable HTTP, no auth) lives at `https://motionprompts.dev/mcp` — add it to Claude Code with `claude mcp add --transport http motionprompts https://motionprompts.dev/mcp`. Discovery manifest: https://motionprompts.dev/.well-known/mcp. To run it locally (stdio) instead: `claude mcp add motionprompts -- npx -y motionprompts-mcp` (official CLI on npm: https://www.npmjs.com/package/motionprompts-mcp; source: https://github.com/VanguardiaAI/motionprompts-mcp). Tools: `plan_page`, `suggest_mechanics`, `get_integration_contract`, `plan_imagery`, `get_component_prompt` and more. ## Component prompts - [ScrollTrigger 404 Horizontal Scroll + Parallax](https://motionprompts.dev/prompts/404.md): A 404 page where a pinned full-width headline section is driven by ScrollTrigger scrub: as you scroll, the .wrapper-404 translates… - [24/7 Artists Image Trail](https://motionprompts.dev/prompts/247artists-trail.md): A cursor-driven image trail across a full-viewport hero: as the mouse moves past a distance threshold, a new 175px image spawns at… - [3D Circular Image Gallery](https://motionprompts.dev/prompts/3d-circular-img-gallery.md): 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… - [3D CRT Display](https://motionprompts.dev/prompts/3d-crt-display.md): A 3D CRT monitor (GLB model) fills a dark broadcast-room hero, its screen driven by a custom shader with scanlines, RGB mask,… - [3D Material Finish Switcher](https://motionprompts.dev/prompts/3d-material-finish-switcher.md): Full-viewport Three.js hero with a GLB pocket watch whose finish is swapped at runtime from a JSON of PBR presets: three… - [3D Scroll Tunnel](https://motionprompts.dev/prompts/3d-scroll-tunnel.md): Infinite 3D image tunnel driven by the mouse wheel: six layers of four full-colour images each sit on an ellipse inside a… - [ThreeJS 3D Slider](https://motionprompts.dev/prompts/3d-slider-threejs.md): A Three.js curved plane displays an endless vertical slideshow of captioned images drawn onto a repeating 2D canvas texture. Lenis… - [Accordion Frames Spotlight Row](https://motionprompts.dev/prompts/accordion-frames.md): Centered accordion row of 20 vertical image slivers (10 on mobile) where hovering a panel (tapping on mobile) expands it to a… - [Adaline Scroll Animation](https://motionprompts.dev/prompts/adaline-scroll-animation.md): A pinned hero where a 104-frame image sequence is played back frame-by-frame on a driven by scroll. A single… - [Advanced Infinite Scroll](https://motionprompts.dev/prompts/advanced-infinite-scroll.md): A fullscreen vertical menu of category/title rows that loops endlessly: a requestAnimationFrame loop lerps the scroll position and… - [AlaDesign Landing Page Reveal](https://motionprompts.dev/prompts/aladesign-landing-page-reveal.md): Preloader-to-hero landing page reveal driven by three parallel GSAP timelines with a custom 'hop' ease: a dark overlay counts 0 to… - [Sci-Fi Preloader Button Hero Reveal](https://motionprompts.dev/prompts/aminezegmou-landing-page.md): Terminal-styled preloader that auto-plays on load: monospace status lines rise with masked SplitText, a circular SVG button… - [Anchored Headline with Speech Bubbles](https://motionprompts.dev/prompts/anchored-headline-speech-bubbles.md): A tall section whose headline is pinned with `position: sticky` at the vertical centre while testimonial speech bubbles arrive… - [Arch Portal Reveal](https://motionprompts.dev/prompts/arch-portal-reveal.md): A sticky stage where an arch-shaped opening grows from a small doorway to the entire frame as you scroll, revealing the scene… - [Aristide Benoist Slider](https://motionprompts.dev/prompts/aristidebenoist-slider.md): A full-screen horizontal image carousel where clicking a segment in the top progress-bar nav slides the track with gsap.to and a… - [Responsive Fullscreen Menu](https://motionprompts.dev/prompts/arock-menu.md): A fullscreen overlay menu that opens on clicking 'Menu': the panel sweeps up via an animated clip-path polygon on a power4.inOut… - [Art Tech Overlay Navigation](https://motionprompts.dev/prompts/art-tech-nav.md): Clicking the burger button plays a paused GSAP timeline that reveals a fullscreen black overlay by animating the clip-path polygon… - [ASCII Image Reveal Effect](https://motionprompts.dev/prompts/ascii-image-reveal-effect.md): Editorial photo grid where each frame paints itself as live ASCII on a canvas as it scrolls into view: cells pop in in random… - [Ashfall 3D Cylinder Gallery](https://motionprompts.dev/prompts/ashfall-3d-image-gallery.md): A Three.js WebGL gallery arranges dozens of curved image planes into a tall rotating cylinder that spins continuously. Lenis… - [Cursor Smudge Revealer](https://motionprompts.dev/prompts/ashleybrookecs-smudge-revealer.md): Full-screen hero where moving the cursor (or finger) smudges away the still-wet ink foreground: circles sized by pointer speed are… - [Asset ORB](https://motionprompts.dev/prompts/asset-orb-js.md): A WebGL sphere built from 100 image planes distributed via a Fibonacci-sphere layout, each plane textured with a random editorial… - [Audemars Piguet Overlay Menu](https://motionprompts.dev/prompts/audemarspiguet-menu.md): Fullscreen overlay menu opened from a hamburger toggle: two background halves pre-rotated 180deg with scale(2) sweep in like… - [Autoplay Hero with Progress](https://motionprompts.dev/prompts/autoplay-hero-progress.md): A full-bleed hero carousel driven by a CLOCK rather than by the scroll, with one progress tick per slide filling over exactly that… - [BarbaJS Page Transitions](https://motionprompts.dev/prompts/barba-js-page-transitions.md): A three-page editorial site whose routes swap behind a curtain: click a nav link and two sheets — an accent one leading a solid… - [Barrett & Hale Scroll Animation](https://motionprompts.dev/prompts/bennett-clive-scroll-animation.md): A wordmark ('Barrett & Hale'), centered on both axes of the viewport, rides its own fixed full-viewport layer painted with… - [Circular Futuristic Navigation Menu](https://motionprompts.dev/prompts/bitkraft-menu.md): A fullscreen overlay menu whose links are arranged as radial clip-path segments around a draggable center joystick. Clicking the… - [Block Reveal Page Transition](https://motionprompts.dev/prompts/block-reveal-page-transition.md): Page transition where a fixed fullscreen grid of 60px black blocks flickers in with a random stagger to cover the viewport, the… - [BrandAppart Sticky Cards](https://motionprompts.dev/prompts/brandappart-sticky-cards.md): Scroll-pinned deck of four stacked cards: as you scroll through the pinned section (8 viewport heights, scrub-synced with Lenis),… - [Brutalist Sci-fi Corridor](https://motionprompts.dev/prompts/brutalist-corridor.md): On page load a preloader counter climbs to 100 over a black overlay, then a GSAP timeline fades the overlay, rotates the Three.js… - [Burocratik Image Trail](https://motionprompts.dev/prompts/burocratik-image-trail-js.md): A cursor-driven image trail: while the mouse moves across the central full-viewport panel, a new 200px photo spawns at the cursor… - [Camille Mormal Slider](https://motionprompts.dev/prompts/camille-mormal-slider.md): 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… - [Cappen Fluid Simulation](https://motionprompts.dev/prompts/cappen-fluid-simulation.md): Cappen-style GPU fluid simulation built with Three.js: moving the pointer injects ink and velocity splats into double-buffered… - [Capsules Animated Sticky Columns](https://motionprompts.dev/prompts/capsules-animated-columns.md): A pinned full-screen section where four rounded 'capsule' columns swap in place as you scroll. A single ScrollTrigger pins the… - [Capsules Animated Sticky Cards](https://motionprompts.dev/prompts/capsules-sticky-cards-javascript.md): Scroll-driven deck of pinned full-screen cards where the first card grows from a small rounded capsule into a full-bleed image… - [Interactive Calendar Cards](https://motionprompts.dev/prompts/cards.md): A column of month cards, each showing a randomized grid of contribution-style pads with a few colored 'active' cells. Clicking an… - [Halide — Chromatic Aberration Lens Archive](https://motionprompts.dev/prompts/chromatic-aberration-gallery.md): Halide, an editorial photo studio, presents its image archive as a full-screen grid that pans with the cursor while a WebGL/GLSL… - [Cielrose Inspired ThreeJS Slider](https://motionprompts.dev/prompts/cielrose-threejs-slider-javascript.md): A wheel-driven WebGL image slider built with Three.js: scrolling drives a custom shader that vertically wipes between the current… - [Circular Image Gallery](https://motionprompts.dev/prompts/circular-img-gallery.md): 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… - [Clayboan Scroll Animation](https://motionprompts.dev/prompts/clayboan-scroll-animation.md): Full-page scroll gallery with Lenis smooth scroll where each work section is scrubbed by GSAP ScrollTrigger: the image's clip-path… - [Contact Form Reveal](https://motionprompts.dev/prompts/contact-form.md): A landing hero whose oversized display title reveals on load by splitting into per-character spans that GSAP tweens up from a… - [Converging Card Stack](https://motionprompts.dev/prompts/converging-card-stack.md): Six scattered, rotated photo cards converge into a single stack as you scroll through a sticky section, uncovering the headline… - [Creative Clutter Flip Layouts](https://motionprompts.dev/prompts/creative-clutter.md): A messy-desk hero of 11 floating cut-out items scattered around a centered Space Grotesk display header, with three arrangements… - [CriticalDanger Scroll Cards](https://motionprompts.dev/prompts/criticaldanger-rebuild.md): A scroll-pinned section (5 viewport heights, Lenis-synced) where a giant heading translates horizontally as you scroll while five… - [Cursor-Driven Material Spotlight](https://motionprompts.dev/prompts/cursor-driven-material-spotlight.md): Full-viewport Three.js scene with a GLB sculpture whose PBR material is patched via onBeforeCompile: moving the cursor raycasts a… - [DetroitParis Infinite Slider](https://motionprompts.dev/prompts/detroit-paris-infinite-slider.md): Infinite draggable image slider with exponential perspective sizing: slides anchored to the bottom edge grow exponentially wider… - [Direction-Aware Hover Effect (JavaScript)](https://motionprompts.dev/prompts/direction-aware-hover-effect-javascript.md): A grid of labeled cells where a solid highlight block glides beneath the hovered cell, snapping to its exact bounds and swapping… - [Dotted Path Traveller](https://motionprompts.dev/prompts/dotted-path-traveller.md): A sticky scene where a dot travels along a drawn dashed SVG path as you scroll, the line revealing itself behind it and lettered… - [Draggable Pill Menu](https://motionprompts.dev/prompts/draggable-menu.md): Pill-shaped floating menu drawer that can be dragged anywhere in the viewport with GSAP Draggable (bounds: window); a dashed… - [Eduardbodak Animated Cards](https://motionprompts.dev/prompts/eduardbodak-scroll-animation.md): A scroll-driven card sequence with Lenis smooth scroll where GSAP ScrollTrigger scrubs three stacked hero cards apart and fades… - [Epic Scroll Animations](https://motionprompts.dev/prompts/epic-scroll-anims-scrolltrigger-gsap.md): A long scroll story where two sections (a pinned 'revealer' shape and the header-info block) are pinned with ScrollTrigger while a… - [ESEAgency Scroll-Powered Carousel](https://motionprompts.dev/prompts/eseagency-scroll-carousel-javascript.md): A full-screen project carousel pinned by ScrollTrigger (scrub, Lenis-smoothed) where scroll progress drives slides in and out:… - [Méridien Arc Card Scroll](https://motionprompts.dev/prompts/ethnocare.md): A pinned full-screen section where five image cards are laid out along a circular arc and rotate through the viewport as you… - [Exo Ape Infinite Carousel](https://motionprompts.dev/prompts/exo-ape-infinite-carousel.md): A full-screen infinite image carousel driven by wheel and touch input: each scroll builds a fresh slide and reveals it with a GSAP… - [ExoApe-Inspired Overlay Menu](https://motionprompts.dev/prompts/exoape-menu-javascript.md): A fullscreen overlay navigation menu inspired by ExoApe. Clicking the Menu toggle drives a synchronized GSAP timeline: the page… - [Explode Text On Scroll (Matter.js)](https://motionprompts.dev/prompts/explode-text-on-scroll-matterjs.md): A pinned sticky paragraph whose highlighted keywords progressively recolor as you scroll, then shatter into individual characters… - [Exploded Product with Leader Labels](https://motionprompts.dev/prompts/exploded-product-labels.md): A pinned stage where a six-layer product separates along Z as you scroll and each part names itself with a hairline leader. The… - [FameEstate Scroll Animation](https://motionprompts.dev/prompts/fameestate-scroll-animation.md): Pinned hero scrubbed over seven viewport heights with Lenis smooth scroll: a red panel opens from a thin clip-path slit to full… - [Fanned Steps on an Arc](https://motionprompts.dev/prompts/fanned-steps-scrub.md): 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… - [Fiddle Digital Scramble Hover Effect](https://motionprompts.dev/prompts/fiddle-digital-hover-effect.md): A centered hero image is covered by an invisible grid of 25px blocks, some holding random symbols (O X * > $ W). Moving the mouse… - [Fiddle Digital Scroll Animation](https://motionprompts.dev/prompts/fiddle-digital-scroll-animation.md): 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… - [Field Day Sound — Filter Gallery](https://motionprompts.dev/prompts/filters-fielddaysound.md): A two-column masonry work archive for an independent audio studio, paired with oversized discipline filters; clicking a filter… - [Meridian — Flowing Menu Curtain](https://motionprompts.dev/prompts/flowing-menu-curtain.md): A vertical list of large rows where hovering pulls an inverted sheet across the row, carrying the row's own name on an endless… - [Nocturne Baths — Fluid Splash Cursor](https://motionprompts.dev/prompts/fluid-splash-cursor.md): 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… - [FollowArt Scroll Animation](https://motionprompts.dev/prompts/followart-scroll-animation.md): Stacked full-screen sections that swing in from a 30-degree tilt as you scroll, each panel scrubbing back to level before pinning… - [Fractal Glass Parallax Effect](https://motionprompts.dev/prompts/fractal-glass-effect.md): Full-viewport Three.js hero where a custom fragment shader refracts a full-bleed portrait through vertical fractal-glass ribbons… - [Frame Collapse Reveal](https://motionprompts.dev/prompts/frame-collapse-reveal.md): A rounded frame contracts from the edges of a sticky section down to the size of a centre window; the full-bleed photograph behind… - [Full Screen Slider](https://motionprompts.dev/prompts/full-screen-slider.md): A fullscreen vertical image slider driven by the mouse wheel: each wheel step reveals or hides a slide by tweening its clip-path… - [Scroll Image Reveal Sequence](https://motionprompts.dev/prompts/gabrielcontassot-scroll.md): A long vertical scroll photo essay ('Close Range — Essay No. 04: Skin') where seven big centered chapter-headers (Ornament,… - [Water Ripple Text Simulation](https://motionprompts.dev/prompts/gentlerain.md): A full-screen Three.js water-ripple simulation over giant canvas-drawn wordmark text: moving the pointer injects pressure into… - [Kiln Seven — Gradual Blur Edges](https://motionprompts.dev/prompts/gradual-blur-edge.md): A progressive blur band that softens the edge of a scrolling page instead of cutting it. Rather than one blurred layer behind a… - [Gregory Lalle Awwwards Rebuild](https://motionprompts.dev/prompts/gregorylalle.md): A scroll-driven vertical portfolio gallery where a fixed project index number reveals and pushes up via masked GSAP digit tweens… - [Grid Deformation Effect](https://motionprompts.dev/prompts/grid-deformation-effect.md): A fullscreen hero photograph is rendered as a Three.js texture on a shader plane; moving the pointer injects velocity into a… - [Grid Shutter Page Transition](https://motionprompts.dev/prompts/grid-shutter-page-transition.md): Page transition where a fixed 4x16 grid of cream blocks scales in horizontally with a per-block stagger, even rows sweeping from… - [Griflan Hover Effect](https://motionprompts.dev/prompts/griflan-hover-effect.md): Three stacked service rows expand on hover with an elastic GSAP tween: a fanned stack of three images slides up behind the title,… - [GSAP Clip Carousel](https://motionprompts.dev/prompts/gsap-clip-carousel.md): A click-to-advance fullscreen product carousel: each click reveals the next image from a center clip-path box that scales to fill… - [GTA VI Landing Page Scroll](https://motionprompts.dev/prompts/gta-vi-landing-page-scroll-final.md): A GTA-VI-style pinned hero reveal driven by scroll, art-directed as 'Casa Vicente', a Lisbon tailoring house AW26 campaign. A… - [Guiding Light Cursor Spotlight](https://motionprompts.dev/prompts/guiding-light.md): Cursor-following spotlight: a dark full-section mask with a radial-gradient cutout reveals content around the pointer while a… - [Vanguardia Award List Hover](https://motionprompts.dev/prompts/henriheymans-hover.md): An awards list where hovering each row slides a three-layer wrapper via gsap.to (y translate, power2.out) so the row flips between… - [HeureBleue Scroll Animation](https://motionprompts.dev/prompts/heurebleue-scroll-animation.md): A scroll-driven zoom-through gallery: a fixed grid of five image columns sits behind the page and, as a tall spacer section… - [Hypnotic Image Gallery (GSAP Flip)](https://motionprompts.dev/prompts/hypnotic-gallery-gsap-flip.md): A 14-image still-life gallery for a set-design studio (Plinth) that morphs between three layouts — Grid, Index, Stack — when you… - [Image Explosion Scroll Animation](https://motionprompts.dev/prompts/image-explosion-scroll-animation.md): As the footer scrolls into view, fifteen images burst upward from the bottom of the footer and arc back down under simulated… - [Image Explosion with JS Physics](https://motionprompts.dev/prompts/image-explosion-scroll-animation-js.md): As the footer scrolls into view, 15 images burst upward from the bottom edge and rain back down with a hand-rolled… - [Image Reveal On Scroll](https://motionprompts.dev/prompts/image-reveal-on-scroll.md): A staggered grid of tall portrait images that each unmask as they enter the viewport: GSAP animates a clip-path polygon from a… - [Mouse Image Trail](https://motionprompts.dev/prompts/img-trail.md): A cursor-driven image trail: moving the mouse spawns positioned image tiles that follow the pointer, and after a brief pause of no… - [Infinite Column Wall](https://motionprompts.dev/prompts/infinite-column-wall.md): Six columns of photographs scroll vertically on their own clock — one up, the next down — and never stop, their top and bottom… - [Infinite Draggable Image Gallery](https://motionprompts.dev/prompts/infinite-draggable-image-gallery-javascript.md): An endless, draggable grid of thumbnails that recycles DOM items as you pan (custom lerp animation loop with velocity-based… - [Infinite Horizontal Scroll](https://motionprompts.dev/prompts/infinite-horizontal-scroll.md): A seamless looping horizontal scroll gallery driven by raw wheel and touch input. Vertical wheel/touch deltas are mapped to… - [Infinite Horizontal Parallax Slider](https://motionprompts.dev/prompts/infinite-horizontal-slider.md): A seamless, infinitely looping horizontal image slider driven by mouse wheel, drag and touch. A custom requestAnimationFrame loop… - [Infinite Parallax Scroll with Minimap](https://motionprompts.dev/prompts/infinite-parallax-scroll-with-minimap.md): Infinite vertical scroll through fullscreen project images with a synchronized centered minimap that mirrors the scroll at… - [Ingamana Scroll Animation](https://motionprompts.dev/prompts/ingamana-scroll-animation.md): 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… - [Inkfish Inspired Horizontal Scroll](https://motionprompts.dev/prompts/inkfish-horizontal-scroll.md): A full-screen editorial gallery where a 500vw horizontal track of text and image sections is panned by a draggable timeline… - [Inkwell-Inspired Image Gallery](https://motionprompts.dev/prompts/inkwell-image-gallery-javascript.md): A ring of 25 small cards arranged in a circle that reacts to cursor proximity: nearby cards flip 180deg on rotationY, scale up and… - [Interactive Fluid Particle Logo](https://motionprompts.dev/prompts/interactive-particle-logo.md): Full-viewport WebGL canvas that rasterizes a PNG logo into thousands of soft GL_POINTS particles on a dark background. Moving the… - [Interactive Team Section](https://motionprompts.dev/prompts/interactive-team-section-javascript.md): A row of small monochrome team thumbnails sits above a giant clip-masked headline. Hovering a thumbnail scales it up (power4.out)… - [Inversa Scroll Animation](https://motionprompts.dev/prompts/inversa-scroll-animation.md): Hero pinned over four viewport heights where a single scrubbed onUpdate drives phase-based animations from scroll progress with… - [IronHill Scroll Animation](https://motionprompts.dev/prompts/ironhill-scroll-animation.md): Scroll-scrubbed WebGL dissolve over a tall 175svh hero: a Three.js fullscreen quad with an fbm-noise shader sweeps a solid… - [Jam Area Overlay Menu](https://motionprompts.dev/prompts/jamarea-menu.md): Full-screen overlay menu that wipes open with a clip-path reveal when the Menu toggle is clicked, staggering in oversized… - [JavaScript Responsive Minimap](https://motionprompts.dev/prompts/javascript-responsive-minimap.md): A vertical thumbnail minimap (horizontal on mobile) whose framed indicator scrubs through 15 images as you scroll the wheel or… - [Scroll-Synced Image Minimap](https://motionprompts.dev/prompts/js-image-minimap.md): A tall vertical image gallery paired with a sticky sidebar minimap of thumbnails. As the user scrolls, a scroll listener maps the… - [JS Page Transitions](https://motionprompts.dev/prompts/js-page-transitions.md): 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… - [Junni Tile Flip Board](https://motionprompts.dev/prompts/junni.md): A full-screen 6x6 grid of 3D tiles, each showing a slice of a shared image split by background-position. Hovering a tile triggers… - [Kaitonote 3D Gallery Showcase](https://motionprompts.dev/prompts/kaitonote-3d-gallery-showcase-scroll-animation.md): A pinned spotlight section scrubbed over fifteen viewport heights with Lenis smooth scroll: twenty editorial portrait and movement… - [Halide — Masked Portrait Reveal Scroll](https://motionprompts.dev/prompts/karim-saab-scroll-animation.md): A pinned spotlight section where a tall grid of desaturated images scrolls vertically while an SVG-masked banner image is revealed… - [Karim Saab Work Carousel](https://motionprompts.dev/prompts/karim-saab-work-carousel.md): A fullscreen one-slide-at-a-time work carousel where each wheel or touch swipe fires a GSAP transition: the outgoing slide scales… - [Kin Landing Page Reveal](https://motionprompts.dev/prompts/kin-landing-page.md): 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… - [Konpo Landing Page Reveal](https://motionprompts.dev/prompts/konpo-lp-reveal.md): Auto-playing landing page intro: three vertical rolling counters tick to 100 while a background wipe scales up and 15 rounded… - [KPVERSE Sliding Menu with Text-Shuffle Hover](https://motionprompts.dev/prompts/kpverse-menu.md): A black rounded side-panel navigation menu that slides in from the left (CSS cubic-bezier transition) when the 'Menu' toggle is… - [KVS Studio Scroll-Powered Image Reveal](https://motionprompts.dev/prompts/kvs-studio-image-reveal.md): Pinned full-viewport stack of five images scrubbed over four viewport heights: each image's clip-path wipes upward to reveal the… - [Physics Gravity Landing Page](https://motionprompts.dev/prompts/landing-page-gravity.md): A full-viewport hero for a cinematic frame archive (Freefall) where twelve scattered film-still tiles toggle between a floating… - [Kudos Landing Page Reveal](https://motionprompts.dev/prompts/landing-page-reveal.md): A fullscreen preloader plays automatically on load: a randomized 0-to-100% counter runs while a stack of ten portrait images wipes… - [Landing Page Reveal With Circular Gallery](https://motionprompts.dev/prompts/landing-page-reveal-no-webgl.md): On load a numeric preloader counts up to 100, then 30 photo cards rise from below into a centered horizontal strip and, using GSAP… - [Larevoltosa Scroll Animation](https://motionprompts.dev/prompts/larevoltosa-scroll-animation.md): Pinned spotlight section scrubbed over three viewport heights with Lenis smooth scroll: a giant inline doodle character zooms up… - [LaserBySonyMusic Landing Page Reveal](https://motionprompts.dev/prompts/laserbysonymusic-landing-page-reveal-animation.md): Preloader-to-hero reveal that plays automatically on page load: a giant counter ticks 0 to 100 while scaling up and a thin… - [Lava Buster Fluid Simulation](https://motionprompts.dev/prompts/lava-buster.md): A fullscreen Three.js WebGL fluid/particle simulation running multi-pass GLSL shaders in ping-pong float render targets; molten… - [Sliding Lightbox Gallery](https://motionprompts.dev/prompts/lightbox.md): A click-triggered image lightbox for a ceramics-studio archive: clicking any thumbnail in the 4x4 plate grid slides a large… - [Lottie Scroll Animation](https://motionprompts.dev/prompts/lottie-scroll-animation.md): A full-screen Lottie animation is scrubbed frame-by-frame by scroll position. A GSAP ScrollTrigger with scrub tweens a playhead… - [Norrwood Landing Page Reveal](https://motionprompts.dev/prompts/lp-reveal-anim.md): An on-load hero intro for the Norrwood furniture atelier where a single paused GSAP timeline orchestrates the whole reveal: two… - [LukeBaffait Animated Footer](https://motionprompts.dev/prompts/lukebaffait-animated-footer.md): Fixed full-viewport footer revealed behind the page on scroll: a spacer div fires ScrollTrigger callbacks (in at top 50%, out on… - [Lusion Fluid Particle Simulation](https://motionprompts.dev/prompts/lusion-fluid-particles.md): A full-screen p5.js particle physics simulation where hundreds of small shapes (triangles, squares, circles) fall under gravity… - [Lusion Landing Page Reveal](https://motionprompts.dev/prompts/lusion-lp-reveal.md): Full-screen preloader-to-content reveal that plays once on load. Three digit columns spin upward with gsap.to (power2.inOut) to… - [Silhouette Page Transition](https://motionprompts.dev/prompts/madeinuxstudio-page-transition.md): Full-page route transition where clicking a nav link runs a GSAP timeline that wipes 20 vertical blocks across the screen (scaleX… - [Magnetic Spotlight Marquee](https://motionprompts.dev/prompts/magnetic-marquee.md): Infinitely auto-scrolling image marquee strip (gsap.to with x-wrap modifiers) that magnetically follows the cursor's vertical… - [Mask Reveal On Scroll](https://motionprompts.dev/prompts/mask-reveal.md): As each image row enters the viewport, a 3x3 grid of clip-path masks unveils the picture piece by piece: GSAP injects nine overlay… - [Mat Voyce Scroll Animation](https://motionprompts.dev/prompts/mat-voyce-scroll-animation.md): A pinned scroll section (scrub over 5x viewport height, Lenis-smoothed) drives a horizontal reel of four huge italic project… - [MaximaTherapy Sticky Cards](https://motionprompts.dev/prompts/maximatherapy-sticky-cards.md): Scroll-pinned hero (700svh of scrub scroll, Lenis-smoothed) where a stack of cards rises into view while the headline exits… - [Maxmilkin Orbit Text Preloader](https://motionprompts.dev/prompts/maxmilkin-preloader.md): Portfolio preloader where eight words ride concentric SVG circular orbits, stretching and sliding around their rings via animated… - [Media Monks Hover](https://motionprompts.dev/prompts/media-monks-hover.md): 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… - [Meetings Arc Slider](https://motionprompts.dev/prompts/meetings-slider.md): 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… - [Ember & Rye Fullscreen Menu](https://motionprompts.dev/prompts/menu-root-food.md): A minimal Menu button expands a right-docked panel to a fullscreen overlay of five vertical menu columns (Eat, Grill, Burgers,… - [Text Displacement Cursor Repel](https://motionprompts.dev/prompts/menuxl-text-displacement-animation.md): Headings and paragraph text are split into individual letters and words that get pushed away from the cursor within a 150px… - [Merle Photo-Studio Hover Index](https://motionprompts.dev/prompts/metalab-lp-rebuild.md): A dark full-screen index for a photography & art-direction studio where hovering a series in the left list crossfades a full-bleed… - [Moblinks Interactive Logo](https://motionprompts.dev/prompts/moblinks-interactive-logo.md): Depth-tunnel hero around a 3D logo: six stacked layers, five of them with SVG mask cutouts at decreasing sizes (mask-composite:… - [Modular Carousel](https://motionprompts.dev/prompts/modular-slider.md): A click-driven modular image carousel: each click advances a horizontal strip of slide titles via a 2s gsap.to power4.out tween,… - [Camille Mormal Grid Reveal](https://motionprompts.dev/prompts/mormal.md): An on-load intro reveal built from a single GSAP timeline: five vertical columns of images slide in from off-screen top/bottom… - [Mosaic Flip Hover Effect](https://motionprompts.dev/prompts/mosaic-flip-hover-effect.md): 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… - [Mouse Trail with SVG and GSAP](https://motionprompts.dev/prompts/mouse-trail-animation-svg-js.md): Seven layered SVG polyline paths in a rainbow palette follow the cursor as an interpolated, snake-like ribbon trail. A single… - [NakedCity Films Navbar Scroll Animation](https://motionprompts.dev/prompts/nakedcityfilms-scroll-animation.md): A fixed, centered 16:9 navbar window (cream panel with nav links over a full-viewport fixed image) expands from 50% width to… - [Scroll Animated Text Reveal](https://motionprompts.dev/prompts/navigate-scroll-animated-text-javascript.md): A scroll-driven, word-by-word text reveal where Lenis smooth scroll feeds GSAP ScrollTrigger, which pins each text section over… - [Line-by-Line Text Reveal](https://motionprompts.dev/prompts/nextjs-text-reveal-animation.md): A scroll-driven line-by-line text reveal. GSAP SplitText breaks each heading and paragraph into masked lines, gsap.set pushes them… - [Next.js View Transitions](https://motionprompts.dev/prompts/nextjs-view-transitions.md): A multi-page portfolio where clicking a nav link fires a full-page transition built on the native View Transitions API: the… - [Nite Riot Landing Page Reveal](https://motionprompts.dev/prompts/nite-riot-landing-page-reveal-javascript.md): Autoplay landing-page intro: a black overlay reveals a gradient-fill logo and staggered project/location lists, then a centered… - [Fullscreen Portfolio Menu](https://motionprompts.dev/prompts/nm-menu-rebuild.md): A fullscreen overlay navigation that toggles open on clicking the burger button: a GSAP timeline sweeps a clip-path polygon over… - [Nordquantique Scroll](https://motionprompts.dev/prompts/nordquantique-scroll.md): A scroll-driven pixelated block transition between full-bleed sections. Each image section is 200vh tall and overlaid with two… - [Nvg8 Scroll Animation](https://motionprompts.dev/prompts/nvg8-scroll-animation.md): Intro section pinned for eight viewport heights and scrubbed with Lenis smooth scroll: nine thick rounded SVG strokes draw on in a… - [Assembly Icon-to-Text Scroll Animation](https://motionprompts.dev/prompts/nvg8-scroll-animation-2.md): A pinned hero for the 'Assembly' creative workspace, driven by a single scrubbed ScrollTrigger (smoothed with Lenis). As you… - [Three.js 3D Scroll Experience](https://motionprompts.dev/prompts/offficestud.md): 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… - [Orchestra 3D Scroll Animation](https://motionprompts.dev/prompts/orchestra-3d-scroll-animation.md): A pinned hero where six image-mapped CSS 3D cubes fly in from deep translateZ(-30000px) and assemble into a spread as you scroll.… - [OrkenWorld Scroll Animation](https://motionprompts.dev/prompts/orken-world-scroll-animation.md): A pinned section where scrolling drags a horizontal row of product cards across the viewport while a full-screen canvas grid of… - [O'Shane Howard Landing Page](https://motionprompts.dev/prompts/oshane-howard-lp-responsive.md): On load, an animated numeric counter (three stacked digit reels tweened with gsap.to and power2.inOut) counts up to 100% behind a… - [Our Revolution Landing Page Reveal](https://motionprompts.dev/prompts/our-revolution-lp.md): A preloader-to-hero landing reveal driven by a single GSAP timeline: a row of seven tall portrait images rises from below and… - [Outfit Landing Page Reveal](https://motionprompts.dev/prompts/outfit-landing-page-reveal.md): Preloader reveal for a fashion-archive landing page: six stacked centered images with random tilts scale up and un-clip with… - [Outline Text Filled by Media](https://motionprompts.dev/prompts/outline-text-over-media.md): A pinned stage where a giant word sits hollow — stroked, transparent fill — over a photograph, and a scroll-driven wipe uncovers a… - [Meristem Overlay Menu](https://motionprompts.dev/prompts/overlay-menu.md): Fullscreen overlay menu toggled by a hamburger button: a paused GSAP timeline scales four stacked green background layers in from… - [Oversized Year, Counter-Scrolled](https://motionprompts.dev/prompts/oversized-year-scroll.md): A timeline where each era band carries an enormous four-digit year as a watermark behind its content, drifting AGAINST the scroll… - [P10 Landing Page Reveal](https://motionprompts.dev/prompts/p10-landing-page-reveal-gsap.md): A preloader-driven landing reveal that plays automatically on load: SplitText masked characters slide the studio name and a large… - [Block Grid Page Transitions](https://motionprompts.dev/prompts/page-transitions.md): A fullscreen 10x11 grid of blocks acts as a curtain between routes: clicking a nav link grows the blocks up from the bottom… - [Page Transitions with the View Transition API](https://motionprompts.dev/prompts/page-transitions-view-transition-api.md): A multi-page portfolio where clicking a nav link is intercepted by the native Navigation API, which fetches the target HTML, swaps… - [Smooth Scroll Parallax Images](https://motionprompts.dev/prompts/parallax-effect.md): Musician landing page where every image inside an overflow-hidden container drifts on scroll: a Lenis smooth-scroll instance feeds… - [Infinite Scroll with Parallax](https://motionprompts.dev/prompts/parallax-snap-infinite-scroll.md): An endlessly looping vertical project list where wheel and touch scrolling drive a lerp-smoothed translateY on recycled… - [PermianWorld Landing Page Reveal Animation](https://motionprompts.dev/prompts/permianworld-landing-page-animation.md): Preloader reveal on page load: SplitText masked lines slide the preloader copy and counter up while a randomized counter climbs… - [Halation — Phantom Draggable Infinite Gallery](https://motionprompts.dev/prompts/phantom-gallery-javascript.md): A Three.js orthographic full-screen plane renders an infinite grid of captioned images via a fragment shader, using image and text… - [Phive Sticky Cards](https://motionprompts.dev/prompts/phive-sticky-cards.md): A vertical stack of full-height sticky cards that fold away on scroll: each card is pinned (pinSpacing false) while ScrollTrigger… - [Phive Text Scroll Animation](https://motionprompts.dev/prompts/phive-text-scroll-animation.md): Scroll-driven sequence of pinned full-screen sections where giant uppercase words stretch open vertically (scaleY driven by each… - [Interactive Divs with Physics](https://motionprompts.dev/prompts/physics-anim.md): Twelve grayscale polaroid-style image cards float over a full-screen p5.js canvas inside a zero-gravity Matter.js world, each DOM… - [Pixelated Text Hover Shaders](https://motionprompts.dev/prompts/pixelated-text-hover-shaders.md): A large wordmark is rendered to a 2D canvas texture and drawn on a full-screen Three.js orthographic plane. A custom fragment… - [Playable Objects](https://motionprompts.dev/prompts/playable-objects.md): A dark footer where tech-tag pills drop in from above and pile up under Matter.js physics (gravity, restitution, friction,… - [Photo Dump Scroll Scatter](https://motionprompts.dev/prompts/poly-app-photo-dump.md): A pinned photo-dump gallery for a photo studio archive: 15 randomly rotated print-style photo cards scattered in a ring around a… - [Poppr Gooey Overlay Menu](https://motionprompts.dev/prompts/poppr-menu.md): Fullscreen overlay menu with a gooey liquid-curtain reveal: clicking the Menu/Close toggle morphs an SVG path's d attribute… - [Products Lightbox Gallery](https://motionprompts.dev/prompts/products-lightbox-gallery.md): A large draggable canvas holds a 12x12 grid of sneaker product tiles that the user pans by mouse-dragging, with movement… - [Project Overview Modal](https://motionprompts.dev/prompts/project-page-overlay-animation.md): A project index where clicking any list item plays a paused GSAP timeline that slides a white detail overlay up from off-screen… - [PrototypeStudio Scroll Animation](https://motionprompts.dev/prompts/prototypestudio-scroll-animation.md): Pinned spotlight section scrubbed over five viewport heights with Lenis smooth scroll: a 01/10 counter travels down the section… - [Pure JS Vanilla Image Slider](https://motionprompts.dev/prompts/pure-js-vanilla-image-slider.md): A horizontal image slider driven by vertical page scroll: scrollY is mapped to a target translateX and eased toward it with a lerp… - [Minimal Push Overlay Menu](https://motionprompts.dev/prompts/push-over-overlay-menu.md): A fullscreen overlay menu triggered by clicking the hamburger toggle: a GSAP timeline with a custom 'hop' ease pushes the page… - [Lenis Smooth Scroll + ScrollTrigger](https://motionprompts.dev/prompts/qindustrial-scroll.md): 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… - [RADGA Horizontal Scroll Animation](https://motionprompts.dev/prompts/radga-horizontal-scroll-animation.md): A pinned section turns vertical scroll into a horizontal slide-strip: one ScrollTrigger (pin + scrub over 6x viewport height,… - [Radial Rotating Text Layout](https://motionprompts.dev/prompts/radial-rotating-texts.md): Sixty uppercase text labels are laid out in a huge ring using gsap.set with cosine/sine positioning and a per-item rotation.… - [Pan-Canvas Video Gallery](https://motionprompts.dev/prompts/react-pan-canvas.md): A full-viewport canvas holds an oversized 200vw x 200vh grid of film tiles centered with translate(-50%, -50%); on mousemove the… - [Rejoice Fullscreen Overlay Menu](https://motionprompts.dev/prompts/rejoice-menu.md): A fullscreen overlay navigation menu that opens on clicking the 'Menu' button and closes on 'Close'. A single paused GSAP timeline… - [Responsive Landing Page Reveal](https://motionprompts.dev/prompts/responsive-landing-page.md): On page load a full-screen preloader plays: a numeric counter races from 0 to 100 while an anime.js easeOutExpo timeline reveals… - [Ripple Displacement Slider](https://motionprompts.dev/prompts/ripple-displacement-slider.md): Fullscreen Three.js WebGL slider where a click anywhere fires a radial ripple (custom GLSL shader, GSAP-tweened progress over ~3s)… - [Sage East 3D Scroll](https://motionprompts.dev/prompts/sageeast-3d-scroll.md): A fixed 3D perspective slider where ten alternating slides sit at staggered translateZ depths and fly toward the viewer as you… - [Rotating Hand Animation](https://motionprompts.dev/prompts/samuelsiebler-js.md): A single ScrollTrigger pins the section over eight viewport heights and scrubs a clock-like rod that spins 1800deg via… - [Zoomable Image Wall](https://motionprompts.dev/prompts/sarah-bassett.md): A full-viewport mosaic wall of 1200 image tiles that reveals on load with a random GSAP grid stagger (scale + opacity,… - [SavoirFaire Landing Page Reveal Animation](https://motionprompts.dev/prompts/savoirfaire-landing-page-reveal-animation.md): An automatic on-load preloader that runs a slot-machine style number counter (a masked .count strip and its .count-wrapper are… - [Savoir-Faire Click Reveal](https://motionprompts.dev/prompts/savoirfaire-lp.md): A full-screen dark editorial landing where every click spawns a random image or autoplaying video card at the pointer. Each card… - [Scroll-Powered SVG Stroke Draw](https://motionprompts.dev/prompts/scroll-powered-svg-stroke.md): A thick serpentine orange SVG stroke draws itself behind the page content as you scroll, using the classic… - [Scroll-Powered SVG Stroke Drawing](https://motionprompts.dev/prompts/scroll-powered-svg-stroke-2.md): A tall inline SVG path with a thick orange rounded stroke sits behind a column of content rows; using the… - [Scroll Wave Image Gallery](https://motionprompts.dev/prompts/scroll-wave-image-gallery.md): Vertical gallery of 12 JS-generated images that drift horizontally in a sine-wave pattern as you scroll: each image has its own… - [SeventeenAgency Scroll Animation](https://motionprompts.dev/prompts/seventeenagency-scroll-animation.md): Infinite-scrolling contact page (Lenis infinite mode) where the contact-info section is cloned 10x into a seamless loop: two… - [Shaped Section Boundary](https://motionprompts.dev/prompts/shaped-section-boundary.md): Stacked full-height sections whose top edge is a shape instead of a straight line: each incoming section carries its own boundary… - [Sidebar Slide-Out Menu](https://motionprompts.dev/prompts/sidebar-slide-out-menu.md): Clicking the bottom-right 'Get the Overlay' toggle slides a column of three cards in from the right edge (right: -110% to 0%) with… - [3D Scroll Scanner Experience](https://motionprompts.dev/prompts/silenceo.md): A full-page scroll experience where a Three.js GLTF model floats and rotates as you scroll, its X-rotation mapped to scroll… - [SofiHealth Product Scroll Animation](https://motionprompts.dev/prompts/sofihealth-product-scroll-animation.md): A pinned, scrub-driven scroll section where a Three.js GLTF shaker model spins on its Y-axis while a single ScrollTrigger onUpdate… - [SpencerGabor Magnetic Cards](https://motionprompts.dev/prompts/spencergabor-magnetic-cards.md): A fanned stack of four cards centered on screen reacts magnetically to the cursor: mouse velocity within a 500px proximity radius… - [Stacked Alternating Marquees](https://motionprompts.dev/prompts/stacked-alternating-marquees.md): Four full-width marquee rows stacked with no gap, running continuously in ALTERNATING directions at non-harmonic speeds… - [Steelworks Landing Page Reveal](https://motionprompts.dev/prompts/steelworks-landing-page-reveal.md): On-load preloader and hero reveal: a white progress bar scales across a dark overlay that wipes away via clip-path, five small… - [Sticky Stacking Cards on Scroll](https://motionprompts.dev/prompts/sticky-cards.md): Full-width service cards that pin at 35% of the viewport on scroll and stack under each incoming card: every pinned card's inner… - [Sticky Cards ScrollTrigger](https://motionprompts.dev/prompts/sticky-cards-2.md): A stack of full-screen sections is pinned one after another with ScrollTrigger (pin, pinSpacing:false, scrub) so each card holds… - [Ashfall Sticky Cards Scroll](https://motionprompts.dev/prompts/sticky-cards-ashfall-rebuild-js.md): Five image cards stacked in a centered container are revealed one at a time while a Lenis-driven, ScrollTrigger-pinned section (4… - [Sticky Image Minimap](https://motionprompts.dev/prompts/sticky-image-minimap.md): A tall scrolling column of full-size images paired with a sticky vertical minimap of thumbnails; a GSAP ScrollTrigger created per… - [Stories Slideshow](https://motionprompts.dev/prompts/stories.md): A fullscreen Stories-style slideshow that auto-advances every 4s and can be stepped forward/back by clicking the left/right half… - [Story World Carousel Slider](https://motionprompts.dev/prompts/story-world-carousel-slider.md): A fullscreen click-advanced carousel where each click slides the current image left (x:-500) while the next slide is revealed by… - [StudioDialect 3D Spiral Image Gallery](https://motionprompts.dev/prompts/studiodialect-image-gallery.md): Scroll-driven 3D spiral gallery built with Three.js: 75 curved tiles textured with 10 photos wind down a five-revolution helix,… - [SVG Scribble Draw-On Image Hover](https://motionprompts.dev/prompts/svg-image-hover-effect.md): A 3x2 grid of square image cards, each overlaid with two oversized scribbled SVG paths. On mouseenter the strokes draw themselves… - [SVG Stroke Page Transition](https://motionprompts.dev/prompts/svg-stroke-page-transition.md): Page transition where two full-screen squiggly SVG paths draw themselves in via animated strokeDashoffset while their stroke-width… - [Telescope Image Scroll Animation](https://motionprompts.dev/prompts/telescope-img-scroll-animation.md): A pinned banner scrubbed over four viewport heights with Lenis smooth scroll: the image container scales up from zero while seven… - [Telescope Scroll Animation](https://motionprompts.dev/prompts/telescope-scroll-animation.md): 'Afterimage', a pinned spotlight gallery of long-exposure photographs in colored light. Scrolling first splits the 'After / Image'… - [Text Hover Image Ring](https://motionprompts.dev/prompts/text-hover-effect.md): Hovering a highlighted word in the hero paragraph reveals a ring of 11 images that continuously orbits around the cursor. The… - [Text Reveal Animation](https://motionprompts.dev/prompts/text-reveal-animation.md): Char-level text reveal built on GSAP SplitText: each character slides in from x:100 with a 20-degree skew and fades to place… - [The Quiet Crowd Landing Reveal](https://motionprompts.dev/prompts/the-happy-few.md): On page load a GSAP timeline wipes a clip-path preloader and spins a loader, then reveals the hero: heading characters (manually… - [TheFirstTheLast Scroll Animation](https://motionprompts.dev/prompts/thefirstthelast-scroll-animation.md): A pinned section where six rotated product cards stack up one after another from the bottom of the viewport as you scroll, then… - [ThreeJS Infinite Slider](https://motionprompts.dev/prompts/threejs-slider.md): Infinite vertical slider built entirely in Three.js (no GSAP): ten textured planes loop endlessly inside a WebGL scene, driven by… - [ThreeJS Curved Distortion Slider](https://motionprompts.dev/prompts/threejs-slider-final.md): An infinite horizontal Three.js image slider built from textured PlaneGeometry meshes whose vertices bend into a radial curve as… - [ThreeJS 3D Video Gallery](https://motionprompts.dev/prompts/threejs-video-gallery.md): A Three.js WebGL grid of video-textured planes curved into a parabolic wall, each plane mapped to a looping muted video texture.… - [TrueKind Landing Page Reveal](https://motionprompts.dev/prompts/truekindskincare-landing-page-reveal-javascript.md): A preloader-to-hero landing reveal driven by a single GSAP timeline with a custom 'hop' ease: a two-digit counter rolls through… - [3D Tunnel Image Slider Carousel](https://motionprompts.dev/prompts/tunnel.md): A full-screen animated monochrome tunnel, rendered as a Three.js fragment-shader plane, sits behind ten framed cinematic film… - [Turbulent Inversion Lens Hover Effect](https://motionprompts.dev/prompts/turbulent-inversion-lens-hover-effect-javascript.md): A full-viewport Three.js plane renders a portrait through a fragment shader; moving the cursor drives a lerped mask whose radius… - [ScrollTrigger Variable Font Marquee](https://motionprompts.dev/prompts/var-font-anim.md): Four horizontal image marquees drift sideways as you scroll (gsap.fromTo on x driven by a scrubbed ScrollTrigger), while SplitType… - [Voku Image Slider](https://motionprompts.dev/prompts/voku-image-slider.md): Infinite horizontal image slider with 9 slides arranged along a cosine arc: each rAF frame computes a modular wrap position per… - [Voltlites Pinned Hero Zoom-Out Reveal](https://motionprompts.dev/prompts/voltlites-scroll-animation.md): Hero pinned for four viewport heights where a 3x3 spotlight image grid (300% of the viewport) scales from 1 to 0.5 while each… - [VoyeurVerite Scroll Animation](https://motionprompts.dev/prompts/voyeurverite-scroll-animation.md): Pinned hero scrubbed over five viewport heights with four manual phases: the foreground image clips into a central vertical slit… - [Vucko Scroll Animation](https://motionprompts.dev/prompts/vucko-scroll-animation-javascript.md): 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… - [Waabi Scroll Animation](https://motionprompts.dev/prompts/waabi-scroll-animation.md): Hero pinned for 3.5 viewport heights with Lenis smooth scroll and a scrubbed ScrollTrigger whose progress is mapped manually: the… - [Hero Warp Slider](https://motionprompts.dev/prompts/warp-slider.md): A full-screen WebGL hero slider where clicking anywhere advances to the next image through an expanding lens-warp bubble rendered… - [Warp Lens Slider](https://motionprompts.dev/prompts/warp-slider-next.md): A full-screen WebGL image slider where clicking anywhere expands a circular lens/bubble mask from the center, warping the incoming… - [We Go Again](https://motionprompts.dev/prompts/we-go-again.md): A three-column documentary-studio film selector where a vertical thumbnail gallery on the right lets you click any item to swap… - [WebGL Interactive Gradient](https://motionprompts.dev/prompts/webgl-interactive-gradient.md): A full-screen animated WebGL gradient built with Three.js and two custom fragment shaders: a fluid-dynamics shader ping-pongs… - [WeroWallet Spotlight Stroke Draw](https://motionprompts.dev/prompts/werowallet-scroll-animation.md): Pinned spotlight section where 13 thick diagonal SVG strokes draw in with a staggered stroke-dashoffset scrub until they cover the… - [Wodniack Work Section Scroll](https://motionprompts.dev/prompts/wodniack-work-section-scroll.md): A pinned scroll section where the word WORK, built from HTML letter divs, streams along four Three.js CatmullRom curves projected… - [Karim Saab Fashion Carousel](https://motionprompts.dev/prompts/work-carousel-karim-saab.md): A full-screen fashion carousel where a wheel or touch swipe triggers a GSAP transition: the current slide scales down, rotates and… - [WorkingStiff Animated Teams Section](https://motionprompts.dev/prompts/workingstiff-animated-teams-section.md): Scroll-driven team section with Lenis smooth scroll and two manual scrubbed ScrollTriggers: as the section enters the viewport… - [YARD Hover Menu](https://motionprompts.dev/prompts/yard-hover.md): A large uppercase project list where hovering a menu item swaps its label lines via GSAP top-position tweens and reveals a stacked… - [Zajno Landing Page Reveal](https://motionprompts.dev/prompts/zajno-lp.md): An on-load intro where a centered number counts up to 100, then triggers the landing-page reveal: the scaled-down hero clip-path… - [Nuvoro Page Transitions](https://motionprompts.dev/prompts/zajno-page-transitions.md): A four-view site (home, work, studio, contact) where clicking a nav link runs a native View Transitions API page change: the… - [Zentry Scroll Animations](https://motionprompts.dev/prompts/zentry-scroll.md): A long scroll story where a section is pinned for 4x the viewport height and every stage is scrubbed by scroll. As you scroll,… - [Zoom-Out Mark Preloader](https://motionprompts.dev/prompts/zoom-out-mark-preloader.md): 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…