Surgent 2.0

"Redesigning Surgent in 3D: Proving that 'Vibe Coding' isn't just about fast code, but about creating immersive, cinematic software experiences that feel alive."

Comment

Inspiration

Surgent’s mission is to remove the "headache" from building. But I realized that once the headache is gone, the next step is Awe. I was inspired by the simplicity of the current Surgent platform and wanted to see if I could use its own deployment power to host a high-fidelity, 3D reimagining of the tool itself. If Surgent is the future of building, it deserves an interface that feels like the future.

What it does

This is a Meta-Frontend for Surgent. It transforms the minimalist dashboard into a spatial 3D experience:

  • Interactive 3D Landing: A cinematic entry point where the UI reacts to cursor movement and depth.
  • The Studio Flow: A redesigned "Surgent Studio" where users don't just type prompts; they interact with a spatial workspace.
  • Unified Aesthetic: Seamlessly blends glassmorphism, depth grids, and real-time lighting to make "Vibe Coding" a visual reality.

How we built it

I used a high-performance stack to ensure the 3D renders didn't compromise the speed Surgent is known for:

  • Framework: React 19 + Vite 7 for lightning-fast HMR.
  • Visuals: Three.js and Framer Motion for the layered spatial effects and cursor-driven parallax.
  • Styling: Tailwind CSS 4 for a custom-built glassmorphic design system.
  • Deployment: Hosted entirely on Surgent, utilizing its infrastructure to serve heavy 3D assets with zero configuration.

Challenges we ran into

The biggest challenge was "The Vibe Balance." 3D websites often feel slow or "gimmicky." I had to iterate constantly to ensure that while the site looks like a cinematic experience, it still functions like a high-productivity SaaS tool. Balancing real-time light shafts with readable typography across Light and Dark modes required custom contrast algorithms.

Accomplishments that we're proud of

  • The "Meta" Success: Building a redesign of Surgent on Surgent.
  • Performance Optimization: Achieving 60fps interactions even with complex depth grids and spotlight effects.
  • Foundational Design: Creating a UI that mirrors the official builder's logic while elevating the aesthetic to a "Pro" 3D level.

What we learned

I learned that Surgent is a beast when it comes to hosting modern web stacks. Usually, 3D projects have deployment "hiccups" with large assets, but Surgent handled the Vite build perfectly. I also learned that the best way to show a founder you love their product is to build them a version of it they haven't seen yet.

What's next for Surgent 3D

  • Live Integration: Connecting the 3D Studio to the actual Surgent API so you can build real apps inside this 3D interface.
  • Spatial Prompting: Using AI to generate 3D scenes based on the user's "vibe" description.
  • Collaborative 3D: Allowing multiple builders to move through the 3D workspace in real-time.

Built With

Share this project:

Updates