3D-Louvre

A modern, highly responsive redesign of the official Louvre website, engineered to make digital navigation and ticketing as elegant as the museum itself.

Comment

Inspiration

After I got to know that there was an unique hackathon to make 3d websites which I had only heard about or seen once or twice I thought I too needed to make one . The Louvre felt like a cool idea, a famous museum but made interactive in the browser.

What it does

  • A 3D glass pyramid on the homepage that grows as you scroll down
  • Gold dust particles floating around the pyramid in the background
  • 5 real museum statues you can view in 3D — they rotate and light up when you hover over them
  • A painting gallery where each artwork takes over the full screen one by one as you scroll
  • A ticket booking form where you pick how many visitors, choose a ticket type (Regular / Exclusive / VIP), and it calculates the total price live
  • A separate FAQ page with animated questions that expand on click
  • Custom 404 page, smooth page transitions, and small hover effects on buttons throughout

How I built it

Honestly I used a lot of AI tools to help me build this — v0 to get the initial structure, then Claude and ChatGPT to write and fix components, and VS Code to put it all together. I deployed it on Vercel.

I had never used any of these tools before this project. The 3D parts use something called React Three Fiber. The animations use GSAP and Framer Motion. I didn't know what any of that was before I started.

The 3D glb statue files were huge — like 154MB total — which made the site too slow to even open. I had to figure out how to compress them, got them down to around 6MB without them looking bad.

Challenges I ran into

  • Getting AI to understand what I wanted — describing how an animation should look and feel is really hard. I went back and forth so many times
  • Running out of AI message limits mid-build with no idea what to do next
  • The site kept breaking from heavy 3D — took a lot of trial and error to get everything running smoothly at the same time
  • Reading code I didn't write — most of the code was AI generated and debugging something you don't fully understand is genuinely hard

Accomplishments I'm proud of

  • I had zero experience with 3D on the web before this — now I have a working 3D site
  • The whole site looks consistent — same fonts, same colours, same feel on every page
  • Got the statue files from 154MB down to 6MB and the site actually loads fast now
  • Built and deployed a full working website in under a week as a first year student

What I learned

  • How to actually use AI as a tool — writing good prompts makes a huge difference
  • That 3D in the browser is possible and not as impossible as it looks from the outside
  • How to deploy a website from my laptop from localhost:3000 to an actual live link
  • How to use tools like v0, Vercel, Claude, and Fab — none of which I had touched before

What's next for 3D-Louvre

  • Make it work on mobile too
  • Add more artworks and maybe more rooms so that it can become better than the official website
  • Actually connect the booking form so it sends a confirmation email and other backend requirements
  • Maybe add a first person walkthrough where you actually move through the museum

Built With

Share this project:

Updates

Submission history