Ask, watching with you
YouTube's Ask feature lets you ask Gemini about the video you're watching. Right now the answer shows up as text in a sheet under the player. I wanted to see what happens when the answer lives on the video itself, on the timeline everyone already knows how to use.
This is a working prototype built in Rive. It plays on its own. Tap the phone to try it. Every question and timestamp works.
Motion and visual design, prototyping · Rive, Framer, Claude Code · Personal project, not affiliated with YouTube or Google
Just the video.
The idea
It notices when you rewind
If you rewind the same part twice, you probably missed something. So Ask offers one question, right at the playhead. Tap it and the pill grows into the sheet. It's a Material 3 container transform, so it feels like the pill itself opens up.
YouTube already shows what everyone rewatches (Most replayed). Ask would use what you rewatch.
You can see it thinking
Gemini is reading the video, so I wanted the thinking state to show that. A light sweeps along the scrubber, and each moment it finds lights up as a marker. The loader from today's Ask stays. I rebuilt it as a shader in the Gemini colors.
Tap a step to jump there
The answer comes in word by word as three steps, each with a timestamp. Tap one and the playhead springs to that moment, the frame changes and YouTube's chapter name shows up. Then Ask folds down into a small bar so you can just watch.
Landscape and TV
When you turn the phone sideways, Ask is already a side panel. That's where this idea works best. The scrubber is about a third wider, and the panel never covers the video, so the answer can stay open.
On TV there's no touch, only the remote. So the moments Gemini found become stops on the timeline. Left and right hop between them, and OK jumps there.
Motion
Material 3 describes motion as springs, with a stiffness and a damping ratio. Rive works with keyframes, so I matched a keyframe curve to each M3 spring. This page uses the same springs.
Seven patterns, written down
For each AI moment I made a spec sheet, with the real component on the left and every property on a timeline on the right. The timings are measured from the render.
Contextual prompt
Rewind the same moment twice and one question comes up at the playhead.
Reduced motion
With reduced motion on, nothing bounces or sweeps. The scan becomes a fade, the pill crossfades into the sheet, and a seek is a 200 ms cut. Each spec sheet above has a reduced version, and the prototype follows your device's setting.
Light
There are three shaders, written in WGSL and running inside Rive. Light only shows up when Gemini is doing something.
The light on the scrubber and on the edge of the streaming answer.
The loader. Six M3 shapes morphing, with a Gemini gradient.
YouTube's Ambient mode, a soft glow around the player.
Components
The prototype is one Rive file (851 KB) built from small components. Each one is driven by data, so a new theme or new text updates every state at once. The chapter list next to the phone talks to the file the same way.
Ask icon
Prompt pill
Suggestion row
Step row
Follow-up chip
Scrubber
Loader
Peek bar
Rive, Lottie or CSS?
I tested the thinking loader in three formats, Rive, Lottie and CSS, and measured them in the same browser.
Lottie
CSS
Rive
They all hold 60 fps. Rive's runtime is the heaviest, about 1 MB, but it's already loaded for the prototype, so the loader adds only 18 KB. CSS is the lightest, and it's what I'd use on a plain web page.
Built with Rive, Framer and Claude Code.
Personal project. Not affiliated with or endorsed by YouTube or Google. YouTube and Gemini are trademarks of Google LLC.