# Room 101 > Drag, throw or press the web's pet hates into Room 101: a heavy door eases ajar as they near it, pulls them into the dark and slams shut with a rattle. Canonical: https://gsapvault.com/effects/room-101 Live demo: https://gsapvault.com/demos/room-101/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Draggable, InertiaPlugin | | Techniques | draggable, momentum, 3d-transforms, keyboard-navigation | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Effect number 101 is Room 101, in the spirit of the British TV panel show where guests banish their pet hates. The web's own pet hates sit beside a heavy painted door: a cookie banner, an autoplay video, lorem ipsum, a newsletter popup, a spinner that never stops, a Click here link, a CAPTCHA and a layout shift. Drag one towards the door and the door eases ajar in 3D, further the closer you get, with darkness behind it. Drop it in the doorway or throw it hard enough and the room takes it: the item accelerates into the gap, stretches along its path, spins and shrinks into the dark, then the door slams with an overshoot, the frame and the brass 101 plate rattle and a line of dust settles. A weak throw thuds off the closed door instead. A tally rolls up with every banishment, and when everything is gone one button lets them all back out. ## Features - A door that answers proximity: the leaf eases ajar in CSS 3D as a dragged item approaches and swings back as it leaves - Drop in the doorway or throw with enough speed: InertiaPlugin release velocity decides between banish, thud and glide - The pull stretches each item along its own path of travel, whatever its tilt, then spins and shrinks it into the dark - A heavy slam with overshoot, a rattling frame and number plate, settling dust and a floor that makes nearby items hop - Weak throws bounce off the closed door with a thud and a shudder; items never leave the stage - Fast repeated banishes queue: the door stays open for the next item and slams once at the end - Items are native buttons: Enter, Space, click and tap run the same door sequence - A rolling tally, an aria-live status line and a Let them out button that tumbles everything back out - A small API on the element: banish(), restore(), count() and revert() - Reduced motion swaps the swing, pull and slam for fades; without JavaScript the room is a still composition ## Use Cases - An easter egg or 404 page that turns frustration into play - A playful way to dismiss notifications, tags or filters on a portfolio or campaign site - Onboarding or survey pages where visitors throw away the options they do not want - Conference, podcast or agency pages about bad web practice, with the offenders as the content - A drag-to-delete pattern for a to-do or moodboard that needs more character than a bin icon ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works Every item is a native button made draggable with Draggable inside the room's bounds, while InertiaPlugin tracks its velocity. During a drag the distance from the item to the doorway sets how far the door leaf rotates about its hinge, inside a perspective on the doorway. On release the item's path is projected forward from its velocity: a drop in the doorway or a fast enough path into the door commits it, a slow path into the door bounces off with a thud, and anything else glides to a stop. A committed item joins a queue; the door opens fully, the item is pulled into the gap along a bowed path while a stretch along its direction of travel is combined with its spin and shrink, and it fades into the dark. The door slams once the queue is empty. Keyboard activation calls the same banish routine, so every input sees identical motion. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ **3. Add the room anywhere in your ``:** _Code snippet omitted: it ships with the download._ The demo's `index.html` has the full door (panels, push plate, handle, kick plate, hinges) and all eight pet hates. ### Using It With Your Own Design **What the effect needs from your markup:** - `[data-room-101]` is the room: the positioning context, the drag bounds and the scope for everything below. Several rooms on one page work independently. - `[data-room-doorway]` is the drop zone and the dark opening. Its rectangle decides where a drop counts, and the pull aims at its latch side. - `[data-room-leaf]` is the door leaf the script rotates on its hinge. Put anything you like on it. - `[data-room-item]` elements are the things you banish. Use native `