Blog · October 31, 2026 · 8 min read

How we made a record store website that plays like a movie

Reed & Rivet Music is a made-up record and guitar store in Nashville, and its website plays like the opening of a film. We wrote a director's shot list before any code, pulled real 4K footage from Pexels and checked it frame by frame, generated exactly one shot with Google Veo, and built a pinned stage that your scroll scrubs through five shots. Then two separate AI reviewers, agents that had not built it, looked at it, both said it was not ready, and the fixes they forced are most of why it works. This is the whole process, including what is still not perfect.

By the AnimatedWebs team

A shot list before a single line of code

Most "cinematic" websites start as a layout and get video poured into it. We started the other way around, with a film plan written like a director's shot list. Every shot in it has a source clip, an in point and an out point, a color grade written as an ffmpeg filter, a camera move, the effects on top, and the exact transition into the next shot. The opening reads like this: a drone glides low over the Cumberland River at blue hour, then tilts up to reveal the Nashville skyline, while letterbox bars open from black and the titles fade up over the dark water.

Writing the transitions down first mattered more than we expected. "The camera tilts back down into the black water, which dissolves through a warm light leak into the black vinyl of the next shot" is a decision you can build. "Add a nice transition here" is not.

Real footage, checked frame by frame

Every clip is real footage from Pexels, under the Pexels License, and credited in the demo. The search found far more candidates than we used. We downloaded 24 checked files, about 1 GB, and looked at frames from every candidate, including a 100 percent crop of each shortlisted clip, because a clip that looks sharp as a thumbnail is often soft at full size.

The rejections taught us more than the picks. We threw out:

• A foggy neon city aerial that was our first pick for the title. It was gorgeous, but it was not Nashville, and a real hotel name and a real electronics brand sign were readable in it.
• Several Nashville skyline aerials with a phone carrier's logo readable on a tower, and Broadway aerials full of real bar and venue signs.
• Clips with readable guitar brand logos on the headstocks, record player cartridges with brand names printed on them, and a real album cover with faces.
• Clips that were simply soft. One file advertised as 4096 pixels wide actually decoded at 2732 by 1440.

The rule behind all of it: a template is something a customer will put their own business on, so it cannot carry anyone else's brand, name or face as an implied endorsement. The store, the bands and the people in the copy are all invented.

One generated shot, on purpose

The film plan wanted a needle dropping onto a record. No clean stock clip showed that moment: in every usable one, the stylus was already riding the groove. So the opening shot of the scroll film is the one piece of generated footage on the page, a macro stylus drop made with Google Veo in the owner's own account. Everything else is real camera footage. The demo's credits say which is which.

The pinned film stage your scroll plays

The heart of the page is a section pinned for about six screens of scrolling. While it is pinned, your scroll position picks the frame. The stage scrubs 266 frames across five shots: the needle drop, a hand on a fretboard, the repair lathe, a guitarist in silhouette in blue haze, and the skyline at dusk. Scroll down and the film plays forward; scroll up and it plays backward, frame for frame.

The frames are cut from the clips with ffmpeg, with each shot's grade baked in, and shipped as WebP images. Desktop gets a 1920 pixel wide set of about 12 MB. Phones get a separate 960 pixel wide set of about 5.3 MB and load only every other frame. On top of the frames, the cuts carry the film language from the plan: a rack focus that blurs the label into bokeh, a whip pan with motion blur, an amber light leak, and a stage light that blooms to white. Film grain is generated in code, a small noise tile jittered every frame, with a tiny sine wobble for gate weave.

After the stage, every section is its own shot with its own tool. Records pulls focus onto hands flipping through a crate while sleeves flip over in 3D. The guitar wall is a photo with a depth map, so the camera moves through it beside a finder for body, age and budget. There is a guitar neck you can strum, a lesson booking, a repair quote, a show calendar, and a closing aerial toward the lit Capitol with the store's hours.

Two AI reviewers who said not yet

Much of this page was built by AI coding agents working from the plan, under the owner's review. When the first build was done, it went to two separate AI review agents with different jobs, neither of which had built it. One looked at it like a film director: does it play like a movie, do the cuts land, is anything ugly or off brand. The other looked at it like a performance engineer: errors, layouts at odd window sizes, reduced motion and phone speed. Both came back with the same verdict, not yet. Their findings, in their own order of severity:

1. 1The page ended on a black screen. At the very bottom, the letterbox bars closed over everything, including the footer with the footage credits.
2. 2A real brand logo was still readable on one headstock in the guitar wall photo, plus decals and an amp nameplate.
3. 3Phones showed gray TV static in the shows section. The film layer under the grain had not loaded, so the grain was all you saw.
4. 4One CSS variable was rewriting the whole page every frame. The letterbox height was written to the page root on every frame, and about ten rules depended on it. On a throttled phone profile that cost about 3.4 seconds of blocking time on load.
5. 5Reduced motion stacked the opening titles on top of each other in the same spot.
6. 6Headings slid under the header on phones, tool cards scrolled out from under it on desktop, and a marquee overlapped itself.
7. 7The calendar was flat: it reused the band footage from the section before it, blurred into mush.
8. 8The film was below our 2K floor. It had been built at 1280 wide because the Veo clip is 720p, so the 4K stock shots lost their detail.

What the fixes changed

• The bars no longer close at the end. The address card holds, the credits roll in their own column, and the footer with every credit is visible at the bottom.
• The guitar wall photo got a shallow-focus treatment: the headstock row, a poster and the amp plates are soft, so no logo or printed name can be read. The framing did not change, so the depth map still lines up.
• The shows section has a poster image under its video, so it can never show bare grain.
• The letterbox now animates with transform: scaleY(), the variable is set only on the section that needs it, in whole pixels and only when it changes, and section positions are measured on resize instead of every frame. Blocking time on load dropped from about 3.4 seconds to about half a second on the same phone profile.
• The calendar got its own footage, stage lights in haze, and its ticket stubs are dealt off a deck as you scroll.
• The film was rebuilt at 1920 wide for desktop, with the separate 960 wide set for phones.

What is still not perfect

• The Veo needle drop is a 720p clip scaled up to 1920, so it is visibly softer than the four stock shots that follow it.
• On phones the rolling end credits are hidden; the phone ending is the address card and then the footer.
• On a throttled phone profile, first paint is about 1.4 seconds, but the full load still takes about 11 seconds. A page made of real footage is heavy, and the frame sequence is most of it.
• Real footage means you inherit its limits. You can grade a clip, crop it and blur parts of it, but you cannot move the camera.

The process is the part worth copying: write the film before the page, refuse footage you would have to apologize for, use generation only for the shot that does not exist, and let a reviewer that did not build it tell you what is broken.

Play it yourself: open the Reed & Rivet live demo, scroll slowly through the film, then scroll back up and watch it run in reverse. The template page has the build prompt and the details.