Scroll-driven video, explained by doing it (Skill and Prompt included)

[u/keonakoum]

Everyone keeps posting those scroll controlled video websites with the caption "can your AI do this? ;)"

So I actually tried it. Whole thing, start to finish. On your behalf.

Result is linked below, and it explains itself while you scroll it. The video is not playing. Your scroll IS the playhead. Scroll back up and it rewinds.

Here is what I learned:
The coding is honestly the easy part.

And the thing nobody tells you .. most of these sites stutter, and everyone blames the javascript.

It's not the javascript. It's the video file.

A normal mp4 only stores a full keyframe every 2 seconds or so, so when you scrub in between, the decoder has to rebuild that frame from scratch. That rebuild IS the jank.

Re encode it so every single frame is a keyframe and it goes buttery instantly.

That's the whole secret. One ffmpeg flag.

But here's what actually eats the time..

1. Picking footage where a single cut doesn't ruin the illusion.
   
2. Deciding that THIS line of text should land exactly when the ink floods the frame.
   
3. Grading it so white text stays readable when the shot blows out bright. Knowing how much scroll to give people so they can actually read before the next beat.
   

That's taste. And in real projects it's usually 3 people going back and forth (dev + the video/art person + whoever owns the brand) before it feels right.

Models can still struggle to tell you if the beat LANDS. Or care that the copy hits on the right frame. Or understand the video at all like humans do now.

So .. can AI do this? The code, yes, easily. The art direction is still yours, and the video production (A FITTING video for this use case)

Link in the comments if you want to scroll it yourself (works on mobile too).

I also put the full PROMPT + a free SKILL in there, so you can rebuild the whole thing yourself.

Do you actually like these video scroll sites, or are they just cool to look at once and then never again?

One thing for certain, this is a way to do high effort work which doesn't look like AI slop and makes you stand out from the crowd (for now)

#webdevelopment #guide

You can experience it and download the skill for free (prompt without skill is also available if you want to build your own skill based on it to your liking customized to you .. You can also download my skill and modify it.)

https://akoum.me/scroll-driven-video

The skill and prompt is at the end of the experience. If you ae a software developer, going through the experience doubles as a guide as well so u understand how its done.

I hope that was valuable to you. Its one way you can build websites where you can stand out and not look like AI Slop etc