Cinematic websites|INEMA.CLUB-PRO

Cinema with AI program · course 5 of 6 · 8 lessons

Cinematic websites: the video becomes a page, and the page opens fast

A clip becomes frames, scroll picks the frame, and the page feels like a film. Here you build that with an agent, measure the weight, add depth with Three.js, make the brand film from the site, chain clips with no cuts, and check it on your phone and with reduced motion. All local, no credits.

Start with lesson 1 See the previous course (The factory)
A dark editing desk with one monitor showing code, another with a web page open on a misty landscape, and a phone standing up showing the same page.
  • 8lessons
  • 25tested terminal blocks
  • 4/4final gate
  • 0credits spent

The lessons

A fictional product page, the Aurora 35 lens, runs through the course. The kit includes the page, the check scripts, and rehearsal clips made with ffmpeg: no video generator is needed.

  1. Lesson 1 · 15 minWhat a cinematic site is and when it's worth the weightA cinematic site looks like a film that moves with the scroll. Underneath, there's no 3D and no video playing: there are frames from a clip drawn on a canvas, one per scroll position. That's heavy. In this lesson you run the kit's example page, measure how much it weighs for each visitor, and decide, with a number, whether your product calls for one.
  2. Lesson 2 · 15 minFrom video to frames: extract, compress, and order the sequenceThe quality of the scroll motion is decided here. Too few frames and the film turns into a slideshow; frames that are too big and the page won't open on a phone; names without zeros and the film jumps. You make a rehearsal clip with ffmpeg from a photo, extract every frame, and check count, order, and weight with a script.
  3. Lesson 3 · 18 minScroll that controls time: the cinematic scroll skillThe engine that ties scrolling to frames has few parts, and each one fixes a measured stutter. You look at the parts, swap the kit page's frames for your own from lesson 2, prove with the test contract that the right frame shows up at each point, and ask the scroll-film-studio skill, from INEMA, for the new page.
  4. Lesson 4 · 15 minDepth with Three.js without freezing the pageVideo frames give you the film; Three.js gives you a scene drawn in code that changes angle as you scroll. The risk is the scene drawing nonstop, even when idle or off screen, and heating up the phone. Here you measure, in a headless Chromium, how many times the scene draws in each situation, and you watch the common mistake fail.
  5. Lesson 5 · 18 minBrand film from your own siteSo far the video became a page. Now the reverse path: the page becomes a video. filmarca (INEMA) reads the colors, fonts, logo, copy, and screenshots of a site and builds a brand film in HyperFrames. You run the whole path against the kit's page without calling any model, using filmarca's own template scenes, and then you put the film on the page.
  6. Lesson 6 · 18 minLive background: video generated inside the siteA long opening film comes from several short clips chained together, each starting on the last real frame of the one before. The risk is a hidden cut in the middle of a clip. The site-movimento skill has gates that catch it. You run them on rehearsal clips, one continuous and one with a cut, without spending credits.
  7. Lesson 7 · 16 minMobile, weight, and "reduced motion": the site that opens fastMany people open the page on a phone held upright, on a mobile network, and some have asked their system for less motion. A horizontal film cropped to a vertical screen loses its subject; a film that moves by force bothers people who asked it to stop. You check the page on a 390 px phone, with reduced motion on, and cut the weight of the vertical film.
  8. Lesson 8 · 20 minYour site: a product page with cinematic scroll, publishedTime to put it all together on a page of your own. You start from the kit's template, swap the photo and the text for those of your product, redo the two films, pass the four-check gate and publish to GitHub Pages. The same checker that ran on your machine runs against the public URL: it is what says you are live.

Who it's for

  1. 1People who build sites with Claude Code or Codex and use the terminal.
  2. 2People who already have a clip (or are about to generate one) and want it to become the opening of a page.
  3. 3People who took course 3 (motion by code) and want to bring the motion into the browser.

What you walk away able to do

  1. 1Turn a clip into frames and tie the frames to scroll.
  2. 2Measure the weight per visitor and decide whether the page deserves the film.
  3. 3Add depth with Three.js without drawing for nothing.
  4. 4Check the phone and reduced motion before publishing.

The program (6 courses)

  1. 10 · Direction: think like a director
  2. 21 · Generation: image and video with AI
  3. 32 · Production: from script to film
  4. 43 · Motion by code with an agent
  5. 54 · The video factory with agents
  6. 65 · Cinematic websites (this course)