I Built a Website You Can Enter

The Question

Can an AI-assisted cinematic website create a coherent, reversible opening without hiding the business content or confusing technical activity with visual success?

The comparison holds the fictional business, services, portfolio stories, availability statement, and contact action constant. Standard uses still images and ordinary document flow. Interactive adds a scroll-controlled film before continuing into the same content.

What We Built

Northlight Studio is a fictional photography business created only for this experiment. The final Interactive choreography is camera assembled → full disassembly → maximum exploded view → exact reverse reassembly → front-facing rotation → lens approach → physical passage through the lens → studio.

Eleven reference PNGs were inspected. CAM1.png defined camera identity, CAM2.png guided frontal composition only, CAM3.png guided disassembly logic only, and ESTUDIO4.png defined the studio destination. Other studio, forest, and cabin references informed continuity.

The Production Process

The useful workflow was not “prompt, download, publish.” Every stage had a separate acceptance question:

1. Reference: assign identity, angle, mechanics, and destination roles.
2. Storyboard: define visible states and shot boundaries.
3. AI video generation: ask each clip to perform one controlled transition.
4. Visual inspection: watch the MP4 and sample frames, not only task status.
5. Rejection or approval: preserve every source and record why it passed or failed.
6. Transcoding: create silent, responsive, short-GOP web derivatives.
7. Scroll scrubbing: map document progress to media time.
8. Browser validation: test telemetry and compare visible frames in both directions.

Kling Production and Real Cost

The original round used eight image credits and 128 video credits: 136 Kling credits. It produced the visual plates, a 5.04-second first disassembly, a 5.04-second lens-facing rotation, and a 6.04-second lens-to-studio passage.

The first disassembly was later superseded because it separated mainly front optical elements and did not open enough of the whole camera. A new three-attempt round cost 80 credits per attempt. The first replacement was rejected after a prompt-transmission failure caused cuts between references and scene changes. The second was rejected for an incomplete prompt, morphing, and premature reassembly. The third was accepted because it separated the lens, body shells, and internal layers, then held the exploded state.

The replacement round cost 240 additional credits. The complete verified experiment cost is therefore 376 Kling credits. Rejected attempts are part of that total. No currency conversion is claimed because the project does not contain a reliable price record for the account and date used.

The final accepted disassembly source is 10.04 seconds, 1920 × 1080, 24 fps, H.264 Main/AVC1, and 10,452,423 bytes. Together with the unchanged 5.04-second rotation and 6.04-second portal clips, the accepted sources used by the final experience total 21.12 seconds and 22,434,253 bytes. Originals and rejected outputs remain preserved outside public/.

Storyboard and Continuity

1. Hold the accepted CAM1-based plate briefly.
2. Separate the lens first, followed by camera shells and internal layers.
3. Hold the maximum exploded state long enough to read.
4. Run the accepted material backward so every visible part returns along the same temporal path.
5. Switch to the rigid camera rotation until the lens faces the viewer.
6. Advance through optical glass and the physical barrel rather than substituting a simple fade.
7. Emerge into the ESTUDIO4-derived studio.
8. Continue through Studio, Forest, Cabin, About, Availability, and Contact.

Continuity is useful but imperfect. Internal components are visibly influenced by the mechanical reference, small body details change, and the CAM1 identity is not absolute through every generated frame. This is directed generative footage, not a physically accurate camera model.

The Scroll Implementation

Three optimized, silent H.264 MP4 files are positioned in one sticky viewport. Normalized section progress selects the active clip and writes its currentTime. Passive scroll notifications are consolidated through requestAnimationFrame.

The final progress map is: 0–0.02 assembled hold; 0.02–0.26 disassembly; 0.26–0.36 exploded hold; 0.36–0.56 reverse reassembly; 0.56–0.70 frontal rotation; 0.70–1.00 lens approach, passage, and studio. The outer section is 560svh on desktop and 500svh on mobile.

The published derivatives use fast-start and a six-frame GOP—about 0.25 seconds at 24 fps—to support repeated seeking. This is explained with reusable HTML, CSS, and JavaScript in How to Build a Scroll-Controlled Video Website.

What Broke—and What We Learned

The first disassembly was not strong enough

The first source was valid video and could be scrubbed forward and backward, but it concentrated movement around the lens. A viewer could not clearly read a full-camera teardown. The final replacement opens the camera body and holds a much wider exploded state.

object-fit: cover hid important motion

In taller viewports, cover cropped the lateral edges where detached parts traveled. The cinematic stage now uses contain, accepting some empty space to preserve the action.

The overlay was too strong

The title and dark gradient remained over the product after movement began. They reduced contrast and obscured components. The final implementation fades the hero copy after 2.2% progress and reduces the shade while the sequence is moving.

There was too much dead scroll

An earlier hold and longer-feeling mapping made the beginning resemble a static hero. The final timeline starts movement at 2%, reaches the exploded state by 26%, and uses an explicit hold only after the transformation is visible.

Technical success is not visual success

HTTP 206 responses, readyState, decoded media, changing currentTime, and automated assertions proved that the mechanism was active. They did not prove that a person could see the intended transformation. Visual checkpoints and continuous browser inspection were required.

A scroll-controlled experience cannot reveal motion that does not exist in the source media. The generation process and the interface have to be validated together.

Desktop, Mobile, Reduced Motion, and Failure

Desktop receives 1600 × 902 MP4 derivatives; mobile receives 960 × 542 versions selected before media loading. The desktop video files total 6,737,663 bytes; mobile totals 2,571,629 bytes.

By default, prefers-reduced-motion: reduce removes the sticky film and prevents MP4 requests while retaining a still-image story and all later content. A reader can explicitly choose the full-motion route with ?motion=full. If media loading fails, the page exposes a link to Standard instead of leaving the loader over the experience.

Measurement Method

The values below are local file sizes from the generated dist. They are reproducible build metrics, not elapsed load time, compressed transfer on a particular host, Lighthouse, or field Core Web Vitals.

Results: Standard vs Interactive

The result supports a technical conclusion, not a marketing one: Interactive delivers the intended choreography and costs substantially more local media bytes. The experiment does not establish which version users prefer or which would perform better commercially.

Important Limitations

• AI continuity is imperfect across shots and during the internal teardown.
• No physical camera model or mechanically accurate exploded assembly was produced.
• Local file sizes do not predict production-network timing.
• Seeking can vary by browser, decoder, server range support, and device.
• Automated Chrome coverage does not replace physical iPhone/Safari or assistive-technology sessions.
• No real visitors, clients, bookings, preference scores, conversions, revenue, Lighthouse scores, or field Core Web Vitals were measured.

Implementation Guides

The Lab report records the experiment. Two derived guides separate the reusable lessons:

• How to Build a Scroll-Controlled Video Website explains sticky structure, normalized progress, media time, encoding, responsive delivery, and testing.
• What I Learned Using AI Video for an Interactive Website documents references, shot planning, failed generations, credit cost, approval, continuity, and human judgment.
• The earlier AURA ONE experiment shows the lighter CSS/SVG approach that preceded this real-video version.

Would We Use This for a Real Business?

Selectively. The technique fits a focused campaign, portfolio launch, or premium brand story where motion demonstrates the craft. Standard remains the more economical default for routine service discovery and slower connections. A real launch would still need physical-device testing, consented field performance, and task-completion evidence.

Sources / Further Reading

• MDN: HTMLMediaElement.currentTime
• MDN: requestAnimationFrame
• MDN: prefers-reduced-motion
• W3C: Animation from Interactions

Last tested and updated: September 14, 2026. Interactive and Standard remain noindex and canonical to this report.