Kimi K3 Websites That Feel Like Movies · The Scroll-Driven Workflow

Quick Summary

• Nick Saraev's workflow begins with one continuous macro video, not a complex three-dimensional website. The browser maps page progress to the video's timeline, so scrolling forward or backward feels like moving through a cinematic world.
• Kimi K3 and Kimi Code handle concept exploration, video-prompt development, front-end scaffolding, MCP tool calls, iteration, and deployment assistance. Higgsfield supplies the generated video and interpolation tools that create the visual centerpiece.
• The video's $1 headline should be read as a creator estimate for one favorable run, not a guaranteed total project price. The demonstrated workflow can also require a Kimi membership, Higgsfield credits, several video generations, interpolation, hosting, and human production time.
• A production version needs more than a dramatic desktop demo. It needs compressed media, mobile behavior, a poster and loading strategy, reduced-motion support, semantic content, keyboard-accessible controls, fallbacks, testing, and secure credential handling.

What is actually happening in these movie-like websites?

The visual trick is simpler than it first appears. A short video contains a continuous camera journey through a product, material, landscape, machine, or abstract world. JavaScript converts the visitor's scroll position into a normalized value between zero and one, then maps that value to the video's duration.

Scrolling down advances the video's current time. Scrolling up reverses it. Text, navigation markers, calls to action, and section labels appear at defined progress points, which turns one continuous clip into a guided commercial story.

Nick also demonstrates a tour control that advances between milestones automatically. The manual scroll and guided tour use the same underlying timeline. The website feels three-dimensional because the source video already contains the camera movement, lighting, depth, and material transitions.

This is why the creative asset does most of the visual work. Kimi can build the interface and interaction model, but the experience will only feel cinematic when the underlying clip has a coherent route, readable motion, enough detail, and a strong ending.

Where Kimi K3 and Kimi Code fit

Moonshot AI released Kimi K3 on July 16, 2026. The company describes it as a 2.8-trillion-parameter model with native vision, long-horizon coding strengths, and up to a one-million-token context window. Actual context access depends on the membership tier and client configuration.

The browser chat can generate ideas and prompts, but Nick moves into Kimi Code for the working build. Kimi Code is Moonshot's terminal agent. It can inspect a project, write and modify files, run commands, use MCP tools, test code, and iterate from the results.

Moonshot's own release post says K3 still trails its strongest proprietary comparison models overall. That makes the useful claim narrower than model hype: K3 is capable enough to orchestrate this front-end and media workflow, especially when the brief, files, tools, and acceptance criteria are explicit.

Current Kimi Code documentation supports macOS, Linux, and Windows installation paths. After launching the CLI in the intended project directory, use /login for authorization, /model to select K3, and a new session when switching models so stale context does not shape the build.

Does the website really cost only $1?

Nick says these sites can cost about one or two dollars to produce. Treat that as his estimate for favorable usage inside an existing tool stack, not as a fixed retail price or a guaranteed end-to-end budget.

Kimi K3 is currently available through paid Kimi membership tiers. At the time of this research, the entry membership shown in Kimi's help center is $19 per month, and the included Kimi Code allowance scales by tier. Usage limits, context access, and pricing can change.

Higgsfield charges generation credits based on the selected model and resolution. In the video, one eight-second 1080p Cinema Studio 3.0 generation displays a cost of about 80 credits. Nick creates three versions, then uses another model to interpolate the selected media. Those steps are separate from the Kimi subscription.

A realistic cost log should include concept and coding tokens, every video attempt, interpolation, upscaling, hosting, bandwidth, a custom domain, and the time spent reviewing failed outputs. Divide the complete spend by the number of accepted sites. That figure is much more useful than the cost of one successful generation.

Step 1: turn a commercial idea into one continuous visual journey

Nick first asks Kimi for ten radically different commercial landing-page concepts. Each concept must support a single continuous extreme-macro journey lasting roughly eight seconds. That constraint prevents the model from returning a normal page layout before the core visual story exists.

The examples move through whiskey bubbles, a dissolving skincare capsule, ice crystals, circuit-board cities, caves, foundries, and a hot-air balloon. The important quality is not the subject itself. It is the uninterrupted path from an intriguing opening texture to a clear product or brand reveal.

Kimi then expands the chosen concept into a detailed prompt for an advanced video model. A useful prompt defines the opening scale, forward camera path, material transitions, lighting, focus behavior, atmosphere, final reveal, duration, aspect ratio, and a ban on hard cuts or teleporting camera moves.

Generate several concepts cheaply before generating video. Human taste is most valuable at this stage because selecting the right metaphor, journey, and final brand moment prevents expensive iterations later.

Step 2: generate the video and decide whether interpolation helps

Nick uses Cinema Studio 3.0 through Higgsfield, chooses a 16:9 desktop composition, 1080p resolution, and an eight-second duration, then generates several concepts in parallel. Current Higgsfield materials list Cinema Studio among the models available through its product and agent tooling.

Batching variations increases the probability of finding one coherent clip, but it also multiplies credit usage. Inspect the complete motion before downloading. Look for sudden geometry changes, texture boiling, subject duplication, unreadable details, unwanted cuts, and an ending that does not support the call to action.

The tutorial then uses a ByteDance interpolation tool available through Higgsfield to increase the footage from 30 to 60 frames per second. More intermediate frames can make slow manual scrubbing feel smoother, especially when a visitor stops between the original frames.

Interpolation is optional. It cannot make a discontinuous camera path coherent, and a higher frame rate may increase processing time or file size depending on the export. Test the original and interpolated versions on real browsers before paying for the extra pass.

Step 3: bind scroll progress to the video timeline

The implementation needs a sticky or fixed visual stage, enough document height to create scroll distance, a progress calculation, and a loop that updates the media smoothly. Conceptually, progress equals the current scroll position divided by the available scroll range, clamped between zero and one. The target time equals progress multiplied by the video duration.

Do not write to video.currentTime on every raw scroll event without control. Store the target progress, update toward it inside requestAnimationFrame, and avoid redundant seeks. Modern browsers also expose requestVideoFrameCallback for work that needs to synchronize with frames actually sent to the compositor.

Define named milestones for the narrative, such as entry, transformation, product reveal, proof, and reservation. The guided-tour buttons can animate between those normalized positions while the copy changes at the same thresholds.

Keep meaningful headings, product details, and calls to action in semantic HTML above the visual layer. Search engines and assistive technology should not need to decode a video to understand the page.

Step 4: give Kimi Code a production brief, not only a mood

Nick provides Kimi Code with the local video filename, the original creative concept, and a long site-building prompt. The agent then scaffolds the interface around the media and creates the section-based tour.

A stronger brief specifies the framework or plain-web constraint, supported browsers, exact video paths, progress milestones, copy hierarchy, typography, contrast, button behavior, responsive rules, reduced-motion fallback, asset budget, hosting target, and acceptance tests.

Ask the agent to make a plan before editing, then work in small verified stages: load the poster and video, implement the progress mapping, add milestone copy, add the tour controls, build responsive behavior, run accessibility checks, and create the production build.

Save the final decisions in the repository. A short README should explain the media pipeline, compression settings, progress map, fallback behavior, local commands, deployment method, and where credentials must be supplied without entering source control.

Step 5: connect Higgsfield through MCP when automation is worth it

The first half of the video moves prompts and files between Kimi and Higgsfield manually. Nick later connects Higgsfield to Kimi Code through MCP so the agent can request generation and interpolation without repeated copy and paste.

Kimi Code stores MCP configuration at the user or project level and provides /mcp-config to manage servers plus /mcp to inspect connection status. Project-level MCP files can execute local commands when a session starts, so only use configuration from sources you trust.

Higgsfield currently documents both MCP and CLI access for agent workflows. It says generations through those tools consume the same credit system as the main product, based on the model and resolution.

Keep approvals enabled for generation, file writing, and command execution until the pipeline is understood. Kimi's YOLO flag automatically approves regular tools, and its MCP documentation warns that MCP calls are also auto-approved in that mode. Convenience is not worth losing control of credit spend, project files, or external actions.

Step 6: make the cinematic demo survive real devices

A high-resolution hero video can dominate page weight and loading time. Encode appropriate MP4 and WebM versions, use a representative poster, select a preload strategy deliberately, serve byte ranges correctly, and test slow mobile connections. A 60 fps file should earn its extra weight through a visible improvement.

The desktop 16:9 clip may crop badly on a portrait phone. Choose one of three explicit mobile strategies: generate a separate 9:16 journey, crop a safe central composition, or replace the scroll scrub with a lightweight poster and step-based content. Do not let the browser improvise the product framing.

Respect prefers-reduced-motion. When reduction is requested, replace continuous scrubbing with a static poster, a few intentional stills, or direct section changes. Keep every navigation control keyboard accessible and provide sufficient contrast over changing video frames.

Test loading, scroll response, resize behavior, touch scrolling, orientation changes, Safari seeking, low-power devices, and the back button. A beautiful screen recording is not evidence that the production page is reliable.

Step 7: deploy without exposing an account token

The video creates a Netlify personal access token and pastes it into the Kimi session so the agent can publish. Do not copy that credential pattern into a real project. Netlify says a personal access token identifies you, should be treated like a password, stored as an environment variable, and never shared or committed.

Prefer the hosting provider's official CLI login or OAuth flow. Confirm the account and target site, create a preview deployment first, inspect the generated files, then approve the production publish. Use the narrowest practical credentials and an expiration date.

If any token appears in a prompt, screenshot, terminal recording, repository, or log, revoke it immediately and issue a replacement. Removing the visible text is not enough because the old value may remain in history or copied artifacts.

Kimi can prepare deployment commands and configuration, but publishing is a meaningful external action. Keep the final approval with the site owner and verify the returned URL, HTTPS, canonical host, asset loading, refresh behavior, and mobile experience after deployment.

The complete production playbook

First, define the product, audience, offer, and final call to action. Ask Kimi for several continuous macro-journey concepts, then select one that communicates the brand rather than merely looking strange or expensive.

Second, turn that concept into a constrained video prompt and generate a small batch. Review the complete clips, select one, and interpolate only if a side-by-side browser test proves that it improves scrolling.

Third, create a clean project directory, place the optimized video and poster inside it, launch Kimi Code, select K3, and provide the concept plus a detailed build brief. Implement the scroll stage, progress mapping, copy milestones, navigation, and fallbacks in verified stages.

Fourth, test performance, mobile cropping, reduced motion, keyboard access, text contrast, refresh behavior, and slow connections. Compress or redesign when the visual layer makes the page frustrating.

Finally, create a preview deployment through a trusted CLI authentication flow, inspect it, publish with explicit approval, and record the real cost. The finished result should still communicate its offer when the video fails, motion is reduced, or the visitor arrives on a small screen.