Spider-Verse

Spider-Verse WebGL Experience

by Hanan

Repo Live site

Description

Spider-Verse is a fan tribute site for Spider-Man: Across the Spider-Verse, built as a motion and WebGL showcase. The cursor ripples a liquid halftone portal in the hero, Spider-Man swings across the page as you scroll, characters open into dossier popups, and the playlist plays beats made live in the browser.

Use it for:

a launch page for a film, game or character
a portfolio piece showing WebGL, scroll animation and sound
a reference for scroll storytelling where one character travels across sections

Workflow

Open Antigravity
Install Antigravity, open an empty folder in it and start a new agent chat with Gemini 4 Argon as the model.
Paste the prompt
Copy the prompt on this page and send it to the agent. It sets up a Vite project with GSAP and Lenis and builds the sections one by one.
Add the artwork
Gather the images: an unmasked Miles portrait, a Spider-Man cutout on a transparent background, a Brooklyn skyline, six character images and six comic covers. Put them in the project and tell the agent their file names.
Run it and fix
Ask the agent to run npm install and npm run dev, then open the local address it gives you. Scroll the whole page, move the cursor over the hero, and ask for one fix per message.
Publish
Ask the agent to run npm run build. The result opens straight from index.html, or upload it to any static host.

Main prompt

Build an interactive fan tribute website for Spider-Man: Across the Spider-Verse with Vite, vanilla JavaScript, WebGL shaders, GSAP ScrollTrigger, Lenis smooth scroll and the Web Audio API. Bundle it so the site also works when index.html is opened straight from disk.

Design: dark ink purple #0E0A1F, magenta #FF2E93 and cyan #00E5FF, with halftone dots and comic panels. Anton for slanted, outlined headlines with a red and cyan offset, Plus Jakarta Sans for text and JetBrains Mono for small corner labels. Keep labels short and never use slashes in them.

Sections:
1. Loader: a 000 to 100 counter with a pixel-art Spider-Man hanging from a web, then two jagged comic panels tear apart.
2. Hero: a huge "SPIDER-MAN" headline and a jagged portal over a Brooklyn sunset. Moving the cursor ripples a WebGL liquid effect with halftone dots that reveals the suited Spider-Man under the unmasked Miles portrait.
3. On scroll, Miles leaves the hero, turns into Spider-Man and swings across the next section on a web line, then lands in a round badge in the identity section and turns back into Miles.
4. Manifesto: lines light up as you scroll, with comic stickers and a red scribble under "anyone can wear the mask."
5. Identity: a "HELLO my name is MILES" sticker and a speech bubble cycling short lines.
6. Roster: six character cards that move sideways as you scroll down.
7. Playlist: six tracks; clicking one plays a beat made live with the Web Audio API.
8. Six tilted comic covers that straighten on hover.
9. Clicking a character or a cover opens a dossier popup with a radar, a short bio and stat bars.
10. Footer with a giant "THWIP." and a back to top button.

Pause any animation that is off screen so scrolling stays at 60fps.