Redo the site film as a how-to with the new panel

docs/index.html

@@ -92,16 +92,16 @@ <h1>Upscale and smooth <span>anime in Resolve.</span></h1>
                 <div class="player">
                     <video src="assets/demo/promo.mp4" poster="assets/demo/promo-resolve.jpg" controls playsinline preload="none"
                            width="1920" height="1080"
-                           aria-label="A 21 second film: the Hero walk as drawn and from Upflow2x, the panel in DaVinci Resolve, and the render on the track above the original"></video>
-                    <button class="play" type="button" aria-label="Play the film, 21 seconds, with sound">
+                           aria-label="A 34 second film: the Hero walk as drawn and from Upflow2x, then how to use the panel in DaVinci Resolve, from opening it to the render on the track above the original"></video>
+                    <button class="play" type="button" aria-label="Play the film, 34 seconds, with sound">
                         <span class="play-dot"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l11-6.5a1 1 0 0 0 0-1.72l-11-6.5A1 1 0 0 0 8 5.5z"/></svg></span>
                     </button>
                 </div>
                 <figcaption>Footage from <a href="https://studio.blender.org/projects/hero/">Hero</a> by the Blender Foundation, <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>, edited.</figcaption>
             </figure>
         <div class="how-text">
             <h2 id="how-title">How it works</h2>
-            <p>Open the panel from Workspace, Scripts and put the playhead on a clip. This is the path it takes, and the film shows all of it in 21 seconds.</p>
+            <p>Open the panel from Workspace, Scripts and put the playhead on a clip. This is the path it takes, and the film walks through it in 34 seconds.</p>
             <ol class="flow" aria-label="What happens to your clip">
                 <li class="node">
                     <span class="node-kind">Input</span>

promo/README.md

@@ -1,9 +1,9 @@
 # The site film
 
-`docs/assets/demo/promo.mp4` is built from this folder. It is 21.5 s, 1920x1080 at 24 fps.
+`docs/assets/demo/promo.mp4` is built from this folder. It is 34 s, 1920x1080 at 24 fps, and shows how to use Upflow2x on one clip, the Hero walk: open the panel, mark the drawings, press Render, and the result lands on the track above.
 
 - `film/` is a HyperFrames composition. Every scene, caption and timing is in `film/index.html`.
-- `sound/make_sound.py` makes the soundtrack. The wind, sand and his coat are made from noise. The footsteps, clicks and paper sounds come from `sound/samples/`.
+- `sound/make_sound.py` makes the soundtrack. The wind, sand and his coat are made from noise. The footsteps, clicks, key taps and paper sounds come from `sound/samples/`.
 - `build.py` runs both and writes `docs/assets/demo/promo.mp4`.
 
 ## Rebuilding
@@ -22,24 +22,30 @@ cd promo/film
 npx --yes hyperframes@0.8.193 preview
 ```
 
-The site shows `docs/assets/demo/promo-resolve.jpg` as the film's poster. It is
-the Resolve screenshot `docs/assets/demo/resolve.jpg` lined up with the film's
-frame at 17.2 s. Make it again if that part of the film changes.
+The site shows `docs/assets/demo/promo-resolve.jpg` as the film's poster. It is the film's frame at 5.8 s. Its line "How to use it in Resolve" sits above the middle, so the site's play button doesn't cover it. Make it again if that part of the film changes.
+
+## The footage
+
+- `walk_drawn.mp4` is the first 113 frames of the Hero walk as drawn, held on 4s.
+- `walk_upflow.mp4` is Upflow2x's render of it, with Upscaling and Interpolate on and a marker on 25 drawings. The render is 337 frames, 3x slower than the clip. The film plays every third frame, so it runs at the clip's own speed and each frame lines up with the same frame of `walk_drawn.mp4`.
+- `resolve.jpg` and `panel.png` are screenshots of that render in DaVinci Resolve Studio 20.3.1. The film's camera moves over the one screenshot.
+- `cover_markers.png` and `cover_v2.png` are cut from the same screenshot with the markers and the render taken out, so the film can show them appear. `film/index.html` lists where they sit.
 
 ## Timing the sound
 
 The sound times in `make_sound.py` follow `film/index.html`:
 
-- the cursor presses at 6.9 and 8.4 s
-- the frame flips at 11.6, 12.13 and 12.65 s
-- the logo at 17.91 s
+- the clicks on Workspace at 8.05 s and on Render at 20.05 s
+- the panel opening at 8.6 s
+- a key tap for each marker as the wipe uncovers it, from 11.4 s over 2.6 s
+- the render landing on V2 at 23.3 s
 
-His feet land on frames 4, 32, 84 and 108 of the walk clip, which starts at 0 s. If the walk changes, find the new contacts frame by frame and move the steps.
+His feet land on frames 4, 32, 84 and 108 of the walk clip, which plays from 0 s and again from 25.5 s. If the walk changes, find the new contacts frame by frame and move the steps.
 
 ## Licences
 
-- The walk and the frames come from [Hero](https://studio.blender.org/projects/hero/) by the Blender Foundation, CC BY 4.0. `walk_e2x.mp4` and `out*.jpg` are Eternal2x renders of it.
-- `panel_*.png`, `resolve_bg.jpg` and `resolve_result.png` are screenshots of DaVinci Resolve Studio 20.3.1 running Eternal2x.
+- The walk comes from [Hero](https://studio.blender.org/projects/hero/) by the Blender Foundation, CC BY 4.0. `walk_upflow.mp4` is an Upflow2x render of it.
+- `resolve.jpg`, `panel.png` and the two covers are screenshots of DaVinci Resolve Studio 20.3.1 running Upflow2x.
 - The samples are by [Kenney](https://kenney.nl/), CC0.
-- Inter is under the SIL Open Font License 1.1, in `film/assets/fonts/LICENSE`.
+- Geist and Geist Mono are under the SIL Open Font License 1.1, in `film/assets/fonts/LICENSE`.
 - GSAP 3.14.2 is under GreenSock's [standard no-charge licence](https://gsap.com/standard-license).

promo/build.py

@@ -12,7 +12,7 @@
 
 HERE = Path(__file__).resolve().parent
 FILM = HERE / "film"
-SOUND = FILM / "assets" / "sound" / "eternal2x-sound.wav"
+SOUND = FILM / "assets" / "sound" / "upflow2x-sound.wav"
 RENDER = HERE / "out" / "film.render.mp4"
 TARGET = HERE.parent / "docs" / "assets" / "demo" / "promo.mp4"
 

promo/film/assets/fonts/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) Geist-Italic[wght].ttf: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at: