Latest / AI Fire Daily / #549 Neil: Website Animation With Kimi K3 And Google Flow Made Easy

Transcript

#549 Neil: Website Animation With Kimi K3 And Google Flow Made Easy · AI Fire Daily

0:00
Picture this for a second. You're scrolling a
0:04
premium cinematic website. Oh, like one of those
0:06
high -end tech product launches. Exactly, or
0:08
like a luxury brand. And there's this gorgeous
0:11
3D video that just perfectly follows your mouse
0:14
wheel. Yeah, where it moves forward as you scroll
0:16
down and then gracefully reverses when you scroll
0:19
back up. Right. And you look at it and think,
0:21
wow, that looks like it costs $50 ,000. Oh, for
0:23
sure. You just assume a massive team of developers
0:25
and 3D artists spent months on it. But today,
0:29
you can actually build it yourself with just
0:31
two AI tools. It's kind of wild. It completely
0:34
changes how we think about web design now. It
0:36
really does. So welcome to the deep dive. I'm
0:39
really glad you're here with us today. Happy
0:41
to be here. We've got a super fun one today.
0:43
We do. We have a very specific mission for this
0:45
one. We're going to unpack a complete workflow
0:48
to build one of these scroll -driven website
0:51
animations. From a totally blank screen, right?
0:54
to a live published site. Exactly. So how are
1:00
we breaking this journey down? Well, first, we'll
1:03
talk about generating a rock solid visual concept,
1:06
which is honestly harder than it sounds. Right,
1:08
the planning phase. Yeah. Then we'll actually
1:11
shoot the AI video using Google slow. OK, sweet.
1:14
After that, we're going to let Kimi K3 write
1:17
the custom code to tie that video directly to
1:20
your scroll wheel. And finally, we just drag
1:23
and drop the whole thing onto the live web. Sounds
1:26
like a solid roadmap. So before we even touch
1:29
a line of code or open up a web editor, we need
1:32
a plan. A very detailed plan. Yeah, not just
1:34
a rough sketch, like a bulletproof visual plan.
1:38
Because scroll -driven animations rely entirely
1:39
on one continuous visual anchor. Right. That
1:42
is the core mechanic here. I mean, traditional
1:45
websites have lots of different elements, right?
1:46
They're all competing for your attention. Oh,
1:48
totally. Ads, pop -ups, sidebars. Exactly. But
1:52
here, the background video is securely locked
1:54
to your scroll. You scroll down, it plays forward.
1:57
Scroll up, it plays backward. So the website
2:00
itself is just, what, a transparent layer on
2:02
top? Yes. It just handles the text, the navigation,
2:05
the buttons, the videos doing all the heavy emotional
2:08
lifting. Got it. And the toolkit for doing this
2:10
is surprisingly lean, right? Super lean. We're
2:13
leaning on KamiK3 to handle the concepting and
2:16
the coding. And then Google Flow for the actual
2:19
cinematic video generation. Yeah. And, you know,
2:23
You might wonder why we're choosing Google Flow
2:25
over something else. Like Higgs Field or Runway.
2:27
Right. A tool like Higgs Field is great if you
2:30
need intensely granular camera control. But Google
2:34
Flow is just wildly practical for this specific
2:37
workflow. How so? Well, if you already have Google
2:40
AI Pro, Flow gets incredibly close to the quality
2:43
of Higgs Field, and you don't need to sign up
2:45
for yet another paid subscription. That makes
2:47
a lot of sense. Keep the stack simple. But the
2:50
interesting part is that Kimi K3 doesn't even
2:52
connect directly to Flow, right? Nope. They don't
2:55
talk to each other at all. It's entirely a manual
2:57
bridge. You use Kimi to figure out what you want.
3:00
Create the video and flow, download it, and upload
3:03
it back to Kimi. Exactly. But see, that initial
3:06
prompt you give to Kimi K3 is where the magic
3:08
actually happens. Because you don't just ask
3:09
it for a video. Right. You go to Kimi first and
3:13
ask for 10 different visual concepts. And to
3:16
get good results, you must clearly define four
3:19
specific things. OK, what are they? your product
3:22
or topic, your target audience, your main goal
3:25
for the site, and the specific visual feeling
3:28
or mood you want to evoke. Yeah, because if you
3:30
skip those details, Kimi just kind of guesses,
3:33
right? It totally guesses. And then it'll give
3:35
you things that look incredibly pretty, but they
3:37
won't actually convert your visitors. Exactly.
3:39
It just becomes art for art's sake instead of
3:42
a functional website. Makes sense. some really
3:45
crucial constraints for this prompt that you
3:47
have to enforce, like non -negotiable stuff.
3:49
OK, what are the hard rules? The generated video
3:51
must be exactly 8 to 10 seconds long. It has
3:55
to be in a standard 16 .9 aspect ratio. For desktop,
3:59
right? Right, right. And most importantly, there
4:01
could be absolutely no complex character actions
4:04
and no unrelated locations. OK, listening to
4:07
those constraints, it's really like planning.
4:09
a single perfectly smooth drone shot. Oh, that's
4:14
a great way to put it. Yeah, like every single
4:16
inch of the flight path has to be calculated
4:19
in advance. You can't just wing it and hope the
4:21
edit saves you later. I love that analogy. Yeah.
4:23
It's exactly like setting up a complex single
4:26
take drone shot. You are defining the lighting
4:29
conditions, the exact start and end frames and
4:32
the entire camera journey in one fluid take.
4:36
So no relying on post production magic. None
4:38
at all. Once you review those ten concepts from
4:41
Kimi and pick the best one, you feed it back
4:44
to Kimi. And then what does Kimi do with it?
4:46
It takes that winning concept and writes a highly
4:49
detailed production -ready prompt specifically
4:52
formatted for Google Flow. Wait, hold on. Let
4:54
me stop you there for a second. Sure, what's
4:55
up? So if I'm directing a cinematic video, my
4:58
first instinct is to use some really cool fast
5:01
-paced cuts to keep the energy up. Why are sudden
5:03
scene changes totally forbidden in this prompt?
5:06
Well, you have to think about the physical user
5:08
experience here. The video is being controlled
5:10
by a scroll wheel, not a play button. Right.
5:12
If a user scrolling down sees a sharp cut to
5:15
a new scene and then suddenly scrolls back up.
5:18
Oh, it would reverse right through the cut. Exactly.
5:21
The video reverses violently through that cut.
5:24
It looks completely jarring. Yeah, that sounds
5:26
awful. The visual continuity is instantly broken.
5:29
and the human brain essentially rejects it as
5:32
a computer glitch. Cuts completely ruin the illusion
5:36
when a user scrolls backward. It breaks the magic
5:38
entirely. You want one focused, continuous camera
5:41
journey. Because that continuous motion creates
5:44
a much cleaner, more effective website animation.
5:46
100%. OK. So we have our exact drone flight path
5:50
fully scripted out by Kimi. I guess the next
5:52
logical hurdle is actually getting that cinematic
5:54
video generated. Right. So we take that highly
5:57
detailed prompt that Kimi K3 just generated for
6:00
us, and we paste it directly into Google Flow.
6:02
Simple enough. But the very first thing you have
6:05
to do before you even hit generate is make absolutely
6:09
sure the aspect ratio is set to 16 .9. Because
6:13
you need it to perfectly fit a standard desktop
6:15
monitor. Yes, that is completely non -negotiable.
6:18
And as you're generating these clips, you really
6:21
have to pay attention to the composition, don't
6:23
you? Oh, heavily. Like you have to keep the main
6:26
subject visually stable, and you absolutely need
6:29
to leave wide, clean, empty spaces for your text
6:33
to live later on. You really do. If the frame
6:35
is too busy or there's high contrast detail everywhere,
6:39
your website's headline is going to be impossible
6:41
to read. Right. You need that negative space.
6:43
And honestly, if you have the computation credits
6:45
for it, generate multiple versions of the prompt
6:48
in flow. Just to have options. Yeah. because
6:51
small, subtle changes in how the AI interprets
6:55
camera speed make a massive difference when it
6:57
comes time to attach it to a scroll wheel. You
6:59
know, I have to admit something here. Yeah. I
7:01
still wrestle with AI video consistency myself.
7:05
I mean, getting stable objects without distortion
7:07
is incredibly tough. Oh, it's brutal. It really
7:10
tests your patience when you're just looking
7:12
for one perfect, pristine shot. It is arguably
7:15
the biggest challenge in AI video right now.
7:18
And it's especially unforgiving in this specific
7:21
workflow. Because of the scrolling. Exactly.
7:24
Because when things move backward, minor distortions
7:27
become glaringly obvious. Oh, I didn't even think
7:29
about that. Yeah, think about it. A slightly
7:31
weird shadow or like a melting background element
7:35
might look OK when the video is playing forward
7:38
at full speed. Because it just flashes by. Right.
7:41
But when a user scrubs it backward slowly with
7:44
a scroll wheel, it suddenly looks like a monster.
7:47
That is a great point. So you really spend the
7:49
time, you sift through the generations, and you
7:52
download the best, most stable, clean version
7:55
you can find. Yes. Take your time on this step.
7:58
But we aren't done prepping it, are we? I mean,
8:00
we can't just throw this straight onto a website.
8:01
We have to check the frame rate. We do. And this
8:05
is a step a lot of people just completely miss.
8:07
Why is it so important? Well, a generated video
8:10
might look perfectly smooth when you just open
8:12
it on your desktop and hit play. Right. But manual
8:15
scrolling is a totally different physics environment
8:17
for video. We often use frame interpolation to
8:20
upgrade the video to 60 frames per second before
8:23
we do anything else. OK, let me just break that
8:24
term down for a second. Frame interpolation.
8:27
Using software to guess and create missing video
8:31
frames. Spawn on. It takes a standard 24 or 30
8:35
frame video and fills in the gaps. And it makes
8:38
a big difference. A huge difference. You do need
8:41
to review the clip carefully afterward just to
8:43
make sure the main object stayed stable during
8:45
the interpolation process. Right, because AI
8:48
can sometimes mess up the in -between frames.
8:50
Yeah, always keep your original file just in
8:53
case the software introduces weird artifacts.
8:55
But wait, why go through the extra hassle and
8:57
rendering time of bumping the video all the way
9:00
to 60 FPS if it already looks completely fine
9:03
when you just hit play? Because a standard 24
9:05
frames per second video will almost always stutter
9:08
when it's attached to a scroll wheel. Really?
9:11
Even if it looks smooth normally? Yeah, because
9:13
a user doesn't scroll at a perfectly constant
9:16
cinematic speed. They start, they stop, they
9:18
hesitate, they flick the wheel fast. Oh, right.
9:21
It's erratic. At 24 frames, those human micro
9:23
-movements look highly jagged and unresponsive.
9:26
Pushing it to 60 frames gives the web browser
9:29
enough visual data to make the scrubbing feel
9:32
like liquid glass. Wow, okay. Yeah, no matter
9:35
how weirdly the user scrolls. Makes sense. High
9:38
frame rates prevent choppy visual scrubbing during
9:41
manual scrolling. It really is the secret sauce
9:43
for making the whole experience feel premium
9:45
and expensive. So we've got our buttery smooth
9:48
60 fps video. The asset is perfect. Now we have
9:53
to figure out how to get it onto a webpage without
9:55
breaking it. This is the fun part. Right. This
9:57
is where we bring Kimi K3 back in to basically
10:01
act as our AI web developer. This is arguably
10:04
the most mind -bending part of the workflow.
10:07
We head back over to Kimi K3. We upload our final
10:10
polished video file directly into the chat. Along
10:13
with the original prompt. Yep. We feed Kimi the
10:16
original concept we agreed on earlier, and we
10:18
remind it of the ultimate goal of the website.
10:20
And then... We just tell it to analyze the video.
10:23
It's literally acting as a senior front -end
10:24
designer here. Exactly. It studies the color
10:27
palette of the video. It studies the pacing of
10:29
the camera movement. It maps out those clean
10:31
negative areas we left so it knows exactly where
10:34
text can safely go without covering the subject.
10:37
To really understand how powerful this is. Let's
10:39
look at a specific case study from our sources,
10:42
the AI Fire newsletter example. Oh, I love this
10:45
example. It perfectly illustrates the method
10:47
in action. Yeah, so in the video they generated,
10:50
it features these really cool chaotic particles.
10:53
They're scattered everywhere across the screen
10:55
at the beginning. Super chaotic. Then, as the
10:57
camera pushes in, those chaotic particles slowly
11:00
filter and coalesce into a warm, glowing ember.
11:04
Right, and that ember is sitting safely inside
11:06
a dark... protective glass sphere. It's visually
11:10
striking and it's highly metaphorical. Definitely.
11:13
The chaos represents the overwhelming noise of
11:15
the AI industry. The glowing ember represents
11:18
clear, practical, distilled knowledge. Beautiful
11:22
concept. So we prompt KimiK3 to build the actual
11:25
website using this exact video as the background.
11:28
And we explicitly tell it, do not try to recreate
11:32
the video with code. Right, don't mess with the
11:34
video. Do not edit the video file. Your only
11:36
job is to bind the video's timeline directly
11:38
to the user's scroll progress. Scroll down, the
11:41
timeline goes forward. Scroll up, the timeline
11:43
goes backward. And crucially, we tell it. Absolutely
11:47
no autoplay. Right. If the video autoplays the
11:50
second the site loads, it completely ruins the
11:53
interactive scroll mechanic. Because they aren't
11:54
controlling it anymore. Exactly. The user has
11:56
to feel like they're in the driver's seat. OK,
12:00
so the video's locked in. What about the text?
12:02
Next, we ask Kimi to choreograph the text. Kimi
12:06
starts by setting up a clean transparent navigation
12:09
bar at the top so it doesn't block the art. Then
12:11
the timing of the actual copy kicks in. I mean
12:14
the main headline for the site is cut through
12:17
the AI noise. A great headline. Kimi codes it
12:20
so that headline doesn't just sit there. It only
12:22
fades in when the chaotic particles in the video
12:25
finally part and the dark glass sphere actually
12:27
appears on screen. The timing is critical to
12:30
the psychological impact. It really is. And then
12:32
we move down to the value section of the site.
12:34
Kimi makes the text colors shift organically
12:37
based on what's happening in the background.
12:39
Which is so cool! It starts as a crisp, cool
12:43
white when the particles are chaotic. But as
12:46
the user scrolls and the video warms up as the
12:48
ember glows brighter, the text color gracefully
12:51
shifts to a soft, warm ember to match it. Whoa!
12:55
I mean, imagine an AI analyzing video pacing
12:58
just to perfectly choreograph text to an expanding,
13:02
glowing ember. That is stunning. It really is.
13:04
It's a massive leap in workflow efficiency. I
13:07
mean, you used to need a designer and a developer
13:09
sitting next to each other for days to time that
13:11
out perfectly. And now it just happens in a prompt.
13:14
Exactly. And finally, you have the call to action.
13:16
The CTA says, join 75 ,000 plus readers. And
13:19
where does that go? That text is coded to appear
13:22
perfectly at the very final frame of the video,
13:25
right as the warm, glowing ember completely fills
13:28
the screen. So the math of it is essentially
13:30
perfectly mapped. 0 % scroll depth equals the
13:33
very first frame of the video. 100 % scroll depth
13:36
equals the final frame. Yep, that's the logic.
13:38
And the text elements just simply fade in at
13:41
specific scroll percentages along that journey.
13:43
And Kini writes all the HTML, all the CSS, and
13:46
all the JavaScript from scratch to make that
13:49
happen. That's incredible. It implements soft,
13:52
elegant fades. It makes sure to keep the text
13:54
positioned away from that central glass sphere
13:56
so nothing important is ever blocked by words.
13:59
Hold on. This raises a really important practical
14:01
question. OK, shoot. The video we generated in
14:04
Google Flow is strictly 16 .9 for a wide desktop
14:08
monitor. How on earth does this highly choreographed
14:12
experience work when someone inevitably opens
14:15
it on a vertical mobile phone? Ah, that is exactly
14:18
where Kimi CSS skills really shine. It doesn't
14:21
just write desktop code, it makes the website
14:23
fully responsive. Oh really? Yeah. On a desktop,
14:26
the user gets that full 16 .9 wide cinematic
14:29
shot. But on a mobile device... Kimi writes specific
14:33
CSS rules that force the video to cover the screen
14:36
vertically. But wouldn't that stretch it out?
14:38
No. It centers the focus. It essentially crops
14:41
off the left and right sides of the video, ensuring
14:43
that the glowing sphere remains perfectly centered
14:45
and visible on a tall, narrow screen. Right.
14:48
So Kimi writes CSS to carefully crop the center
14:50
for vertical screens. Exactly. And it doesn't
14:53
stop there. It scales the text down so it fits
14:56
perfectly, it adjusts the vertical spacing, and
14:58
it ensures that the CTA buttons are large enough
15:00
to easily tap with a thumb on a phone. So it
15:03
feels native to the phone. Exactly. The core
15:06
visual journey remains totally intact, just reformatted
15:10
for the device. So Kimi has handed us all the
15:12
code. It looks great in the chat preview, but
15:15
as anyone who builds for the web knows, we can't
15:17
just unleash this on the public yet. Oh, never,
15:20
ever skip the testing phase. Definitely not.
15:22
AI code is getting incredible, but the wild internet
15:25
is highly unpredictable. You have to take that
15:27
code, open it locally, and physically scroll
15:30
through the full website in both directions multiple
15:33
times. And you really need to test it across
15:35
different browsers, like Chrome, Safari, Firefox,
15:39
and Edge. Oh, absolutely. Safari in particular
15:42
can be... notoriously weird with custom scroll
15:44
mechanics sometimes. It absolutely can. What
15:47
you're checking for is the tactile feel. You're
15:49
verifying that the video follows the scroll wheel
15:51
smoothly without lagging. It has to feel connected
15:54
to your hand. Right. It needs to stop exactly
15:57
when you stop scrolling. without any weird delays
16:00
or rubber banding, and you check that all that
16:02
beautifully choreographed text appears at the
16:05
right moments and actually stays readable against
16:07
the moving background. You also have to seriously
16:09
consider the loading states. I mean, nobody has
16:12
a perfect internet connection all the time. So
16:14
true. So the workflow uses a poster image fallback.
16:17
Yes, the poster image is vital. What exactly
16:20
is that? A poster image is just a static, high
16:23
quality JPEG frame pulled directly from your
16:27
video. Oh, OK. user has a slow connection or
16:30
they're on a spotty cellular network, their browser
16:33
displays that gorgeous image instantly instead
16:36
of forcing them to stare at an empty black screen
16:38
while the video buffers. Because staring at a
16:40
broken black screen kills user trust instantly.
16:43
It's the worst. They will just assume the site
16:45
is broken and close the tab. Hundred percent.
16:47
So along with the poster image, the workflow
16:49
also specifically calls for preloading the video
16:52
metadata. We asked Kimi K3 to finalize everything
16:55
and export it all, and it gives you a clean ZIP
16:58
file. Right, you download that ZIP file to your
17:01
desktop. You extract the folder. And it's all
17:04
in there. Yeah. Inside, it has everything neatly
17:06
organized. Your index HTML file, your CSS style
17:10
sheet, your JavaScript logic, and your high res
17:14
video file. Now you just need to get it hosted
17:15
somewhere so people can actually see it. And
17:17
the publishing workflow for this is amazingly
17:20
fast. You literally just open up a service called
17:22
Netlify Drop in your web browser. I have heard
17:25
of that. Is it easy? Netlify Drop is a total
17:29
lifesaver for projects like this. You don't need
17:32
to mess with servers or FTP clients. You literally
17:35
just take that folder from your computer, you
17:37
drag it into the browser window, and you drop
17:39
it. Like stacking Lego blocks of data. Just drag,
17:42
drop, and you're instantly live. Honestly, yeah.
17:45
Within seconds, Netlify processes the files and
17:47
generates a live public link. Your site is officially
17:50
on the internet. That fast? That fast. And that's
17:54
when you do your final sanity check. You open
17:55
that link on your actual physical phone. You
17:57
check it on your laptop. You verify that all
17:59
the magic you built actually survived the upload
18:02
process and works in the real world. Going back
18:04
to the code for a second just to clarify something.
18:07
You mentioned preloading the video metadata earlier
18:10
during the Kini phase. Why just the metadata?
18:14
Why wouldn't we want to preload the whole video
18:16
right away so it's ready to go? Because it's
18:18
a huge performance bottleneck. Really? Oh, yeah.
18:21
If you force the browser to download and preload
18:24
an entire high resolution 60 FPS video before
18:28
it's allowed to render the rest of the page,
18:30
the user will be sitting there waiting for 10
18:31
seconds looking at nothing. Oh, that makes sense.
18:34
Preloading just the metadata tells the browser
18:37
the mathematical length and the physical dimensions
18:39
of the video immediately. So it can build the
18:42
scaffolding. Exactly. The page builds the layout
18:44
and the text instantly based on that math and
18:47
the heavy video file just streams quietly in
18:50
the background. Ah, grabs the dimensions instantly
18:52
without forcing the user through heavy loading
18:54
times. Exactly. It prioritizes the user experience
18:57
above absolutely everything else. And honestly,
19:01
that relentless focus on the user experience
19:03
leads us to the bigger picture here. Yeah, let's
19:07
step back for a minute. What does this all actually
19:09
mean for us? If we look at the larger philosophy
19:13
of this workflow, It teaches a really important
19:15
lesson, which is a premium cinematic result does
19:19
not come from throwing a million complex flashy
19:22
effects at a web page. It really doesn't. In
19:25
fact, if you look at a lot of modern web design,
19:28
adding too many effects usually ruins the experience.
19:32
Oh, totally. It becomes a chaotic, overwhelming
19:34
mess that makes your computer fans spin up. The
19:37
premium feel comes from absolute smoothness.
19:40
It comes from clear, readable text. It comes
19:43
from a background video that elegantly supports
19:45
your core message rather than aggressively distracting
19:48
from it. Simplicity, when it is executed flawlessly,
19:51
inherently feels expensive. It really does. When
19:54
a user sees a single gorgeous motion on their
19:57
screen. Right. And it is tied perfectly to their
19:59
own physical action of scrolling the wheel. It
20:02
feels incredibly tactile. It feels premium because
20:04
it respects their interaction. And the wild part
20:07
is you don't need a massive specialized design
20:09
team to achieve that feeling anymore. No, not
20:11
at all. You don't need a budget of $50 ,000 to
20:14
hire WebGL experts. You really just need one
20:17
clear, highly constrained visual journey. You
20:21
need Kimi K3. You need Google Flow. And you need
20:25
Netlify. You are essentially trading a massive
20:28
financial budget for careful, thoughtful orchestration.
20:33
The AI tools are doing all the heavy, tedious
20:35
lifting, the coding, the rendering, but your
20:38
constraints, your taste, and your planning are
20:40
what actually create the art. It really is a
20:43
profound shift in how we build on the web. It's
20:45
massive. I want to leave you with a final thought
20:47
to chew on today. We just spent this time talking
20:50
about how a single AI video generator and one
20:53
AI coding assistant can completely replace what
20:56
used to require an entire front -end animation
20:59
and development team. All in an afternoon. Right.
21:01
It is genuinely staggering when you sit down
21:03
and really think about the velocity of that technological
21:06
change. Look at this so fast. So it forces a
21:08
question. What does the internet look like in
21:10
five years? Will static web pages full of boring
21:13
blocks of text even exist anymore? I kind of
21:16
doubt it. Or will browsing the web start to feel
21:19
entirely different? Will every site feel like
21:22
stepping into a fluid, interactive, personalized
21:25
movie? That is the ultimate question. The traditional
21:28
barrier to entry for this level of design has
21:31
completely vanished. It's totally gone. I highly
21:34
encourage you to go grab Kimi K3, open up Google
21:37
Flow, try building your own scroll driven world
21:40
today. See what kind of cinematic experience
21:42
you could orchestrate when the tools are doing
21:44
the heavy lifting for you. The tools are literally
21:46
right there waiting for you. Thank you for joining
21:49
us on this deep dive. Keep exploring, keep building.
21:52
We'll catch you on the next one.