Shreyansh Kumar Singh

Case study · SPATIAL · 2607.SPT.04

Antarang: a walkable 3D museum of Indian and world art

How do you build a walkable 3D museum on the web with React Three Fiber?

Antarang is a walkable first-person museum in the browser, built with React Three Fiber: a zoomable time-river puts Indian art (below the axis) and world art (above it) on one shared timeline, and gold markers open era-specific 3D galleries you walk through with WASD and mouse-look. Every artwork and fact comes from Wikipedia and Wikimedia Commons — nothing is invented.

By Shreyansh Kumar Singh · Updated · Source available on GitHub.

ANTARANG's real dual-axis timeline UI — World Art and Indian Art, gold rings opening a walkable gallery
Periods
24
Artists
30+
Data source
Wikipedia / Wikimedia Commons only
Target
60 fps in-gallery
Stack
Next.js · React Three Fiber · Three.js · drei · postprocessing · Zustand · Drizzle · Neon

01The problem it solves

Indian art history usually appears in world-art timelines as a footnote. Antarang's premise is that it belongs on the same axis — Indus Valley to the Progressive Artists' Group alongside the Renaissance to Modernism — and that the way to feel that is to walk through it.

02What he built

A time-river, then a museum

A horizontal, drag-to-pan, zoomable timeline: World above, India below, 24 periods, 30+ artists and 25 public-domain artworks in the verified catalogue. Gold pulsing dots are walkable museums; any artwork opens a zoom-and-pan inspect view with its story, significance and sources.

Era-specific 3D galleries

Sandstone temple halls with pillars for Indian dynasties, a warm salon for Old Masters, a white cube for the moderns — with PBR materials, a reflective floor, per-artwork spotlights, soft shadows, bloom and ACES tone mapping, plus a guided auto-tour that flies the camera to each work.

Data you can trust

A seed script resolves each artwork's canonical image, licence and credit from the Wikimedia Commons API into Neon Postgres (via Drizzle); without a database the app runs from the bundled verified catalogue.

03 — THE HARDEST DECISIONFix jitter, not frame rate

The gallery felt jittery, and the instinct is to chase frames per second. The bigger win was elsewhere: the centre-screen focus raycast — the check that decides which artwork you're looking at — ran every frame. Throttling it to roughly ten times a second improved perceived smoothness more than any frame-rate tuning did.

The same performance thinking runs through the build: an adaptive device-pixel-ratio capped at 1.8 with a performance monitor to hold 60 fps on weaker GPUs, the 3D code split out of the initial bundle, and dust motes and head-bob that switch off under reduced-motion settings.

04The result

A museum that treats Indian art as a first-class citizen of art history, built on a single permitted data source — and where copyright forbids a reproduction, a modern artist appears as a biography node rather than an invented image.

RESEARCHResearch findings from this project

R-07A single permitted source, and what to do about copyright

Verified Wikipedia/Wikimedia data only; in-copyright modern artists become biography nodes rather than invented reproductions.

R-08Jitter is a bigger problem than framerate

A focus raycast throttled to ~10×/s fixed perceived smoothness more than any framerate tuning did.

NOTESQuestions this project answers

STACKTech stack

  • Next.js
  • React Three Fiber
  • Three.js
  • Drizzle
  • Neon

MORE OF THE RANGEMore projects by Shreyansh Kumar Singh