feat: rewrite the website copy and replace the screenshots with animated mockups
89fef88 parent: edc162a modified
.rickub/workflows/deploy-site.yml +1 -1 | @@ -1,5 +1,5 @@ | ||
| 1 | 1 | # Builds the website (site/) and uploads it to Bunny CDN, served as https://daryl.eventuallymaking.io. |
| 2 | -# Only runs when the site, the screenshots or the logo it uses, or this file change. | |
| 2 | +# Only runs when the site, the images or the logo it uses, or this file change. | |
| 3 | 3 | # |
| 4 | 4 | # The build has no dependencies (plain node), so there is no install step and ubuntu-latest is enough. |
| 5 | 5 | # |
| @@ -1,5 +1,5 @@ | |||
| 1 | # Builds the website (site/) and uploads it to Bunny CDN, served as https://daryl.eventuallymaking.io. | 1 | # Builds the website (site/) and uploads it to Bunny CDN, served as https://daryl.eventuallymaking.io. |
| 2 | -# Only runs when the site, the screenshots or the logo it uses, or this file change. | 2 | +# Only runs when the site, the images or the logo it uses, or this file change. |
| 3 | # | 3 | # |
| 4 | # The build has no dependencies (plain node), so there is no install step and ubuntu-latest is enough. | 4 | # The build has no dependencies (plain node), so there is no install step and ubuntu-latest is enough. |
| 5 | # | 5 | # |
modified
README.md +9 -9 | @@ -11,12 +11,11 @@ | ||
| 11 | 11 | |
| 12 | 12 | <p align="center"> |
| 13 | 13 | <a href="https://daryl.eventuallymaking.io">Website</a> · |
| 14 | - <a href="https://rickub.com/hlassiege/daryl">Source code</a> · | |
| 15 | - <a href="https://github.com/hlassiege/daryl">GitHub mirror</a> | |
| 14 | + <a href="https://rickub.com/hlassiege/daryl">Source code</a> | |
| 16 | 15 | </p> |
| 17 | 16 | |
| 18 | 17 | <p align="center"> |
| 19 | - <img src="media/screenshots/editing.png" alt="The editing step: preview, timeline with chapters, motion design, zooms, B-roll and music, and Daryl's chat" width="900"> | |
| 18 | + <img src="media/screenshots/editing.png" alt="The editing step: asked for a title card with a whoosh, Daryl adds both to the timeline and the preview shows the card" width="900"> | |
| 20 | 19 | </p> |
| 21 | 20 | |
| 22 | 21 | --- |
| @@ -73,7 +72,7 @@ A **Library** (`data/library/`) keeps your own resources (images, videos, sounds | ||
| 73 | 72 | across projects. |
| 74 | 73 | |
| 75 | 74 | <p align="center"> |
| 76 | - <img src="media/screenshots/storyboard.png" alt="The storyboard: motion design beats anchored on the transcript, with their place on screen" width="900"> | |
| 75 | + <img src="media/screenshots/storyboard.png" alt="The storyboard: motion design beats anchored on the words they illustrate, with their place on screen" width="900"> | |
| 77 | 76 | </p> |
| 78 | 77 | |
| 79 | 78 | ### Claude Code skills for editing |
| @@ -223,7 +222,7 @@ backend/studio/ | ||
| 223 | 222 | web/ Vue 3 + Vite |
| 224 | 223 | src/pages/ home, new project / brief, library, settings, teleprompter |
| 225 | 224 | src/project/ open project store, top bar, step header, steps/ (one screen per step) |
| 226 | - scripts/ screenshots.mjs (the screenshots of this README and the website) | |
| 225 | + scripts/ screenshots.mjs (the images of this README and the share image of the website) | |
| 227 | 226 | skills/ Claude skills copied into each project (script, titles, thumbnail) |
| 228 | 227 | .claude/skills/ Claude Code skills for editing sessions in this repository |
| 229 | 228 | site/ the website (static, deployed to Bunny CDN) |
| @@ -263,10 +262,11 @@ Tasks on the same `queue` run one at a time (e.g. `gpu`); two different queues r | ||
| 263 | 262 | | `EPIDEMIC_SOUND_API_KEY` | Epidemic Sound key, for the `music-bed` skill (`.mcp.json`) | |
| 264 | 263 | | `STUDIO_NO_BROWSER` | unset (set it to `1` to not open the browser on launch) | |
| 265 | 264 | |
| 266 | -## Screenshots and website | |
| 265 | +## Website and images | |
| 267 | 266 | |
| 268 | -The screenshots in `media/screenshots/` are taken from a running app, with your own projects (edit the | |
| 269 | -ids in `web/scripts/screenshots.mjs`): | |
| 267 | +The screens shown on the website are mockups: the app's screens redrawn in HTML and CSS | |
| 268 | +(`site/public/index.html`), in English, on a made-up project, and animated. The images in | |
| 269 | +`media/screenshots/` (this README, and the share image of the website) are captured from these mockups: | |
| 270 | 270 | |
| 271 | 271 | ```powershell |
| 272 | 272 | cd web; pnpm screenshots |
| @@ -274,7 +274,7 @@ cd web; pnpm screenshots | ||
| 274 | 274 | |
| 275 | 275 | The website lives in `site/`. `node site/serve.mjs` serves it on http://localhost:4477 while you work on it |
| 276 | 276 | (reload the page after an edit); `node site/build.mjs` builds it into `site/dist/`. It is deployed to |
| 277 | -Bunny CDN by `.rickub/workflows/deploy-site.yml` when `site/`, the screenshots or the logo change. | |
| 277 | +Bunny CDN by `.rickub/workflows/deploy-site.yml` when `site/`, the images or the logo change. | |
| 278 | 278 | |
| 279 | 279 | ## Contributing |
| 280 | 280 | |
| @@ -11,12 +11,11 @@ | |||
| 11 | 11 | ||
| 12 | <p align="center"> | 12 | <p align="center"> |
| 13 | <a href="https://daryl.eventuallymaking.io">Website</a> · | 13 | <a href="https://daryl.eventuallymaking.io">Website</a> · |
| 14 | - <a href="https://rickub.com/hlassiege/daryl">Source code</a> · | 14 | + <a href="https://rickub.com/hlassiege/daryl">Source code</a> |
| 15 | - <a href="https://github.com/hlassiege/daryl">GitHub mirror</a> | ||
| 16 | </p> | 15 | </p> |
| 17 | 16 | ||
| 18 | <p align="center"> | 17 | <p align="center"> |
| 19 | - <img src="media/screenshots/editing.png" alt="The editing step: preview, timeline with chapters, motion design, zooms, B-roll and music, and Daryl's chat" width="900"> | 18 | + <img src="media/screenshots/editing.png" alt="The editing step: asked for a title card with a whoosh, Daryl adds both to the timeline and the preview shows the card" width="900"> |
| 20 | </p> | 19 | </p> |
| 21 | 20 | ||
| 22 | --- | 21 | --- |
| @@ -73,7 +72,7 @@ A **Library** (`data/library/`) keeps your own resources (images, videos, sounds | |||
| 73 | across projects. | 72 | across projects. |
| 74 | 73 | ||
| 75 | <p align="center"> | 74 | <p align="center"> |
| 76 | - <img src="media/screenshots/storyboard.png" alt="The storyboard: motion design beats anchored on the transcript, with their place on screen" width="900"> | 75 | + <img src="media/screenshots/storyboard.png" alt="The storyboard: motion design beats anchored on the words they illustrate, with their place on screen" width="900"> |
| 77 | </p> | 76 | </p> |
| 78 | 77 | ||
| 79 | ### Claude Code skills for editing | 78 | ### Claude Code skills for editing |
| @@ -223,7 +222,7 @@ backend/studio/ | |||
| 223 | web/ Vue 3 + Vite | 222 | web/ Vue 3 + Vite |
| 224 | src/pages/ home, new project / brief, library, settings, teleprompter | 223 | src/pages/ home, new project / brief, library, settings, teleprompter |
| 225 | src/project/ open project store, top bar, step header, steps/ (one screen per step) | 224 | src/project/ open project store, top bar, step header, steps/ (one screen per step) |
| 226 | - scripts/ screenshots.mjs (the screenshots of this README and the website) | 225 | + scripts/ screenshots.mjs (the images of this README and the share image of the website) |
| 227 | skills/ Claude skills copied into each project (script, titles, thumbnail) | 226 | skills/ Claude skills copied into each project (script, titles, thumbnail) |
| 228 | .claude/skills/ Claude Code skills for editing sessions in this repository | 227 | .claude/skills/ Claude Code skills for editing sessions in this repository |
| 229 | site/ the website (static, deployed to Bunny CDN) | 228 | site/ the website (static, deployed to Bunny CDN) |
| @@ -263,10 +262,11 @@ Tasks on the same `queue` run one at a time (e.g. `gpu`); two different queues r | |||
| 263 | | `EPIDEMIC_SOUND_API_KEY` | Epidemic Sound key, for the `music-bed` skill (`.mcp.json`) | | 262 | | `EPIDEMIC_SOUND_API_KEY` | Epidemic Sound key, for the `music-bed` skill (`.mcp.json`) | |
| 264 | | `STUDIO_NO_BROWSER` | unset (set it to `1` to not open the browser on launch) | | 263 | | `STUDIO_NO_BROWSER` | unset (set it to `1` to not open the browser on launch) | |
| 265 | 264 | ||
| 266 | -## Screenshots and website | 265 | +## Website and images |
| 267 | 266 | ||
| 268 | -The screenshots in `media/screenshots/` are taken from a running app, with your own projects (edit the | 267 | +The screens shown on the website are mockups: the app's screens redrawn in HTML and CSS |
| 269 | -ids in `web/scripts/screenshots.mjs`): | 268 | +(`site/public/index.html`), in English, on a made-up project, and animated. The images in |
| 269 | +`media/screenshots/` (this README, and the share image of the website) are captured from these mockups: | ||
| 270 | 270 | ||
| 271 | ```powershell | 271 | ```powershell |
| 272 | cd web; pnpm screenshots | 272 | cd web; pnpm screenshots |
| @@ -274,7 +274,7 @@ cd web; pnpm screenshots | |||
| 274 | 274 | ||
| 275 | The website lives in `site/`. `node site/serve.mjs` serves it on http://localhost:4477 while you work on it | 275 | The website lives in `site/`. `node site/serve.mjs` serves it on http://localhost:4477 while you work on it |
| 276 | (reload the page after an edit); `node site/build.mjs` builds it into `site/dist/`. It is deployed to | 276 | (reload the page after an edit); `node site/build.mjs` builds it into `site/dist/`. It is deployed to |
| 277 | -Bunny CDN by `.rickub/workflows/deploy-site.yml` when `site/`, the screenshots or the logo change. | 277 | +Bunny CDN by `.rickub/workflows/deploy-site.yml` when `site/`, the images or the logo change. |
| 278 | 278 | ||
| 279 | ## Contributing | 279 | ## Contributing |
| 280 | 280 | ||
deleted
media/screenshots/angle.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/angle.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/angle.png and /dev/null differ | Binary files a/media/screenshots/angle.png and /dev/null differ | ||
deleted
media/screenshots/derush.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/derush.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/derush.png and /dev/null differ | Binary files a/media/screenshots/derush.png and /dev/null differ | ||
deleted
media/screenshots/details.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/details.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/details.png and /dev/null differ | Binary files a/media/screenshots/details.png and /dev/null differ | ||
modified
media/screenshots/editing.png +0 -0 | Binary files a/media/screenshots/editing.png and b/media/screenshots/editing.png differ |
| Binary files a/media/screenshots/editing.png and b/media/screenshots/editing.png differ | Binary files a/media/screenshots/editing.png and b/media/screenshots/editing.png differ |
added
media/screenshots/og.png +0 -0 | new file mode 100644 | ||
| Binary files /dev/null and b/media/screenshots/og.png differ | ||
| new file mode 100644 | |||
| Binary files /dev/null and b/media/screenshots/og.png differ | Binary files /dev/null and b/media/screenshots/og.png differ | ||
deleted
media/screenshots/overview.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/overview.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/overview.png and /dev/null differ | Binary files a/media/screenshots/overview.png and /dev/null differ | ||
deleted
media/screenshots/projects.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/projects.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/projects.png and /dev/null differ | Binary files a/media/screenshots/projects.png and /dev/null differ | ||
deleted
media/screenshots/script.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/script.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/script.png and /dev/null differ | Binary files a/media/screenshots/script.png and /dev/null differ | ||
modified
media/screenshots/storyboard.png +0 -0 | Binary files a/media/screenshots/storyboard.png and b/media/screenshots/storyboard.png differ |
| Binary files a/media/screenshots/storyboard.png and b/media/screenshots/storyboard.png differ | Binary files a/media/screenshots/storyboard.png and b/media/screenshots/storyboard.png differ |
deleted
media/screenshots/thumbnail.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/thumbnail.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/thumbnail.png and /dev/null differ | Binary files a/media/screenshots/thumbnail.png and /dev/null differ | ||
deleted
media/screenshots/titles.png +0 -0 | deleted file mode 100644 | ||
| Binary files a/media/screenshots/titles.png and /dev/null differ | ||
| deleted file mode 100644 | |||
| Binary files a/media/screenshots/titles.png and /dev/null differ | Binary files a/media/screenshots/titles.png and /dev/null differ | ||
modified
site/build.mjs +2 -2 | @@ -1,5 +1,5 @@ | ||
| 1 | -// Builds the website into site/dist: the static files of site/public, plus the screenshots and the logo, | |
| 2 | -// taken from the repository so they have a single source. | |
| 1 | +// Builds the website into site/dist: the static files of site/public, plus the share image (media/screenshots) | |
| 2 | +// and the logo, taken from the repository so they have a single source. | |
| 3 | 3 | // No dependencies: `node site/build.mjs`, then open site/dist/index.html or serve the folder. |
| 4 | 4 | import { cpSync, rmSync } from 'node:fs' |
| 5 | 5 | import { fileURLToPath } from 'node:url' |
| @@ -1,5 +1,5 @@ | |||
| 1 | -// Builds the website into site/dist: the static files of site/public, plus the screenshots and the logo, | 1 | +// Builds the website into site/dist: the static files of site/public, plus the share image (media/screenshots) |
| 2 | -// taken from the repository so they have a single source. | 2 | +// and the logo, taken from the repository so they have a single source. |
| 3 | // No dependencies: `node site/build.mjs`, then open site/dist/index.html or serve the folder. | 3 | // No dependencies: `node site/build.mjs`, then open site/dist/index.html or serve the folder. |
| 4 | import { cpSync, rmSync } from 'node:fs' | 4 | import { cpSync, rmSync } from 'node:fs' |
| 5 | import { fileURLToPath } from 'node:url' | 5 | import { fileURLToPath } from 'node:url' |
modified
site/public/index.html +358 -57 | @@ -3,16 +3,16 @@ | ||
| 3 | 3 | <head> |
| 4 | 4 | <meta charset="utf-8"> |
| 5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | - <title>Daryl: a local studio for YouTube videos, from the idea to the upload</title> | |
| 7 | - <meta name="description" content="Angle, titles, thumbnails, script, rough cut, motion design, editing, shorts and upload in one app that runs on your machine, with Claude Code as a co-author. Free and open source."> | |
| 6 | + <title>Daryl: help at every step of your YouTube videos</title> | |
| 7 | + <meta name="description" content="Find your angle and your best title, get a first draft of the script, skip the rough cut, edit by asking and publish without forgetting anything. Free and open source."> | |
| 8 | 8 | <link rel="canonical" href="https://daryl.eventuallymaking.io/"> |
| 9 | 9 | <meta name="theme-color" content="#FAFAF8"> |
| 10 | 10 | |
| 11 | 11 | <meta property="og:type" content="website"> |
| 12 | 12 | <meta property="og:url" content="https://daryl.eventuallymaking.io/"> |
| 13 | - <meta property="og:title" content="Daryl: a local studio for YouTube videos"> | |
| 14 | - <meta property="og:description" content="From the idea to the upload, in one app that runs on your machine, with Claude Code as a co-author. Free and open source."> | |
| 15 | - <meta property="og:image" content="https://daryl.eventuallymaking.io/screenshots/editing.png"> | |
| 13 | + <meta property="og:title" content="Daryl: help at every step of your YouTube videos"> | |
| 14 | + <meta property="og:description" content="From the idea to the upload: find the angle and the title, write the script, cut, edit and publish. Free and open source."> | |
| 15 | + <meta property="og:image" content="https://daryl.eventuallymaking.io/screenshots/og.png"> | |
| 16 | 16 | <meta name="twitter:card" content="summary_large_image"> |
| 17 | 17 | |
| 18 | 18 | <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
| @@ -41,10 +41,10 @@ | ||
| 41 | 41 | <main id="main"> |
| 42 | 42 | <section class="hero"> |
| 43 | 43 | <div class="hero-copy"> |
| 44 | - <h1>Your YouTube video, from the idea to the upload.</h1> | |
| 44 | + <h1>Help at every step of your YouTube videos.</h1> | |
| 45 | 45 | <p class="lead"> |
| 46 | - Daryl is a studio that runs on your machine. It takes a video through every step, with Claude Code | |
| 47 | - as a co-author and editing assistant. Daryl proposes, you decide. | |
| 46 | + Find the angle and the title, write the script, cut the footage, edit and publish. | |
| 47 | + Daryl takes the tedious part, you keep the fun one. | |
| 48 | 48 | </p> |
| 49 | 49 | <div class="actions"> |
| 50 | 50 | <a class="btn btn-red" href="#try">Try it</a> |
| @@ -52,7 +52,7 @@ | ||
| 52 | 52 | </div> |
| 53 | 53 | <p class="perk"> |
| 54 | 54 | <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg> |
| 55 | - Free and open source, nothing to buy | |
| 55 | + Free and open source | |
| 56 | 56 | </p> |
| 57 | 57 | </div> |
| 58 | 58 | </section> |
| @@ -104,88 +104,395 @@ | ||
| 104 | 104 | </div> |
| 105 | 105 | </div> |
| 106 | 106 | </div> |
| 107 | - <figcaption id="reel-caption">Every step of a video, one project folder on your disk.</figcaption> | |
| 107 | + <figcaption id="reel-caption">From the idea to the upload, without switching tools.</figcaption> | |
| 108 | 108 | </figure> |
| 109 | 109 | |
| 110 | 110 | <section class="tour" id="tour" aria-labelledby="tour-title"> |
| 111 | 111 | <h2 class="sr-only" id="tour-title">A tour of Daryl</h2> |
| 112 | 112 | <div class="tour-tabs" role="tablist" aria-label="Screens" aria-orientation="vertical"> |
| 113 | 113 | <button role="tab" id="tab-projects" aria-controls="shot-projects" aria-selected="true"> |
| 114 | - <span class="tab-title">Every video, every step</span> | |
| 115 | - <span class="tab-desc">Each project keeps its brief, script, footage, edit and renders together, and shows where you left off.</span> | |
| 114 | + <span class="tab-title">Know where each video stands</span> | |
| 115 | + <span class="tab-desc">Pick up any video where you left off, with its script, footage and edit in the same place.</span> | |
| 116 | 116 | </button> |
| 117 | 117 | <button role="tab" id="tab-angle" aria-controls="shot-angle" aria-selected="false" tabindex="-1"> |
| 118 | - <span class="tab-title">Find the angle</span> | |
| 119 | - <span class="tab-desc">Daryl researches the topic from your brief and notes, then suggests angles to keep or rework.</span> | |
| 118 | + <span class="tab-title">Turn an idea into an angle</span> | |
| 119 | + <span class="tab-desc">Start from a vague idea and a few links. Get the research done and angles worth a video.</span> | |
| 120 | 120 | </button> |
| 121 | 121 | <button role="tab" id="tab-titles" aria-controls="shot-titles" aria-selected="false" tabindex="-1"> |
| 122 | - <span class="tab-title">Thirty titles, keep the best</span> | |
| 123 | - <span class="tab-desc">Daryl writes 30 titles from the angle. Keep two or three for the A/B test.</span> | |
| 122 | + <span class="tab-title">Find your best title</span> | |
| 123 | + <span class="tab-desc">Compare scored titles side by side and A/B test the ones you like.</span> | |
| 124 | 124 | </button> |
| 125 | 125 | <button role="tab" id="tab-thumbnail" aria-controls="shot-thumbnail" aria-selected="false" tabindex="-1"> |
| 126 | - <span class="tab-title">A thumbnail per title</span> | |
| 127 | - <span class="tab-desc">Generate variants from your own photos and references, or import the ones you made elsewhere.</span> | |
| 126 | + <span class="tab-title">Thumbnail generator</span> | |
| 127 | + <span class="tab-desc">Get thumbnails made from your own photos, one for each title you test.</span> | |
| 128 | 128 | </button> |
| 129 | 129 | <button role="tab" id="tab-script" aria-controls="shot-script" aria-selected="false" tabindex="-1"> |
| 130 | - <span class="tab-title">Write the script</span> | |
| 131 | - <span class="tab-desc">Write it yourself or start from Daryl's draft, with versions, an outline and an assistant on the side.</span> | |
| 130 | + <span class="tab-title">Never start from a blank page</span> | |
| 131 | + <span class="tab-desc">Start from a first draft, make it yours, and get it roasted before you shoot.</span> | |
| 132 | 132 | </button> |
| 133 | 133 | <button role="tab" id="tab-derush" aria-controls="shot-derush" aria-selected="false" tabindex="-1"> |
| 134 | - <span class="tab-title">Rough cut in one pass</span> | |
| 135 | - <span class="tab-desc">Your footage is transcribed, then silences and bad takes are cut. Check every cut before you apply it.</span> | |
| 134 | + <span class="tab-title">Skip the rough cut</span> | |
| 135 | + <span class="tab-desc">Silences and bad takes are cut for you. You only review.</span> | |
| 136 | 136 | </button> |
| 137 | 137 | <button role="tab" id="tab-storyboard" aria-controls="shot-storyboard" aria-selected="false" tabindex="-1"> |
| 138 | - <span class="tab-title">Plan the motion design</span> | |
| 139 | - <span class="tab-desc">Daryl reads what you say and places a motion beat on the right words. Review each one.</span> | |
| 138 | + <span class="tab-title">Animations on the right words</span> | |
| 139 | + <span class="tab-desc">Daryl listens to your video and plans the motion design where it helps the point land.</span> | |
| 140 | 140 | </button> |
| 141 | 141 | <button role="tab" id="tab-editing" aria-controls="shot-editing" aria-selected="false" tabindex="-1"> |
| 142 | - <span class="tab-title">Edit with Daryl</span> | |
| 143 | - <span class="tab-desc">Zooms, B-roll, motion design, sound and music on a real timeline. Ask Daryl or do it by hand, then export to DaVinci Resolve.</span> | |
| 142 | + <span class="tab-title">Edit by asking</span> | |
| 143 | + <span class="tab-desc">Ask for a zoom, a B-roll, a sound or music, or do it by hand on a real timeline.</span> | |
| 144 | 144 | </button> |
| 145 | 145 | <button role="tab" id="tab-details" aria-controls="shot-details" aria-selected="false" tabindex="-1"> |
| 146 | - <span class="tab-title">Publish to YouTube</span> | |
| 147 | - <span class="tab-desc">Title, description, chapters and A/B variants, checked, then uploaded.</span> | |
| 146 | + <span class="tab-title">Publish without forgetting anything</span> | |
| 147 | + <span class="tab-desc">Description, chapters and A/B tests are written and checked before the upload.</span> | |
| 148 | 148 | </button> |
| 149 | 149 | </div> |
| 150 | 150 | <div class="tour-shots"> |
| 151 | - <div class="frame" id="shot-projects" role="tabpanel" aria-labelledby="tab-projects"><img src="screenshots/projects.png" width="2880" height="1800" alt="The projects page, with the last opened project and the progress of each video" fetchpriority="high"></div> | |
| 152 | - <div class="frame" id="shot-angle" role="tabpanel" aria-labelledby="tab-angle"><img src="screenshots/angle.png" width="2880" height="1800" alt="The Angle step: the brief, the suggested angles and Daryl's chat" loading="lazy"></div> | |
| 153 | - <div class="frame" id="shot-titles" role="tabpanel" aria-labelledby="tab-titles"><img src="screenshots/titles.png" width="2880" height="1800" alt="The Title step: the titles kept for the A/B test and Daryl's suggestions with their score" loading="lazy"></div> | |
| 154 | - <div class="frame" id="shot-thumbnail" role="tabpanel" aria-labelledby="tab-thumbnail"><img src="screenshots/thumbnail.png" width="2880" height="1800" alt="The Thumbnail step: three variants and the brief of a touch-up" loading="lazy"></div> | |
| 155 | - <div class="frame" id="shot-script" role="tabpanel" aria-labelledby="tab-script"><img src="screenshots/script.png" width="2880" height="1800" alt="The Script step: the script, its sections and its estimated length" loading="lazy"></div> | |
| 156 | - <div class="frame" id="shot-derush" role="tabpanel" aria-labelledby="tab-derush"><img src="screenshots/derush.png" width="2880" height="1800" alt="The Rough cut step: preview, transcript and the timeline with its cuts" loading="lazy"></div> | |
| 157 | - <div class="frame" id="shot-storyboard" role="tabpanel" aria-labelledby="tab-storyboard"><img src="screenshots/storyboard.png" width="2880" height="1800" alt="The Storyboard step: motion beats anchored on the transcript, with their place on screen" loading="lazy"></div> | |
| 158 | - <div class="frame" id="shot-editing" role="tabpanel" aria-labelledby="tab-editing"><img src="screenshots/editing.png" width="2880" height="1800" alt="The Editing step: preview, timeline with chapters, motion, zooms, B-roll and music, and Daryl's chat" loading="lazy"></div> | |
| 159 | - <div class="frame" id="shot-details" role="tabpanel" aria-labelledby="tab-details"><img src="screenshots/details.png" width="2880" height="1800" alt="The Details step: A/B variants, description and chapters" loading="lazy"></div> | |
| 151 | + <div class="frame" id="shot-projects" role="tabpanel" aria-labelledby="tab-projects"> | |
| 152 | + <div class="mock m-projects" role="img" aria-label="The projects page: the last opened video to resume, and every other video with its progress"> | |
| 153 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-path"><b>Home</b><i>·</i>New project<i>·</i>Library</span></div> | |
| 154 | + <div class="m-body"> | |
| 155 | + <div class="m-row"><span class="m-h">Projects</span><span class="m-btn red">+ New project</span></div> | |
| 156 | + <span class="m-eyebrow">Resume · last opened project</span> | |
| 157 | + <div class="m-resume" style="--i: 0"> | |
| 158 | + <div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i></div> | |
| 159 | + <div> | |
| 160 | + <h4>The 4-day week, one year later</h4> | |
| 161 | + <p>My company switched to a four-day week a year ago. What it did to pay, output and the people, with our own numbers and the UK trial.</p> | |
| 162 | + <div class="m-steps" style="--i: 0"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i class="w"></i><i></i><i></i><i></i><i></i><i></i></div> | |
| 163 | + <div class="m-row"><span class="m-btn dark">Continue · Editing →</span><span class="m-meta">9/15 steps · 24 GB · Nov 12</span></div> | |
| 164 | + </div> | |
| 165 | + </div> | |
| 166 | + <span class="m-eyebrow">Other projects</span> | |
| 167 | + <div class="m-grid"> | |
| 168 | + <div class="m-proj" style="--i: 1"><div class="m-thumb t-juniors"><b>Junior jobs?</b><i class="m-person"></i></div><strong>AI and junior developers</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i></div><span class="m-meta">15/15 steps · published</span></div> | |
| 169 | + <div class="m-proj" style="--i: 2"><div class="m-thumb t-salary"><b>+0%</b><i class="m-person"></i></div><strong>Why your salary stalls</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i></i><i></i><i></i></div><span class="m-meta">11/15 steps · Nov 9</span></div> | |
| 170 | + <div class="m-proj" style="--i: 3"><div class="m-thumb t-numbers"><b>Back to the office</b><i class="m-person"></i></div><strong>The end of remote work?</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i class="w"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><span class="m-meta">3/15 steps · Nov 4</span></div> | |
| 171 | + <div class="m-proj" style="--i: 4"><div class="m-thumb t-empty"></div><strong>Hiring freezes, explained</strong><div class="m-steps"><i class="w"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><span class="m-meta">0/15 steps · Oct 30</span></div> | |
| 172 | + </div> | |
| 173 | + </div> | |
| 174 | + </div> | |
| 175 | + </div> | |
| 176 | + <div class="frame" id="shot-angle" role="tabpanel" aria-labelledby="tab-angle"> | |
| 177 | + <div class="mock m-angle-step" role="img" aria-label="The Angle step: Daryl reads the sources of the brief, suggests three angles, and one is kept"> | |
| 178 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Angle</b></span></div> | |
| 179 | + <div class="m-body"> | |
| 180 | + <div class="m-col"> | |
| 181 | + <div class="m-brief"> | |
| 182 | + <span class="m-eyebrow">Project brief</span> | |
| 183 | + <dl><dt>Starting idea</dt><dd>My company tried the 4-day week for a year. Was it worth it?</dd></dl> | |
| 184 | + <dl><dt>Target length</dt><dd>10–15 min</dd></dl> | |
| 185 | + </div> | |
| 186 | + <span class="m-eyebrow">Angles · 3</span> | |
| 187 | + <div class="m-angles"> | |
| 188 | + <div class="m-angle-card kept" style="--i: 0"><i>A</i><strong>We did the 4-day week for a year. Here's the bill.</strong><p>Our own numbers, month by month: output, sick days, hiring, and what it cost.</p><span class="m-btn m-swap"><span>Keep</span><span>✓ Kept</span></span></div> | |
| 189 | + <div class="m-angle-card" style="--i: 1"><i>B</i><strong>The 4-day week works. Just not for every job.</strong><p>Where the UK and Iceland trials worked, and the jobs where it fell apart.</p><span class="m-btn">Keep</span></div> | |
| 190 | + <div class="m-angle-card" style="--i: 2"><i>C</i><strong>Why your boss will still say no</strong><p>The objections managers raise, and the ones that actually hold up.</p><span class="m-btn">Keep</span></div> | |
| 191 | + </div> | |
| 192 | + </div> | |
| 193 | + <div class="m-panel"> | |
| 194 | + <div class="m-panel-head">Daryl</div> | |
| 195 | + <div class="m-msg daryl">Reading your brief and the sources you linked…</div> | |
| 196 | + <ul class="m-sources"> | |
| 197 | + <li style="--i: 0">UK four-day week pilot, final report</li> | |
| 198 | + <li style="--i: 1">Iceland working-time trials, 2015–2019</li> | |
| 199 | + <li style="--i: 2">Microsoft Japan, Work-Life Choice Challenge</li> | |
| 200 | + <li style="--i: 3">Your HR exports: hours, sick days, hires</li> | |
| 201 | + <li style="--i: 4">Six interview notes</li> | |
| 202 | + </ul> | |
| 203 | + <div class="m-msg daryl">Three angles. I'd keep A: your own numbers are something no other video has.</div> | |
| 204 | + <span class="m-meta">14 sources read · 3 angles</span> | |
| 205 | + </div> | |
| 206 | + </div> | |
| 207 | + </div> | |
| 208 | + </div> | |
| 209 | + <div class="frame" id="shot-titles" role="tabpanel" aria-labelledby="tab-titles"> | |
| 210 | + <div class="mock m-titles" role="img" aria-label="The Title step: Daryl's scored suggestions, and the two best ones kept for the A/B test"> | |
| 211 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Title</b></span></div> | |
| 212 | + <div class="m-body"> | |
| 213 | + <p class="m-angle"><span class="m-eyebrow">Kept angle</span>A year of 4-day weeks: what happened to pay and output</p> | |
| 214 | + <div class="m-ab"> | |
| 215 | + <span class="m-eyebrow">Kept for the A/B test · 2/3</span> | |
| 216 | + <div class="m-slot fill" style="--at: 2300ms"><i>A</i><b>61 companies tried the 4-day week. 56 kept it.</b><span class="m-score hi">82</span></div> | |
| 217 | + <div class="m-slot fill" style="--at: 3000ms"><i>B</i><b>4 days, same salary: the numbers after a year</b><span class="m-score hi">74</span></div> | |
| 218 | + <div class="m-slot empty"><i>C</i><span>Keep a title below, or add your own.</span></div> | |
| 219 | + </div> | |
| 220 | + <div class="m-list-wrap"> | |
| 221 | + <span class="m-eyebrow">Daryl's suggestions</span> | |
| 222 | + <ol class="m-list"> | |
| 223 | + <li style="--i: 0"><span>The 4-day week, one year later</span><span class="m-score">58</span><span class="m-add">+</span></li> | |
| 224 | + <li style="--i: 1"><span>Why the 4-day week works (and where it doesn't)</span><span class="m-score hi">71</span><span class="m-add">+</span></li> | |
| 225 | + <li style="--i: 2; --at: 2300ms" class="kept"><span>61 companies tried the 4-day week. 56 kept it.</span><span class="m-score hi">82</span><span class="m-add">✓</span></li> | |
| 226 | + <li style="--i: 3"><span>Is the 4-day week only for tech jobs?</span><span class="m-score">63</span><span class="m-add">+</span></li> | |
| 227 | + <li style="--i: 4; --at: 3000ms" class="kept"><span>4 days, same salary: the numbers after a year</span><span class="m-score hi">74</span><span class="m-add">✓</span></li> | |
| 228 | + <li style="--i: 5"><span>The hidden cost of the 4-day week</span><span class="m-score">66</span><span class="m-add">+</span></li> | |
| 229 | + <li style="--i: 6"><span>Your boss is wrong about the 4-day week</span><span class="m-score">54</span><span class="m-add">+</span></li> | |
| 230 | + </ol> | |
| 231 | + </div> | |
| 232 | + </div> | |
| 233 | + </div> | |
| 234 | + </div> | |
| 235 | + <div class="frame" id="shot-thumbnail" role="tabpanel" aria-labelledby="tab-thumbnail"> | |
| 236 | + <div class="mock m-thumbs" role="img" aria-label="The Thumbnail step: a new variant is generated from a short brief and joins the two kept for the A/B test"> | |
| 237 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Thumbnail</b></span></div> | |
| 238 | + <div class="m-body"> | |
| 239 | + <p class="m-angle"><span class="m-eyebrow">Kept angle</span>We did the 4-day week for a year. Here's the bill.</p> | |
| 240 | + <div> | |
| 241 | + <span class="m-eyebrow">Kept for the A/B test · 3/3</span> | |
| 242 | + <div class="m-slots"> | |
| 243 | + <div class="m-vslot"><div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i><span class="m-tag">A</span></div><span class="m-select">61 companies tried the 4-day week…</span></div> | |
| 244 | + <div class="m-vslot"><div class="m-thumb t-numbers"><b>56 of 61 kept it</b><i class="m-person"></i><span class="m-tag">B</span></div><span class="m-select">4 days, same salary: the numbers…</span></div> | |
| 245 | + <div class="m-vslot"><div class="m-hole"><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag">C</span></div></div><span class="m-select">We did the 4-day week for a year…</span></div> | |
| 246 | + </div> | |
| 247 | + </div> | |
| 248 | + <div class="m-variant"> | |
| 249 | + <div> | |
| 250 | + <span class="m-eyebrow">Variant v3 · brief</span> | |
| 251 | + <div class="m-field"><label>What the thumbnail shows</label><div>Me at my desk, next to a calendar where Friday is crossed out</div></div> | |
| 252 | + <div class="m-field"><label>Text in the image</label><div>FRIDAYS, crossed out</div></div> | |
| 253 | + </div> | |
| 254 | + <div> | |
| 255 | + <span class="m-eyebrow">Results · 1</span> | |
| 256 | + <div class="m-gen"><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag r">★ Chosen</span></div></div> | |
| 257 | + </div> | |
| 258 | + </div> | |
| 259 | + </div> | |
| 260 | + </div> | |
| 261 | + </div> | |
| 262 | + <div class="frame" id="shot-script" role="tabpanel" aria-labelledby="tab-script"> | |
| 263 | + <div class="mock m-script" role="img" aria-label="The Script step: a first draft written from the angle, then a roast with a score, an estimated retention and what to fix"> | |
| 264 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Script</b></span></div> | |
| 265 | + <div class="m-body"> | |
| 266 | + <div class="m-outline"> | |
| 267 | + <span class="m-eyebrow">Outline</span> | |
| 268 | + <ol> | |
| 269 | + <li class="on">Hook <span>120</span></li> | |
| 270 | + <li>The trial <span>340</span></li> | |
| 271 | + <li>The numbers <span>610</span></li> | |
| 272 | + <li>What broke <span>480</span></li> | |
| 273 | + <li>Verdict <span>210</span></li> | |
| 274 | + </ol> | |
| 275 | + <span class="m-meta">1,760 words · ~12 min</span> | |
| 276 | + </div> | |
| 277 | + <div class="m-doc"> | |
| 278 | + <span class="m-eyebrow">Draft v2 · written from the angle</span> | |
| 279 | + <h5>HOOK</h5> | |
| 280 | + <p style="--i: 0">A year ago, my company switched to a four-day week. Same salary, same goals, one day less.</p> | |
| 281 | + <p class="visual" style="--i: 1">[VISUAL: a calendar, Friday slides out]</p> | |
| 282 | + <p style="--i: 2">Everyone asked me the same thing: did it work? Here are our numbers, month by month, and the one thing nobody saw coming.</p> | |
| 283 | + <h5>THE TRIAL</h5> | |
| 284 | + <p style="--i: 3">We were not the first. In 2022, 61 companies in the UK tried it for six months. 56 of them kept it.</p> | |
| 285 | + <p style="--i: 4">Same output, fewer sick days, and almost nobody wanted to go back. So why did ours nearly fall apart?</p> | |
| 286 | + </div> | |
| 287 | + <div class="m-roast"> | |
| 288 | + <span class="m-eyebrow" style="--i: 0">Roasting</span> | |
| 289 | + <div class="m-grade" style="--i: 1"><strong>7.5</strong><span>/10</span></div> | |
| 290 | + <p style="--i: 2">Strong hook. The middle drags.</p> | |
| 291 | + <div style="--i: 3"> | |
| 292 | + <span class="m-eyebrow">Estimated retention · 54 %</span> | |
| 293 | + <svg class="m-curve" viewBox="0 0 100 36" preserveAspectRatio="none" aria-hidden="true"><line x1="0" y1="35" x2="100" y2="35"/><path d="M0 3 C6 11, 12 14, 22 16 S38 18, 48 22 S62 23, 70 25 S88 26, 100 28"/></svg> | |
| 294 | + </div> | |
| 295 | + <ul class="m-remarks" style="--i: 4"> | |
| 296 | + <li>Say what broke in the hook, not at minute 9</li> | |
| 297 | + <li>Cut the second example in The numbers</li> | |
| 298 | + <li>End on the question, not on a summary</li> | |
| 299 | + </ul> | |
| 300 | + </div> | |
| 301 | + </div> | |
| 302 | + </div> | |
| 303 | + </div> | |
| 304 | + <div class="frame" id="shot-derush" role="tabpanel" aria-labelledby="tab-derush"> | |
| 305 | + <div class="mock m-cut" role="img" aria-label="The Rough cut step: bad takes and silences are struck from the transcript and removed from the timeline"> | |
| 306 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Rough cut</b></span></div> | |
| 307 | + <div class="m-body"> | |
| 308 | + <div class="m-transcript"> | |
| 309 | + <p class="m-file">A001_C004.MP4 · 00:12 → 01:48</p> | |
| 310 | + <p class="m-say" style="--i: 0"><time>00:00</time><span>A year ago, my company switched to a four-day week.</span></p> | |
| 311 | + <p class="m-say bad" style="--i: 1"><time></time><span>Same salary, same… hmm, no, let me start that again.</span><em>Bad take</em></p> | |
| 312 | + <p class="m-say" style="--i: 2"><time>00:04</time><span>Same salary, same goals, one day less.</span></p> | |
| 313 | + <p class="m-say gap" style="--i: 3"><time></time><span>2.6 s of silence</span><em>Silence</em></p> | |
| 314 | + <p class="m-say" style="--i: 4"><time>00:07</time><span>So I asked the people who lived it what actually changed.</span></p> | |
| 315 | + <p class="m-say bad" style="--i: 5"><time></time><span>And the first thing they… sorry, the first thing they said</span><em>Bad take</em></p> | |
| 316 | + <p class="m-say" style="--i: 6"><time>00:12</time><span>The first thing they told me was not about Fridays.</span></p> | |
| 317 | + <p class="m-say gap" style="--i: 7"><time></time><span>1.9 s of silence</span><em>Silence</em></p> | |
| 318 | + <p class="m-say" style="--i: 8"><time>00:15</time><span>It was about Mondays, and the meetings that piled up on them.</span></p> | |
| 319 | + </div> | |
| 320 | + <div class="m-tools"> | |
| 321 | + <span class="m-btn dark">Select</span><span class="m-btn">Blade</span> | |
| 322 | + <span class="m-btn b1">Remove 6 bad takes</span><span class="m-btn b2">Remove 14 silences · 38 s</span> | |
| 323 | + <span class="m-stat">42:10 of footage → <b>14:32</b> kept</span> | |
| 324 | + </div> | |
| 325 | + <div class="m-tl"> | |
| 326 | + <div class="m-tl-names"><span>V1</span><span>A1</span></div> | |
| 327 | + <div class="m-track"> | |
| 328 | + <span class="m-seg" style="--g: 3"></span><span class="m-seg gap x" style="--g: .6"></span><span class="m-seg" style="--g: 2"></span><span class="m-seg bad x" style="--g: 2.2"></span> | |
| 329 | + <span class="m-seg" style="--g: 4"></span><span class="m-seg gap x" style="--g: .8"></span><span class="m-seg" style="--g: 1.5"></span><span class="m-seg" style="--g: 2.5"></span> | |
| 330 | + <span class="m-seg gap x" style="--g: .5"></span><span class="m-seg" style="--g: 3"></span><span class="m-seg bad x" style="--g: 1.8"></span><span class="m-seg" style="--g: 2"></span> | |
| 331 | + <span class="m-seg gap x" style="--g: .7"></span><span class="m-seg" style="--g: 3.5"></span><span class="m-seg bad x" style="--g: 1.4"></span><span class="m-seg" style="--g: 1"></span> | |
| 332 | + <span class="m-seg gap x" style="--g: .9"></span><span class="m-seg" style="--g: 2.5"></span><span class="m-seg bad x" style="--g: 2.6"></span><span class="m-seg" style="--g: 3"></span> | |
| 333 | + <span class="m-seg gap x" style="--g: .5"></span><span class="m-seg" style="--g: 2"></span><span class="m-seg" style="--g: 1.5"></span><span class="m-seg gap x" style="--g: .8"></span> | |
| 334 | + <span class="m-seg" style="--g: 3"></span><span class="m-seg bad x" style="--g: 1.6"></span><span class="m-seg" style="--g: 2.5"></span><span class="m-seg gap x" style="--g: .6"></span> | |
| 335 | + <span class="m-seg bad x" style="--g: 1.2"></span><span class="m-seg" style="--g: 3"></span> | |
| 336 | + <span class="m-head"></span> | |
| 337 | + </div> | |
| 338 | + </div> | |
| 339 | + </div> | |
| 340 | + </div> | |
| 341 | + </div> | |
| 342 | + <div class="frame" id="shot-storyboard" role="tabpanel" aria-labelledby="tab-storyboard"> | |
| 343 | + <div class="mock m-story" role="img" aria-label="The Storyboard step: Daryl places motion design beats on the words they illustrate, each with its place on screen"> | |
| 344 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Storyboard</b></span></div> | |
| 345 | + <div class="m-body"> | |
| 346 | + <div class="m-row"><strong>18 beats</strong><span class="m-meta">one every 45 s</span><span class="m-chip" style="--c: var(--motion)">Motion <b>12</b></span><span class="m-chip" style="--c: var(--zoom)">Zoom <b>4</b></span><span class="m-chip" style="--c: var(--broll)">B-roll <b>2</b></span></div> | |
| 347 | + <div class="m-strip"> | |
| 348 | + <i style="--x: 3%; --i: 0"></i><i style="--x: 7%; --i: 1"></i><i style="--x: 11%; --i: 2; --c: var(--zoom)"></i><i style="--x: 15%; --i: 3"></i><i class="on" style="--x: 21%; --i: 4"></i><i style="--x: 25%; --i: 5"></i> | |
| 349 | + <i class="on" style="--x: 29%; --i: 6"></i><i style="--x: 34%; --i: 7; --c: var(--zoom)"></i><i style="--x: 40%; --i: 8; --c: var(--broll); --w: 2.4%"></i><i style="--x: 46%; --i: 9"></i><i style="--x: 51%; --i: 10"></i><i style="--x: 56%; --i: 11; --c: var(--zoom)"></i> | |
| 350 | + <i style="--x: 61%; --i: 12"></i><i style="--x: 67%; --i: 13"></i><i style="--x: 72%; --i: 14; --c: var(--broll); --w: 2.4%"></i><i style="--x: 79%; --i: 15; --c: var(--zoom)"></i><i style="--x: 86%; --i: 16"></i><i style="--x: 93%; --i: 17"></i> | |
| 351 | + </div> | |
| 352 | + <div class="m-beats"> | |
| 353 | + <div class="m-beat" style="--i: 0"> | |
| 354 | + <div class="m-beat-meta"><strong>04:12.5</strong><span class="m-meta">6.2 s</span><span class="m-chip" style="--c: var(--motion)">Motion</span></div> | |
| 355 | + <div> | |
| 356 | + <span class="m-eyebrow">You say</span> | |
| 357 | + <q>Same salary, same goals, <mark>one day less</mark>.</q> | |
| 358 | + <span class="m-eyebrow">We show</span> | |
| 359 | + <p>A week calendar: Friday slides out and the four days stretch to fill the week.</p> | |
| 360 | + </div> | |
| 361 | + <div><span class="m-eyebrow">Screen position · <b>Right</b></span><div class="m-pos"><i class="band"></i><i></i><i></i><i class="on"></i><i class="band"></i></div></div> | |
| 362 | + </div> | |
| 363 | + <div class="m-beat" style="--i: 1"> | |
| 364 | + <div class="m-beat-meta"><strong>05:40.1</strong><span class="m-meta">4.8 s</span><span class="m-chip" style="--c: var(--motion)">Motion</span></div> | |
| 365 | + <div> | |
| 366 | + <span class="m-eyebrow">You say</span> | |
| 367 | + <q><mark>61 companies</mark> tried it, and <mark>56 kept it</mark>.</q> | |
| 368 | + <span class="m-eyebrow">We show</span> | |
| 369 | + <p>Two counters tick up side by side in the lower band, 61 then 56.</p> | |
| 370 | + </div> | |
| 371 | + <div><span class="m-eyebrow">Screen position · <b>Bottom</b></span><div class="m-pos"><i class="band"></i><i></i><i></i><i></i><i class="band on"></i></div></div> | |
| 372 | + </div> | |
| 373 | + <div class="m-beat" style="--i: 2"> | |
| 374 | + <div class="m-beat-meta"><strong>09:31.0</strong><span class="m-meta">1.4 s</span><span class="m-chip" style="--c: var(--zoom)">Zoom</span></div> | |
| 375 | + <div> | |
| 376 | + <span class="m-eyebrow">You say</span> | |
| 377 | + <q>And then, in March, <mark>it nearly fell apart</mark>.</q> | |
| 378 | + <span class="m-eyebrow">We show</span> | |
| 379 | + <p>A strong punch-in on your face, held for the whole line.</p> | |
| 380 | + </div> | |
| 381 | + <div><span class="m-eyebrow">Screen position · <b>Center</b></span><div class="m-pos"><i class="band"></i><i></i><i class="on z"></i><i></i><i class="band"></i></div></div> | |
| 382 | + </div> | |
| 383 | + </div> | |
| 384 | + </div> | |
| 385 | + </div> | |
| 386 | + </div> | |
| 387 | + <div class="frame" id="shot-editing" role="tabpanel" aria-labelledby="tab-editing"> | |
| 388 | + <div class="mock m-edit" role="img" aria-label="The Editing step: asked for a title card with a whoosh, Daryl adds both to the timeline and the preview shows the card"> | |
| 389 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Editing</b></span></div> | |
| 390 | + <div class="m-body"> | |
| 391 | + <div class="m-preview"> | |
| 392 | + <div class="m-shot"> | |
| 393 | + <div class="m-card"><small>The deal</small><strong>4 days. <u>Same salary.</u></strong></div> | |
| 394 | + </div> | |
| 395 | + <div class="m-controls"><span class="m-btn">−1 s</span><span class="m-btn dark">▶</span><span class="m-btn">+1 s</span><span>08:04.2 / 19:40</span></div> | |
| 396 | + </div> | |
| 397 | + <div class="m-chat"> | |
| 398 | + <div class="m-chat-head">Daryl</div> | |
| 399 | + <div class="m-msg me">Put a title card on “same salary”, with a whoosh</div> | |
| 400 | + <div class="m-reply"> | |
| 401 | + <div class="m-typing"><i></i><i></i><i></i></div> | |
| 402 | + <div class="m-msg daryl">Done: a title card at 08:04, and a whoosh on the way in.<small>2 actions · timeline edited</small></div> | |
| 403 | + </div> | |
| 404 | + <div class="m-input">Ask Daryl…</div> | |
| 405 | + </div> | |
| 406 | + <div class="m-lanes"> | |
| 407 | + <span>Chapters</span> | |
| 408 | + <ul class="ch"><li style="--a: 0; --b: 2.5">Intro</li><li style="--a: 2.5; --b: 4">The trial</li><li style="--a: 6.5; --b: 4.5">The numbers</li><li style="--a: 11; --b: 4.5">What broke</li><li style="--a: 15.5; --b: 4.5">Verdict</li></ul> | |
| 409 | + <span>Motion</span> | |
| 410 | + <ul style="--c: var(--motion)"><li style="--a: 1; --b: 1"></li><li style="--a: 3.2; --b: .8"></li><li style="--a: 5.5; --b: .7"></li><li class="new" style="--a: 8.2; --b: 1.4">Title card</li><li style="--a: 10.4; --b: .8"></li><li style="--a: 12.5; --b: 1"></li><li style="--a: 14.2; --b: .7"></li><li style="--a: 16.8; --b: 1"></li><li style="--a: 18.5; --b: .8"></li></ul> | |
| 411 | + <span>Zooms</span> | |
| 412 | + <ul class="zm" style="--c: var(--zoom)"><li style="--a: .6; --b: .3"></li><li style="--a: 2.8; --b: .3"></li><li style="--a: 4.6; --b: .3"></li><li style="--a: 7.1; --b: .3"></li><li style="--a: 9.9; --b: .3"></li><li style="--a: 11.6; --b: .3"></li><li style="--a: 13.9; --b: .3"></li><li style="--a: 16; --b: .3"></li><li style="--a: 17.9; --b: .3"></li><li style="--a: 19.5; --b: .3"></li></ul> | |
| 413 | + <span>B-roll</span> | |
| 414 | + <ul style="--c: var(--broll)"><li style="--a: 2; --b: 1">office</li><li style="--a: 6.5; --b: 1.1">survey</li><li style="--a: 11; --b: 1.6">timesheet</li><li style="--a: 15; --b: 1">team</li></ul> | |
| 415 | + <span>Video</span> | |
| 416 | + <ul class="vid"><li style="--a: 0; --b: 4.9"></li><li style="--a: 4.9; --b: 4.5"></li><li style="--a: 9.4; --b: 4.6"></li><li style="--a: 14; --b: 6"></li></ul> | |
| 417 | + <span>Voice</span> | |
| 418 | + <ul class="voice"><li style="--a: 0; --b: 20"></li></ul> | |
| 419 | + <span>Sound</span> | |
| 420 | + <ul style="--c: #E2683C"><li style="--a: 1; --b: .25"></li><li style="--a: 3.2; --b: .25"></li><li class="new" style="--a: 8.05; --b: .4"></li><li style="--a: 12.5; --b: .25"></li><li style="--a: 16.8; --b: .25"></li></ul> | |
| 421 | + <span>Music</span> | |
| 422 | + <ul style="--c: var(--music)"><li style="--a: 0; --b: 6.4">lofi-01</li><li style="--a: 6.5; --b: 7.9">lofi-02</li><li style="--a: 14.5; --b: 5.5">lofi-03</li></ul> | |
| 423 | + <span class="m-head"></span> | |
| 424 | + </div> | |
| 425 | + </div> | |
| 426 | + </div> | |
| 427 | + </div> | |
| 428 | + <div class="frame" id="shot-details" role="tabpanel" aria-labelledby="tab-details"> | |
| 429 | + <div class="mock m-details" role="img" aria-label="The Details step: A/B variants, description and chapters; every check passes, then the video is uploaded to YouTube"> | |
| 430 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Publish<i>/</i><b>Details</b></span></div> | |
| 431 | + <div class="m-body"> | |
| 432 | + <div class="m-col"> | |
| 433 | + <div> | |
| 434 | + <span class="m-eyebrow">A/B test · 3 variants</span> | |
| 435 | + <ul class="m-variants"> | |
| 436 | + <li><div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i><span class="m-tag">A</span></div>61 companies tried the 4-day week. 56 kept it.</li> | |
| 437 | + <li><div class="m-thumb t-numbers"><b>56 of 61 kept it</b><i class="m-person"></i><span class="m-tag">B</span></div>4 days, same salary: the numbers after a year</li> | |
| 438 | + <li><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag">C</span></div>We did the 4-day week for a year. Here's the bill.</li> | |
| 439 | + </ul> | |
| 440 | + </div> | |
| 441 | + <div> | |
| 442 | + <span class="m-eyebrow">Description</span> | |
| 443 | + <div class="m-desc">A year ago, my company switched to a four-day week. Here is what it did to pay, output and hiring, with our own numbers and the UK trial. | |
| 444 | + <ol><li>00:00 Intro</li><li>01:05 The trial</li><li>04:12 The numbers</li><li>09:30 What broke</li><li>15:20 Verdict</li></ol> | |
| 445 | + </div> | |
| 446 | + </div> | |
| 447 | + </div> | |
| 448 | + <div class="m-panel"> | |
| 449 | + <div class="m-panel-head">Before the upload</div> | |
| 450 | + <ul class="m-checks"> | |
| 451 | + <li style="--i: 0">Video rendered · 19:40, 4K</li> | |
| 452 | + <li style="--i: 1">Titles under 70 characters</li> | |
| 453 | + <li style="--i: 2">Three thumbnails at 1280 × 720</li> | |
| 454 | + <li style="--i: 3">Chapters start at 00:00</li> | |
| 455 | + <li style="--i: 4">Description and tags</li> | |
| 456 | + <li style="--i: 5">Scheduled for Tuesday, 6 pm</li> | |
| 457 | + </ul> | |
| 458 | + <div class="m-upload"> | |
| 459 | + <span class="m-btn red">Upload to YouTube</span> | |
| 460 | + <div class="m-bar-track"><i></i></div> | |
| 461 | + <span class="m-done">Uploaded · goes live Tuesday, 6 pm</span> | |
| 462 | + </div> | |
| 463 | + </div> | |
| 464 | + </div> | |
| 465 | + </div> | |
| 466 | + </div> | |
| 160 | 467 | </div> |
| 161 | 468 | </section> |
| 162 | 469 | |
| 163 | 470 | <section class="how" id="how" aria-labelledby="how-title"> |
| 164 | - <h2 id="how-title">A studio on your machine, an assistant that asks first</h2> | |
| 471 | + <h2 id="how-title">Fits the way you already work</h2> | |
| 165 | 472 | <dl class="facts"> |
| 166 | 473 | <div> |
| 167 | - <dt>Your files stay with you</dt> | |
| 168 | - <dd>Projects, footage and renders live in a folder on your disk. Whisper, ffmpeg and the renderer run locally.</dd> | |
| 474 | + <dt>In your language</dt> | |
| 475 | + <dd>Daryl writes your titles, scripts and descriptions in the language of your channel.</dd> | |
| 169 | 476 | </div> |
| 170 | 477 | <div> |
| 171 | - <dt>Runs on your Claude Code plan</dt> | |
| 172 | - <dd>Daryl drives Claude Code with your subscription. No API key to set up, no second bill.</dd> | |
| 478 | + <dt>Your footage stays on your disk</dt> | |
| 479 | + <dd>Transcription and rendering run on your machine. Your rushes go nowhere until you publish.</dd> | |
| 173 | 480 | </div> |
| 174 | 481 | <div> |
| 175 | - <dt>Nothing changes without you</dt> | |
| 176 | - <dd>Cuts, titles, beats and edits are suggestions. They land in your project when you accept them.</dd> | |
| 482 | + <dt>Keep your editing software</dt> | |
| 483 | + <dd>Send the rough cut or the edit to DaVinci Resolve or Premiere and finish it there.</dd> | |
| 177 | 484 | </div> |
| 178 | 485 | </dl> |
| 179 | 486 | |
| 180 | 487 | <div class="skills"> |
| 181 | 488 | <div class="skills-copy"> |
| 182 | - <h3>Editing jobs for Claude Code</h3> | |
| 183 | - <p>Some jobs work better from a Claude Code session opened in the repository. Daryl ships them as skills.</p> | |
| 489 | + <h3>One command for the most tedious jobs</h3> | |
| 490 | + <p>Open your AI agent in the repository and type the command.</p> | |
| 184 | 491 | </div> |
| 185 | 492 | <ul class="skills-list"> |
| 186 | - <li><code>/music-bed</code><span>Scores the edit: one track per sequence, cut to cover it and ducked under the voice.</span></li> | |
| 187 | - <li><code>/replace-aroll-take</code><span>Swaps a stretch of A-roll for a re-recorded take and moves everything on top of it.</span></li> | |
| 188 | - <li><code>/snatch-cut</code><span>Proposes a burst of close-ups with snap zooms and punchy sounds, with a preview.</span></li> | |
| 493 | + <li><code>/music-bed</code><span>Music under the whole video, cut to length and ducked under your voice.</span></li> | |
| 494 | + <li><code>/replace-aroll-take</code><span>Re-filmed a passage? Drop it in, and the B-roll, zooms and sounds follow.</span></li> | |
| 495 | + <li><code>/snatch-cut</code><span>A burst of close-ups, snap zooms and punchy sounds to wake up a sequence.</span></li> | |
| 189 | 496 | </ul> |
| 190 | 497 | </div> |
| 191 | 498 | </section> |
| @@ -194,13 +501,8 @@ | ||
| 194 | 501 | <h2 id="honest-title">A personal tool, shared as is</h2> |
| 195 | 502 | <div class="honest-body"> |
| 196 | 503 | <p> |
| 197 | - I make every video of <a href="https://www.youtube.com/@eventuallycoding">my channel</a> with Daryl. | |
| 198 | - I share it because people asked to see it, not to sell anything: there is no course, no paid plan, | |
| 199 | - no waiting list. | |
| 200 | - </p> | |
| 201 | - <p> | |
| 202 | - It follows how I work and evolves in that direction. It is built for one person on Windows, and | |
| 203 | - maintained on a best-effort basis. Fork it, take what you need, or use it for ideas. | |
| 504 | + It follows how I work and evolves in that direction. It is maintained on a best-effort basis. | |
| 505 | + Fork it, take what you need, or use it for ideas. | |
| 204 | 506 | </p> |
| 205 | 507 | </div> |
| 206 | 508 | </section> |
| @@ -225,7 +527,6 @@ cd web; pnpm install; pnpm build; cd ..\backend | ||
| 225 | 527 | <p>Open source under the AGPL-3.0. Made by <a href="https://eventuallymaking.io">Hugo Lassiège</a>.</p> |
| 226 | 528 | <nav aria-label="Elsewhere"> |
| 227 | 529 | <a href="https://rickub.com/hlassiege/daryl">Source code</a> |
| 228 | - <a href="https://github.com/hlassiege/daryl">GitHub mirror</a> | |
| 229 | 530 | <a href="https://panoplie.eventuallymaking.io">panoplie</a> |
| 230 | 531 | </nav> |
| 231 | 532 | </footer> |
| @@ -3,16 +3,16 @@ | |||
| 3 | <head> | 3 | <head> |
| 4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | - <title>Daryl: a local studio for YouTube videos, from the idea to the upload</title> | 6 | + <title>Daryl: help at every step of your YouTube videos</title> |
| 7 | - <meta name="description" content="Angle, titles, thumbnails, script, rough cut, motion design, editing, shorts and upload in one app that runs on your machine, with Claude Code as a co-author. Free and open source."> | 7 | + <meta name="description" content="Find your angle and your best title, get a first draft of the script, skip the rough cut, edit by asking and publish without forgetting anything. Free and open source."> |
| 8 | <link rel="canonical" href="https://daryl.eventuallymaking.io/"> | 8 | <link rel="canonical" href="https://daryl.eventuallymaking.io/"> |
| 9 | <meta name="theme-color" content="#FAFAF8"> | 9 | <meta name="theme-color" content="#FAFAF8"> |
| 10 | 10 | ||
| 11 | <meta property="og:type" content="website"> | 11 | <meta property="og:type" content="website"> |
| 12 | <meta property="og:url" content="https://daryl.eventuallymaking.io/"> | 12 | <meta property="og:url" content="https://daryl.eventuallymaking.io/"> |
| 13 | - <meta property="og:title" content="Daryl: a local studio for YouTube videos"> | 13 | + <meta property="og:title" content="Daryl: help at every step of your YouTube videos"> |
| 14 | - <meta property="og:description" content="From the idea to the upload, in one app that runs on your machine, with Claude Code as a co-author. Free and open source."> | 14 | + <meta property="og:description" content="From the idea to the upload: find the angle and the title, write the script, cut, edit and publish. Free and open source."> |
| 15 | - <meta property="og:image" content="https://daryl.eventuallymaking.io/screenshots/editing.png"> | 15 | + <meta property="og:image" content="https://daryl.eventuallymaking.io/screenshots/og.png"> |
| 16 | <meta name="twitter:card" content="summary_large_image"> | 16 | <meta name="twitter:card" content="summary_large_image"> |
| 17 | 17 | ||
| 18 | <link rel="icon" type="image/svg+xml" href="favicon.svg"> | 18 | <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
| @@ -41,10 +41,10 @@ | |||
| 41 | <main id="main"> | 41 | <main id="main"> |
| 42 | <section class="hero"> | 42 | <section class="hero"> |
| 43 | <div class="hero-copy"> | 43 | <div class="hero-copy"> |
| 44 | - <h1>Your YouTube video, from the idea to the upload.</h1> | 44 | + <h1>Help at every step of your YouTube videos.</h1> |
| 45 | <p class="lead"> | 45 | <p class="lead"> |
| 46 | - Daryl is a studio that runs on your machine. It takes a video through every step, with Claude Code | 46 | + Find the angle and the title, write the script, cut the footage, edit and publish. |
| 47 | - as a co-author and editing assistant. Daryl proposes, you decide. | 47 | + Daryl takes the tedious part, you keep the fun one. |
| 48 | </p> | 48 | </p> |
| 49 | <div class="actions"> | 49 | <div class="actions"> |
| 50 | <a class="btn btn-red" href="#try">Try it</a> | 50 | <a class="btn btn-red" href="#try">Try it</a> |
| @@ -52,7 +52,7 @@ | |||
| 52 | </div> | 52 | </div> |
| 53 | <p class="perk"> | 53 | <p class="perk"> |
| 54 | <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg> | 54 | <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg> |
| 55 | - Free and open source, nothing to buy | 55 | + Free and open source |
| 56 | </p> | 56 | </p> |
| 57 | </div> | 57 | </div> |
| 58 | </section> | 58 | </section> |
| @@ -104,88 +104,395 @@ | |||
| 104 | </div> | 104 | </div> |
| 105 | </div> | 105 | </div> |
| 106 | </div> | 106 | </div> |
| 107 | - <figcaption id="reel-caption">Every step of a video, one project folder on your disk.</figcaption> | 107 | + <figcaption id="reel-caption">From the idea to the upload, without switching tools.</figcaption> |
| 108 | </figure> | 108 | </figure> |
| 109 | 109 | ||
| 110 | <section class="tour" id="tour" aria-labelledby="tour-title"> | 110 | <section class="tour" id="tour" aria-labelledby="tour-title"> |
| 111 | <h2 class="sr-only" id="tour-title">A tour of Daryl</h2> | 111 | <h2 class="sr-only" id="tour-title">A tour of Daryl</h2> |
| 112 | <div class="tour-tabs" role="tablist" aria-label="Screens" aria-orientation="vertical"> | 112 | <div class="tour-tabs" role="tablist" aria-label="Screens" aria-orientation="vertical"> |
| 113 | <button role="tab" id="tab-projects" aria-controls="shot-projects" aria-selected="true"> | 113 | <button role="tab" id="tab-projects" aria-controls="shot-projects" aria-selected="true"> |
| 114 | - <span class="tab-title">Every video, every step</span> | 114 | + <span class="tab-title">Know where each video stands</span> |
| 115 | - <span class="tab-desc">Each project keeps its brief, script, footage, edit and renders together, and shows where you left off.</span> | 115 | + <span class="tab-desc">Pick up any video where you left off, with its script, footage and edit in the same place.</span> |
| 116 | </button> | 116 | </button> |
| 117 | <button role="tab" id="tab-angle" aria-controls="shot-angle" aria-selected="false" tabindex="-1"> | 117 | <button role="tab" id="tab-angle" aria-controls="shot-angle" aria-selected="false" tabindex="-1"> |
| 118 | - <span class="tab-title">Find the angle</span> | 118 | + <span class="tab-title">Turn an idea into an angle</span> |
| 119 | - <span class="tab-desc">Daryl researches the topic from your brief and notes, then suggests angles to keep or rework.</span> | 119 | + <span class="tab-desc">Start from a vague idea and a few links. Get the research done and angles worth a video.</span> |
| 120 | </button> | 120 | </button> |
| 121 | <button role="tab" id="tab-titles" aria-controls="shot-titles" aria-selected="false" tabindex="-1"> | 121 | <button role="tab" id="tab-titles" aria-controls="shot-titles" aria-selected="false" tabindex="-1"> |
| 122 | - <span class="tab-title">Thirty titles, keep the best</span> | 122 | + <span class="tab-title">Find your best title</span> |
| 123 | - <span class="tab-desc">Daryl writes 30 titles from the angle. Keep two or three for the A/B test.</span> | 123 | + <span class="tab-desc">Compare scored titles side by side and A/B test the ones you like.</span> |
| 124 | </button> | 124 | </button> |
| 125 | <button role="tab" id="tab-thumbnail" aria-controls="shot-thumbnail" aria-selected="false" tabindex="-1"> | 125 | <button role="tab" id="tab-thumbnail" aria-controls="shot-thumbnail" aria-selected="false" tabindex="-1"> |
| 126 | - <span class="tab-title">A thumbnail per title</span> | 126 | + <span class="tab-title">Thumbnail generator</span> |
| 127 | - <span class="tab-desc">Generate variants from your own photos and references, or import the ones you made elsewhere.</span> | 127 | + <span class="tab-desc">Get thumbnails made from your own photos, one for each title you test.</span> |
| 128 | </button> | 128 | </button> |
| 129 | <button role="tab" id="tab-script" aria-controls="shot-script" aria-selected="false" tabindex="-1"> | 129 | <button role="tab" id="tab-script" aria-controls="shot-script" aria-selected="false" tabindex="-1"> |
| 130 | - <span class="tab-title">Write the script</span> | 130 | + <span class="tab-title">Never start from a blank page</span> |
| 131 | - <span class="tab-desc">Write it yourself or start from Daryl's draft, with versions, an outline and an assistant on the side.</span> | 131 | + <span class="tab-desc">Start from a first draft, make it yours, and get it roasted before you shoot.</span> |
| 132 | </button> | 132 | </button> |
| 133 | <button role="tab" id="tab-derush" aria-controls="shot-derush" aria-selected="false" tabindex="-1"> | 133 | <button role="tab" id="tab-derush" aria-controls="shot-derush" aria-selected="false" tabindex="-1"> |
| 134 | - <span class="tab-title">Rough cut in one pass</span> | 134 | + <span class="tab-title">Skip the rough cut</span> |
| 135 | - <span class="tab-desc">Your footage is transcribed, then silences and bad takes are cut. Check every cut before you apply it.</span> | 135 | + <span class="tab-desc">Silences and bad takes are cut for you. You only review.</span> |
| 136 | </button> | 136 | </button> |
| 137 | <button role="tab" id="tab-storyboard" aria-controls="shot-storyboard" aria-selected="false" tabindex="-1"> | 137 | <button role="tab" id="tab-storyboard" aria-controls="shot-storyboard" aria-selected="false" tabindex="-1"> |
| 138 | - <span class="tab-title">Plan the motion design</span> | 138 | + <span class="tab-title">Animations on the right words</span> |
| 139 | - <span class="tab-desc">Daryl reads what you say and places a motion beat on the right words. Review each one.</span> | 139 | + <span class="tab-desc">Daryl listens to your video and plans the motion design where it helps the point land.</span> |
| 140 | </button> | 140 | </button> |
| 141 | <button role="tab" id="tab-editing" aria-controls="shot-editing" aria-selected="false" tabindex="-1"> | 141 | <button role="tab" id="tab-editing" aria-controls="shot-editing" aria-selected="false" tabindex="-1"> |
| 142 | - <span class="tab-title">Edit with Daryl</span> | 142 | + <span class="tab-title">Edit by asking</span> |
| 143 | - <span class="tab-desc">Zooms, B-roll, motion design, sound and music on a real timeline. Ask Daryl or do it by hand, then export to DaVinci Resolve.</span> | 143 | + <span class="tab-desc">Ask for a zoom, a B-roll, a sound or music, or do it by hand on a real timeline.</span> |
| 144 | </button> | 144 | </button> |
| 145 | <button role="tab" id="tab-details" aria-controls="shot-details" aria-selected="false" tabindex="-1"> | 145 | <button role="tab" id="tab-details" aria-controls="shot-details" aria-selected="false" tabindex="-1"> |
| 146 | - <span class="tab-title">Publish to YouTube</span> | 146 | + <span class="tab-title">Publish without forgetting anything</span> |
| 147 | - <span class="tab-desc">Title, description, chapters and A/B variants, checked, then uploaded.</span> | 147 | + <span class="tab-desc">Description, chapters and A/B tests are written and checked before the upload.</span> |
| 148 | </button> | 148 | </button> |
| 149 | </div> | 149 | </div> |
| 150 | <div class="tour-shots"> | 150 | <div class="tour-shots"> |
| 151 | - <div class="frame" id="shot-projects" role="tabpanel" aria-labelledby="tab-projects"><img src="screenshots/projects.png" width="2880" height="1800" alt="The projects page, with the last opened project and the progress of each video" fetchpriority="high"></div> | 151 | + <div class="frame" id="shot-projects" role="tabpanel" aria-labelledby="tab-projects"> |
| 152 | - <div class="frame" id="shot-angle" role="tabpanel" aria-labelledby="tab-angle"><img src="screenshots/angle.png" width="2880" height="1800" alt="The Angle step: the brief, the suggested angles and Daryl's chat" loading="lazy"></div> | 152 | + <div class="mock m-projects" role="img" aria-label="The projects page: the last opened video to resume, and every other video with its progress"> |
| 153 | - <div class="frame" id="shot-titles" role="tabpanel" aria-labelledby="tab-titles"><img src="screenshots/titles.png" width="2880" height="1800" alt="The Title step: the titles kept for the A/B test and Daryl's suggestions with their score" loading="lazy"></div> | 153 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-path"><b>Home</b><i>·</i>New project<i>·</i>Library</span></div> |
| 154 | - <div class="frame" id="shot-thumbnail" role="tabpanel" aria-labelledby="tab-thumbnail"><img src="screenshots/thumbnail.png" width="2880" height="1800" alt="The Thumbnail step: three variants and the brief of a touch-up" loading="lazy"></div> | 154 | + <div class="m-body"> |
| 155 | - <div class="frame" id="shot-script" role="tabpanel" aria-labelledby="tab-script"><img src="screenshots/script.png" width="2880" height="1800" alt="The Script step: the script, its sections and its estimated length" loading="lazy"></div> | 155 | + <div class="m-row"><span class="m-h">Projects</span><span class="m-btn red">+ New project</span></div> |
| 156 | - <div class="frame" id="shot-derush" role="tabpanel" aria-labelledby="tab-derush"><img src="screenshots/derush.png" width="2880" height="1800" alt="The Rough cut step: preview, transcript and the timeline with its cuts" loading="lazy"></div> | 156 | + <span class="m-eyebrow">Resume · last opened project</span> |
| 157 | - <div class="frame" id="shot-storyboard" role="tabpanel" aria-labelledby="tab-storyboard"><img src="screenshots/storyboard.png" width="2880" height="1800" alt="The Storyboard step: motion beats anchored on the transcript, with their place on screen" loading="lazy"></div> | 157 | + <div class="m-resume" style="--i: 0"> |
| 158 | - <div class="frame" id="shot-editing" role="tabpanel" aria-labelledby="tab-editing"><img src="screenshots/editing.png" width="2880" height="1800" alt="The Editing step: preview, timeline with chapters, motion, zooms, B-roll and music, and Daryl's chat" loading="lazy"></div> | 158 | + <div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i></div> |
| 159 | - <div class="frame" id="shot-details" role="tabpanel" aria-labelledby="tab-details"><img src="screenshots/details.png" width="2880" height="1800" alt="The Details step: A/B variants, description and chapters" loading="lazy"></div> | 159 | + <div> |
| 160 | + <h4>The 4-day week, one year later</h4> | ||
| 161 | + <p>My company switched to a four-day week a year ago. What it did to pay, output and the people, with our own numbers and the UK trial.</p> | ||
| 162 | + <div class="m-steps" style="--i: 0"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i class="w"></i><i></i><i></i><i></i><i></i><i></i></div> | ||
| 163 | + <div class="m-row"><span class="m-btn dark">Continue · Editing →</span><span class="m-meta">9/15 steps · 24 GB · Nov 12</span></div> | ||
| 164 | + </div> | ||
| 165 | + </div> | ||
| 166 | + <span class="m-eyebrow">Other projects</span> | ||
| 167 | + <div class="m-grid"> | ||
| 168 | + <div class="m-proj" style="--i: 1"><div class="m-thumb t-juniors"><b>Junior jobs?</b><i class="m-person"></i></div><strong>AI and junior developers</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i></div><span class="m-meta">15/15 steps · published</span></div> | ||
| 169 | + <div class="m-proj" style="--i: 2"><div class="m-thumb t-salary"><b>+0%</b><i class="m-person"></i></div><strong>Why your salary stalls</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i></i><i></i><i></i></div><span class="m-meta">11/15 steps · Nov 9</span></div> | ||
| 170 | + <div class="m-proj" style="--i: 3"><div class="m-thumb t-numbers"><b>Back to the office</b><i class="m-person"></i></div><strong>The end of remote work?</strong><div class="m-steps"><i class="d"></i><i class="d"></i><i class="d"></i><i class="w"></i><i class="w"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><span class="m-meta">3/15 steps · Nov 4</span></div> | ||
| 171 | + <div class="m-proj" style="--i: 4"><div class="m-thumb t-empty"></div><strong>Hiring freezes, explained</strong><div class="m-steps"><i class="w"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><span class="m-meta">0/15 steps · Oct 30</span></div> | ||
| 172 | + </div> | ||
| 173 | + </div> | ||
| 174 | + </div> | ||
| 175 | + </div> | ||
| 176 | + <div class="frame" id="shot-angle" role="tabpanel" aria-labelledby="tab-angle"> | ||
| 177 | + <div class="mock m-angle-step" role="img" aria-label="The Angle step: Daryl reads the sources of the brief, suggests three angles, and one is kept"> | ||
| 178 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Angle</b></span></div> | ||
| 179 | + <div class="m-body"> | ||
| 180 | + <div class="m-col"> | ||
| 181 | + <div class="m-brief"> | ||
| 182 | + <span class="m-eyebrow">Project brief</span> | ||
| 183 | + <dl><dt>Starting idea</dt><dd>My company tried the 4-day week for a year. Was it worth it?</dd></dl> | ||
| 184 | + <dl><dt>Target length</dt><dd>10–15 min</dd></dl> | ||
| 185 | + </div> | ||
| 186 | + <span class="m-eyebrow">Angles · 3</span> | ||
| 187 | + <div class="m-angles"> | ||
| 188 | + <div class="m-angle-card kept" style="--i: 0"><i>A</i><strong>We did the 4-day week for a year. Here's the bill.</strong><p>Our own numbers, month by month: output, sick days, hiring, and what it cost.</p><span class="m-btn m-swap"><span>Keep</span><span>✓ Kept</span></span></div> | ||
| 189 | + <div class="m-angle-card" style="--i: 1"><i>B</i><strong>The 4-day week works. Just not for every job.</strong><p>Where the UK and Iceland trials worked, and the jobs where it fell apart.</p><span class="m-btn">Keep</span></div> | ||
| 190 | + <div class="m-angle-card" style="--i: 2"><i>C</i><strong>Why your boss will still say no</strong><p>The objections managers raise, and the ones that actually hold up.</p><span class="m-btn">Keep</span></div> | ||
| 191 | + </div> | ||
| 192 | + </div> | ||
| 193 | + <div class="m-panel"> | ||
| 194 | + <div class="m-panel-head">Daryl</div> | ||
| 195 | + <div class="m-msg daryl">Reading your brief and the sources you linked…</div> | ||
| 196 | + <ul class="m-sources"> | ||
| 197 | + <li style="--i: 0">UK four-day week pilot, final report</li> | ||
| 198 | + <li style="--i: 1">Iceland working-time trials, 2015–2019</li> | ||
| 199 | + <li style="--i: 2">Microsoft Japan, Work-Life Choice Challenge</li> | ||
| 200 | + <li style="--i: 3">Your HR exports: hours, sick days, hires</li> | ||
| 201 | + <li style="--i: 4">Six interview notes</li> | ||
| 202 | + </ul> | ||
| 203 | + <div class="m-msg daryl">Three angles. I'd keep A: your own numbers are something no other video has.</div> | ||
| 204 | + <span class="m-meta">14 sources read · 3 angles</span> | ||
| 205 | + </div> | ||
| 206 | + </div> | ||
| 207 | + </div> | ||
| 208 | + </div> | ||
| 209 | + <div class="frame" id="shot-titles" role="tabpanel" aria-labelledby="tab-titles"> | ||
| 210 | + <div class="mock m-titles" role="img" aria-label="The Title step: Daryl's scored suggestions, and the two best ones kept for the A/B test"> | ||
| 211 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Title</b></span></div> | ||
| 212 | + <div class="m-body"> | ||
| 213 | + <p class="m-angle"><span class="m-eyebrow">Kept angle</span>A year of 4-day weeks: what happened to pay and output</p> | ||
| 214 | + <div class="m-ab"> | ||
| 215 | + <span class="m-eyebrow">Kept for the A/B test · 2/3</span> | ||
| 216 | + <div class="m-slot fill" style="--at: 2300ms"><i>A</i><b>61 companies tried the 4-day week. 56 kept it.</b><span class="m-score hi">82</span></div> | ||
| 217 | + <div class="m-slot fill" style="--at: 3000ms"><i>B</i><b>4 days, same salary: the numbers after a year</b><span class="m-score hi">74</span></div> | ||
| 218 | + <div class="m-slot empty"><i>C</i><span>Keep a title below, or add your own.</span></div> | ||
| 219 | + </div> | ||
| 220 | + <div class="m-list-wrap"> | ||
| 221 | + <span class="m-eyebrow">Daryl's suggestions</span> | ||
| 222 | + <ol class="m-list"> | ||
| 223 | + <li style="--i: 0"><span>The 4-day week, one year later</span><span class="m-score">58</span><span class="m-add">+</span></li> | ||
| 224 | + <li style="--i: 1"><span>Why the 4-day week works (and where it doesn't)</span><span class="m-score hi">71</span><span class="m-add">+</span></li> | ||
| 225 | + <li style="--i: 2; --at: 2300ms" class="kept"><span>61 companies tried the 4-day week. 56 kept it.</span><span class="m-score hi">82</span><span class="m-add">✓</span></li> | ||
| 226 | + <li style="--i: 3"><span>Is the 4-day week only for tech jobs?</span><span class="m-score">63</span><span class="m-add">+</span></li> | ||
| 227 | + <li style="--i: 4; --at: 3000ms" class="kept"><span>4 days, same salary: the numbers after a year</span><span class="m-score hi">74</span><span class="m-add">✓</span></li> | ||
| 228 | + <li style="--i: 5"><span>The hidden cost of the 4-day week</span><span class="m-score">66</span><span class="m-add">+</span></li> | ||
| 229 | + <li style="--i: 6"><span>Your boss is wrong about the 4-day week</span><span class="m-score">54</span><span class="m-add">+</span></li> | ||
| 230 | + </ol> | ||
| 231 | + </div> | ||
| 232 | + </div> | ||
| 233 | + </div> | ||
| 234 | + </div> | ||
| 235 | + <div class="frame" id="shot-thumbnail" role="tabpanel" aria-labelledby="tab-thumbnail"> | ||
| 236 | + <div class="mock m-thumbs" role="img" aria-label="The Thumbnail step: a new variant is generated from a short brief and joins the two kept for the A/B test"> | ||
| 237 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Thumbnail</b></span></div> | ||
| 238 | + <div class="m-body"> | ||
| 239 | + <p class="m-angle"><span class="m-eyebrow">Kept angle</span>We did the 4-day week for a year. Here's the bill.</p> | ||
| 240 | + <div> | ||
| 241 | + <span class="m-eyebrow">Kept for the A/B test · 3/3</span> | ||
| 242 | + <div class="m-slots"> | ||
| 243 | + <div class="m-vslot"><div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i><span class="m-tag">A</span></div><span class="m-select">61 companies tried the 4-day week…</span></div> | ||
| 244 | + <div class="m-vslot"><div class="m-thumb t-numbers"><b>56 of 61 kept it</b><i class="m-person"></i><span class="m-tag">B</span></div><span class="m-select">4 days, same salary: the numbers…</span></div> | ||
| 245 | + <div class="m-vslot"><div class="m-hole"><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag">C</span></div></div><span class="m-select">We did the 4-day week for a year…</span></div> | ||
| 246 | + </div> | ||
| 247 | + </div> | ||
| 248 | + <div class="m-variant"> | ||
| 249 | + <div> | ||
| 250 | + <span class="m-eyebrow">Variant v3 · brief</span> | ||
| 251 | + <div class="m-field"><label>What the thumbnail shows</label><div>Me at my desk, next to a calendar where Friday is crossed out</div></div> | ||
| 252 | + <div class="m-field"><label>Text in the image</label><div>FRIDAYS, crossed out</div></div> | ||
| 253 | + </div> | ||
| 254 | + <div> | ||
| 255 | + <span class="m-eyebrow">Results · 1</span> | ||
| 256 | + <div class="m-gen"><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag r">★ Chosen</span></div></div> | ||
| 257 | + </div> | ||
| 258 | + </div> | ||
| 259 | + </div> | ||
| 260 | + </div> | ||
| 261 | + </div> | ||
| 262 | + <div class="frame" id="shot-script" role="tabpanel" aria-labelledby="tab-script"> | ||
| 263 | + <div class="mock m-script" role="img" aria-label="The Script step: a first draft written from the angle, then a roast with a score, an estimated retention and what to fix"> | ||
| 264 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Pre-prod<i>/</i><b>Script</b></span></div> | ||
| 265 | + <div class="m-body"> | ||
| 266 | + <div class="m-outline"> | ||
| 267 | + <span class="m-eyebrow">Outline</span> | ||
| 268 | + <ol> | ||
| 269 | + <li class="on">Hook <span>120</span></li> | ||
| 270 | + <li>The trial <span>340</span></li> | ||
| 271 | + <li>The numbers <span>610</span></li> | ||
| 272 | + <li>What broke <span>480</span></li> | ||
| 273 | + <li>Verdict <span>210</span></li> | ||
| 274 | + </ol> | ||
| 275 | + <span class="m-meta">1,760 words · ~12 min</span> | ||
| 276 | + </div> | ||
| 277 | + <div class="m-doc"> | ||
| 278 | + <span class="m-eyebrow">Draft v2 · written from the angle</span> | ||
| 279 | + <h5>HOOK</h5> | ||
| 280 | + <p style="--i: 0">A year ago, my company switched to a four-day week. Same salary, same goals, one day less.</p> | ||
| 281 | + <p class="visual" style="--i: 1">[VISUAL: a calendar, Friday slides out]</p> | ||
| 282 | + <p style="--i: 2">Everyone asked me the same thing: did it work? Here are our numbers, month by month, and the one thing nobody saw coming.</p> | ||
| 283 | + <h5>THE TRIAL</h5> | ||
| 284 | + <p style="--i: 3">We were not the first. In 2022, 61 companies in the UK tried it for six months. 56 of them kept it.</p> | ||
| 285 | + <p style="--i: 4">Same output, fewer sick days, and almost nobody wanted to go back. So why did ours nearly fall apart?</p> | ||
| 286 | + </div> | ||
| 287 | + <div class="m-roast"> | ||
| 288 | + <span class="m-eyebrow" style="--i: 0">Roasting</span> | ||
| 289 | + <div class="m-grade" style="--i: 1"><strong>7.5</strong><span>/10</span></div> | ||
| 290 | + <p style="--i: 2">Strong hook. The middle drags.</p> | ||
| 291 | + <div style="--i: 3"> | ||
| 292 | + <span class="m-eyebrow">Estimated retention · 54 %</span> | ||
| 293 | + <svg class="m-curve" viewBox="0 0 100 36" preserveAspectRatio="none" aria-hidden="true"><line x1="0" y1="35" x2="100" y2="35"/><path d="M0 3 C6 11, 12 14, 22 16 S38 18, 48 22 S62 23, 70 25 S88 26, 100 28"/></svg> | ||
| 294 | + </div> | ||
| 295 | + <ul class="m-remarks" style="--i: 4"> | ||
| 296 | + <li>Say what broke in the hook, not at minute 9</li> | ||
| 297 | + <li>Cut the second example in The numbers</li> | ||
| 298 | + <li>End on the question, not on a summary</li> | ||
| 299 | + </ul> | ||
| 300 | + </div> | ||
| 301 | + </div> | ||
| 302 | + </div> | ||
| 303 | + </div> | ||
| 304 | + <div class="frame" id="shot-derush" role="tabpanel" aria-labelledby="tab-derush"> | ||
| 305 | + <div class="mock m-cut" role="img" aria-label="The Rough cut step: bad takes and silences are struck from the transcript and removed from the timeline"> | ||
| 306 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Rough cut</b></span></div> | ||
| 307 | + <div class="m-body"> | ||
| 308 | + <div class="m-transcript"> | ||
| 309 | + <p class="m-file">A001_C004.MP4 · 00:12 → 01:48</p> | ||
| 310 | + <p class="m-say" style="--i: 0"><time>00:00</time><span>A year ago, my company switched to a four-day week.</span></p> | ||
| 311 | + <p class="m-say bad" style="--i: 1"><time></time><span>Same salary, same… hmm, no, let me start that again.</span><em>Bad take</em></p> | ||
| 312 | + <p class="m-say" style="--i: 2"><time>00:04</time><span>Same salary, same goals, one day less.</span></p> | ||
| 313 | + <p class="m-say gap" style="--i: 3"><time></time><span>2.6 s of silence</span><em>Silence</em></p> | ||
| 314 | + <p class="m-say" style="--i: 4"><time>00:07</time><span>So I asked the people who lived it what actually changed.</span></p> | ||
| 315 | + <p class="m-say bad" style="--i: 5"><time></time><span>And the first thing they… sorry, the first thing they said</span><em>Bad take</em></p> | ||
| 316 | + <p class="m-say" style="--i: 6"><time>00:12</time><span>The first thing they told me was not about Fridays.</span></p> | ||
| 317 | + <p class="m-say gap" style="--i: 7"><time></time><span>1.9 s of silence</span><em>Silence</em></p> | ||
| 318 | + <p class="m-say" style="--i: 8"><time>00:15</time><span>It was about Mondays, and the meetings that piled up on them.</span></p> | ||
| 319 | + </div> | ||
| 320 | + <div class="m-tools"> | ||
| 321 | + <span class="m-btn dark">Select</span><span class="m-btn">Blade</span> | ||
| 322 | + <span class="m-btn b1">Remove 6 bad takes</span><span class="m-btn b2">Remove 14 silences · 38 s</span> | ||
| 323 | + <span class="m-stat">42:10 of footage → <b>14:32</b> kept</span> | ||
| 324 | + </div> | ||
| 325 | + <div class="m-tl"> | ||
| 326 | + <div class="m-tl-names"><span>V1</span><span>A1</span></div> | ||
| 327 | + <div class="m-track"> | ||
| 328 | + <span class="m-seg" style="--g: 3"></span><span class="m-seg gap x" style="--g: .6"></span><span class="m-seg" style="--g: 2"></span><span class="m-seg bad x" style="--g: 2.2"></span> | ||
| 329 | + <span class="m-seg" style="--g: 4"></span><span class="m-seg gap x" style="--g: .8"></span><span class="m-seg" style="--g: 1.5"></span><span class="m-seg" style="--g: 2.5"></span> | ||
| 330 | + <span class="m-seg gap x" style="--g: .5"></span><span class="m-seg" style="--g: 3"></span><span class="m-seg bad x" style="--g: 1.8"></span><span class="m-seg" style="--g: 2"></span> | ||
| 331 | + <span class="m-seg gap x" style="--g: .7"></span><span class="m-seg" style="--g: 3.5"></span><span class="m-seg bad x" style="--g: 1.4"></span><span class="m-seg" style="--g: 1"></span> | ||
| 332 | + <span class="m-seg gap x" style="--g: .9"></span><span class="m-seg" style="--g: 2.5"></span><span class="m-seg bad x" style="--g: 2.6"></span><span class="m-seg" style="--g: 3"></span> | ||
| 333 | + <span class="m-seg gap x" style="--g: .5"></span><span class="m-seg" style="--g: 2"></span><span class="m-seg" style="--g: 1.5"></span><span class="m-seg gap x" style="--g: .8"></span> | ||
| 334 | + <span class="m-seg" style="--g: 3"></span><span class="m-seg bad x" style="--g: 1.6"></span><span class="m-seg" style="--g: 2.5"></span><span class="m-seg gap x" style="--g: .6"></span> | ||
| 335 | + <span class="m-seg bad x" style="--g: 1.2"></span><span class="m-seg" style="--g: 3"></span> | ||
| 336 | + <span class="m-head"></span> | ||
| 337 | + </div> | ||
| 338 | + </div> | ||
| 339 | + </div> | ||
| 340 | + </div> | ||
| 341 | + </div> | ||
| 342 | + <div class="frame" id="shot-storyboard" role="tabpanel" aria-labelledby="tab-storyboard"> | ||
| 343 | + <div class="mock m-story" role="img" aria-label="The Storyboard step: Daryl places motion design beats on the words they illustrate, each with its place on screen"> | ||
| 344 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Storyboard</b></span></div> | ||
| 345 | + <div class="m-body"> | ||
| 346 | + <div class="m-row"><strong>18 beats</strong><span class="m-meta">one every 45 s</span><span class="m-chip" style="--c: var(--motion)">Motion <b>12</b></span><span class="m-chip" style="--c: var(--zoom)">Zoom <b>4</b></span><span class="m-chip" style="--c: var(--broll)">B-roll <b>2</b></span></div> | ||
| 347 | + <div class="m-strip"> | ||
| 348 | + <i style="--x: 3%; --i: 0"></i><i style="--x: 7%; --i: 1"></i><i style="--x: 11%; --i: 2; --c: var(--zoom)"></i><i style="--x: 15%; --i: 3"></i><i class="on" style="--x: 21%; --i: 4"></i><i style="--x: 25%; --i: 5"></i> | ||
| 349 | + <i class="on" style="--x: 29%; --i: 6"></i><i style="--x: 34%; --i: 7; --c: var(--zoom)"></i><i style="--x: 40%; --i: 8; --c: var(--broll); --w: 2.4%"></i><i style="--x: 46%; --i: 9"></i><i style="--x: 51%; --i: 10"></i><i style="--x: 56%; --i: 11; --c: var(--zoom)"></i> | ||
| 350 | + <i style="--x: 61%; --i: 12"></i><i style="--x: 67%; --i: 13"></i><i style="--x: 72%; --i: 14; --c: var(--broll); --w: 2.4%"></i><i style="--x: 79%; --i: 15; --c: var(--zoom)"></i><i style="--x: 86%; --i: 16"></i><i style="--x: 93%; --i: 17"></i> | ||
| 351 | + </div> | ||
| 352 | + <div class="m-beats"> | ||
| 353 | + <div class="m-beat" style="--i: 0"> | ||
| 354 | + <div class="m-beat-meta"><strong>04:12.5</strong><span class="m-meta">6.2 s</span><span class="m-chip" style="--c: var(--motion)">Motion</span></div> | ||
| 355 | + <div> | ||
| 356 | + <span class="m-eyebrow">You say</span> | ||
| 357 | + <q>Same salary, same goals, <mark>one day less</mark>.</q> | ||
| 358 | + <span class="m-eyebrow">We show</span> | ||
| 359 | + <p>A week calendar: Friday slides out and the four days stretch to fill the week.</p> | ||
| 360 | + </div> | ||
| 361 | + <div><span class="m-eyebrow">Screen position · <b>Right</b></span><div class="m-pos"><i class="band"></i><i></i><i></i><i class="on"></i><i class="band"></i></div></div> | ||
| 362 | + </div> | ||
| 363 | + <div class="m-beat" style="--i: 1"> | ||
| 364 | + <div class="m-beat-meta"><strong>05:40.1</strong><span class="m-meta">4.8 s</span><span class="m-chip" style="--c: var(--motion)">Motion</span></div> | ||
| 365 | + <div> | ||
| 366 | + <span class="m-eyebrow">You say</span> | ||
| 367 | + <q><mark>61 companies</mark> tried it, and <mark>56 kept it</mark>.</q> | ||
| 368 | + <span class="m-eyebrow">We show</span> | ||
| 369 | + <p>Two counters tick up side by side in the lower band, 61 then 56.</p> | ||
| 370 | + </div> | ||
| 371 | + <div><span class="m-eyebrow">Screen position · <b>Bottom</b></span><div class="m-pos"><i class="band"></i><i></i><i></i><i></i><i class="band on"></i></div></div> | ||
| 372 | + </div> | ||
| 373 | + <div class="m-beat" style="--i: 2"> | ||
| 374 | + <div class="m-beat-meta"><strong>09:31.0</strong><span class="m-meta">1.4 s</span><span class="m-chip" style="--c: var(--zoom)">Zoom</span></div> | ||
| 375 | + <div> | ||
| 376 | + <span class="m-eyebrow">You say</span> | ||
| 377 | + <q>And then, in March, <mark>it nearly fell apart</mark>.</q> | ||
| 378 | + <span class="m-eyebrow">We show</span> | ||
| 379 | + <p>A strong punch-in on your face, held for the whole line.</p> | ||
| 380 | + </div> | ||
| 381 | + <div><span class="m-eyebrow">Screen position · <b>Center</b></span><div class="m-pos"><i class="band"></i><i></i><i class="on z"></i><i></i><i class="band"></i></div></div> | ||
| 382 | + </div> | ||
| 383 | + </div> | ||
| 384 | + </div> | ||
| 385 | + </div> | ||
| 386 | + </div> | ||
| 387 | + <div class="frame" id="shot-editing" role="tabpanel" aria-labelledby="tab-editing"> | ||
| 388 | + <div class="mock m-edit" role="img" aria-label="The Editing step: asked for a title card with a whoosh, Daryl adds both to the timeline and the preview shows the card"> | ||
| 389 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Post-prod<i>/</i><b>Editing</b></span></div> | ||
| 390 | + <div class="m-body"> | ||
| 391 | + <div class="m-preview"> | ||
| 392 | + <div class="m-shot"> | ||
| 393 | + <div class="m-card"><small>The deal</small><strong>4 days. <u>Same salary.</u></strong></div> | ||
| 394 | + </div> | ||
| 395 | + <div class="m-controls"><span class="m-btn">−1 s</span><span class="m-btn dark">▶</span><span class="m-btn">+1 s</span><span>08:04.2 / 19:40</span></div> | ||
| 396 | + </div> | ||
| 397 | + <div class="m-chat"> | ||
| 398 | + <div class="m-chat-head">Daryl</div> | ||
| 399 | + <div class="m-msg me">Put a title card on “same salary”, with a whoosh</div> | ||
| 400 | + <div class="m-reply"> | ||
| 401 | + <div class="m-typing"><i></i><i></i><i></i></div> | ||
| 402 | + <div class="m-msg daryl">Done: a title card at 08:04, and a whoosh on the way in.<small>2 actions · timeline edited</small></div> | ||
| 403 | + </div> | ||
| 404 | + <div class="m-input">Ask Daryl…</div> | ||
| 405 | + </div> | ||
| 406 | + <div class="m-lanes"> | ||
| 407 | + <span>Chapters</span> | ||
| 408 | + <ul class="ch"><li style="--a: 0; --b: 2.5">Intro</li><li style="--a: 2.5; --b: 4">The trial</li><li style="--a: 6.5; --b: 4.5">The numbers</li><li style="--a: 11; --b: 4.5">What broke</li><li style="--a: 15.5; --b: 4.5">Verdict</li></ul> | ||
| 409 | + <span>Motion</span> | ||
| 410 | + <ul style="--c: var(--motion)"><li style="--a: 1; --b: 1"></li><li style="--a: 3.2; --b: .8"></li><li style="--a: 5.5; --b: .7"></li><li class="new" style="--a: 8.2; --b: 1.4">Title card</li><li style="--a: 10.4; --b: .8"></li><li style="--a: 12.5; --b: 1"></li><li style="--a: 14.2; --b: .7"></li><li style="--a: 16.8; --b: 1"></li><li style="--a: 18.5; --b: .8"></li></ul> | ||
| 411 | + <span>Zooms</span> | ||
| 412 | + <ul class="zm" style="--c: var(--zoom)"><li style="--a: .6; --b: .3"></li><li style="--a: 2.8; --b: .3"></li><li style="--a: 4.6; --b: .3"></li><li style="--a: 7.1; --b: .3"></li><li style="--a: 9.9; --b: .3"></li><li style="--a: 11.6; --b: .3"></li><li style="--a: 13.9; --b: .3"></li><li style="--a: 16; --b: .3"></li><li style="--a: 17.9; --b: .3"></li><li style="--a: 19.5; --b: .3"></li></ul> | ||
| 413 | + <span>B-roll</span> | ||
| 414 | + <ul style="--c: var(--broll)"><li style="--a: 2; --b: 1">office</li><li style="--a: 6.5; --b: 1.1">survey</li><li style="--a: 11; --b: 1.6">timesheet</li><li style="--a: 15; --b: 1">team</li></ul> | ||
| 415 | + <span>Video</span> | ||
| 416 | + <ul class="vid"><li style="--a: 0; --b: 4.9"></li><li style="--a: 4.9; --b: 4.5"></li><li style="--a: 9.4; --b: 4.6"></li><li style="--a: 14; --b: 6"></li></ul> | ||
| 417 | + <span>Voice</span> | ||
| 418 | + <ul class="voice"><li style="--a: 0; --b: 20"></li></ul> | ||
| 419 | + <span>Sound</span> | ||
| 420 | + <ul style="--c: #E2683C"><li style="--a: 1; --b: .25"></li><li style="--a: 3.2; --b: .25"></li><li class="new" style="--a: 8.05; --b: .4"></li><li style="--a: 12.5; --b: .25"></li><li style="--a: 16.8; --b: .25"></li></ul> | ||
| 421 | + <span>Music</span> | ||
| 422 | + <ul style="--c: var(--music)"><li style="--a: 0; --b: 6.4">lofi-01</li><li style="--a: 6.5; --b: 7.9">lofi-02</li><li style="--a: 14.5; --b: 5.5">lofi-03</li></ul> | ||
| 423 | + <span class="m-head"></span> | ||
| 424 | + </div> | ||
| 425 | + </div> | ||
| 426 | + </div> | ||
| 427 | + </div> | ||
| 428 | + <div class="frame" id="shot-details" role="tabpanel" aria-labelledby="tab-details"> | ||
| 429 | + <div class="mock m-details" role="img" aria-label="The Details step: A/B variants, description and chapters; every check passes, then the video is uploaded to YouTube"> | ||
| 430 | + <div class="m-bar"><span class="m-brand">daryl</span><span class="m-project">The 4-day week, one year later</span><span class="m-path">Publish<i>/</i><b>Details</b></span></div> | ||
| 431 | + <div class="m-body"> | ||
| 432 | + <div class="m-col"> | ||
| 433 | + <div> | ||
| 434 | + <span class="m-eyebrow">A/B test · 3 variants</span> | ||
| 435 | + <ul class="m-variants"> | ||
| 436 | + <li><div class="m-thumb t-days"><b>4 days?</b><i class="m-person"></i><span class="m-tag">A</span></div>61 companies tried the 4-day week. 56 kept it.</li> | ||
| 437 | + <li><div class="m-thumb t-numbers"><b>56 of 61 kept it</b><i class="m-person"></i><span class="m-tag">B</span></div>4 days, same salary: the numbers after a year</li> | ||
| 438 | + <li><div class="m-thumb t-friday"><b><s>Fridays</s></b><i class="m-person"></i><span class="m-tag">C</span></div>We did the 4-day week for a year. Here's the bill.</li> | ||
| 439 | + </ul> | ||
| 440 | + </div> | ||
| 441 | + <div> | ||
| 442 | + <span class="m-eyebrow">Description</span> | ||
| 443 | + <div class="m-desc">A year ago, my company switched to a four-day week. Here is what it did to pay, output and hiring, with our own numbers and the UK trial. | ||
| 444 | + <ol><li>00:00 Intro</li><li>01:05 The trial</li><li>04:12 The numbers</li><li>09:30 What broke</li><li>15:20 Verdict</li></ol> | ||
| 445 | + </div> | ||
| 446 | + </div> | ||
| 447 | + </div> | ||
| 448 | + <div class="m-panel"> | ||
| 449 | + <div class="m-panel-head">Before the upload</div> | ||
| 450 | + <ul class="m-checks"> | ||
| 451 | + <li style="--i: 0">Video rendered · 19:40, 4K</li> | ||
| 452 | + <li style="--i: 1">Titles under 70 characters</li> | ||
| 453 | + <li style="--i: 2">Three thumbnails at 1280 × 720</li> | ||
| 454 | + <li style="--i: 3">Chapters start at 00:00</li> | ||
| 455 | + <li style="--i: 4">Description and tags</li> | ||
| 456 | + <li style="--i: 5">Scheduled for Tuesday, 6 pm</li> | ||
| 457 | + </ul> | ||
| 458 | + <div class="m-upload"> | ||
| 459 | + <span class="m-btn red">Upload to YouTube</span> | ||
| 460 | + <div class="m-bar-track"><i></i></div> | ||
| 461 | + <span class="m-done">Uploaded · goes live Tuesday, 6 pm</span> | ||
| 462 | + </div> | ||
| 463 | + </div> | ||
| 464 | + </div> | ||
| 465 | + </div> | ||
| 466 | + </div> | ||
| 160 | </div> | 467 | </div> |
| 161 | </section> | 468 | </section> |
| 162 | 469 | ||
| 163 | <section class="how" id="how" aria-labelledby="how-title"> | 470 | <section class="how" id="how" aria-labelledby="how-title"> |
| 164 | - <h2 id="how-title">A studio on your machine, an assistant that asks first</h2> | 471 | + <h2 id="how-title">Fits the way you already work</h2> |
| 165 | <dl class="facts"> | 472 | <dl class="facts"> |
| 166 | <div> | 473 | <div> |
| 167 | - <dt>Your files stay with you</dt> | 474 | + <dt>In your language</dt> |
| 168 | - <dd>Projects, footage and renders live in a folder on your disk. Whisper, ffmpeg and the renderer run locally.</dd> | 475 | + <dd>Daryl writes your titles, scripts and descriptions in the language of your channel.</dd> |
| 169 | </div> | 476 | </div> |
| 170 | <div> | 477 | <div> |
| 171 | - <dt>Runs on your Claude Code plan</dt> | 478 | + <dt>Your footage stays on your disk</dt> |
| 172 | - <dd>Daryl drives Claude Code with your subscription. No API key to set up, no second bill.</dd> | 479 | + <dd>Transcription and rendering run on your machine. Your rushes go nowhere until you publish.</dd> |
| 173 | </div> | 480 | </div> |
| 174 | <div> | 481 | <div> |
| 175 | - <dt>Nothing changes without you</dt> | 482 | + <dt>Keep your editing software</dt> |
| 176 | - <dd>Cuts, titles, beats and edits are suggestions. They land in your project when you accept them.</dd> | 483 | + <dd>Send the rough cut or the edit to DaVinci Resolve or Premiere and finish it there.</dd> |
| 177 | </div> | 484 | </div> |
| 178 | </dl> | 485 | </dl> |
| 179 | 486 | ||
| 180 | <div class="skills"> | 487 | <div class="skills"> |
| 181 | <div class="skills-copy"> | 488 | <div class="skills-copy"> |
| 182 | - <h3>Editing jobs for Claude Code</h3> | 489 | + <h3>One command for the most tedious jobs</h3> |
| 183 | - <p>Some jobs work better from a Claude Code session opened in the repository. Daryl ships them as skills.</p> | 490 | + <p>Open your AI agent in the repository and type the command.</p> |
| 184 | </div> | 491 | </div> |
| 185 | <ul class="skills-list"> | 492 | <ul class="skills-list"> |
| 186 | - <li><code>/music-bed</code><span>Scores the edit: one track per sequence, cut to cover it and ducked under the voice.</span></li> | 493 | + <li><code>/music-bed</code><span>Music under the whole video, cut to length and ducked under your voice.</span></li> |
| 187 | - <li><code>/replace-aroll-take</code><span>Swaps a stretch of A-roll for a re-recorded take and moves everything on top of it.</span></li> | 494 | + <li><code>/replace-aroll-take</code><span>Re-filmed a passage? Drop it in, and the B-roll, zooms and sounds follow.</span></li> |
| 188 | - <li><code>/snatch-cut</code><span>Proposes a burst of close-ups with snap zooms and punchy sounds, with a preview.</span></li> | 495 | + <li><code>/snatch-cut</code><span>A burst of close-ups, snap zooms and punchy sounds to wake up a sequence.</span></li> |
| 189 | </ul> | 496 | </ul> |
| 190 | </div> | 497 | </div> |
| 191 | </section> | 498 | </section> |
| @@ -194,13 +501,8 @@ | |||
| 194 | <h2 id="honest-title">A personal tool, shared as is</h2> | 501 | <h2 id="honest-title">A personal tool, shared as is</h2> |
| 195 | <div class="honest-body"> | 502 | <div class="honest-body"> |
| 196 | <p> | 503 | <p> |
| 197 | - I make every video of <a href="https://www.youtube.com/@eventuallycoding">my channel</a> with Daryl. | 504 | + It follows how I work and evolves in that direction. It is maintained on a best-effort basis. |
| 198 | - I share it because people asked to see it, not to sell anything: there is no course, no paid plan, | 505 | + Fork it, take what you need, or use it for ideas. |
| 199 | - no waiting list. | ||
| 200 | - </p> | ||
| 201 | - <p> | ||
| 202 | - It follows how I work and evolves in that direction. It is built for one person on Windows, and | ||
| 203 | - maintained on a best-effort basis. Fork it, take what you need, or use it for ideas. | ||
| 204 | </p> | 506 | </p> |
| 205 | </div> | 507 | </div> |
| 206 | </section> | 508 | </section> |
| @@ -225,7 +527,6 @@ cd web; pnpm install; pnpm build; cd ..\backend | |||
| 225 | <p>Open source under the AGPL-3.0. Made by <a href="https://eventuallymaking.io">Hugo Lassiège</a>.</p> | 527 | <p>Open source under the AGPL-3.0. Made by <a href="https://eventuallymaking.io">Hugo Lassiège</a>.</p> |
| 226 | <nav aria-label="Elsewhere"> | 528 | <nav aria-label="Elsewhere"> |
| 227 | <a href="https://rickub.com/hlassiege/daryl">Source code</a> | 529 | <a href="https://rickub.com/hlassiege/daryl">Source code</a> |
| 228 | - <a href="https://github.com/hlassiege/daryl">GitHub mirror</a> | ||
| 229 | <a href="https://panoplie.eventuallymaking.io">panoplie</a> | 530 | <a href="https://panoplie.eventuallymaking.io">panoplie</a> |
| 230 | </nav> | 531 | </nav> |
| 231 | </footer> | 532 | </footer> |
modified
site/public/main.js +30 -3 | @@ -1,6 +1,6 @@ | ||
| 1 | -// Progressive enhancement only: without this file every screenshot is listed and the reel shows the finished project. | |
| 1 | +// Progressive enhancement only: without this file every mockup is listed and the reel shows the finished project. | |
| 2 | 2 | |
| 3 | -// Tour: screenshots as tabs (WAI-ARIA tabs pattern; up/down on the vertical list, left/right on mobile) | |
| 3 | +// Tour: mockups as tabs (WAI-ARIA tabs pattern; up/down on the vertical list, left/right on mobile) | |
| 4 | 4 | const tabs = [...document.querySelectorAll('.tour-tabs [role="tab"]')] |
| 5 | 5 | |
| 6 | 6 | function select(tab, focus) { |
| @@ -16,8 +16,21 @@ function select(tab, focus) { | ||
| 16 | 16 | } |
| 17 | 17 | } |
| 18 | 18 | |
| 19 | +// Mockups replay when their tab shows (CSS animations restart when a hidden frame shows); | |
| 20 | +// a click on the tab already open replays it too. | |
| 21 | +function replay(tab) { | |
| 22 | + const frame = document.getElementById(tab.getAttribute('aria-controls')) | |
| 23 | + for (const animation of frame.getAnimations?.({ subtree: true }) ?? []) { | |
| 24 | + animation.cancel() | |
| 25 | + animation.play() | |
| 26 | + } | |
| 27 | +} | |
| 28 | + | |
| 19 | 29 | for (const tab of tabs) { |
| 20 | - tab.addEventListener('click', () => select(tab, false)) | |
| 30 | + tab.addEventListener('click', () => { | |
| 31 | + if (tab.getAttribute('aria-selected') === 'true') replay(tab) | |
| 32 | + else select(tab, false) | |
| 33 | + }) | |
| 21 | 34 | tab.addEventListener('keydown', (e) => { |
| 22 | 35 | const i = tabs.indexOf(tab) |
| 23 | 36 | const next = { ArrowDown: i + 1, ArrowRight: i + 1, ArrowUp: i - 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key] |
| @@ -28,6 +41,20 @@ for (const tab of tabs) { | ||
| 28 | 41 | } |
| 29 | 42 | if (tabs.length) select(tabs[0], false) |
| 30 | 43 | |
| 44 | +// The first mockup waits, paused, until the tour scrolls into view | |
| 45 | +const tour = document.querySelector('.tour') | |
| 46 | +if (tour && 'IntersectionObserver' in window) { | |
| 47 | + const observer = new IntersectionObserver((entries) => { | |
| 48 | + if (entries.some((e) => e.isIntersecting)) { | |
| 49 | + observer.disconnect() | |
| 50 | + tour.classList.add('seen') | |
| 51 | + } | |
| 52 | + }, { threshold: 0.4 }) | |
| 53 | + observer.observe(tour) | |
| 54 | +} else if (tour) { | |
| 55 | + tour.classList.add('seen') | |
| 56 | +} | |
| 57 | + | |
| 31 | 58 | // Copy buttons |
| 32 | 59 | for (const button of document.querySelectorAll('[data-copy]')) { |
| 33 | 60 | button.addEventListener('click', async () => { |
| @@ -1,6 +1,6 @@ | |||
| 1 | -// Progressive enhancement only: without this file every screenshot is listed and the reel shows the finished project. | 1 | +// Progressive enhancement only: without this file every mockup is listed and the reel shows the finished project. |
| 2 | 2 | ||
| 3 | -// Tour: screenshots as tabs (WAI-ARIA tabs pattern; up/down on the vertical list, left/right on mobile) | 3 | +// Tour: mockups as tabs (WAI-ARIA tabs pattern; up/down on the vertical list, left/right on mobile) |
| 4 | const tabs = [...document.querySelectorAll('.tour-tabs [role="tab"]')] | 4 | const tabs = [...document.querySelectorAll('.tour-tabs [role="tab"]')] |
| 5 | 5 | ||
| 6 | function select(tab, focus) { | 6 | function select(tab, focus) { |
| @@ -16,8 +16,21 @@ function select(tab, focus) { | |||
| 16 | } | 16 | } |
| 17 | } | 17 | } |
| 18 | 18 | ||
| 19 | +// Mockups replay when their tab shows (CSS animations restart when a hidden frame shows); | ||
| 20 | +// a click on the tab already open replays it too. | ||
| 21 | +function replay(tab) { | ||
| 22 | + const frame = document.getElementById(tab.getAttribute('aria-controls')) | ||
| 23 | + for (const animation of frame.getAnimations?.({ subtree: true }) ?? []) { | ||
| 24 | + animation.cancel() | ||
| 25 | + animation.play() | ||
| 26 | + } | ||
| 27 | +} | ||
| 28 | + | ||
| 19 | for (const tab of tabs) { | 29 | for (const tab of tabs) { |
| 20 | - tab.addEventListener('click', () => select(tab, false)) | 30 | + tab.addEventListener('click', () => { |
| 31 | + if (tab.getAttribute('aria-selected') === 'true') replay(tab) | ||
| 32 | + else select(tab, false) | ||
| 33 | + }) | ||
| 21 | tab.addEventListener('keydown', (e) => { | 34 | tab.addEventListener('keydown', (e) => { |
| 22 | const i = tabs.indexOf(tab) | 35 | const i = tabs.indexOf(tab) |
| 23 | const next = { ArrowDown: i + 1, ArrowRight: i + 1, ArrowUp: i - 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key] | 36 | const next = { ArrowDown: i + 1, ArrowRight: i + 1, ArrowUp: i - 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key] |
| @@ -28,6 +41,20 @@ for (const tab of tabs) { | |||
| 28 | } | 41 | } |
| 29 | if (tabs.length) select(tabs[0], false) | 42 | if (tabs.length) select(tabs[0], false) |
| 30 | 43 | ||
| 44 | +// The first mockup waits, paused, until the tour scrolls into view | ||
| 45 | +const tour = document.querySelector('.tour') | ||
| 46 | +if (tour && 'IntersectionObserver' in window) { | ||
| 47 | + const observer = new IntersectionObserver((entries) => { | ||
| 48 | + if (entries.some((e) => e.isIntersecting)) { | ||
| 49 | + observer.disconnect() | ||
| 50 | + tour.classList.add('seen') | ||
| 51 | + } | ||
| 52 | + }, { threshold: 0.4 }) | ||
| 53 | + observer.observe(tour) | ||
| 54 | +} else if (tour) { | ||
| 55 | + tour.classList.add('seen') | ||
| 56 | +} | ||
| 57 | + | ||
| 31 | // Copy buttons | 58 | // Copy buttons |
| 32 | for (const button of document.querySelectorAll('[data-copy]')) { | 59 | for (const button of document.querySelectorAll('[data-copy]')) { |
| 33 | button.addEventListener('click', async () => { | 60 | button.addEventListener('click', async () => { |
modified
site/public/styles.css +482 -6 | @@ -1,5 +1,5 @@ | ||
| 1 | 1 | /* Daryl site. Colors and fonts come from the app (web/src/styles.css, montage/Timeline.vue), |
| 2 | - so the screenshots sit at home. */ | |
| 2 | + so the mockups of its screens look like the app. */ | |
| 3 | 3 | |
| 4 | 4 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); } |
| 5 | 5 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); } |
| @@ -281,7 +281,7 @@ h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; } | ||
| 281 | 281 | to { left: 100%; } |
| 282 | 282 | } |
| 283 | 283 | |
| 284 | -/* ------------------------------------------------------------------ tour: tabs on the left, screenshot on the right */ | |
| 284 | +/* ------------------------------------------------------------------ tour: tabs on the left, a mockup on the right */ | |
| 285 | 285 | .reel + .tour { margin-top: clamp(96px, 12vw, 152px); } |
| 286 | 286 | |
| 287 | 287 | .tour { |
| @@ -315,21 +315,497 @@ h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; } | ||
| 315 | 315 | } |
| 316 | 316 | .tour-tabs button[aria-selected="true"] .tab-title { color: var(--ink); font-weight: 600; } |
| 317 | 317 | .tour-tabs button[aria-selected="true"] .tab-desc { display: block; } |
| 318 | -/* without JS every screenshot is listed, so every description shows */ | |
| 318 | +/* without JS every mockup is listed, so every description shows */ | |
| 319 | 319 | html:not(.js) .tab-desc { display: block; } |
| 320 | 320 | |
| 321 | 321 | .tour-shots { display: grid; gap: 24px; } |
| 322 | 322 | |
| 323 | 323 | .frame { |
| 324 | - aspect-ratio: 2880 / 1800; | |
| 324 | + aspect-ratio: 16 / 10; | |
| 325 | 325 | border-radius: 10px; |
| 326 | 326 | overflow: hidden; |
| 327 | 327 | background: #fff; |
| 328 | 328 | box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(24, 25, 27, 0.35); |
| 329 | 329 | } |
| 330 | -.frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; } | |
| 331 | 330 | |
| 332 | -/* Small screens: titles become a scrolling row above the screenshot */ | |
| 331 | +/* ------------------------------------------------------------------ mockups: the app's screens redrawn in code | |
| 332 | + Stylized, in English, on a made-up project. Everything is sized in em off the frame width (container query | |
| 333 | + units), so a mockup scales like a picture. The base styles are the finished screen; the animations play it | |
| 334 | + from the start when its tab shows (a hidden frame has no running animation, showing it restarts them). | |
| 335 | + No JS or reduced motion: the finished screen. */ | |
| 336 | +.frame { container-type: inline-size; } | |
| 337 | + | |
| 338 | +.mock { | |
| 339 | + --line-strong: #DCDCD7; | |
| 340 | + --dash: #C4C4BF; | |
| 341 | + --red-wash: #FFF5F5; | |
| 342 | + --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='20'%3E%3Cpath d='M0 9v2M2 8v4M4 4.5v11M6 5.5v9M8 5v10M10 6v8M12 7v6M14 4v12M16 4.5v11M18 3.5v13M20 7v6M22 6.5v7M24 4.5v11M26 8.5v3M28 7.5v5M30 5v10M32 4v12M34 7v6M36 5.5v9M38 7.5v5M40 6.5v7M42 5.5v9M44 6v8M46 4v12M48 4v12M50 5v10M52 7v6M54 4v12M56 5v10M58 4v12M60 3v14M62 4.5v11M64 7.5v5M66 9v2M68 5v10M70 7v6M72 4.5v11M74 3.5v13M76 2v16M78 5.5v9M80 6.5v7M82 3v14M84 4.5v11M86 5v10M88 5.5v9M90 8.5v3M92 5v10M94 3.5v13' stroke='%232F9E83' stroke-width='1.2'/%3E%3C/svg%3E"); | |
| 343 | + position: relative; | |
| 344 | + height: 100%; | |
| 345 | + display: flex; flex-direction: column; | |
| 346 | + font-size: 1.45cqw; line-height: 1.4; | |
| 347 | + color: var(--ink); | |
| 348 | + background: #fff; | |
| 349 | + overflow: hidden; | |
| 350 | + user-select: none; | |
| 351 | +} | |
| 352 | +.mock * { box-sizing: border-box; } | |
| 353 | + | |
| 354 | +.m-bar { | |
| 355 | + flex: none; | |
| 356 | + display: flex; align-items: center; gap: 1.1em; | |
| 357 | + height: 3.3em; padding: 0 1.5em; | |
| 358 | + border-bottom: 1px solid var(--line); | |
| 359 | + background: var(--bg); | |
| 360 | +} | |
| 361 | +.m-brand { display: flex; align-items: center; gap: 0.45em; font-weight: 600; } | |
| 362 | +.m-brand::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 2px; background: var(--red); } | |
| 363 | +.m-project { | |
| 364 | + padding: 0.3em 0.8em; | |
| 365 | + border: 1px solid var(--line); border-radius: 4px; | |
| 366 | + background: #fff; font-weight: 500; | |
| 367 | +} | |
| 368 | +.m-path { font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } | |
| 369 | +.m-path b { font-weight: 500; color: var(--ink); } | |
| 370 | +.m-path i { font-style: normal; margin: 0 0.6em; color: var(--dash); } | |
| 371 | + | |
| 372 | +.m-body { flex: 1; min-height: 0; padding: 1.5em; } | |
| 373 | + | |
| 374 | +.m-eyebrow { | |
| 375 | + display: block; | |
| 376 | + font-family: var(--mono); font-size: 0.74em; letter-spacing: 0.06em; text-transform: uppercase; | |
| 377 | + color: var(--faint); | |
| 378 | +} | |
| 379 | + | |
| 380 | +.m-btn { | |
| 381 | + display: inline-flex; align-items: center; | |
| 382 | + height: 2.2em; padding: 0 0.85em; | |
| 383 | + border: 1px solid var(--line-strong); border-radius: 4px; | |
| 384 | + background: #fff; | |
| 385 | + font-size: 0.88em; white-space: nowrap; | |
| 386 | +} | |
| 387 | +.m-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; } | |
| 388 | +.m-btn.red { background: var(--red); border-color: var(--red); color: #fff; } | |
| 389 | + | |
| 390 | +.m-score { font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | |
| 391 | +.m-score.hi { color: var(--red-ink); } | |
| 392 | + | |
| 393 | +@keyframes m-rise { from { opacity: 0; transform: translateY(0.6em); } } | |
| 394 | +@keyframes m-fade { from { opacity: 0; } } | |
| 395 | +@keyframes m-press { 0%, 100% { transform: none; } 40% { transform: scale(0.94); } } | |
| 396 | + | |
| 397 | +/* --- Titles: Daryl's suggestions come in, the two best go up into the A/B test */ | |
| 398 | +.m-titles .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 1.2em; } | |
| 399 | +.m-angle { display: flex; align-items: baseline; gap: 0.8em; font-weight: 500; } | |
| 400 | +.m-angle .m-eyebrow { display: inline; } | |
| 401 | + | |
| 402 | +.m-ab { display: grid; gap: 0.5em; padding: 1em 1.1em 1.1em; border-radius: 6px; background: var(--bg); } | |
| 403 | +.m-ab .m-eyebrow { margin-bottom: 0.2em; } | |
| 404 | +.m-slot { | |
| 405 | + display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; | |
| 406 | + height: 2.9em; padding: 0 1em; | |
| 407 | + border: 1px solid var(--red); border-radius: 5px; | |
| 408 | + background: #fff; | |
| 409 | +} | |
| 410 | +.m-slot > i { font-style: normal; font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | |
| 411 | +.m-slot b { font-size: 1.08em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| 412 | +.m-slot.empty { border: 1px dashed var(--dash); background: transparent; color: var(--faint); } | |
| 413 | + | |
| 414 | +.m-list-wrap { min-height: 0; } | |
| 415 | +.m-list-wrap .m-eyebrow { margin-bottom: 0.5em; } | |
| 416 | +.m-list { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; } | |
| 417 | +.m-list li { | |
| 418 | + display: grid; grid-template-columns: 1fr 2.6em 1.6em; align-items: center; | |
| 419 | + height: 2.5em; padding: 0 0.6em 0 1em; | |
| 420 | + border-top: 1px solid var(--line-soft); | |
| 421 | + white-space: nowrap; | |
| 422 | +} | |
| 423 | +.m-list li:first-child { border-top: 0; } | |
| 424 | +.m-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; } | |
| 425 | +.m-list .m-score { text-align: right; padding-right: 0.8em; } | |
| 426 | +.m-list .m-add { text-align: center; color: var(--faint); } | |
| 427 | +.m-list li.kept { color: var(--faint); } | |
| 428 | +.m-list li.kept .m-add { color: var(--red); } | |
| 429 | + | |
| 430 | +.m-titles .m-list li { animation: m-rise 380ms ease-out both; animation-delay: calc(300ms + var(--i) * 110ms); } | |
| 431 | +.m-titles .m-list .m-score { animation: m-fade 300ms ease-out both; animation-delay: calc(1200ms + var(--i) * 70ms); } | |
| 432 | +.m-titles .m-list li.kept { animation: m-rise 380ms ease-out both, m-pick 900ms ease-out both; animation-delay: calc(300ms + var(--i) * 110ms), var(--at); } | |
| 433 | +.m-titles .m-list li.kept .m-add { animation: m-check 900ms ease-out both; animation-delay: var(--at); } | |
| 434 | +.m-titles .m-slot.fill { animation: m-slot 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--at) + 350ms); } | |
| 435 | +.m-titles .m-slot.fill > * { animation: m-fade 400ms ease-out both; animation-delay: calc(var(--at) + 450ms); } | |
| 436 | +.m-titles .m-ab .m-eyebrow b { font-weight: inherit; } | |
| 437 | + | |
| 438 | +@keyframes m-pick { | |
| 439 | + 0% { color: var(--ink); background: transparent; } | |
| 440 | + 25%, 55% { color: var(--ink); background: var(--red-wash); } | |
| 441 | +} | |
| 442 | +@keyframes m-check { | |
| 443 | + 0%, 30% { color: var(--faint); transform: none; } | |
| 444 | + 40% { transform: scale(1.5); color: var(--red); } | |
| 445 | +} | |
| 446 | +@keyframes m-slot { | |
| 447 | + from { border-color: var(--dash); border-style: dashed; background: transparent; transform: translateY(0.4em); } | |
| 448 | +} | |
| 449 | + | |
| 450 | +/* --- Rough cut: bad takes, then silences, are struck from the transcript and close up on the timeline */ | |
| 451 | +.m-cut .m-body { display: grid; grid-template-rows: 1fr auto auto; gap: 1em; } | |
| 452 | +.m-transcript { | |
| 453 | + min-height: 0; overflow: hidden; | |
| 454 | + padding: 0.9em 1.2em; | |
| 455 | + border: 1px solid var(--line); border-radius: 6px; | |
| 456 | +} | |
| 457 | +.m-file { font-family: var(--mono); font-size: 0.78em; font-weight: 500; color: var(--muted); margin-bottom: 0.6em; } | |
| 458 | +.m-say { display: grid; grid-template-columns: 3.6em 1fr auto; align-items: baseline; gap: 0.2em; padding: 0.32em 0; } | |
| 459 | +.m-say time { font-family: var(--mono); font-size: 0.8em; color: var(--faint); } | |
| 460 | +.m-say em { | |
| 461 | + font-style: normal; font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; | |
| 462 | + padding: 0.15em 0.5em; border-radius: 3px; | |
| 463 | +} | |
| 464 | +.m-say.bad span, .m-say.gap span { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--faint); } | |
| 465 | +.m-say.bad span { text-decoration-color: var(--red); } | |
| 466 | +.m-say.bad em { background: #FDE3E3; color: var(--red-ink); } | |
| 467 | +.m-say.gap span { font-family: var(--mono); font-size: 0.85em; } | |
| 468 | +.m-say.gap em { background: var(--line-soft); color: var(--muted); } | |
| 469 | + | |
| 470 | +.m-tools { display: flex; align-items: center; gap: 0.5em; } | |
| 471 | +.m-tools .m-stat { margin-left: auto; font-family: var(--mono); font-size: 0.82em; color: var(--muted); } | |
| 472 | +.m-tools .m-stat b { font-weight: 500; color: var(--ink); } | |
| 473 | + | |
| 474 | +.m-tl { display: grid; grid-template-columns: 2.4em 1fr; padding: 0.6em 0.6em 0.6em 0.9em; border: 1px solid var(--line); border-radius: 6px; } | |
| 475 | +.m-tl-names { display: grid; grid-template-rows: 4.2em 2.9em; align-items: center; font-size: 0.85em; color: var(--muted); } | |
| 476 | +.m-track { position: relative; display: flex; height: 6.2em; } | |
| 477 | +.m-seg { flex: var(--g) 1 0; display: grid; grid-template-rows: 1fr 0.68fr; gap: 0.25em; margin-right: 2px; min-width: 0; } | |
| 478 | +.m-seg::before { content: ""; border-radius: 2px; background: linear-gradient(#55565a 0 38%, #3d3e42 38%); } | |
| 479 | +.m-seg::after { content: ""; background: var(--wave) left center / auto 100% repeat-x; opacity: 0.9; } | |
| 480 | +.m-seg.x { flex-grow: 0; margin-right: 0; } | |
| 481 | +.m-seg.bad::before { background: repeating-linear-gradient(-45deg, #F3B9BB 0 4px, #FBE0E1 4px 8px); } | |
| 482 | +.m-seg.bad::after { filter: hue-rotate(155deg) saturate(1.6); opacity: 0.6; } | |
| 483 | +.m-seg.gap::before { background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 4px, var(--hatch-b) 4px 8px); } | |
| 484 | +.m-seg.gap::after { background: linear-gradient(var(--music), var(--music)) left center / 100% 1px no-repeat; opacity: 0.6; } | |
| 485 | +.m-track .m-head { position: absolute; top: -0.3em; bottom: -0.3em; left: 0; width: 2px; background: var(--red); } | |
| 486 | + | |
| 487 | +.m-cut .m-say { animation: m-rise 380ms ease-out both; animation-delay: calc(250ms + var(--i) * 90ms); } | |
| 488 | +.m-cut .m-say.bad span, .m-cut .m-say.bad em { animation: m-strike 500ms ease-out both; animation-delay: 1500ms; } | |
| 489 | +.m-cut .m-say.gap span, .m-cut .m-say.gap em { animation: m-strike 500ms ease-out both; animation-delay: 2700ms; } | |
| 490 | +.m-cut .m-tools .b1 { animation: m-press 300ms ease-out both; animation-delay: 1300ms; } | |
| 491 | +.m-cut .m-tools .b2 { animation: m-press 300ms ease-out both; animation-delay: 2500ms; } | |
| 492 | +.m-cut .m-seg.bad { animation: m-close 700ms cubic-bezier(.6,0,.2,1) both; animation-delay: 1550ms; } | |
| 493 | +.m-cut .m-seg.gap { animation: m-close 600ms cubic-bezier(.6,0,.2,1) both; animation-delay: 2750ms; } | |
| 494 | +.m-cut .m-stat { animation: m-fade 400ms ease-out both; animation-delay: 3400ms; } | |
| 495 | + | |
| 496 | +@keyframes m-close { from { flex-grow: var(--g); margin-right: 2px; } } | |
| 497 | +@keyframes m-strike { | |
| 498 | + from { text-decoration-color: transparent; color: var(--ink); background: transparent; } | |
| 499 | +} | |
| 500 | + | |
| 501 | +/* --- Editing: ask Daryl, a title card and its whoosh land on the timeline and on the preview */ | |
| 502 | +.m-edit .m-body { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; gap: 1em 1.2em; } | |
| 503 | + | |
| 504 | +.m-preview { display: grid; grid-template-rows: 1fr auto; gap: 0.6em; min-height: 0; } | |
| 505 | +.m-shot { | |
| 506 | + position: relative; overflow: hidden; | |
| 507 | + border-radius: 5px; | |
| 508 | + background: | |
| 509 | + radial-gradient(circle at 78% 30%, rgba(255, 196, 120, 0.55), transparent 22%), | |
| 510 | + linear-gradient(160deg, #6b5446, #3a2f2a 60%, #2a2321); | |
| 511 | +} | |
| 512 | +/* a presenter in silhouette: a head and shoulders, out of focus */ | |
| 513 | +.m-shot::before, .m-shot::after { content: ""; position: absolute; left: 50%; background: #17120f; filter: blur(2px); } | |
| 514 | +.m-shot::before { top: 22%; width: 17%; aspect-ratio: 0.85; margin-left: -8.5%; border-radius: 50%; } | |
| 515 | +.m-shot::after { bottom: -18%; width: 52%; height: 48%; margin-left: -26%; border-radius: 48% 48% 0 0; } | |
| 516 | +.m-card { | |
| 517 | + position: absolute; z-index: 1; left: 6%; bottom: 12%; | |
| 518 | + padding: 0.6em 0.9em 0.7em; | |
| 519 | + border-radius: 4px; | |
| 520 | + background: #fff; | |
| 521 | + box-shadow: 0 0.6em 1.6em -0.6em rgba(0, 0, 0, 0.5); | |
| 522 | +} | |
| 523 | +.m-card small { display: block; font-family: var(--mono); font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } | |
| 524 | +.m-card strong { display: block; font-size: 1.7em; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } | |
| 525 | +.m-card strong u { text-decoration: none; background: linear-gradient(var(--red), var(--red)) left 92% / 100% 0.12em no-repeat; } | |
| 526 | +.m-controls { display: flex; align-items: center; gap: 0.4em; font-family: var(--mono); font-size: 0.9em; color: var(--muted); } | |
| 527 | +.m-controls .m-btn { font-family: var(--sans); } | |
| 528 | +.m-controls .m-btn.dark { padding: 0 1.1em; } | |
| 529 | +.m-controls span:last-child { margin-left: 0.4em; } | |
| 530 | + | |
| 531 | +.m-chat { display: flex; flex-direction: column; gap: 0.6em; min-height: 0; padding: 0.8em; border: 1px solid var(--line); border-radius: 6px; } | |
| 532 | +.m-chat-head { padding-bottom: 0.5em; border-bottom: 1px solid var(--line); font-weight: 600; } | |
| 533 | +.m-msg { max-width: 92%; padding: 0.55em 0.75em; border-radius: 6px; font-size: 0.95em; } | |
| 534 | +.m-msg.me { align-self: flex-end; background: var(--ink); color: #fff; } | |
| 535 | +.m-msg.daryl { align-self: flex-start; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } | |
| 536 | +.m-msg.daryl small { display: block; margin-top: 0.3em; font-family: var(--mono); font-size: 0.78em; color: var(--faint); } | |
| 537 | +.m-input { margin-top: auto; padding: 0.6em 0.75em; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 0.92em; color: var(--faint); } | |
| 538 | + | |
| 539 | +.m-lanes { | |
| 540 | + --u: 20; | |
| 541 | + grid-column: 1 / -1; | |
| 542 | + position: relative; | |
| 543 | + display: grid; grid-template-columns: 5.2em 1fr; row-gap: 0.25em; | |
| 544 | + padding: 0.6em 0.8em; | |
| 545 | + border: 1px solid var(--line); border-radius: 6px; | |
| 546 | +} | |
| 547 | +.m-lanes > span { font-size: 0.8em; line-height: 1.85em; color: var(--muted); } | |
| 548 | +.m-lanes ul { position: relative; height: 1.5em; } | |
| 549 | +.m-lanes li { | |
| 550 | + position: absolute; top: 0; bottom: 0; | |
| 551 | + left: calc(var(--a) / var(--u) * 100%); width: calc(var(--b) / var(--u) * 100% - 2px); | |
| 552 | + display: flex; align-items: center; padding: 0 0.4em; | |
| 553 | + border-radius: 3px; | |
| 554 | + background: var(--c); | |
| 555 | + color: #fff; font-size: 0.72em; font-weight: 500; white-space: nowrap; overflow: hidden; | |
| 556 | +} | |
| 557 | +.m-lanes .ch li { background: var(--line-soft); color: var(--ink-2); box-shadow: inset 2px 0 0 var(--faint); } | |
| 558 | +.m-lanes .vid li { background: linear-gradient(#55565a 0 38%, #3d3e42 38%); } | |
| 559 | +.m-lanes .voice li { background: var(--wave) left center / auto 100% repeat-x; border-radius: 0; } | |
| 560 | +.m-lanes .zm li { color: var(--ink); } | |
| 561 | +.m-lanes .new { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c); } | |
| 562 | +/* at 8.2 of 20, where the title card starts: padding + names column + its share of the lanes */ | |
| 563 | +.m-lanes .m-head { | |
| 564 | + position: absolute; top: 0.3em; bottom: 0.3em; | |
| 565 | + left: calc(6em + (100% - 6.8em) * 8.2 / 20); | |
| 566 | + width: 2px; background: var(--red); | |
| 567 | + font-size: 1em; | |
| 568 | +} | |
| 569 | + | |
| 570 | +.m-edit .m-msg.me { animation: m-rise 400ms ease-out both; animation-delay: 400ms; } | |
| 571 | +.m-edit .m-msg.daryl { animation: m-rise 400ms ease-out both; animation-delay: 1900ms; } | |
| 572 | +.m-edit .m-typing { animation: m-typing 1100ms ease-out both; animation-delay: 800ms; } | |
| 573 | +.m-edit .m-lanes .new { animation: m-land 600ms cubic-bezier(.2,.8,.2,1.2) both; animation-delay: 2300ms; transform-origin: left center; } | |
| 574 | +.m-edit .m-lanes .new + .new { animation-delay: 2450ms; } | |
| 575 | +.m-edit .m-card { animation: m-card 650ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 2700ms; } | |
| 576 | +.m-edit .m-card u { animation: m-underline 500ms ease-out both; animation-delay: 3200ms; } | |
| 577 | + | |
| 578 | +.m-reply { position: relative; display: flex; } | |
| 579 | +.m-typing { | |
| 580 | + position: absolute; top: 0; left: 0; | |
| 581 | + display: flex; gap: 0.3em; padding: 0.75em 0.8em; | |
| 582 | + border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); | |
| 583 | + opacity: 0; | |
| 584 | +} | |
| 585 | +.m-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--faint); } | |
| 586 | +.m-edit .m-typing i { animation: m-dot 600ms ease-in-out infinite alternate; } | |
| 587 | +.m-edit .m-typing i:nth-child(2) { animation-delay: 200ms; } | |
| 588 | +.m-edit .m-typing i:nth-child(3) { animation-delay: 400ms; } | |
| 589 | +@keyframes m-typing { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } } | |
| 590 | +@keyframes m-dot { to { opacity: 0.3; } } | |
| 591 | + | |
| 592 | +/* --- Made-up thumbnails: a color, a few big words and a presenter in silhouette, sized off their own width */ | |
| 593 | +.m-thumb { | |
| 594 | + position: relative; overflow: hidden; | |
| 595 | + aspect-ratio: 16 / 9; | |
| 596 | + border-radius: 3px; | |
| 597 | + container-type: inline-size; | |
| 598 | + background: var(--tb); | |
| 599 | + color: #fff; | |
| 600 | +} | |
| 601 | +.m-thumb > b { | |
| 602 | + position: absolute; left: 7cqw; top: 8cqw; z-index: 1; | |
| 603 | + max-width: 58cqw; | |
| 604 | + font-size: 13cqw; font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; | |
| 605 | +} | |
| 606 | +.m-person { position: absolute; right: 7cqw; bottom: 0; width: 34cqw; height: 40cqw; } | |
| 607 | +.m-person::before, .m-person::after { content: ""; position: absolute; background: var(--pc); } | |
| 608 | +.m-person::before { left: 50%; bottom: 21cqw; width: 14cqw; height: 16cqw; margin-left: -7cqw; border-radius: 50%; } | |
| 609 | +.m-person::after { left: 0; right: 0; bottom: -5cqw; height: 25cqw; border-radius: 50% 50% 0 0; } | |
| 610 | +.m-tag { | |
| 611 | + position: absolute; left: 3cqw; bottom: 3cqw; z-index: 1; | |
| 612 | + padding: 1.6cqw 2.6cqw; border-radius: 1.5cqw; | |
| 613 | + background: var(--red); color: #fff; | |
| 614 | + font: 600 7cqw/1 var(--mono); | |
| 615 | +} | |
| 616 | +.m-tag.r { left: auto; right: 3cqw; background: rgba(24, 25, 27, 0.85); } | |
| 617 | +.t-days { --tb: linear-gradient(135deg, #E5484D, #8E1D24); --pc: #3a1013; } | |
| 618 | +.t-numbers { --tb: #18191B; --pc: #3d3e42; } | |
| 619 | +.t-numbers > b { color: var(--zoom); } | |
| 620 | +.t-friday { --tb: #F2EFE8; --pc: #CFC8BA; color: var(--ink); } | |
| 621 | +.t-friday > b s { text-decoration-color: var(--red); text-decoration-thickness: 1.6cqw; } | |
| 622 | +.t-juniors { --tb: linear-gradient(135deg, #3B82C4, #1F4F7D); --pc: #163a5c; } | |
| 623 | +.t-salary { --tb: linear-gradient(135deg, #2F9E83, #17604F); --pc: #0f3d32; } | |
| 624 | +.t-empty { background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 6px, var(--hatch-b) 6px 12px); } | |
| 625 | + | |
| 626 | +/* --- Projects: every video with its progress, the last one first */ | |
| 627 | +.m-projects .m-body { display: flex; flex-direction: column; gap: 0.9em; } | |
| 628 | +.m-row { display: flex; align-items: center; justify-content: space-between; } | |
| 629 | +.m-h { font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; } | |
| 630 | +.m-resume { display: grid; grid-template-columns: 27% 1fr; gap: 1.2em; padding: 0.9em; border: 1px solid var(--line); border-radius: 6px; } | |
| 631 | +.m-resume h4 { margin: 0; font-size: 1.2em; font-weight: 600; } | |
| 632 | +.m-resume p { margin-top: 0.3em; font-size: 0.92em; color: var(--muted); } | |
| 633 | +.m-resume .m-steps { margin-top: 0.8em; } | |
| 634 | +.m-resume .m-row { justify-content: flex-start; gap: 1em; margin-top: 0.8em; } | |
| 635 | +.m-meta { font-family: var(--mono); font-size: 0.75em; color: var(--faint); } | |
| 636 | +.m-steps { display: flex; gap: 2px; } | |
| 637 | +.m-steps i { flex: 1; height: 0.32em; background: var(--line); } | |
| 638 | +.m-steps i.d { background: var(--ink); } | |
| 639 | +.m-steps i.w { background: var(--red); } | |
| 640 | +.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; } | |
| 641 | +.m-proj { display: grid; gap: 0.45em; align-content: start; padding: 0.55em; border: 1px solid var(--line); border-radius: 6px; } | |
| 642 | +.m-proj strong { font-size: 0.9em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| 643 | + | |
| 644 | +.m-projects .m-resume, .m-projects .m-proj { animation: m-rise 420ms ease-out both; animation-delay: calc(200ms + var(--i) * 120ms); } | |
| 645 | +.m-projects .m-steps { animation: m-wipe 900ms cubic-bezier(.4,0,.2,1) both; animation-delay: calc(700ms + var(--i) * 120ms); } | |
| 646 | +.m-projects .m-resume .dark { animation: m-press 300ms ease-out both; animation-delay: 2400ms; } | |
| 647 | +@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } | |
| 648 | + | |
| 649 | +/* --- Angle: the research comes in, then the angles; one is kept */ | |
| 650 | +.m-angle-step .m-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2em; } | |
| 651 | +.m-col { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; } | |
| 652 | +.m-brief { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6em 1.2em; padding: 0.9em 1em; border-radius: 6px; background: var(--bg); } | |
| 653 | +.m-brief .m-eyebrow { grid-column: 1 / -1; } | |
| 654 | +.m-brief dt { font-size: 0.8em; color: var(--muted); } | |
| 655 | +.m-brief dd { margin: 0.1em 0 0; } | |
| 656 | +.m-angles { display: grid; gap: 0.55em; } | |
| 657 | +.m-angle-card { position: relative; display: grid; grid-template-columns: 1.4em 1fr auto; gap: 0 0.4em; padding: 0.75em 0.9em; border: 1px solid var(--line); border-radius: 6px; background: #fff; } | |
| 658 | +.m-angle-card > i { font-style: normal; font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | |
| 659 | +.m-angle-card strong { font-weight: 600; } | |
| 660 | +.m-angle-card p { grid-column: 2; margin-top: 0.15em; font-size: 0.88em; color: var(--muted); } | |
| 661 | +.m-angle-card .m-btn { grid-row: 1 / 3; grid-column: 3; align-self: center; } | |
| 662 | +.m-angle-card.kept { border-color: var(--red); } | |
| 663 | +.m-angle-card.kept .m-btn { background: var(--red); border-color: var(--red); color: #fff; } | |
| 664 | + | |
| 665 | +.m-panel { display: flex; flex-direction: column; gap: 0.55em; padding: 0.8em; border: 1px solid var(--line); border-radius: 6px; min-height: 0; } | |
| 666 | +.m-panel-head { padding-bottom: 0.5em; border-bottom: 1px solid var(--line); font-weight: 600; } | |
| 667 | +.m-sources { display: grid; gap: 0.35em; font-size: 0.88em; } | |
| 668 | +.m-sources li { display: grid; grid-template-columns: 1.3em 1fr; color: var(--ink-2); } | |
| 669 | +.m-sources li::before { content: "✓"; color: var(--music); font-weight: 600; } | |
| 670 | +.m-panel .m-meta { margin-top: auto; } | |
| 671 | + | |
| 672 | +.m-angle-step .m-msg.daryl { animation: m-rise 400ms ease-out both; animation-delay: 200ms; } | |
| 673 | +.m-angle-step .m-sources li { animation: m-rise 350ms ease-out both; animation-delay: calc(600ms + var(--i) * 220ms); } | |
| 674 | +.m-angle-step .m-panel .m-meta { animation: m-fade 400ms ease-out both; animation-delay: 1900ms; } | |
| 675 | +.m-angle-step .m-msg.daryl + .m-sources + .m-msg { animation: m-rise 400ms ease-out both; animation-delay: 2600ms; } | |
| 676 | +.m-angle-step .m-angle-card { animation: m-rise 420ms ease-out both; animation-delay: calc(2000ms + var(--i) * 160ms); } | |
| 677 | +.m-angle-step .m-angle-card.kept { animation: m-rise 420ms ease-out both, m-keep 600ms ease-out both; animation-delay: calc(2000ms + var(--i) * 160ms), 3100ms; } | |
| 678 | +.m-angle-step .m-angle-card.kept .m-btn { animation: m-keep-btn 500ms ease-out both; animation-delay: 3000ms; } | |
| 679 | +.m-swap { display: inline-grid; } | |
| 680 | +.m-swap > span { grid-area: 1 / 1; text-align: center; } | |
| 681 | +.m-swap > span:first-child { opacity: 0; } | |
| 682 | +.m-angle-step .m-swap > span:first-child { animation: m-out 1ms linear both; animation-delay: 3120ms; } | |
| 683 | +.m-angle-step .m-swap > span:last-child { animation: m-fade 1ms linear both; animation-delay: 3120ms; } | |
| 684 | +@keyframes m-out { from { opacity: 1; } } | |
| 685 | +@keyframes m-keep { from { border-color: var(--line); } } | |
| 686 | +@keyframes m-keep-btn { 0% { background: #fff; border-color: var(--line-strong); color: var(--ink); } 40% { transform: scale(0.92); } } | |
| 687 | + | |
| 688 | +/* --- Thumbnail: a variant is generated from the brief, then goes up into the empty slot */ | |
| 689 | +.m-thumbs .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 0.9em; } | |
| 690 | +.m-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; margin-top: 0.4em; } | |
| 691 | +.m-vslot { display: grid; gap: 0.35em; } | |
| 692 | +.m-vslot .m-select { | |
| 693 | + height: 2em; padding: 0 0.6em; border: 1px solid var(--line-strong); border-radius: 4px; | |
| 694 | + font-size: 0.8em; line-height: 1.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |
| 695 | +} | |
| 696 | +.m-hole { position: relative; border: 1px dashed var(--dash); border-radius: 4px; } | |
| 697 | +.m-hole::before { content: "+ New variant"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85em; color: var(--faint); } | |
| 698 | +.m-hole .m-thumb { position: relative; margin: -1px; } | |
| 699 | +.m-variant { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; padding: 1em; border: 1px solid var(--line); border-radius: 6px; } | |
| 700 | +.m-field { display: grid; gap: 0.3em; align-content: start; } | |
| 701 | +.m-field + .m-field { margin-top: 0.7em; } | |
| 702 | +.m-field label { font-size: 0.85em; font-weight: 600; } | |
| 703 | +.m-field div { padding: 0.5em 0.7em; border: 1px solid var(--line-input, #CFCFCA); border-radius: 4px; font-size: 0.9em; } | |
| 704 | +.m-gen { position: relative; width: 78%; margin-top: 0.4em; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 6px, var(--hatch-b) 6px 12px); aspect-ratio: 16 / 9; } | |
| 705 | +.m-gen .m-tag { font-size: 5cqw; } | |
| 706 | +.m-gen .m-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--red); } | |
| 707 | + | |
| 708 | +.m-thumbs .m-gen { animation: m-shimmer 900ms ease-in-out 2 alternate both; animation-delay: 200ms; } | |
| 709 | +.m-thumbs .m-gen .m-thumb { animation: m-reveal 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 1900ms; } | |
| 710 | +.m-thumbs .m-gen .m-tag.r { animation: m-fade 300ms ease-out both; animation-delay: 2500ms; } | |
| 711 | +.m-thumbs .m-hole .m-thumb, .m-thumbs .m-hole + .m-select { animation: m-reveal 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 3000ms; } | |
| 712 | +@keyframes m-shimmer { to { opacity: 0.55; } } | |
| 713 | +@keyframes m-reveal { from { opacity: 0; transform: scale(0.94); } } | |
| 714 | + | |
| 715 | +/* --- Script: the draft writes itself, then the roast scores it */ | |
| 716 | +.m-script .m-body { display: grid; grid-template-columns: 0.8fr 2fr 1.15fr; gap: 1.2em; } | |
| 717 | +.m-outline { display: grid; gap: 0.15em; align-content: start; } | |
| 718 | +.m-outline .m-eyebrow { margin-bottom: 0.4em; } | |
| 719 | +.m-outline li { display: flex; justify-content: space-between; padding: 0.35em 0.6em; border-radius: 4px; font-size: 0.9em; } | |
| 720 | +.m-outline li span { font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | |
| 721 | +.m-outline li.on { background: var(--bg); box-shadow: inset 2px 0 0 var(--red); font-weight: 500; } | |
| 722 | +.m-outline .m-meta { margin-top: 0.8em; padding-left: 0.6em; } | |
| 723 | +.m-doc { padding: 0.9em 1.2em; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } | |
| 724 | +.m-doc .m-eyebrow { margin-bottom: 0.8em; } | |
| 725 | +.m-doc h5 { margin: 0 0 0.4em; font: 500 0.75em/1.4 var(--mono); letter-spacing: 0.06em; color: var(--red-ink); } | |
| 726 | +.m-doc p { margin-bottom: 0.65em; font-size: 0.98em; line-height: 1.55; } | |
| 727 | +.m-doc p.visual { font-family: var(--mono); font-size: 0.8em; color: var(--motion); } | |
| 728 | +.m-roast { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em; border: 1px solid var(--line); border-radius: 6px; } | |
| 729 | +.m-grade { display: flex; align-items: baseline; gap: 0.25em; } | |
| 730 | +.m-grade strong { font-size: 2.6em; font-weight: 600; line-height: 1; letter-spacing: -0.03em; } | |
| 731 | +.m-grade span { font-family: var(--mono); color: var(--faint); } | |
| 732 | +.m-roast p { font-weight: 500; } | |
| 733 | +.m-curve { display: block; width: 100%; height: 4.2em; margin-top: 0.4em; overflow: visible; } | |
| 734 | +.m-curve path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } | |
| 735 | +.m-curve line { stroke: var(--line); vector-effect: non-scaling-stroke; } | |
| 736 | +.m-remarks { display: grid; gap: 0.4em; font-size: 0.86em; color: var(--ink-2); } | |
| 737 | +.m-remarks li { display: grid; grid-template-columns: 1em 1fr; } | |
| 738 | +.m-remarks li::before { content: ""; width: 0.4em; height: 0.4em; margin-top: 0.5em; border-radius: 50%; background: var(--red); } | |
| 739 | + | |
| 740 | +.m-script .m-doc p { animation: m-write 700ms steps(14) both; animation-delay: calc(250ms + var(--i) * 450ms); } | |
| 741 | +.m-script .m-roast > * { animation: m-rise 400ms ease-out both; animation-delay: calc(3000ms + var(--i) * 150ms); } | |
| 742 | +.m-script .m-curve { animation: m-wipe 1000ms ease-out both; animation-delay: 3500ms; } | |
| 743 | +@keyframes m-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } | |
| 744 | + | |
| 745 | +/* --- Storyboard: beats land on the words they illustrate */ | |
| 746 | +.m-story .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 0.8em; } | |
| 747 | +.m-story .m-row { justify-content: flex-start; gap: 0.6em; font-size: 0.92em; } | |
| 748 | +.m-story .m-row strong { font-weight: 600; margin-right: 0.4em; } | |
| 749 | +.m-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15em 0.65em; border: 1px solid var(--c); border-radius: 99px; font-size: 0.9em; } | |
| 750 | +.m-chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--c); } | |
| 751 | +.m-chip b { font-weight: 600; } | |
| 752 | +.m-strip { position: relative; height: 1.9em; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); } | |
| 753 | +.m-strip i { position: absolute; top: 0.45em; bottom: 0.45em; left: var(--x); width: var(--w, 0.9%); border-radius: 2px; background: var(--c, var(--motion)); } | |
| 754 | +.m-strip i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); } | |
| 755 | +.m-beats { display: grid; gap: 0.7em; align-content: start; min-height: 0; } | |
| 756 | +.m-beat { display: grid; grid-template-columns: 5.6em 1fr 10em; gap: 1.1em; padding: 0.8em 1em; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 6px; } | |
| 757 | +.m-beat-meta { display: grid; gap: 0.3em; align-content: start; } | |
| 758 | +.m-beat-meta strong { font-family: var(--mono); font-weight: 500; } | |
| 759 | +.m-beat-meta .m-chip { justify-self: start; font-size: 0.78em; } | |
| 760 | +.m-beat q { display: block; margin: 0.2em 0 0.55em; font-style: italic; color: var(--ink-2); quotes: "“" "”"; } | |
| 761 | +.m-beat mark { | |
| 762 | + padding: 0 0.1em; color: inherit; | |
| 763 | + background: linear-gradient(color-mix(in oklch, var(--motion) 22%, transparent), color-mix(in oklch, var(--motion) 22%, transparent)) left / 100% 100% no-repeat; | |
| 764 | +} | |
| 765 | +.m-beat p { font-size: 0.92em; } | |
| 766 | +.m-pos { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 0.8fr 2fr 0.8fr; gap: 0.3em; aspect-ratio: 16 / 10; padding: 0.4em; border-radius: 4px; background: var(--bg); } | |
| 767 | +.m-pos i { border: 1px dashed var(--dash); border-radius: 2px; } | |
| 768 | +.m-pos i.band { grid-column: 1 / -1; } | |
| 769 | +.m-pos i.on { border: 0; background: var(--motion); } | |
| 770 | +.m-pos i.on.z { background: var(--zoom); } | |
| 771 | +.m-beat .m-eyebrow b { font-family: var(--sans); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); } | |
| 772 | + | |
| 773 | +.m-story .m-strip i { animation: m-drop 350ms ease-out both; animation-delay: calc(200ms + var(--i, 0) * 60ms); } | |
| 774 | +.m-story .m-beat { animation: m-rise 420ms ease-out both; animation-delay: calc(900ms + var(--i) * 900ms); } | |
| 775 | +.m-story .m-beat mark { animation: m-mark 450ms ease-out both; animation-delay: calc(1400ms + var(--i) * 900ms); } | |
| 776 | +.m-story .m-beat p, .m-story .m-beat .m-pos i.on { animation: m-fade 400ms ease-out both; animation-delay: calc(1750ms + var(--i) * 900ms); } | |
| 777 | +@keyframes m-drop { from { opacity: 0; transform: translateY(-0.5em); } } | |
| 778 | +@keyframes m-mark { from { background-size: 0 100%; } } | |
| 779 | + | |
| 780 | +/* --- Details: everything checked, then the upload */ | |
| 781 | +.m-details .m-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2em; } | |
| 782 | +.m-variants { display: grid; gap: 0.45em; margin-top: 0.4em; } | |
| 783 | +.m-variants li { display: grid; grid-template-columns: 6.4em 1fr; align-items: center; gap: 0.8em; font-weight: 500; font-size: 0.92em; } | |
| 784 | +.m-desc { margin-top: 0.4em; padding: 0.7em 0.9em; border: 1px solid var(--line-input, #CFCFCA); border-radius: 4px; font-size: 0.88em; color: var(--ink-2); } | |
| 785 | +.m-desc ol { margin-top: 0.5em; font-family: var(--mono); font-size: 0.92em; color: var(--muted); } | |
| 786 | +.m-checks { display: grid; gap: 0.5em; font-size: 0.92em; } | |
| 787 | +.m-checks li { display: grid; grid-template-columns: 1.5em 1fr; } | |
| 788 | +.m-checks li::before { content: "✓"; display: grid; place-items: center; width: 1.15em; height: 1.15em; margin-top: 0.15em; border-radius: 50%; background: var(--music); color: #fff; font-size: 0.75em; font-weight: 600; } | |
| 789 | +.m-upload { display: grid; gap: 0.5em; margin-top: auto; } | |
| 790 | +.m-upload .m-btn { justify-content: center; height: 2.5em; font-size: 0.95em; } | |
| 791 | +.m-bar-track { height: 0.35em; border-radius: 99px; background: var(--line-soft); overflow: hidden; } | |
| 792 | +.m-bar-track i { display: block; height: 100%; background: var(--red); transform-origin: left; } | |
| 793 | +.m-done { display: flex; align-items: center; gap: 0.5em; font-size: 0.88em; color: var(--muted); } | |
| 794 | +.m-done::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--music); } | |
| 795 | + | |
| 796 | +.m-details .m-checks li { animation: m-rise 300ms ease-out both; animation-delay: calc(300ms + var(--i) * 260ms); } | |
| 797 | +.m-details .m-upload .m-btn { animation: m-press 300ms ease-out both; animation-delay: 2000ms; } | |
| 798 | +.m-details .m-bar-track i { animation: m-grow 1300ms cubic-bezier(.4,0,.2,1) both; animation-delay: 2200ms; } | |
| 799 | +.m-details .m-done { animation: m-fade 400ms ease-out both; animation-delay: 3500ms; } | |
| 800 | +@keyframes m-grow { from { transform: scaleX(0); } } | |
| 801 | + | |
| 802 | +/* the first screen waits for the tour to scroll into view */ | |
| 803 | +.js .tour:not(.seen) .mock * { animation-play-state: paused; } | |
| 804 | +@keyframes m-land { from { opacity: 0; transform: scaleX(0); } } | |
| 805 | +@keyframes m-card { from { opacity: 0; transform: translateY(1.2em) scale(0.96); } } | |
| 806 | +@keyframes m-underline { from { background-size: 0 0.12em; } } | |
| 807 | + | |
| 808 | +/* Small screens: titles become a scrolling row above the mockup */ | |
| 333 | 809 | @media (max-width: 900px) { |
| 334 | 810 | .tour { grid-template-columns: 1fr; gap: 16px; } |
| 335 | 811 | .tour-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 1px var(--gutter); } |
| @@ -1,5 +1,5 @@ | |||
| 1 | /* Daryl site. Colors and fonts come from the app (web/src/styles.css, montage/Timeline.vue), | 1 | /* Daryl site. Colors and fonts come from the app (web/src/styles.css, montage/Timeline.vue), |
| 2 | - so the screenshots sit at home. */ | 2 | + so the mockups of its screens look like the app. */ |
| 3 | 3 | ||
| 4 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); } | 4 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); } |
| 5 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); } | 5 | @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); } |
| @@ -281,7 +281,7 @@ h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; } | |||
| 281 | to { left: 100%; } | 281 | to { left: 100%; } |
| 282 | } | 282 | } |
| 283 | 283 | ||
| 284 | -/* ------------------------------------------------------------------ tour: tabs on the left, screenshot on the right */ | 284 | +/* ------------------------------------------------------------------ tour: tabs on the left, a mockup on the right */ |
| 285 | .reel + .tour { margin-top: clamp(96px, 12vw, 152px); } | 285 | .reel + .tour { margin-top: clamp(96px, 12vw, 152px); } |
| 286 | 286 | ||
| 287 | .tour { | 287 | .tour { |
| @@ -315,21 +315,497 @@ h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; } | |||
| 315 | } | 315 | } |
| 316 | .tour-tabs button[aria-selected="true"] .tab-title { color: var(--ink); font-weight: 600; } | 316 | .tour-tabs button[aria-selected="true"] .tab-title { color: var(--ink); font-weight: 600; } |
| 317 | .tour-tabs button[aria-selected="true"] .tab-desc { display: block; } | 317 | .tour-tabs button[aria-selected="true"] .tab-desc { display: block; } |
| 318 | -/* without JS every screenshot is listed, so every description shows */ | 318 | +/* without JS every mockup is listed, so every description shows */ |
| 319 | html:not(.js) .tab-desc { display: block; } | 319 | html:not(.js) .tab-desc { display: block; } |
| 320 | 320 | ||
| 321 | .tour-shots { display: grid; gap: 24px; } | 321 | .tour-shots { display: grid; gap: 24px; } |
| 322 | 322 | ||
| 323 | .frame { | 323 | .frame { |
| 324 | - aspect-ratio: 2880 / 1800; | 324 | + aspect-ratio: 16 / 10; |
| 325 | border-radius: 10px; | 325 | border-radius: 10px; |
| 326 | overflow: hidden; | 326 | overflow: hidden; |
| 327 | background: #fff; | 327 | background: #fff; |
| 328 | box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(24, 25, 27, 0.35); | 328 | box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(24, 25, 27, 0.35); |
| 329 | } | 329 | } |
| 330 | -.frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; } | ||
| 331 | 330 | ||
| 332 | -/* Small screens: titles become a scrolling row above the screenshot */ | 331 | +/* ------------------------------------------------------------------ mockups: the app's screens redrawn in code |
| 332 | + Stylized, in English, on a made-up project. Everything is sized in em off the frame width (container query | ||
| 333 | + units), so a mockup scales like a picture. The base styles are the finished screen; the animations play it | ||
| 334 | + from the start when its tab shows (a hidden frame has no running animation, showing it restarts them). | ||
| 335 | + No JS or reduced motion: the finished screen. */ | ||
| 336 | +.frame { container-type: inline-size; } | ||
| 337 | + | ||
| 338 | +.mock { | ||
| 339 | + --line-strong: #DCDCD7; | ||
| 340 | + --dash: #C4C4BF; | ||
| 341 | + --red-wash: #FFF5F5; | ||
| 342 | + --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='20'%3E%3Cpath d='M0 9v2M2 8v4M4 4.5v11M6 5.5v9M8 5v10M10 6v8M12 7v6M14 4v12M16 4.5v11M18 3.5v13M20 7v6M22 6.5v7M24 4.5v11M26 8.5v3M28 7.5v5M30 5v10M32 4v12M34 7v6M36 5.5v9M38 7.5v5M40 6.5v7M42 5.5v9M44 6v8M46 4v12M48 4v12M50 5v10M52 7v6M54 4v12M56 5v10M58 4v12M60 3v14M62 4.5v11M64 7.5v5M66 9v2M68 5v10M70 7v6M72 4.5v11M74 3.5v13M76 2v16M78 5.5v9M80 6.5v7M82 3v14M84 4.5v11M86 5v10M88 5.5v9M90 8.5v3M92 5v10M94 3.5v13' stroke='%232F9E83' stroke-width='1.2'/%3E%3C/svg%3E"); | ||
| 343 | + position: relative; | ||
| 344 | + height: 100%; | ||
| 345 | + display: flex; flex-direction: column; | ||
| 346 | + font-size: 1.45cqw; line-height: 1.4; | ||
| 347 | + color: var(--ink); | ||
| 348 | + background: #fff; | ||
| 349 | + overflow: hidden; | ||
| 350 | + user-select: none; | ||
| 351 | +} | ||
| 352 | +.mock * { box-sizing: border-box; } | ||
| 353 | + | ||
| 354 | +.m-bar { | ||
| 355 | + flex: none; | ||
| 356 | + display: flex; align-items: center; gap: 1.1em; | ||
| 357 | + height: 3.3em; padding: 0 1.5em; | ||
| 358 | + border-bottom: 1px solid var(--line); | ||
| 359 | + background: var(--bg); | ||
| 360 | +} | ||
| 361 | +.m-brand { display: flex; align-items: center; gap: 0.45em; font-weight: 600; } | ||
| 362 | +.m-brand::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 2px; background: var(--red); } | ||
| 363 | +.m-project { | ||
| 364 | + padding: 0.3em 0.8em; | ||
| 365 | + border: 1px solid var(--line); border-radius: 4px; | ||
| 366 | + background: #fff; font-weight: 500; | ||
| 367 | +} | ||
| 368 | +.m-path { font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } | ||
| 369 | +.m-path b { font-weight: 500; color: var(--ink); } | ||
| 370 | +.m-path i { font-style: normal; margin: 0 0.6em; color: var(--dash); } | ||
| 371 | + | ||
| 372 | +.m-body { flex: 1; min-height: 0; padding: 1.5em; } | ||
| 373 | + | ||
| 374 | +.m-eyebrow { | ||
| 375 | + display: block; | ||
| 376 | + font-family: var(--mono); font-size: 0.74em; letter-spacing: 0.06em; text-transform: uppercase; | ||
| 377 | + color: var(--faint); | ||
| 378 | +} | ||
| 379 | + | ||
| 380 | +.m-btn { | ||
| 381 | + display: inline-flex; align-items: center; | ||
| 382 | + height: 2.2em; padding: 0 0.85em; | ||
| 383 | + border: 1px solid var(--line-strong); border-radius: 4px; | ||
| 384 | + background: #fff; | ||
| 385 | + font-size: 0.88em; white-space: nowrap; | ||
| 386 | +} | ||
| 387 | +.m-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; } | ||
| 388 | +.m-btn.red { background: var(--red); border-color: var(--red); color: #fff; } | ||
| 389 | + | ||
| 390 | +.m-score { font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | ||
| 391 | +.m-score.hi { color: var(--red-ink); } | ||
| 392 | + | ||
| 393 | +@keyframes m-rise { from { opacity: 0; transform: translateY(0.6em); } } | ||
| 394 | +@keyframes m-fade { from { opacity: 0; } } | ||
| 395 | +@keyframes m-press { 0%, 100% { transform: none; } 40% { transform: scale(0.94); } } | ||
| 396 | + | ||
| 397 | +/* --- Titles: Daryl's suggestions come in, the two best go up into the A/B test */ | ||
| 398 | +.m-titles .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 1.2em; } | ||
| 399 | +.m-angle { display: flex; align-items: baseline; gap: 0.8em; font-weight: 500; } | ||
| 400 | +.m-angle .m-eyebrow { display: inline; } | ||
| 401 | + | ||
| 402 | +.m-ab { display: grid; gap: 0.5em; padding: 1em 1.1em 1.1em; border-radius: 6px; background: var(--bg); } | ||
| 403 | +.m-ab .m-eyebrow { margin-bottom: 0.2em; } | ||
| 404 | +.m-slot { | ||
| 405 | + display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; | ||
| 406 | + height: 2.9em; padding: 0 1em; | ||
| 407 | + border: 1px solid var(--red); border-radius: 5px; | ||
| 408 | + background: #fff; | ||
| 409 | +} | ||
| 410 | +.m-slot > i { font-style: normal; font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | ||
| 411 | +.m-slot b { font-size: 1.08em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | ||
| 412 | +.m-slot.empty { border: 1px dashed var(--dash); background: transparent; color: var(--faint); } | ||
| 413 | + | ||
| 414 | +.m-list-wrap { min-height: 0; } | ||
| 415 | +.m-list-wrap .m-eyebrow { margin-bottom: 0.5em; } | ||
| 416 | +.m-list { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; } | ||
| 417 | +.m-list li { | ||
| 418 | + display: grid; grid-template-columns: 1fr 2.6em 1.6em; align-items: center; | ||
| 419 | + height: 2.5em; padding: 0 0.6em 0 1em; | ||
| 420 | + border-top: 1px solid var(--line-soft); | ||
| 421 | + white-space: nowrap; | ||
| 422 | +} | ||
| 423 | +.m-list li:first-child { border-top: 0; } | ||
| 424 | +.m-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; } | ||
| 425 | +.m-list .m-score { text-align: right; padding-right: 0.8em; } | ||
| 426 | +.m-list .m-add { text-align: center; color: var(--faint); } | ||
| 427 | +.m-list li.kept { color: var(--faint); } | ||
| 428 | +.m-list li.kept .m-add { color: var(--red); } | ||
| 429 | + | ||
| 430 | +.m-titles .m-list li { animation: m-rise 380ms ease-out both; animation-delay: calc(300ms + var(--i) * 110ms); } | ||
| 431 | +.m-titles .m-list .m-score { animation: m-fade 300ms ease-out both; animation-delay: calc(1200ms + var(--i) * 70ms); } | ||
| 432 | +.m-titles .m-list li.kept { animation: m-rise 380ms ease-out both, m-pick 900ms ease-out both; animation-delay: calc(300ms + var(--i) * 110ms), var(--at); } | ||
| 433 | +.m-titles .m-list li.kept .m-add { animation: m-check 900ms ease-out both; animation-delay: var(--at); } | ||
| 434 | +.m-titles .m-slot.fill { animation: m-slot 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--at) + 350ms); } | ||
| 435 | +.m-titles .m-slot.fill > * { animation: m-fade 400ms ease-out both; animation-delay: calc(var(--at) + 450ms); } | ||
| 436 | +.m-titles .m-ab .m-eyebrow b { font-weight: inherit; } | ||
| 437 | + | ||
| 438 | +@keyframes m-pick { | ||
| 439 | + 0% { color: var(--ink); background: transparent; } | ||
| 440 | + 25%, 55% { color: var(--ink); background: var(--red-wash); } | ||
| 441 | +} | ||
| 442 | +@keyframes m-check { | ||
| 443 | + 0%, 30% { color: var(--faint); transform: none; } | ||
| 444 | + 40% { transform: scale(1.5); color: var(--red); } | ||
| 445 | +} | ||
| 446 | +@keyframes m-slot { | ||
| 447 | + from { border-color: var(--dash); border-style: dashed; background: transparent; transform: translateY(0.4em); } | ||
| 448 | +} | ||
| 449 | + | ||
| 450 | +/* --- Rough cut: bad takes, then silences, are struck from the transcript and close up on the timeline */ | ||
| 451 | +.m-cut .m-body { display: grid; grid-template-rows: 1fr auto auto; gap: 1em; } | ||
| 452 | +.m-transcript { | ||
| 453 | + min-height: 0; overflow: hidden; | ||
| 454 | + padding: 0.9em 1.2em; | ||
| 455 | + border: 1px solid var(--line); border-radius: 6px; | ||
| 456 | +} | ||
| 457 | +.m-file { font-family: var(--mono); font-size: 0.78em; font-weight: 500; color: var(--muted); margin-bottom: 0.6em; } | ||
| 458 | +.m-say { display: grid; grid-template-columns: 3.6em 1fr auto; align-items: baseline; gap: 0.2em; padding: 0.32em 0; } | ||
| 459 | +.m-say time { font-family: var(--mono); font-size: 0.8em; color: var(--faint); } | ||
| 460 | +.m-say em { | ||
| 461 | + font-style: normal; font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; | ||
| 462 | + padding: 0.15em 0.5em; border-radius: 3px; | ||
| 463 | +} | ||
| 464 | +.m-say.bad span, .m-say.gap span { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--faint); } | ||
| 465 | +.m-say.bad span { text-decoration-color: var(--red); } | ||
| 466 | +.m-say.bad em { background: #FDE3E3; color: var(--red-ink); } | ||
| 467 | +.m-say.gap span { font-family: var(--mono); font-size: 0.85em; } | ||
| 468 | +.m-say.gap em { background: var(--line-soft); color: var(--muted); } | ||
| 469 | + | ||
| 470 | +.m-tools { display: flex; align-items: center; gap: 0.5em; } | ||
| 471 | +.m-tools .m-stat { margin-left: auto; font-family: var(--mono); font-size: 0.82em; color: var(--muted); } | ||
| 472 | +.m-tools .m-stat b { font-weight: 500; color: var(--ink); } | ||
| 473 | + | ||
| 474 | +.m-tl { display: grid; grid-template-columns: 2.4em 1fr; padding: 0.6em 0.6em 0.6em 0.9em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 475 | +.m-tl-names { display: grid; grid-template-rows: 4.2em 2.9em; align-items: center; font-size: 0.85em; color: var(--muted); } | ||
| 476 | +.m-track { position: relative; display: flex; height: 6.2em; } | ||
| 477 | +.m-seg { flex: var(--g) 1 0; display: grid; grid-template-rows: 1fr 0.68fr; gap: 0.25em; margin-right: 2px; min-width: 0; } | ||
| 478 | +.m-seg::before { content: ""; border-radius: 2px; background: linear-gradient(#55565a 0 38%, #3d3e42 38%); } | ||
| 479 | +.m-seg::after { content: ""; background: var(--wave) left center / auto 100% repeat-x; opacity: 0.9; } | ||
| 480 | +.m-seg.x { flex-grow: 0; margin-right: 0; } | ||
| 481 | +.m-seg.bad::before { background: repeating-linear-gradient(-45deg, #F3B9BB 0 4px, #FBE0E1 4px 8px); } | ||
| 482 | +.m-seg.bad::after { filter: hue-rotate(155deg) saturate(1.6); opacity: 0.6; } | ||
| 483 | +.m-seg.gap::before { background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 4px, var(--hatch-b) 4px 8px); } | ||
| 484 | +.m-seg.gap::after { background: linear-gradient(var(--music), var(--music)) left center / 100% 1px no-repeat; opacity: 0.6; } | ||
| 485 | +.m-track .m-head { position: absolute; top: -0.3em; bottom: -0.3em; left: 0; width: 2px; background: var(--red); } | ||
| 486 | + | ||
| 487 | +.m-cut .m-say { animation: m-rise 380ms ease-out both; animation-delay: calc(250ms + var(--i) * 90ms); } | ||
| 488 | +.m-cut .m-say.bad span, .m-cut .m-say.bad em { animation: m-strike 500ms ease-out both; animation-delay: 1500ms; } | ||
| 489 | +.m-cut .m-say.gap span, .m-cut .m-say.gap em { animation: m-strike 500ms ease-out both; animation-delay: 2700ms; } | ||
| 490 | +.m-cut .m-tools .b1 { animation: m-press 300ms ease-out both; animation-delay: 1300ms; } | ||
| 491 | +.m-cut .m-tools .b2 { animation: m-press 300ms ease-out both; animation-delay: 2500ms; } | ||
| 492 | +.m-cut .m-seg.bad { animation: m-close 700ms cubic-bezier(.6,0,.2,1) both; animation-delay: 1550ms; } | ||
| 493 | +.m-cut .m-seg.gap { animation: m-close 600ms cubic-bezier(.6,0,.2,1) both; animation-delay: 2750ms; } | ||
| 494 | +.m-cut .m-stat { animation: m-fade 400ms ease-out both; animation-delay: 3400ms; } | ||
| 495 | + | ||
| 496 | +@keyframes m-close { from { flex-grow: var(--g); margin-right: 2px; } } | ||
| 497 | +@keyframes m-strike { | ||
| 498 | + from { text-decoration-color: transparent; color: var(--ink); background: transparent; } | ||
| 499 | +} | ||
| 500 | + | ||
| 501 | +/* --- Editing: ask Daryl, a title card and its whoosh land on the timeline and on the preview */ | ||
| 502 | +.m-edit .m-body { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; gap: 1em 1.2em; } | ||
| 503 | + | ||
| 504 | +.m-preview { display: grid; grid-template-rows: 1fr auto; gap: 0.6em; min-height: 0; } | ||
| 505 | +.m-shot { | ||
| 506 | + position: relative; overflow: hidden; | ||
| 507 | + border-radius: 5px; | ||
| 508 | + background: | ||
| 509 | + radial-gradient(circle at 78% 30%, rgba(255, 196, 120, 0.55), transparent 22%), | ||
| 510 | + linear-gradient(160deg, #6b5446, #3a2f2a 60%, #2a2321); | ||
| 511 | +} | ||
| 512 | +/* a presenter in silhouette: a head and shoulders, out of focus */ | ||
| 513 | +.m-shot::before, .m-shot::after { content: ""; position: absolute; left: 50%; background: #17120f; filter: blur(2px); } | ||
| 514 | +.m-shot::before { top: 22%; width: 17%; aspect-ratio: 0.85; margin-left: -8.5%; border-radius: 50%; } | ||
| 515 | +.m-shot::after { bottom: -18%; width: 52%; height: 48%; margin-left: -26%; border-radius: 48% 48% 0 0; } | ||
| 516 | +.m-card { | ||
| 517 | + position: absolute; z-index: 1; left: 6%; bottom: 12%; | ||
| 518 | + padding: 0.6em 0.9em 0.7em; | ||
| 519 | + border-radius: 4px; | ||
| 520 | + background: #fff; | ||
| 521 | + box-shadow: 0 0.6em 1.6em -0.6em rgba(0, 0, 0, 0.5); | ||
| 522 | +} | ||
| 523 | +.m-card small { display: block; font-family: var(--mono); font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } | ||
| 524 | +.m-card strong { display: block; font-size: 1.7em; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } | ||
| 525 | +.m-card strong u { text-decoration: none; background: linear-gradient(var(--red), var(--red)) left 92% / 100% 0.12em no-repeat; } | ||
| 526 | +.m-controls { display: flex; align-items: center; gap: 0.4em; font-family: var(--mono); font-size: 0.9em; color: var(--muted); } | ||
| 527 | +.m-controls .m-btn { font-family: var(--sans); } | ||
| 528 | +.m-controls .m-btn.dark { padding: 0 1.1em; } | ||
| 529 | +.m-controls span:last-child { margin-left: 0.4em; } | ||
| 530 | + | ||
| 531 | +.m-chat { display: flex; flex-direction: column; gap: 0.6em; min-height: 0; padding: 0.8em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 532 | +.m-chat-head { padding-bottom: 0.5em; border-bottom: 1px solid var(--line); font-weight: 600; } | ||
| 533 | +.m-msg { max-width: 92%; padding: 0.55em 0.75em; border-radius: 6px; font-size: 0.95em; } | ||
| 534 | +.m-msg.me { align-self: flex-end; background: var(--ink); color: #fff; } | ||
| 535 | +.m-msg.daryl { align-self: flex-start; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } | ||
| 536 | +.m-msg.daryl small { display: block; margin-top: 0.3em; font-family: var(--mono); font-size: 0.78em; color: var(--faint); } | ||
| 537 | +.m-input { margin-top: auto; padding: 0.6em 0.75em; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 0.92em; color: var(--faint); } | ||
| 538 | + | ||
| 539 | +.m-lanes { | ||
| 540 | + --u: 20; | ||
| 541 | + grid-column: 1 / -1; | ||
| 542 | + position: relative; | ||
| 543 | + display: grid; grid-template-columns: 5.2em 1fr; row-gap: 0.25em; | ||
| 544 | + padding: 0.6em 0.8em; | ||
| 545 | + border: 1px solid var(--line); border-radius: 6px; | ||
| 546 | +} | ||
| 547 | +.m-lanes > span { font-size: 0.8em; line-height: 1.85em; color: var(--muted); } | ||
| 548 | +.m-lanes ul { position: relative; height: 1.5em; } | ||
| 549 | +.m-lanes li { | ||
| 550 | + position: absolute; top: 0; bottom: 0; | ||
| 551 | + left: calc(var(--a) / var(--u) * 100%); width: calc(var(--b) / var(--u) * 100% - 2px); | ||
| 552 | + display: flex; align-items: center; padding: 0 0.4em; | ||
| 553 | + border-radius: 3px; | ||
| 554 | + background: var(--c); | ||
| 555 | + color: #fff; font-size: 0.72em; font-weight: 500; white-space: nowrap; overflow: hidden; | ||
| 556 | +} | ||
| 557 | +.m-lanes .ch li { background: var(--line-soft); color: var(--ink-2); box-shadow: inset 2px 0 0 var(--faint); } | ||
| 558 | +.m-lanes .vid li { background: linear-gradient(#55565a 0 38%, #3d3e42 38%); } | ||
| 559 | +.m-lanes .voice li { background: var(--wave) left center / auto 100% repeat-x; border-radius: 0; } | ||
| 560 | +.m-lanes .zm li { color: var(--ink); } | ||
| 561 | +.m-lanes .new { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c); } | ||
| 562 | +/* at 8.2 of 20, where the title card starts: padding + names column + its share of the lanes */ | ||
| 563 | +.m-lanes .m-head { | ||
| 564 | + position: absolute; top: 0.3em; bottom: 0.3em; | ||
| 565 | + left: calc(6em + (100% - 6.8em) * 8.2 / 20); | ||
| 566 | + width: 2px; background: var(--red); | ||
| 567 | + font-size: 1em; | ||
| 568 | +} | ||
| 569 | + | ||
| 570 | +.m-edit .m-msg.me { animation: m-rise 400ms ease-out both; animation-delay: 400ms; } | ||
| 571 | +.m-edit .m-msg.daryl { animation: m-rise 400ms ease-out both; animation-delay: 1900ms; } | ||
| 572 | +.m-edit .m-typing { animation: m-typing 1100ms ease-out both; animation-delay: 800ms; } | ||
| 573 | +.m-edit .m-lanes .new { animation: m-land 600ms cubic-bezier(.2,.8,.2,1.2) both; animation-delay: 2300ms; transform-origin: left center; } | ||
| 574 | +.m-edit .m-lanes .new + .new { animation-delay: 2450ms; } | ||
| 575 | +.m-edit .m-card { animation: m-card 650ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 2700ms; } | ||
| 576 | +.m-edit .m-card u { animation: m-underline 500ms ease-out both; animation-delay: 3200ms; } | ||
| 577 | + | ||
| 578 | +.m-reply { position: relative; display: flex; } | ||
| 579 | +.m-typing { | ||
| 580 | + position: absolute; top: 0; left: 0; | ||
| 581 | + display: flex; gap: 0.3em; padding: 0.75em 0.8em; | ||
| 582 | + border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); | ||
| 583 | + opacity: 0; | ||
| 584 | +} | ||
| 585 | +.m-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--faint); } | ||
| 586 | +.m-edit .m-typing i { animation: m-dot 600ms ease-in-out infinite alternate; } | ||
| 587 | +.m-edit .m-typing i:nth-child(2) { animation-delay: 200ms; } | ||
| 588 | +.m-edit .m-typing i:nth-child(3) { animation-delay: 400ms; } | ||
| 589 | +@keyframes m-typing { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } } | ||
| 590 | +@keyframes m-dot { to { opacity: 0.3; } } | ||
| 591 | + | ||
| 592 | +/* --- Made-up thumbnails: a color, a few big words and a presenter in silhouette, sized off their own width */ | ||
| 593 | +.m-thumb { | ||
| 594 | + position: relative; overflow: hidden; | ||
| 595 | + aspect-ratio: 16 / 9; | ||
| 596 | + border-radius: 3px; | ||
| 597 | + container-type: inline-size; | ||
| 598 | + background: var(--tb); | ||
| 599 | + color: #fff; | ||
| 600 | +} | ||
| 601 | +.m-thumb > b { | ||
| 602 | + position: absolute; left: 7cqw; top: 8cqw; z-index: 1; | ||
| 603 | + max-width: 58cqw; | ||
| 604 | + font-size: 13cqw; font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; | ||
| 605 | +} | ||
| 606 | +.m-person { position: absolute; right: 7cqw; bottom: 0; width: 34cqw; height: 40cqw; } | ||
| 607 | +.m-person::before, .m-person::after { content: ""; position: absolute; background: var(--pc); } | ||
| 608 | +.m-person::before { left: 50%; bottom: 21cqw; width: 14cqw; height: 16cqw; margin-left: -7cqw; border-radius: 50%; } | ||
| 609 | +.m-person::after { left: 0; right: 0; bottom: -5cqw; height: 25cqw; border-radius: 50% 50% 0 0; } | ||
| 610 | +.m-tag { | ||
| 611 | + position: absolute; left: 3cqw; bottom: 3cqw; z-index: 1; | ||
| 612 | + padding: 1.6cqw 2.6cqw; border-radius: 1.5cqw; | ||
| 613 | + background: var(--red); color: #fff; | ||
| 614 | + font: 600 7cqw/1 var(--mono); | ||
| 615 | +} | ||
| 616 | +.m-tag.r { left: auto; right: 3cqw; background: rgba(24, 25, 27, 0.85); } | ||
| 617 | +.t-days { --tb: linear-gradient(135deg, #E5484D, #8E1D24); --pc: #3a1013; } | ||
| 618 | +.t-numbers { --tb: #18191B; --pc: #3d3e42; } | ||
| 619 | +.t-numbers > b { color: var(--zoom); } | ||
| 620 | +.t-friday { --tb: #F2EFE8; --pc: #CFC8BA; color: var(--ink); } | ||
| 621 | +.t-friday > b s { text-decoration-color: var(--red); text-decoration-thickness: 1.6cqw; } | ||
| 622 | +.t-juniors { --tb: linear-gradient(135deg, #3B82C4, #1F4F7D); --pc: #163a5c; } | ||
| 623 | +.t-salary { --tb: linear-gradient(135deg, #2F9E83, #17604F); --pc: #0f3d32; } | ||
| 624 | +.t-empty { background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 6px, var(--hatch-b) 6px 12px); } | ||
| 625 | + | ||
| 626 | +/* --- Projects: every video with its progress, the last one first */ | ||
| 627 | +.m-projects .m-body { display: flex; flex-direction: column; gap: 0.9em; } | ||
| 628 | +.m-row { display: flex; align-items: center; justify-content: space-between; } | ||
| 629 | +.m-h { font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; } | ||
| 630 | +.m-resume { display: grid; grid-template-columns: 27% 1fr; gap: 1.2em; padding: 0.9em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 631 | +.m-resume h4 { margin: 0; font-size: 1.2em; font-weight: 600; } | ||
| 632 | +.m-resume p { margin-top: 0.3em; font-size: 0.92em; color: var(--muted); } | ||
| 633 | +.m-resume .m-steps { margin-top: 0.8em; } | ||
| 634 | +.m-resume .m-row { justify-content: flex-start; gap: 1em; margin-top: 0.8em; } | ||
| 635 | +.m-meta { font-family: var(--mono); font-size: 0.75em; color: var(--faint); } | ||
| 636 | +.m-steps { display: flex; gap: 2px; } | ||
| 637 | +.m-steps i { flex: 1; height: 0.32em; background: var(--line); } | ||
| 638 | +.m-steps i.d { background: var(--ink); } | ||
| 639 | +.m-steps i.w { background: var(--red); } | ||
| 640 | +.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; } | ||
| 641 | +.m-proj { display: grid; gap: 0.45em; align-content: start; padding: 0.55em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 642 | +.m-proj strong { font-size: 0.9em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | ||
| 643 | + | ||
| 644 | +.m-projects .m-resume, .m-projects .m-proj { animation: m-rise 420ms ease-out both; animation-delay: calc(200ms + var(--i) * 120ms); } | ||
| 645 | +.m-projects .m-steps { animation: m-wipe 900ms cubic-bezier(.4,0,.2,1) both; animation-delay: calc(700ms + var(--i) * 120ms); } | ||
| 646 | +.m-projects .m-resume .dark { animation: m-press 300ms ease-out both; animation-delay: 2400ms; } | ||
| 647 | +@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } | ||
| 648 | + | ||
| 649 | +/* --- Angle: the research comes in, then the angles; one is kept */ | ||
| 650 | +.m-angle-step .m-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2em; } | ||
| 651 | +.m-col { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; } | ||
| 652 | +.m-brief { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6em 1.2em; padding: 0.9em 1em; border-radius: 6px; background: var(--bg); } | ||
| 653 | +.m-brief .m-eyebrow { grid-column: 1 / -1; } | ||
| 654 | +.m-brief dt { font-size: 0.8em; color: var(--muted); } | ||
| 655 | +.m-brief dd { margin: 0.1em 0 0; } | ||
| 656 | +.m-angles { display: grid; gap: 0.55em; } | ||
| 657 | +.m-angle-card { position: relative; display: grid; grid-template-columns: 1.4em 1fr auto; gap: 0 0.4em; padding: 0.75em 0.9em; border: 1px solid var(--line); border-radius: 6px; background: #fff; } | ||
| 658 | +.m-angle-card > i { font-style: normal; font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | ||
| 659 | +.m-angle-card strong { font-weight: 600; } | ||
| 660 | +.m-angle-card p { grid-column: 2; margin-top: 0.15em; font-size: 0.88em; color: var(--muted); } | ||
| 661 | +.m-angle-card .m-btn { grid-row: 1 / 3; grid-column: 3; align-self: center; } | ||
| 662 | +.m-angle-card.kept { border-color: var(--red); } | ||
| 663 | +.m-angle-card.kept .m-btn { background: var(--red); border-color: var(--red); color: #fff; } | ||
| 664 | + | ||
| 665 | +.m-panel { display: flex; flex-direction: column; gap: 0.55em; padding: 0.8em; border: 1px solid var(--line); border-radius: 6px; min-height: 0; } | ||
| 666 | +.m-panel-head { padding-bottom: 0.5em; border-bottom: 1px solid var(--line); font-weight: 600; } | ||
| 667 | +.m-sources { display: grid; gap: 0.35em; font-size: 0.88em; } | ||
| 668 | +.m-sources li { display: grid; grid-template-columns: 1.3em 1fr; color: var(--ink-2); } | ||
| 669 | +.m-sources li::before { content: "✓"; color: var(--music); font-weight: 600; } | ||
| 670 | +.m-panel .m-meta { margin-top: auto; } | ||
| 671 | + | ||
| 672 | +.m-angle-step .m-msg.daryl { animation: m-rise 400ms ease-out both; animation-delay: 200ms; } | ||
| 673 | +.m-angle-step .m-sources li { animation: m-rise 350ms ease-out both; animation-delay: calc(600ms + var(--i) * 220ms); } | ||
| 674 | +.m-angle-step .m-panel .m-meta { animation: m-fade 400ms ease-out both; animation-delay: 1900ms; } | ||
| 675 | +.m-angle-step .m-msg.daryl + .m-sources + .m-msg { animation: m-rise 400ms ease-out both; animation-delay: 2600ms; } | ||
| 676 | +.m-angle-step .m-angle-card { animation: m-rise 420ms ease-out both; animation-delay: calc(2000ms + var(--i) * 160ms); } | ||
| 677 | +.m-angle-step .m-angle-card.kept { animation: m-rise 420ms ease-out both, m-keep 600ms ease-out both; animation-delay: calc(2000ms + var(--i) * 160ms), 3100ms; } | ||
| 678 | +.m-angle-step .m-angle-card.kept .m-btn { animation: m-keep-btn 500ms ease-out both; animation-delay: 3000ms; } | ||
| 679 | +.m-swap { display: inline-grid; } | ||
| 680 | +.m-swap > span { grid-area: 1 / 1; text-align: center; } | ||
| 681 | +.m-swap > span:first-child { opacity: 0; } | ||
| 682 | +.m-angle-step .m-swap > span:first-child { animation: m-out 1ms linear both; animation-delay: 3120ms; } | ||
| 683 | +.m-angle-step .m-swap > span:last-child { animation: m-fade 1ms linear both; animation-delay: 3120ms; } | ||
| 684 | +@keyframes m-out { from { opacity: 1; } } | ||
| 685 | +@keyframes m-keep { from { border-color: var(--line); } } | ||
| 686 | +@keyframes m-keep-btn { 0% { background: #fff; border-color: var(--line-strong); color: var(--ink); } 40% { transform: scale(0.92); } } | ||
| 687 | + | ||
| 688 | +/* --- Thumbnail: a variant is generated from the brief, then goes up into the empty slot */ | ||
| 689 | +.m-thumbs .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 0.9em; } | ||
| 690 | +.m-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; margin-top: 0.4em; } | ||
| 691 | +.m-vslot { display: grid; gap: 0.35em; } | ||
| 692 | +.m-vslot .m-select { | ||
| 693 | + height: 2em; padding: 0 0.6em; border: 1px solid var(--line-strong); border-radius: 4px; | ||
| 694 | + font-size: 0.8em; line-height: 1.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | ||
| 695 | +} | ||
| 696 | +.m-hole { position: relative; border: 1px dashed var(--dash); border-radius: 4px; } | ||
| 697 | +.m-hole::before { content: "+ New variant"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85em; color: var(--faint); } | ||
| 698 | +.m-hole .m-thumb { position: relative; margin: -1px; } | ||
| 699 | +.m-variant { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; padding: 1em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 700 | +.m-field { display: grid; gap: 0.3em; align-content: start; } | ||
| 701 | +.m-field + .m-field { margin-top: 0.7em; } | ||
| 702 | +.m-field label { font-size: 0.85em; font-weight: 600; } | ||
| 703 | +.m-field div { padding: 0.5em 0.7em; border: 1px solid var(--line-input, #CFCFCA); border-radius: 4px; font-size: 0.9em; } | ||
| 704 | +.m-gen { position: relative; width: 78%; margin-top: 0.4em; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 6px, var(--hatch-b) 6px 12px); aspect-ratio: 16 / 9; } | ||
| 705 | +.m-gen .m-tag { font-size: 5cqw; } | ||
| 706 | +.m-gen .m-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--red); } | ||
| 707 | + | ||
| 708 | +.m-thumbs .m-gen { animation: m-shimmer 900ms ease-in-out 2 alternate both; animation-delay: 200ms; } | ||
| 709 | +.m-thumbs .m-gen .m-thumb { animation: m-reveal 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 1900ms; } | ||
| 710 | +.m-thumbs .m-gen .m-tag.r { animation: m-fade 300ms ease-out both; animation-delay: 2500ms; } | ||
| 711 | +.m-thumbs .m-hole .m-thumb, .m-thumbs .m-hole + .m-select { animation: m-reveal 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 3000ms; } | ||
| 712 | +@keyframes m-shimmer { to { opacity: 0.55; } } | ||
| 713 | +@keyframes m-reveal { from { opacity: 0; transform: scale(0.94); } } | ||
| 714 | + | ||
| 715 | +/* --- Script: the draft writes itself, then the roast scores it */ | ||
| 716 | +.m-script .m-body { display: grid; grid-template-columns: 0.8fr 2fr 1.15fr; gap: 1.2em; } | ||
| 717 | +.m-outline { display: grid; gap: 0.15em; align-content: start; } | ||
| 718 | +.m-outline .m-eyebrow { margin-bottom: 0.4em; } | ||
| 719 | +.m-outline li { display: flex; justify-content: space-between; padding: 0.35em 0.6em; border-radius: 4px; font-size: 0.9em; } | ||
| 720 | +.m-outline li span { font-family: var(--mono); font-size: 0.85em; color: var(--faint); } | ||
| 721 | +.m-outline li.on { background: var(--bg); box-shadow: inset 2px 0 0 var(--red); font-weight: 500; } | ||
| 722 | +.m-outline .m-meta { margin-top: 0.8em; padding-left: 0.6em; } | ||
| 723 | +.m-doc { padding: 0.9em 1.2em; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } | ||
| 724 | +.m-doc .m-eyebrow { margin-bottom: 0.8em; } | ||
| 725 | +.m-doc h5 { margin: 0 0 0.4em; font: 500 0.75em/1.4 var(--mono); letter-spacing: 0.06em; color: var(--red-ink); } | ||
| 726 | +.m-doc p { margin-bottom: 0.65em; font-size: 0.98em; line-height: 1.55; } | ||
| 727 | +.m-doc p.visual { font-family: var(--mono); font-size: 0.8em; color: var(--motion); } | ||
| 728 | +.m-roast { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em; border: 1px solid var(--line); border-radius: 6px; } | ||
| 729 | +.m-grade { display: flex; align-items: baseline; gap: 0.25em; } | ||
| 730 | +.m-grade strong { font-size: 2.6em; font-weight: 600; line-height: 1; letter-spacing: -0.03em; } | ||
| 731 | +.m-grade span { font-family: var(--mono); color: var(--faint); } | ||
| 732 | +.m-roast p { font-weight: 500; } | ||
| 733 | +.m-curve { display: block; width: 100%; height: 4.2em; margin-top: 0.4em; overflow: visible; } | ||
| 734 | +.m-curve path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } | ||
| 735 | +.m-curve line { stroke: var(--line); vector-effect: non-scaling-stroke; } | ||
| 736 | +.m-remarks { display: grid; gap: 0.4em; font-size: 0.86em; color: var(--ink-2); } | ||
| 737 | +.m-remarks li { display: grid; grid-template-columns: 1em 1fr; } | ||
| 738 | +.m-remarks li::before { content: ""; width: 0.4em; height: 0.4em; margin-top: 0.5em; border-radius: 50%; background: var(--red); } | ||
| 739 | + | ||
| 740 | +.m-script .m-doc p { animation: m-write 700ms steps(14) both; animation-delay: calc(250ms + var(--i) * 450ms); } | ||
| 741 | +.m-script .m-roast > * { animation: m-rise 400ms ease-out both; animation-delay: calc(3000ms + var(--i) * 150ms); } | ||
| 742 | +.m-script .m-curve { animation: m-wipe 1000ms ease-out both; animation-delay: 3500ms; } | ||
| 743 | +@keyframes m-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } | ||
| 744 | + | ||
| 745 | +/* --- Storyboard: beats land on the words they illustrate */ | ||
| 746 | +.m-story .m-body { display: grid; grid-template-rows: auto auto 1fr; gap: 0.8em; } | ||
| 747 | +.m-story .m-row { justify-content: flex-start; gap: 0.6em; font-size: 0.92em; } | ||
| 748 | +.m-story .m-row strong { font-weight: 600; margin-right: 0.4em; } | ||
| 749 | +.m-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15em 0.65em; border: 1px solid var(--c); border-radius: 99px; font-size: 0.9em; } | ||
| 750 | +.m-chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--c); } | ||
| 751 | +.m-chip b { font-weight: 600; } | ||
| 752 | +.m-strip { position: relative; height: 1.9em; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); } | ||
| 753 | +.m-strip i { position: absolute; top: 0.45em; bottom: 0.45em; left: var(--x); width: var(--w, 0.9%); border-radius: 2px; background: var(--c, var(--motion)); } | ||
| 754 | +.m-strip i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); } | ||
| 755 | +.m-beats { display: grid; gap: 0.7em; align-content: start; min-height: 0; } | ||
| 756 | +.m-beat { display: grid; grid-template-columns: 5.6em 1fr 10em; gap: 1.1em; padding: 0.8em 1em; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 6px; } | ||
| 757 | +.m-beat-meta { display: grid; gap: 0.3em; align-content: start; } | ||
| 758 | +.m-beat-meta strong { font-family: var(--mono); font-weight: 500; } | ||
| 759 | +.m-beat-meta .m-chip { justify-self: start; font-size: 0.78em; } | ||
| 760 | +.m-beat q { display: block; margin: 0.2em 0 0.55em; font-style: italic; color: var(--ink-2); quotes: "“" "”"; } | ||
| 761 | +.m-beat mark { | ||
| 762 | + padding: 0 0.1em; color: inherit; | ||
| 763 | + background: linear-gradient(color-mix(in oklch, var(--motion) 22%, transparent), color-mix(in oklch, var(--motion) 22%, transparent)) left / 100% 100% no-repeat; | ||
| 764 | +} | ||
| 765 | +.m-beat p { font-size: 0.92em; } | ||
| 766 | +.m-pos { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 0.8fr 2fr 0.8fr; gap: 0.3em; aspect-ratio: 16 / 10; padding: 0.4em; border-radius: 4px; background: var(--bg); } | ||
| 767 | +.m-pos i { border: 1px dashed var(--dash); border-radius: 2px; } | ||
| 768 | +.m-pos i.band { grid-column: 1 / -1; } | ||
| 769 | +.m-pos i.on { border: 0; background: var(--motion); } | ||
| 770 | +.m-pos i.on.z { background: var(--zoom); } | ||
| 771 | +.m-beat .m-eyebrow b { font-family: var(--sans); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); } | ||
| 772 | + | ||
| 773 | +.m-story .m-strip i { animation: m-drop 350ms ease-out both; animation-delay: calc(200ms + var(--i, 0) * 60ms); } | ||
| 774 | +.m-story .m-beat { animation: m-rise 420ms ease-out both; animation-delay: calc(900ms + var(--i) * 900ms); } | ||
| 775 | +.m-story .m-beat mark { animation: m-mark 450ms ease-out both; animation-delay: calc(1400ms + var(--i) * 900ms); } | ||
| 776 | +.m-story .m-beat p, .m-story .m-beat .m-pos i.on { animation: m-fade 400ms ease-out both; animation-delay: calc(1750ms + var(--i) * 900ms); } | ||
| 777 | +@keyframes m-drop { from { opacity: 0; transform: translateY(-0.5em); } } | ||
| 778 | +@keyframes m-mark { from { background-size: 0 100%; } } | ||
| 779 | + | ||
| 780 | +/* --- Details: everything checked, then the upload */ | ||
| 781 | +.m-details .m-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2em; } | ||
| 782 | +.m-variants { display: grid; gap: 0.45em; margin-top: 0.4em; } | ||
| 783 | +.m-variants li { display: grid; grid-template-columns: 6.4em 1fr; align-items: center; gap: 0.8em; font-weight: 500; font-size: 0.92em; } | ||
| 784 | +.m-desc { margin-top: 0.4em; padding: 0.7em 0.9em; border: 1px solid var(--line-input, #CFCFCA); border-radius: 4px; font-size: 0.88em; color: var(--ink-2); } | ||
| 785 | +.m-desc ol { margin-top: 0.5em; font-family: var(--mono); font-size: 0.92em; color: var(--muted); } | ||
| 786 | +.m-checks { display: grid; gap: 0.5em; font-size: 0.92em; } | ||
| 787 | +.m-checks li { display: grid; grid-template-columns: 1.5em 1fr; } | ||
| 788 | +.m-checks li::before { content: "✓"; display: grid; place-items: center; width: 1.15em; height: 1.15em; margin-top: 0.15em; border-radius: 50%; background: var(--music); color: #fff; font-size: 0.75em; font-weight: 600; } | ||
| 789 | +.m-upload { display: grid; gap: 0.5em; margin-top: auto; } | ||
| 790 | +.m-upload .m-btn { justify-content: center; height: 2.5em; font-size: 0.95em; } | ||
| 791 | +.m-bar-track { height: 0.35em; border-radius: 99px; background: var(--line-soft); overflow: hidden; } | ||
| 792 | +.m-bar-track i { display: block; height: 100%; background: var(--red); transform-origin: left; } | ||
| 793 | +.m-done { display: flex; align-items: center; gap: 0.5em; font-size: 0.88em; color: var(--muted); } | ||
| 794 | +.m-done::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--music); } | ||
| 795 | + | ||
| 796 | +.m-details .m-checks li { animation: m-rise 300ms ease-out both; animation-delay: calc(300ms + var(--i) * 260ms); } | ||
| 797 | +.m-details .m-upload .m-btn { animation: m-press 300ms ease-out both; animation-delay: 2000ms; } | ||
| 798 | +.m-details .m-bar-track i { animation: m-grow 1300ms cubic-bezier(.4,0,.2,1) both; animation-delay: 2200ms; } | ||
| 799 | +.m-details .m-done { animation: m-fade 400ms ease-out both; animation-delay: 3500ms; } | ||
| 800 | +@keyframes m-grow { from { transform: scaleX(0); } } | ||
| 801 | + | ||
| 802 | +/* the first screen waits for the tour to scroll into view */ | ||
| 803 | +.js .tour:not(.seen) .mock * { animation-play-state: paused; } | ||
| 804 | +@keyframes m-land { from { opacity: 0; transform: scaleX(0); } } | ||
| 805 | +@keyframes m-card { from { opacity: 0; transform: translateY(1.2em) scale(0.96); } } | ||
| 806 | +@keyframes m-underline { from { background-size: 0 0.12em; } } | ||
| 807 | + | ||
| 808 | +/* Small screens: titles become a scrolling row above the mockup */ | ||
| 333 | @media (max-width: 900px) { | 809 | @media (max-width: 900px) { |
| 334 | .tour { grid-template-columns: 1fr; gap: 16px; } | 810 | .tour { grid-template-columns: 1fr; gap: 16px; } |
| 335 | .tour-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 1px var(--gutter); } | 811 | .tour-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 1px var(--gutter); } |
modified
site/serve.mjs +1 -1 | @@ -1,4 +1,4 @@ | ||
| 1 | -// Serves the website for local work, without building it: site/public as is, the screenshots and the logo | |
| 1 | +// Serves the website for local work, without building it: site/public as is, the share image and the logo | |
| 2 | 2 | // from their place in the repository (the same mapping as build.mjs). Edit a file, reload the page. |
| 3 | 3 | // No dependencies: `node site/serve.mjs [port]`, then open http://localhost:4477. |
| 4 | 4 | import { createReadStream } from 'node:fs' |
| @@ -1,4 +1,4 @@ | |||
| 1 | -// Serves the website for local work, without building it: site/public as is, the screenshots and the logo | 1 | +// Serves the website for local work, without building it: site/public as is, the share image and the logo |
| 2 | // from their place in the repository (the same mapping as build.mjs). Edit a file, reload the page. | 2 | // from their place in the repository (the same mapping as build.mjs). Edit a file, reload the page. |
| 3 | // No dependencies: `node site/serve.mjs [port]`, then open http://localhost:4477. | 3 | // No dependencies: `node site/serve.mjs [port]`, then open http://localhost:4477. |
| 4 | import { createReadStream } from 'node:fs' | 4 | import { createReadStream } from 'node:fs' |
modified
web/scripts/screenshots.mjs +22 -29 | @@ -1,51 +1,44 @@ | ||
| 1 | -// Captures the screens shown in the README and on the site (media/screenshots), from a running studio. | |
| 1 | +// Captures the images of the README and the site's share image (media/screenshots) from the website's mockups: | |
| 2 | +// the app's screens redrawn in code on a made-up project, so no real project shows up anywhere. | |
| 2 | 3 | // |
| 3 | -// cd web; node scripts/screenshots.mjs [baseUrl] [--only name,name] | |
| 4 | +// cd web; node scripts/screenshots.mjs [--only name,name] | |
| 4 | 5 | // |
| 5 | -// baseUrl defaults to https://localhost:4400 (python -m studio dev). The shots use your own projects: | |
| 6 | -// change the ids in SHOTS. The interface is forced to English for the capture, without touching your setting. | |
| 6 | +// No server needed: the site is opened from site/public. The mockups are captured finished (reduced motion). | |
| 7 | 7 | import { mkdir } from 'node:fs/promises' |
| 8 | -import { fileURLToPath } from 'node:url' | |
| 8 | +import { fileURLToPath, pathToFileURL } from 'node:url' | |
| 9 | 9 | import { chromium } from 'playwright' |
| 10 | 10 | |
| 11 | 11 | const args = process.argv.slice(2) |
| 12 | -const base = (args.find((a) => !a.startsWith('--')) ?? 'https://localhost:4400').replace(/\/$/, '') | |
| 13 | 12 | const onlyArg = args.indexOf('--only') |
| 14 | 13 | const only = onlyArg >= 0 ? args[onlyArg + 1].split(',') : null |
| 14 | +const site = pathToFileURL(fileURLToPath(new URL('../../site/public/index.html', import.meta.url))).href | |
| 15 | 15 | const out = fileURLToPath(new URL('../../media/screenshots/', import.meta.url)) |
| 16 | 16 | |
| 17 | -/** [file name, path, extra wait in ms] */ | |
| 17 | +/** [file name, tab of the tour, viewport]: the README shows the first two, `og` is the share image */ | |
| 18 | 18 | const SHOTS = [ |
| 19 | - ['projects', '/'], | |
| 20 | - ['overview', '/p/509402e9a5'], | |
| 21 | - ['angle', '/p/f728f85ffb/angle'], | |
| 22 | - ['titles', '/p/f728f85ffb/titre'], | |
| 23 | - ['thumbnail', '/p/fa848779b9/vignette'], | |
| 24 | - ['script', '/p/509402e9a5/script'], | |
| 25 | - ['derush', '/p/509402e9a5/derush'], | |
| 26 | - ['storyboard', '/p/619afee567/storyboard', 1500], | |
| 27 | - ['editing', '/p/509402e9a5/montage', 2500], | |
| 28 | - ['details', '/p/f728f85ffb/description'], | |
| 19 | + ['editing', 'editing', { width: 1600, height: 1000 }], | |
| 20 | + ['storyboard', 'storyboard', { width: 1600, height: 1000 }], | |
| 21 | + ['og', 'editing', { width: 1200, height: 630 }], | |
| 29 | 22 | ] |
| 30 | 23 | |
| 31 | 24 | await mkdir(out, { recursive: true }) |
| 32 | 25 | const browser = await chromium.launch() |
| 33 | -const context = await browser.newContext({ | |
| 34 | - viewport: { width: 1440, height: 900 }, | |
| 35 | - deviceScaleFactor: 2, | |
| 36 | - ignoreHTTPSErrors: true, | |
| 37 | - locale: 'en-US', | |
| 38 | -}) | |
| 39 | -await context.addInitScript(() => localStorage.setItem('studio.locale', 'en')) | |
| 40 | -const page = await context.newPage() | |
| 41 | 26 | |
| 42 | -for (const [name, path, wait = 0] of SHOTS) { | |
| 27 | +for (const [name, tab, viewport] of SHOTS) { | |
| 43 | 28 | if (only && !only.includes(name)) continue |
| 44 | - await page.goto(base + path, { waitUntil: 'networkidle' }) | |
| 29 | + const page = await browser.newPage({ viewport, deviceScaleFactor: name === 'og' ? 1 : 2, reducedMotion: 'reduce' }) | |
| 30 | + await page.goto(site) | |
| 31 | + await page.click(`#tab-${tab}`) | |
| 32 | + // the mockup alone, over the whole viewport | |
| 33 | + await page.addStyleTag({ | |
| 34 | + content: `#shot-${tab} { position: fixed; inset: 0; z-index: 100; aspect-ratio: auto; border-radius: 0; box-shadow: none; }` | |
| 35 | + // the share image is wider than the frame: no room left for the chat's input | |
| 36 | + + (name === 'og' ? '.m-input { display: none; }' : ''), | |
| 37 | + }) | |
| 45 | 38 | await page.evaluate(() => document.fonts.ready) |
| 46 | - await page.waitForTimeout(800 + wait) | |
| 47 | 39 | await page.screenshot({ path: `${out}${name}.png` }) |
| 48 | - console.log(`${name}.png ${path}`) | |
| 40 | + console.log(`${name}.png #tab-${tab}`) | |
| 41 | + await page.close() | |
| 49 | 42 | } |
| 50 | 43 | |
| 51 | 44 | await browser.close() |
| @@ -1,51 +1,44 @@ | |||
| 1 | -// Captures the screens shown in the README and on the site (media/screenshots), from a running studio. | 1 | +// Captures the images of the README and the site's share image (media/screenshots) from the website's mockups: |
| 2 | +// the app's screens redrawn in code on a made-up project, so no real project shows up anywhere. | ||
| 2 | // | 3 | // |
| 3 | -// cd web; node scripts/screenshots.mjs [baseUrl] [--only name,name] | 4 | +// cd web; node scripts/screenshots.mjs [--only name,name] |
| 4 | // | 5 | // |
| 5 | -// baseUrl defaults to https://localhost:4400 (python -m studio dev). The shots use your own projects: | 6 | +// No server needed: the site is opened from site/public. The mockups are captured finished (reduced motion). |
| 6 | -// change the ids in SHOTS. The interface is forced to English for the capture, without touching your setting. | ||
| 7 | import { mkdir } from 'node:fs/promises' | 7 | import { mkdir } from 'node:fs/promises' |
| 8 | -import { fileURLToPath } from 'node:url' | 8 | +import { fileURLToPath, pathToFileURL } from 'node:url' |
| 9 | import { chromium } from 'playwright' | 9 | import { chromium } from 'playwright' |
| 10 | 10 | ||
| 11 | const args = process.argv.slice(2) | 11 | const args = process.argv.slice(2) |
| 12 | -const base = (args.find((a) => !a.startsWith('--')) ?? 'https://localhost:4400').replace(/\/$/, '') | ||
| 13 | const onlyArg = args.indexOf('--only') | 12 | const onlyArg = args.indexOf('--only') |
| 14 | const only = onlyArg >= 0 ? args[onlyArg + 1].split(',') : null | 13 | const only = onlyArg >= 0 ? args[onlyArg + 1].split(',') : null |
| 14 | +const site = pathToFileURL(fileURLToPath(new URL('../../site/public/index.html', import.meta.url))).href | ||
| 15 | const out = fileURLToPath(new URL('../../media/screenshots/', import.meta.url)) | 15 | const out = fileURLToPath(new URL('../../media/screenshots/', import.meta.url)) |
| 16 | 16 | ||
| 17 | -/** [file name, path, extra wait in ms] */ | 17 | +/** [file name, tab of the tour, viewport]: the README shows the first two, `og` is the share image */ |
| 18 | const SHOTS = [ | 18 | const SHOTS = [ |
| 19 | - ['projects', '/'], | 19 | + ['editing', 'editing', { width: 1600, height: 1000 }], |
| 20 | - ['overview', '/p/509402e9a5'], | 20 | + ['storyboard', 'storyboard', { width: 1600, height: 1000 }], |
| 21 | - ['angle', '/p/f728f85ffb/angle'], | 21 | + ['og', 'editing', { width: 1200, height: 630 }], |
| 22 | - ['titles', '/p/f728f85ffb/titre'], | ||
| 23 | - ['thumbnail', '/p/fa848779b9/vignette'], | ||
| 24 | - ['script', '/p/509402e9a5/script'], | ||
| 25 | - ['derush', '/p/509402e9a5/derush'], | ||
| 26 | - ['storyboard', '/p/619afee567/storyboard', 1500], | ||
| 27 | - ['editing', '/p/509402e9a5/montage', 2500], | ||
| 28 | - ['details', '/p/f728f85ffb/description'], | ||
| 29 | ] | 22 | ] |
| 30 | 23 | ||
| 31 | await mkdir(out, { recursive: true }) | 24 | await mkdir(out, { recursive: true }) |
| 32 | const browser = await chromium.launch() | 25 | const browser = await chromium.launch() |
| 33 | -const context = await browser.newContext({ | ||
| 34 | - viewport: { width: 1440, height: 900 }, | ||
| 35 | - deviceScaleFactor: 2, | ||
| 36 | - ignoreHTTPSErrors: true, | ||
| 37 | - locale: 'en-US', | ||
| 38 | -}) | ||
| 39 | -await context.addInitScript(() => localStorage.setItem('studio.locale', 'en')) | ||
| 40 | -const page = await context.newPage() | ||
| 41 | 26 | ||
| 42 | -for (const [name, path, wait = 0] of SHOTS) { | 27 | +for (const [name, tab, viewport] of SHOTS) { |
| 43 | if (only && !only.includes(name)) continue | 28 | if (only && !only.includes(name)) continue |
| 44 | - await page.goto(base + path, { waitUntil: 'networkidle' }) | 29 | + const page = await browser.newPage({ viewport, deviceScaleFactor: name === 'og' ? 1 : 2, reducedMotion: 'reduce' }) |
| 30 | + await page.goto(site) | ||
| 31 | + await page.click(`#tab-${tab}`) | ||
| 32 | + // the mockup alone, over the whole viewport | ||
| 33 | + await page.addStyleTag({ | ||
| 34 | + content: `#shot-${tab} { position: fixed; inset: 0; z-index: 100; aspect-ratio: auto; border-radius: 0; box-shadow: none; }` | ||
| 35 | + // the share image is wider than the frame: no room left for the chat's input | ||
| 36 | + + (name === 'og' ? '.m-input { display: none; }' : ''), | ||
| 37 | + }) | ||
| 45 | await page.evaluate(() => document.fonts.ready) | 38 | await page.evaluate(() => document.fonts.ready) |
| 46 | - await page.waitForTimeout(800 + wait) | ||
| 47 | await page.screenshot({ path: `${out}${name}.png` }) | 39 | await page.screenshot({ path: `${out}${name}.png` }) |
| 48 | - console.log(`${name}.png ${path}`) | 40 | + console.log(`${name}.png #tab-${tab}`) |
| 41 | + await page.close() | ||
| 49 | } | 42 | } |
| 50 | 43 | ||
| 51 | await browser.close() | 44 | await browser.close() |