Nathaniel Whittemore
๐ค SpeakerAppearances Over Time
Podcast Appearances
This was the first version we saw, which was fine, but I wanted it to be closer to what Stitch had, so I copied that photo in, along with the HTML directly, and Google AI Studio picked up and ran with it.
Studio says, I noticed that the Stitch generated code currently uses a static image placeholder with a play button overlay instead of an actual embedded video.
To make it fully functional while keeping this beautiful new design, I've taken your code and swapped out the image placeholder for the actual YouTube iframe embed.
Here is your exact stitch version ready to play video.
Then it added, would you like to add any interactive JavaScript to this?
For example, making the sidebar navigation functional or adding a page turning animation.
Now a page turning animation is exactly what I had been thinking of, so we got to it.
At each step of the way, Studio was both doing the work and explaining how it would work.
For example, without me asking, it shared how it had made and executed a plan for mobile so that the 3D horizontal flip didn't look broken on a phone.
It just switched back to a different method of turning between the pages.
Now, all that was left on this one was to give it the right text.
So we went back to Gemini and specifically to the part of the gem where we had been brainstorming about the particular stories that we were going to focus on.
And it wrote all of the companion copy that would sit alongside the videos.
The last step was adding the video links and boom, we were ready to go.
When it was time to push it live, for the sake of understanding Google AI Studio's full process, I went with its recommendation.
Studio said, Because this entire app is just one file, pure HTML, CSS, and JavaScript, you don't need a complicated server or backend.
You can use static site hosting, which is completely free and takes about 30 seconds.
The fast way it gave me was a drag and drop with Netlify that had the exact sequence of steps that led to basically dragging a folder from my desktop to Netlify, and then boom, in literally about 15 or 20 seconds, the digital scriptorium lived.
Now, I will, of course, include links to all of these companion experiences, but you can get a feel for what we did and why it warmed the aesthetic of my late 90s computer heart.
As I said though, I wanted to, in addition to that companion web experience, do something a little bit more complex as well.