Credits.
Who made what this site is built from. Every project image comes from that project’s own site or repository; every borrowed idea is listed here, rebuilt in our own code.
Code and libraries
- three.js (MIT): the one WebGL stage every world draws into.
- GSAP (GSAP Standard no-charge licence): timelines, quick setters and easing.
- Lenis (MIT): smooth and looping scroll.
- The hero ink is a stable-fluids solver after Jos Stam (1999) and Pavel Dobryakov’s WebGL fluid simulation (MIT), rewritten for this site.
- Ideas taken as techniques only and rewritten from scratch: OGL flowmap and GPGPU particles (Unlicense), Codrops demos (MIT), gl-transitions (MIT).
- Built with Vite and TypeScript. Hosted on Vercel.
Type
- Archivo, Barlow Condensed, Fraunces, Bricolage Grotesque, Instrument Serif and JetBrains Mono, under the SIL Open Font License. Topperly is set in Newsreader by Production Type and Onest by Dmitri Voloshin (both SIL Open Font License, via Google Fonts, subset to Latin).
- Satoshi by Indian Type Foundry, from Fontshare (ITF Free Font License), used for Morrow as on its own site.
Mechanics we learned from
Studied, never copied: we took the mechanic and rebuilt it in each project’s own palette, type and assets.
- Award sites: a24.raviklaassens.com, aristidebenoist.com, cuberto.com, olivierlarose.com, signal-a.studio, huyml.co, unseen.co, emotion-agency.com.
- Case-study pages: Metalab (Midjourney), Collins (Robinhood), Koto, Zajno, Rejouice, mathiasadolfsson.dev, madebyigor.com and angelo.so.
- Dribbble shots by Nicolas Solerieu, theosm™, Kreativa, Felipe Rosas Licht, Cao Thanh Hùng, Elizaveta Ruotsi, Anastasiia Antonenko, AmazingUI, Bekk One, Steven González, Igor Pavlinskiy (Fireart), Olena Tieriekhova, Matthew Jedrzejewski (Unfold) and Roman Osypenko.
Project images
Every asset here was taken from the project's own website or its own local repository. All six are Harsh Jain's projects; Harsh has approved using their logos and assets. Harvested 2026-11-08. Photos and art were converted to WebP (quality 82, max 1600px wide, plus a -640 variant); SVGs were kept as SVG. Screenshots were taken with Playwright at a 1440px viewport (the NIVRA Guard phone shot at 390px) and cropped to the content.
Third-party brands appear only where they are part of a real event photo or a project page (for example partner logos on an AAROH stage screen, or the HP logo on a prize laptop).
Project GRID (15 assets)
Photos come from the AAROH, Metamorphosis and Aurora albums on projectgrid.org.
aaroh-auditorium-wide.webp(photo): projectgrid.org/images/aaroh/archive/aaroh-room-wide-1800.webpaaroh-packed-auditorium.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m054-packed-auditorium-1600.webpaaroh-ideas-that-rise-talk.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m087-ideas-that-rise-talk-1600.webpaaroh-notebook-and-laptop.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m102-notebook-and-laptop-1600.webpaaroh-lectern-view-of-hall.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m682-lectern-view-of-hall-1600.webpaaroh-winning-team-trophy.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m609-winning-team-trophy-1600.webpmetamorphosis-lathe-workshop.webp(photo): projectgrid.org/images/metamorphosis/album/meta-679-lathe-demo-in-workshop-1600.webpmetamorphosis-robot-car-pitch.webp(photo): projectgrid.org/images/metamorphosis/album/meta-509-robot-car-pitch-1600.webpmetamorphosis-certificates-stage.webp(photo): projectgrid.org/images/metamorphosis/album/meta-538-changemaker-certificates-stage-1600.webpmetamorphosis-cohort-group.webp(photo): projectgrid.org/images/metamorphosis/album/meta-745-cohort-group-photo-1600.webpaurora-winner-prize-laptop.webp(photo): projectgrid.org/images/grid-photo-10-p8.jpgproject-grid-logo.webp(logo): projectgrid.org/images/brand/project-grid-organization-logo-1024.pngscreenshot-home-hero.webp(screenshot): projectgrid.org/ (screenshot, 1440px viewport)screenshot-inside-the-rooms.webp(screenshot): projectgrid.org/ (screenshot, 1440px viewport)screenshot-aaroh-363.webp(screenshot): projectgrid.org/ (screenshot, 1440px viewport)
Topperly (18 assets)
Re-harvested 2026-11-09 from topperly.app's new UI. The dashboard is the site's own /home-preview.png (an image, harvested as is); the underwater Toppu is the banner art cropped from it. Icons and row illustrations are the site's SVGs, unchanged. Screenshots are 2x captures of the live pages.
dashboard-preview.webp(product): topperly.app/home-preview.pngtoppu-underwater.webp(mascot): topperly.app/home-preview.png (the dashboard banner art, cropped)toppu-guide.webp(mascot): topperly.app/brand/toppu-guide.pngtopperly-logo.svg(logo): topperly.app/brand/logo.svgicon-physics.svg(icon): topperly.app/elements/icons/icon-physics.svgicon-chemistry.svg(icon): topperly.app/elements/icons/icon-chemistry.svgicon-maths.svg(icon): topperly.app/elements/icons/icon-maths.svgicon-cs.svg(icon): topperly.app/elements/icons/icon-cs.svgicon-english.svg(icon): topperly.app/elements/icons/icon-english.svgicon-practise.svg(illustration): topperly.app/elements/icons/icon-practise.svghome-read-notes.svg(illustration): topperly.app/elements/home/home-read-notes.svghome-cs-lab.svg(illustration): topperly.app/elements/home/home-cs-lab.svgscreenshot-home-hero.webp(screenshot): topperly.app/ (screenshot, 1440px viewport, 2x)screenshot-inside.webp(screenshot): topperly.app/#inside (screenshot, 1440px viewport, 2x)screenshot-home-phone.webp(screenshot): topperly.app/ (screenshot, 390px viewport, 3x)screenshot-simulations.webp(screenshot): topperly.app/resources/simulations (screenshot, 1440px viewport, 2x)screenshot-ncert-books.webp(screenshot): topperly.app/resources/ncert-reader (screenshot, 1440px viewport, 2x)screenshot-notes.webp(screenshot): topperly.app/resources/notes (screenshot, 1440px viewport, 2x)
Aestrum (9 assets)
aestrum.in is a single page; all its image assets are included.
aestrum-wordmark.svg(logo): aestrum.in/art/aestrum-wordmark.svgaestrum-flame.svg(logo): aestrum.in/art/flame.svgenquiry-flame.webp(product): aestrum.in/art/site-13/enquiry-flame.webpwork-morrow-home.webp(product): aestrum.in/art/projects/morrow-home.webpwork-topperly-live-optics.webp(product): aestrum.in/art/projects/topperly-live-optics.webpscreenshot-home-hero.webp(screenshot): aestrum.in/ (screenshot, 1440px viewport)screenshot-less-paperwork.webp(screenshot): aestrum.in/ (screenshot, 1440px viewport)screenshot-things-weve-built.webp(screenshot): aestrum.in/ (screenshot, 1440px viewport)screenshot-footer.webp(screenshot): aestrum.in/ (screenshot, 1440px viewport)
Morrow (13 assets)
workspace, access-scene, mark and wordmark are served at morrow.aestrum.in/morrow/ and are byte-identical to the files in Morrow's own repository. The live home page shows the screens/round6 images.
screen-home.webp(product): morrow.aestrum.in/screens/round6/home.webpscreen-listening.webp(product): morrow.aestrum.in/screens/round6/listening.webpscreen-reading.webp(product): morrow.aestrum.in/screens/round6/reading.webpscreen-result.webp(product): morrow.aestrum.in/screens/round6/result.webpscreen-library.webp(product): morrow.aestrum.in/screens/round6/library-detail.webpscreen-island-loop.webp(product): morrow.aestrum.in/screens/round6/island-loop.webpworkspace-weekly-brief.webp(product): morrow.aestrum.in/morrow/workspace.pngaccess-scene.webp(mascot): morrow.aestrum.in/morrow/access-scene.webpmorrow-mark.webp(logo): morrow.aestrum.in/morrow/mark.pngmorrow-wordmark.webp(logo): morrow.aestrum.in/morrow/wordmark.pngscreenshot-home-hero.webp(screenshot): morrow.aestrum.in/ (screenshot, 1440px viewport)screenshot-one-sentence.webp(screenshot): morrow.aestrum.in/ (screenshot, 1440px viewport)screenshot-made-in-bharat.webp(screenshot): morrow.aestrum.in/ (screenshot, 1440px viewport)
NIVRA (7 assets)
The screenshots come from NIVRA’s own production build (nivra-vision-lab/dist), run in sample mode.
nivra-mark.webp(logo): NIVRA’s own repository, public/brand/nivra-mark.png (same file as Nivra/assets/pitch/logo.png)screenshot-command-wall.webp(screenshot): Local build of nivra-vision-lab (dist), route /wall?demo=1 (screenshot, 1440px viewport)screenshot-incident-review.webp(screenshot): Local build of nivra-vision-lab (dist), route /wall?demo=1 after Run sample incident (screenshot, 1440px viewport)screenshot-confirmed-incident.webp(screenshot): Local build of nivra-vision-lab (dist), route /wall?demo=1 after Confirm + alert (screenshot, 1440px viewport)screenshot-guard-alert-phone.webp(screenshot): Local build of nivra-vision-lab (dist), route /guard?demo=1&guard=G2 (screenshot, 390px viewport)screenshot-guard-shift.webp(screenshot): Local build of nivra-vision-lab (dist), route /guard?demo=1&guard=G2 (screenshot, 1440px viewport)screenshot-live-workspace.webp(screenshot): Local build of nivra-vision-lab (dist), route /lab (screenshot, 1440px viewport)
RagaPedia (17 assets)
Everything comes from the live site ragapedia.com/ (not ragapedia.in or .org, which belong to other people). The paintings are the site's own art: the three home-page "door" images, and the eight hour paintings used in "A raag for every hour" and on raag pages. The logo is served only as a PNG (no SVG exists at /brand/), so it was converted to WebP with its transparency kept. No 3D sitar render was found on the site; the sitar appears in the raag door painting and the logo. Screenshots were taken at a 1440px viewport with the floating "companion" tip hidden.
ragapedia-logo.webp(logo): ragapedia.com/brand/ragapedia-logo.pngdoor-raag-sitar.webp(product): ragapedia.com/images/doors/raag-720.webpdoor-bollywood-cinema.webp(product): ragapedia.com/images/doors/bollywood-1100.webpdoor-taal-tabla.webp(product): ragapedia.com/images/doors/taal-720.webphour-dawn.webp(product): ragapedia.com/images/hours/dawn.webphour-morning.webp(product): ragapedia.com/images/hours/morning.webphour-afternoon.webp(product): ragapedia.com/images/hours/afternoon.webphour-sunset.webp(product): ragapedia.com/images/hours/sunset.webphour-early-night.webp(product): ragapedia.com/images/hours/early-night.webphour-night.webp(product): ragapedia.com/images/hours/night.webphour-midnight.webp(product): ragapedia.com/images/hours/midnight.webphour-late-night.webp(product): ragapedia.com/images/hours/late-night.webpscreenshot-home-hero.webp(screenshot): ragapedia.com/ (screenshot, 1440px viewport)screenshot-this-hours-raag.webp(screenshot): ragapedia.com/ (screenshot, 1440px viewport; clock-dependent, shows Darbari Kanada)screenshot-raag-for-every-hour.webp(screenshot): ragapedia.com/ (screenshot, 1440px viewport)screenshot-raag-yaman.webp(screenshot): ragapedia.com/ragas/yaman (screenshot, 1440px viewport)screenshot-compare-yaman-bhupali.webp(screenshot): ragapedia.com/compare/yaman-vs-bhoopali (screenshot, 1440px viewport)
Favicons
Each project page uses its own product's icon, fetched from the live site on 2026-11-10 and re-rendered at favicon sizes (/icons/<project>/). Home, credits and this page keep the Harsh Jain flag.
- Topperly: topperly.app/brand/logo.svg
- ProjectGRID: projectgrid.org/images/brand/project-grid-organization-logo-512.png
- Aestrum: aestrum.in/art/flame.svg
- Morrow: morrow.aestrum.in/assets/morrow-mark-112.png (drawn from the harvested full-size mark)
- RagaPedia: ragapedia.com/favicon.ico (shipped as it is)
- NIVRA: the NIVRA mark from NIVRA’s own repository
- AAROH: aarohindia.com/aaroh-assets/aaroh-mark.svg
- Aurora (its site has no favicon): the pixel "A" of its own wordmark, from the cover on projectgrid.org, in the wordmark’s orange-to-violet
Sound effects (the glitch)
The section-seam and page-transition glitch sounds (/audio/glitch/) were edited, layered and mastered for this site from the recordings below, downloaded 2026-11-10 without logins. Full per-file list: /audio/SOURCES.md. Until they load, or if they fail, a WebAudio synth voice written for this site plays instead.
- Kenney (kenney.nl), Interface Sounds, Impact Sounds and Sci-Fi Sounds packs, CC0 1.0 (public domain): kenney.nl/assets/interface-sounds kenney.nl/assets/impact-sounds kenney.nl/assets/sci-fi-sounds
- Mixkit, eight glitch sound effects under the Mixkit Sound Effects Free License (commercial use allowed, no attribution required): mixkit.co/free-sound-effects/glitch/ (licence: mixkit.co/license/#sfxFree)
AAROH and Aurora in their own identities (r20)
The AAROH page is set in AAROH’s own identity (aarohindia.com) and the Aurora page in Aurora’s (aurora.projectgrid.org). Fonts: Space Grotesk, Syne and Inter, SIL Open Font License 1.1, self-hosted from Google Fonts. Event art fetched 2026-11-10:
aaroh/aaroh-reference-hero-v3.webp(AAROH key art): www.aarohindia.com/aaroh-assets/aaroh-reference-hero-v3.pngaaroh/illustration-03-upward-spiral.webp(AAROH illustration): www.aarohindia.com/aaroh-assets/illustration-03-upward-spiral.pngaaroh/illustration-12-breakthrough-horizon.webp(AAROH illustration): www.aarohindia.com/aaroh-assets/illustration-12-breakthrough-horizon.pngaaroh/aaroh-primary-logo-transparent-cropped.webp(AAROH logo): www.aarohindia.com/aaroh-assets/aaroh-primary-logo-transparent-cropped.pngaurora/aurora-devpost-cover.webp(Aurora pixel wordmark): projectgrid.org/images/aurora/aurora-devpost-cover.jpgaurora/aurora-devpost-background.webp(Aurora banner): projectgrid.org/images/aurora/aurora-devpost-background.jpg
ProjectGRID programme pages (r17)
Photos for the AAROH, Aurora and Metamorphosis programme pages, from each programme's own page on projectgrid.org (alt text as the site writes it). Harvested 2026-11-10, converted to WebP (quality 82, max 1600px wide, plus a -640 variant).
aaroh/aaroh-m010-empty-auditorium.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m010-empty-auditorium-1600.webpaaroh/aaroh-m054-packed-auditorium.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m054-packed-auditorium-1600.webpaaroh/aaroh-m087-ideas-that-rise-talk.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m087-ideas-that-rise-talk-1600.webpaaroh/aaroh-m102-notebook-and-laptop.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m102-notebook-and-laptop-1600.webpaaroh/aaroh-m682-lectern-view-of-hall.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m682-lectern-view-of-hall-1600.webpaaroh/aaroh-m167-question-from-floor.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m167-question-from-floor-1600.webpaaroh/aaroh-m609-winning-team-trophy.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m609-winning-team-trophy-1600.webpaaroh/aaroh-m533-four-friends-joking.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m533-four-friends-joking-1600.webpaaroh/aaroh-m104-laptop-huddle.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m104-laptop-huddle-1600.webpaaroh/aaroh-m067-front-rows-laptops.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m067-front-rows-laptops-1600.webpaaroh/aaroh-m161-student-at-lectern.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m161-student-at-lectern-1600.webpaaroh/aaroh-m094-speaker-and-screen.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m094-speaker-and-screen-1600.webpaaroh/aaroh-m631-team-with-trophy.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m631-team-with-trophy-1600.webpaaroh/aaroh-m110-team-and-mentors.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m110-team-and-mentors-1600.webpaaroh/aaroh-m201-game-dev-banner.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m201-game-dev-banner-1600.webpaaroh/aaroh-m185-security-banner.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m185-security-banner-1600.webpaaroh/aaroh-m192-hardware-track-banner.webp(photo): projectgrid.org/images/aaroh/album/aaroh-m192-hardware-track-banner-1600.webpaurora/grid-photo-10-p8.webp(photo): projectgrid.org/images/optimized/grid-webp/grid-photo-10-p8-960.webpaurora/grid-photo-11-p8.webp(photo): projectgrid.org/images/optimized/grid-webp/grid-photo-11-p8-960.webpaurora/aurora-top20-team.webp(photo): projectgrid.org/images/optimized/evidence/aurora-top20-team-640.avifaurora/grid-campaign-11-aurora-winners.webp(photo): projectgrid.org/images/campaign/optimized/grid-campaign-11-aurora-winners-640.avifmetamorphosis/meta-745-cohort-group-photo.webp(photo): projectgrid.org/images/metamorphosis/album/meta-745-cohort-group-photo-1600.webpmetamorphosis/meta-679-lathe-demo-in-workshop.webp(photo): projectgrid.org/images/metamorphosis/album/meta-679-lathe-demo-in-workshop-1600.webpmetamorphosis/meta-683-filming-the-lathe.webp(photo): projectgrid.org/images/metamorphosis/album/meta-683-filming-the-lathe-1600.webpmetamorphosis/meta-510-wearable-prototype-test.webp(photo): projectgrid.org/images/metamorphosis/album/meta-510-wearable-prototype-test-1600.webpmetamorphosis/meta-522-laptop-demo-huddle.webp(photo): projectgrid.org/images/metamorphosis/album/meta-522-laptop-demo-huddle-1600.webpmetamorphosis/meta-538-changemaker-certificates-stage.webp(photo): projectgrid.org/images/metamorphosis/album/meta-538-changemaker-certificates-stage-1600.webpmetamorphosis/meta-509-robot-car-pitch.webp(photo): projectgrid.org/images/metamorphosis/album/meta-509-robot-car-pitch-1600.webpmetamorphosis/meta-662-speaker-and-title-screen.webp(photo): projectgrid.org/images/metamorphosis/album/meta-662-speaker-and-title-screen-1600.webpmetamorphosis/meta-175-luminauts-project-table.webp(photo): projectgrid.org/images/metamorphosis/album/meta-175-luminauts-project-table-1600.webpmetamorphosis/meta-355-team-of-five-backdrop.webp(photo): projectgrid.org/images/metamorphosis/album/meta-355-team-of-five-backdrop-1600.webpmetamorphosis/meta-687-rolled-metal-sheet.webp(photo): projectgrid.org/images/metamorphosis/album/meta-687-rolled-metal-sheet-1600.webpmetamorphosis/meta-690-laser-cutter-controls.webp(photo): projectgrid.org/images/metamorphosis/album/meta-690-laser-cutter-controls-1600.webpmetamorphosis/meta-512-poster-and-laptop-walkthrough.webp(photo): projectgrid.org/images/metamorphosis/album/meta-512-poster-and-laptop-walkthrough-1600.webpmetamorphosis/meta-535-certificates-group-two-rows.webp(photo): projectgrid.org/images/metamorphosis/album/meta-535-certificates-group-two-rows-1600.webp