A Look Behind the Orbit of Netlify Capsules

When Netlify and I agreed to work together on their 10 million developers activation, Netlify Capsules, I knew I wanted to take the opportunity to learn some new technology and challenge myself. I consider every client project an educational opportunity and try to push myself out of my comfort zone in order to always come away with new learnings. How could I incorporate AI in the development of this project? Were there new features of the Netlify platform worth integrating? What would it be like to collaborate with nearly every department of Netlify? I was excited to answer these questions.

The application is built on Nuxt 4 with Vue 3 and naturally sits on my Netlify account, along with the 250+ other projects I've deployed there. Right from the front page, you get a feel for what's to come from a dynamic three.js visual, showing all user capsules orbiting the Earth, and an aesthetic I'm calling Fisher Price NASA. This two-column design, with a visual monitor on the left and informational context on the right, repeats itself throughout the experience. It took a few passes with Tailwind and some time in my notebook to make this responsive in a way that made sense, but I think I'm happy with the outcome in the end. I leaned on a lot of Nuxt modules to performantly handle assets like fonts, icons, and og-images. I'm also using nuxt-auth-utils to handle the Netlify OAuth authentication. Thanks to the Nuxt OSS community for their contributions to these modules. Special thanks to Philippe for recommending the @netlify/nuxt module for local development. This provides better emulation of the Netlify infrastructure when developing locally.

Users are invited to create "capsules," a representation of themselves alongside the milestone, with a payload including a favorite Netlify project, a photo they took, a song they love, and a note for any users who view their capsule. The capsule creation screen is one part Formkit powered form and one part custom UI element. I really enjoy Formkit's handling of the autocomplete element so that users may search through their projects simply by typing a search query. I was struggling to properly filter the projects API endpoint but would you believe Matthias ran an Agent Runner against netlify.com and uncovered an undocumented filter parameter which accomplished exactly what we needed. Unbelievable. For the complementary payload UI element, I designed something inspired by video game inventory systems so users were more encouraged to complete the payload. Each capsule payload is run through AI-powered moderation using Anthropic powered by Netlify AI Gateway to prevent inappropriate content.

Users have the ability to set their capsule's orbit by adjusting the tilt and swivel. This is based on the actual orbital dynamics a satellite would receive when it is launched into orbit around the Earth. I think this page is a nice showing of how a simple form can be complemented by a three.js visual. A pair of range sliders is only so exciting, but when a 3D visual gives you a preview of said orbit, it gets interesting. Setting an orbit implies your capsule will follow a particular tilt and swivel, but it's worth noting that the Earth rotates too. This really changes where your capsule might appear in the sky at any given moment.

During a Figma design session, I designed a big launch button for fun and knew I'd want to incorporate that into the design eventually. Who doesn't like to push a big button? Again, this was developed with Tailwind and lives next to a simple three.js visual. The user's IP-based location is obtained via a Netlify edge function and utilized to plot the capsule launch location on the 3D visual. Once the user clicks the launch button, the capsule simply rises up to its orbiting altitude using GSAP. It's worth noting that an orbit doesn't actually start in this position, and similar to an actual satellite, the capsule must rendezvous with its orbital pattern. All of these capsules are stored in a Supabase database and inserts are visualized in real-time back on the front page visual. Users also get a unique capsule URL so they can keep track of its current location and see how many times the payload was accessed and from where.

Rather than allow users to browse capsules from a typical web interface, we developed a web AR user experience so users can actually view the capsules currently orbiting overhead. This is accomplished by integrating a series of web APIs (device orientation, camera, and geolocation) alongside a three.js scene. The user's camera is placed at the center of the scene and is enveloped by a celestial sphere including all capsules. The celestial sphere is then orientated based on the user's location, only allowing viewing of those capsules currently orbiting above the horizon. The three.js scene camera is positioned based on the user's device orientation. This 3D scene is then composited on top of the camera visual to create the augmented reality effect. Using three.js ray targeting, we can determine when a user points their device at a capsule and activate the open payload button. In addition, we've developed a simple search mechanism so you can find particular user capsules in the sky if they are currently orbiting over the horizon.

When a capsule is found, targeted, and opened, you'll once again see the payload inventory UI from the original capsule creation flow. Clearly, I'm a systematic designer, and figuring out ways to reuse layouts and elements within the same experience is important. Users may click to view the user's photo, hear the user's song, or read the user's note. In addition, they can choose to visit the user's selected Netlify project. When a user capsule is opened, we create a new view entry in a separate Supabase table. This view is visualized on the front page visual as a communication line between the capsule and the viewing user's location on Earth.

A huge thank you to the entire Netlify team for the opportunity to build this project. It was a pleasure collaborating across departments and learning from some incredibly talented people along the way. If you're one of the 10 million developers on the platform, I hope you'll create a capsule and launch it into orbit.