Build Cinematic Scroll-Driven Websites with Kimi K3 for $1
A practical tutorial on building scroll-animated cinematic websites using Kimi K3, Higsfield's Cinematic Studio, and frame interpolation.
What is a cinematic scroll-driven website, and why does Kimi K3 change the economics of building one?
A cinematic scroll-driven website is a landing page where scrolling up and down moves you forward and backward through a single continuous video, like a macro camera flight through liquid, ice, or circuitry. Under the hood it’s just a video sliced into frames and bound to scroll position. What used to require a designer, a video editor, and a developer can now be assembled by one person for a couple of dollars, because Kimi K3 (built by Moonshot AI) handles the coding cheaply, and AI video tools generate the footage on demand instead of requiring a film shoot.
TL;DR
- Scroll-bound video is the core trick: every frame of an 8 to 10 second clip becomes a “scene,” and scroll position maps directly to playback position, so scrolling down plays forward and scrolling up rewinds.
- Kimi K3 is Moonshot AI’s frontier model, competitive with models like GPT and Claude-class systems, and it’s cheap enough that generating the full site’s code costs roughly a dollar or two.
- Kimi Code is the terminal-based coding agent version of Kimi (distinct from the Kimi chat interface), installed via a single curl command and driven from a terminal with natural-language prompts.
- Concept generation is outsourced to the AI itself: instead of brainstorming a theme manually, you prompt Kimi to produce a batch of radically different scroll-driven concepts (a whiskey bubble, a dissolving skincare capsule, a circuit board) and pick the one with the best “taste fit.”
- Higsfield’s Cinematic Studio (versions 3.0 through 4K) turns those AI-written prompts into an actual macro-journey video clip, with resolution options for both desktop (16:9) and mobile/social (9:16) formats.
- Frame interpolation is what separates a smooth site from a janky one: raw video generation typically outputs 30fps, which looks choppy when scrubbed by scroll, so a model like ByteDance’s AIGC interpolation tool doubles it to 60fps by generating in-between frames.
- The full pipeline is concept, prompt, video generation, interpolation, then code, meaning the creative asset (the video) does most of the visual heavy lifting while Kimi K3 handles the scroll-binding and site structure.
- ✕a coding agent
- ✕no-code
- ✕vibe coding
- ✕a faster Cursor
The one that tells the coding agents what to build.
How does the scroll-to-video binding actually work?
The illusion of a moving, rotating 3D website is almost entirely a trick of video, not code. The site itself doesn’t animate much. Instead, a single continuous video clip (often an “extreme macro journey,” like a camera pushing through a capsule wall into a cloud of powder) is decomposed into individual frames. Each frame becomes a “scene” tied to a scroll checkpoint. As the user scrolls down, the browser advances through frames in sequence, playing the video forward. Scrolling up reverses it. Many builds also add a tour-based autoplay mode, so visitors who don’t want to scroll manually can just watch the sequence play through on its own.
This means the two real engineering problems are: getting a video that looks cinematic and continuous, and making the frame-by-frame scroll transition feel smooth rather than stuttery.
What role does Kimi K3 play versus the video generation tools?
Kimi K3 doesn’t generate the video. It generates ideas, prompts, and the website code that binds everything together. The workflow uses Kimi in two distinct modes:
Kimi Chat is used early for ideation. A creative-director-style prompt asks the model to act as “the sole creative director and senior front-end author for a premium interactive portfolio” and produce a batch (for example, ten) of radically different scroll-driven concepts, each built around a single continuous 8-second extreme macro shot. Because generating novel concepts is computationally cheap for a language model (it’s essentially sampling from a large idea space), you can get a dozen usable directions in one pass and just pick a favorite based on taste, the same way a creative director filters pitches.
Kimi Code is the agentic, terminal-based version used to actually build the site. It’s installed with a single terminal command, opened by typing kimi, and requires an OAuth login on first use. From there, /clear resets context and you can feed it structured prompts to turn a chosen concept into a polished video prompt, and later to wire up the scroll mechanics, hosting, and interactive layer around the finished video asset. Kimi subscriptions have tiered plans (with names like Moderato, Allegro, and Vivace in this workflow) and sign-up is a straightforward Stripe checkout, though usage can be throttled when demand for the cheap-and-capable model spikes.
How do you generate the actual video asset?
Once a concept is chosen (say, a macro journey through a dissolving skincare capsule), Kimi is prompted to convert that concept into a detailed video-generation prompt, matching the style and specificity of a known-good example prompt (something like: “a single continuous 8-second cinematic engineering shot moving forward from above a stormy, cold North Atlantic ocean”). That structured prompt then goes into a text-to-video tool.
The tool used here is Higsfield’s Cinematic Studio, specifically version 3.0 of its 4K offering (newer versions like 3.5 exist with more built-in scene-change features, but 3.0 is sufficient for a single continuous shot). Inside Cinematic Studio you set:
- Aspect ratio: 16:9 for a desktop-first experience, 9:16 for mobile or social-first formats like Instagram.
- Resolution: 1080p is a reasonable default to balance quality against generation time.
- Duration: 8 seconds keeps things simple and matches the original prompt structure; longer durations (10 or 16 seconds) are available but add cost and generation time.
- Generation mode: options like custom, multi-shot, or “smart” generation exist depending on how much control you want over the shot.
Built like a system. Not vibe-coded.
Remy manages the project — every layer architected, not stitched together at the last second.
Each generation consumes credits (roughly 80 credits per clip in this setup), so it’s practical to queue up two or three concept videos simultaneously rather than iterating one at a time.
Why does frame interpolation matter, and how is it done?
AI video models commonly output around 30 frames per second. That’s fine for normal playback, but scroll-driven sites don’t play video at a fixed frame rate. They advance frame-by-frame based on scroll position, which means the viewer’s eye can catch individual frames as discrete jumps rather than smooth motion. At 30fps, that jumpiness reads as janky and cheap.
The fix is frame interpolation: taking two consecutive frames and generating a new synthetic frame that sits between them, effectively doubling the frame rate. In this workflow, ByteDance’s AIGC interpolation tool takes the clip from 30fps to 60fps. At 60fps, the same scroll-binding logic produces motion smooth enough that most of the “choppy scroll” problems disappear. This step is easy to skip but is the main difference between a demo that looks amateur and one that looks like an agency built it.
Is this workflow actually worth it for a solo builder?
For anyone who wants a distinctive, portfolio-grade landing page without hiring a video team, yes, largely because the cost structure has inverted. Video generation credits and a Kimi Code session together can run into the single dollars per concept, and the ideation step (which used to be the hardest, most time-consuming part of creative work) is now nearly free. The tradeoff is that this is still a hands-on technical process: you need comfort with a terminal, an account with a coding-capable model, and a video generation subscription. It’s not a one-click builder. But compared to commissioning custom cinematic video and hand-coding scroll physics, the time and cost savings are substantial.
Frequently Asked Questions
What is Kimi K3?
Kimi K3 is a frontier AI model from Moonshot AI, positioned as competitive with other leading models in reasoning and coding tasks. It’s used here both through a standard chat interface for ideation and through Kimi Code, its terminal-based coding agent, for building the actual website.
Do I need Higsfield specifically, or can I use another video model?
Higsfield’s Cinematic Studio was used because it produced the strongest results in testing among several video models tried, but other tools, including Kling 2.0, are also viable for generating macro-journey style clips. The core requirement is a model that can produce a single continuous cinematic shot matching your prompt.
Why does the video need to be exactly one continuous shot?
A single continuous shot (rather than cuts between scenes) is what allows the frame-by-frame scroll binding to feel like one fluid journey. Cuts would break the illusion of continuous forward or backward motion as the user scrolls.
How much does it actually cost to build one of these sites?
Costs come from two places: Kimi usage (billed through subscription tiers, generally inexpensive) and video generation credits (roughly 80 credits per 8-second clip in Cinematic Studio). Total spend for a single concept can land around a dollar or two, though generating multiple concepts to choose from adds up proportionally.
Other agents ship a demo. Remy ships an app.
Real backend. Real database. Real auth. Real plumbing. Remy has it all.
What’s the hardest part of this process to get right?
Frame interpolation and prompt specificity. Skipping the 30fps-to-60fps interpolation step is the most common cause of a janky, unconvincing scroll experience, and vague video prompts tend to produce generic footage instead of the tightly-controlled macro camera movement that makes these sites feel cinematic.