Building a 3D Portfolio with Spline and Next.js
Spline is a no-code 3D editor that exports .splinecode scenes you can drop into a Next.js app. I used it to build the keyboard centerpiece on this site.
The Setup
The scene is a .splinecode file in public/assets/. It's lazy-loaded via React.lazy and rendered with @splinetool/react-spline inside a position: fixed canvas behind all content.
The Hard Part
A 350 KB binary file blocks first paint if you let it. The fix is two-fold: delay the load until the rest of the page is interactive, and preload the asset via <link rel="preload"> so it's already in cache when the runtime imports it.
What I Learned
GSAP + ScrollTrigger drive the scene transitions between sections. The trick is to clean up triggers on unmount or you get ghost listeners. ContextZip helped here — when scroll-triggered animations misfire, the output of gsap.utils.getAll() is huge, and ContextZip trims it to the meaningful 1%.