Archive

3D Circular Funnel Archive

by Hanan

Repo Live site

Description

Archive is an interactive 3D photo gallery. Editorial photos sit on four rings that taper like a funnel and spin in opposite directions: scroll to travel down through the rings, drag to spin them and click any photo to open it in a lightbox. Beside the main view are a filterable Objects grid, an Art collage and an About page, all in black or white.

Use it for:

a photographer's or art director's portfolio
a studio, gallery or record label showing its archive
a lookbook or exhibition site that should feel like walking through the work

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 writes the rings, the views and the lightbox.
Add photos from Unsplash
Pick around 40 editorial photos on Unsplash, black and white or muted, and ask the agent to add their links to the project's photo list.
Run it and fix
Ask the agent to run npm install and npm run dev, then open the local address it gives you. Ask for one fix per message.
Publish
Ask the agent to run npm run build, then upload the built files to any static host, such as Netlify or GitHub Pages.

Main prompt

Build a full-screen 3D photo archive website with Vite, vanilla JavaScript, CSS 3D transforms and GSAP. Do not use React or Three.js.

The main view is a 3D funnel: four rings of photo cards stacked from top to bottom, each ring smaller than the one above (10, 10, 9 and 8 cards). The rings spin slowly in alternating directions. Scrolling moves down through the rings, dragging sideways spins them with momentum, and moving the mouse tilts the whole scene slightly.

Cards:
- Solid, never see-through, with square corners and mixed photo shapes (4:5, 1:1 and 3:4).
- Cards on the far side of a ring get darker.
- A small title and an uppercase subtitle sit under each card and never show mirrored.
- Clicking a card opens a lightbox with a larger image, a short description, and previous, next and close buttons.

Header: "ARCHIVE" on the left, links to Archive, Objects, Art and About in the middle, and a B / W switch on the right for a near-black (#080809) or pure white theme. Use only the Inter font.

Other views:
- Objects: a scattered four-column grid with All, Objects, Art and Architecture filters.
- Art: an overlapping collage of six photos.
- About: a short studio statement in three columns.

Add a custom cursor that grows into a circle reading "VIEW" over a card. Fill the rings with editorial black and white or muted photos from Unsplash, and keep it running at 60fps.