12:I[93649,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"DocsSidebar"] 13:I[67919,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"PreviewTabs"] 14:I[27615,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"CopyBlock"] 15:T3b94,# Mouse-Trail Image Bounce — AI Prompt Copy this prompt into **v0**, **Bolt**, **Cursor**, **Framer AI**, or **Claude** to generate this component from scratch. > **Use case:** Ideal as a playful full-viewport interlude on a fashion, photography, or creative studio portfolio where cursor exploration should feel tactile and memorable. --- # Add Mouse-Move Image Fall & Bounce Section — Integration Prompt > **You are working inside an existing HTML project. Do NOT create a new file. Do NOT overwrite `` or reset ``/`body` styles. Adapt and integrate this interactive section as an addition to the current codebase — preserve everything already there (existing markup, styles, animations, dependencies).** Add a **fullscreen interactive section** where mouse movement (or touch drag) spawns curated images that appear at the cursor position, scale up elastically, then fall down through the viewport with physics — bouncing once, tilting, and dropping off-screen. Each image cycles through a preloaded set. The center of the section shows two lines of instruction text ("Move your mouse to make / images fall and bounce") with the second line rendered in grey. Uses **GSAP timelines with mixed easings** (`elastic.out`, `back.in`, `power1.in`) to make each image feel like a physical object — scale bounce on spawn, gravity pull, wall-bounce, gentle rotation on fall. Distance-based throttle prevents spam: images only spawn after cursor has traveled `viewport_width / 8` pixels (or `/6` on touch). Paste-ready for Bolt / v0 / Cursor / any AI agent. --- ## Integration Rules (READ FIRST) 1. **Do not duplicate CDN imports.** If GSAP is already loaded, reuse it. Only add if missing: ```html ``` 2. **Namespace with `.mif-*`** (mouse image fall). Do not use generic names like `.effect`, `.medias`, `.content-effect` that collide with host CSS. 3. **Section is `100dvh` fullscreen.** Insert it as a standalone `

` block wherever it belongs in the page flow — do NOT put it inside a smaller container. It NEEDS the full viewport height. 4. **`overflow: hidden` is required** on the section wrapper — spawned images travel past the section bounds during fall and must be clipped. 5. **Do not touch `` / `` global styles.** The section is self-contained. 6. **Wrap the JS in an IIFE** so nothing leaks to global scope. 7. **Preload images as static `` tags** inside `.mif-medias` — the JS reads their `src` attribute into a JS array on init. This ensures the browser has cached them before the first spawn (no first-hover jank). --- ## What to Add ### 1. HTML — insert at the desired position in page flow ```html

Move your mouse to make images fall and bounce

``` ### 2. CSS — append to the existing `