@docyrus/animaguru 0.20.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docyrus/animaguru",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Agent-friendly AnimaGuru CLI built with CrustJS",
   "type": "module",
   "bin": {

package/skills/animaguru/SKILL.md

@@ -61,7 +61,7 @@ animaguru assets generate PROJECT_ID --type speech --name "Welcome" \
   --prompt "Welcome, traveler." --voice Kore --delivery "Warm and welcoming" --yes
 ```
 
-Images use the staff-managed route automatically. Use `--model` to select a model for video, music, speech or sound effects; discover the choices with `catalog` and the server's configured subset with `assets list`. Asset defaults are per type, independently of sprite project defaults. Image backgrounds are retained unless `--transparent` is supplied. CLI 0.17.0 adds `--references`, `--mask` and the 16:9 and 9:16 image shapes. `--references SHA,SHA` (up to four) makes an image follow this project's saved images, uploads or sprite art. To keep a recurring character consistent, generate a character sheet once and reference its `file` SHA in every later image; refer to references in the prompt as Image 1, Image 2 and so on, and say what to take from each. `--aspect-ratio` is 1:1, 3:2, 2:3, 16:9 or 9:16; use 16:9 or 9:16 for video scenes. `--mask x,y,width,height[;…]` (up to eight rectangles, in fractions of Image 1 from the top left) edits only those parts of Image 1, the first reference, and keeps the rest and Image 1's shape. Look at the image before choosing the rectangles. Videos require an image asset's `file` SHA from `assets list`, or a character's `art` SHA from `projects get`, in the same project. Validate video options against the selected model's `videoProfiles` in `catalog`; omitted video settings use five seconds and that provider's first resolution/mode. MiniMax H3 Max and H3 Max Turbo (`fal/minimax-h3-max`, `fal/minimax-h3-max-turbo`) also take `--workflow text-to-video` (with `--aspect-ratio`) and `--workflow extend-video` (with `--source VIDEO_SHA`, 2K resolution, `--extend-output`, and up to three comma-separated `--audio-references`). From images, they accept `--end-reference` with or without `--reference` and a `--soundtrack AUDIO_SHA`. All workflows take `--prompt-expansion` and `--seed`. These need CLI 0.8.0 or newer. CLI 0.18.0 adds H3 Max's (not Turbo's) `--workflow reference-to-video` (keep a character across clips from up to nine `--references`, three `--reference-videos` and three `--audio-references`, named Image 1, Video 1, Audio 1 in the prompt; optional `--reference`, `--end-reference`, `--middle-reference` with `--middle-seconds`), `lip-sync` (the face in `--reference` says `--soundtrack` speech of 5 s–15 min; no `--prompt`; `--transcribe`), `camera-controls` (`--camera "time,azimuth,elevation,distance;…"`, 2–12 keyframes around `--reference`; without a prompt only the camera moves), `insert-video` (a 5–13 s scene inside `--source` from `--insert-at` to `--resume-at`, guided by `--references`/`--reference-videos`), `recast` (people in `--references` replace those in `--source`; pass `--subject-consent` only after each person agreed), `relight` (`--source` relit from a `--lighting` sphere image; no prompt), `3d-to-video` (a 3D render `--source` into footage, from `--references` or `--generated-references`) and `style` (`--style vhs|retro-toon-70s|low-poly|hand-drawn|16bit-pixel`, `--damage` for VHS, 768p, 5–15 whole seconds). Lip-sync, recast, relight and 3d-to-video take their input's length; their dry runs, like reference-to-video's and insert-video's, are server estimates because the price depends on the files. H3 takes fractional `--seconds` (6.5). For Gemini speech, `--prompt` is spoken verbatim and `--delivery` is a separate instruction. Music uses Lyria; the Gemini TTS models are for speech.
+Images use the staff-managed route automatically. Use `--model` to select a model for video, music, speech or sound effects; discover the choices with `catalog` and the server's configured subset with `assets list`. Asset defaults are per type, independently of sprite project defaults. Image backgrounds are retained unless `--transparent` is supplied. CLI 0.17.0 adds `--references`, `--mask` and the 16:9 and 9:16 image shapes. `--references SHA,SHA` (up to four) makes an image follow this project's saved images, uploads or sprite art. To keep a recurring character consistent, generate a character sheet once and reference its `file` SHA in every later image; refer to references in the prompt as Image 1, Image 2 and so on, and say what to take from each. `--aspect-ratio` is 1:1, 3:2, 2:3, 16:9 or 9:16; use 16:9 or 9:16 for video scenes. `--mask x,y,width,height[;…]` (up to eight rectangles, in fractions of Image 1 from the top left) edits only those parts of Image 1, the first reference, and keeps the rest and Image 1's shape. Look at the image before choosing the rectangles. Videos require an image asset's `file` SHA from `assets list`, or a character's `art` SHA from `projects get`, in the same project. Validate video options against the selected model's `videoProfiles` in `catalog`; omitted video settings use five seconds and that provider's first resolution/mode. MiniMax H3 Max and H3 Max Turbo (`fal/minimax-h3-max`, `fal/minimax-h3-max-turbo`) also take `--workflow text-to-video` (with `--aspect-ratio`) and `--workflow extend-video` (with `--source VIDEO_SHA`, 2K resolution, `--extend-output`, and up to three comma-separated `--audio-references`). From images, they accept `--end-reference` with or without `--reference` and a `--soundtrack AUDIO_SHA`. All workflows take `--prompt-expansion` and `--seed`. These need CLI 0.8.0 or newer. CLI 0.18.0 adds H3 Max's (not Turbo's) `--workflow reference-to-video` (keep a character across clips from up to nine `--references`, three `--reference-videos` and three `--audio-references`, named Image 1, Video 1, Audio 1 in the prompt; optional `--reference`, `--end-reference`, `--middle-reference` with `--middle-seconds`), `lip-sync` (the face in `--reference` says `--soundtrack` speech of 5 s–15 min; no `--prompt`; `--transcribe`), `camera-controls` (`--camera "time,azimuth,elevation,distance;…"`, 2–12 keyframes around `--reference`; without a prompt only the camera moves), `insert-video` (a 5–13 s scene inside `--source` from `--insert-at` to `--resume-at`, guided by `--references`/`--reference-videos`), `recast` (people in `--references` replace those in `--source`; pass `--subject-consent` only after each person agreed), `relight` (`--source` relit from a `--lighting` sphere image; no prompt), `3d-to-video` (a 3D render `--source` into footage, from `--references` or `--generated-references`) and `style` (`--style vhs|retro-toon-70s|low-poly|hand-drawn|16bit-pixel`, `--damage` for VHS, 768p, 5–15 whole seconds). Lip-sync, recast, relight and 3d-to-video take their input's length; their dry runs, like reference-to-video's and insert-video's, are server estimates because the price depends on the files. H3 takes fractional `--seconds` (6.5). CLI 0.21.0 adds FLUX 3 Max (`fal/flux-3-max`): image-to-video (with an optional `--end-reference`) and text-to-video for 5–20 whole seconds at 720p or 1080p with its own sound and no `--soundtrack`, and `--workflow keyframes-to-video`, which passes through 1–10 `--keyframes "SECONDS,SHA;…"` images, each reached at its second within `--seconds`. It always reasons about the prompt: `--prompt-expansion quality` thoroughly, other values lightly. For Gemini speech, `--prompt` is spoken verbatim and `--delivery` is a separate instruction. Music uses Lyria; the Gemini TTS models are for speech.
 
 For ElevenLabs speech, choose `eleven_v4` or `eleven_v4_turbo`, pass an ElevenLabs voice ID with `--voice` (George is the default), and put audio tags in `--prompt` rather than using `--delivery`. For sound effects, use `--type sfx`; the only model is `eleven_text_to_sound_v2`. SFX supports `--seconds` from 0.5 to 30 (default 5), `--loop`, and `--prompt-influence` from 0 to 1 (default 0.3). These additions require CLI 0.5.0 or newer; check `catalog` before using them with an installed CLI.
 

package/templates/video/src/player.ts

@@ -73,6 +73,26 @@ export async function mountPlayer({ config, Film, chapters, branding, exportEndp
   type WebkitDocument = Document & { webkitFullscreenElement?: Element | null; webkitExitFullscreen?: () => void };
   type WebkitElement = HTMLElement & { webkitRequestFullscreen?: () => void };
   const fullscreenElement = () => document.fullscreenElement ?? (document as WebkitDocument).webkitFullscreenElement ?? null;
+  // The page's player fits the window (style.css). This measures the page above it and the controls under its picture,
+  // which change as the window resizes and the transport wraps. Full screen keeps the last measures for its way back; an
+  // embed or a capture fills its frame instead.
+  if (!embed && !capture) {
+    const main = theater.parentElement!, picture = element("canvas-host");
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      if (fullscreenElement() || theater.classList.contains("expanded")) return;
+      const box = theater.getBoundingClientRect();
+      main.style.setProperty("--player-above", `${Math.round(box.top + scrollY)}px`);
+      main.style.setProperty("--player-controls", `${Math.ceil(box.height - picture.getBoundingClientRect().height)}px`);
+    };
+    main.style.setProperty("--film-aspect", `${config.width} / ${config.height}`);
+    main.classList.add("fit-window");
+    measure();
+    // A measure waits for the next frame, so the resize it causes is not reported as a loop.
+    const observer = new ResizeObserver(() => { frame ||= requestAnimationFrame(measure); });
+    for (const target of [theater, document.querySelector(".masthead")!]) observer.observe(target);
+  }
 
   async function start() {
     await document.fonts.ready;

package/templates/video/src/style.css

@@ -15,7 +15,18 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl
 main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.9px; margin: 0 0 12px; color: #667660; }
 .specs { font: 10px monospace; color: #6a7668; white-space: nowrap; }
-#theater { border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+#theater { container: theater / inline-size; border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+/* The page's player fits the window: its width follows the height left for the picture below the page header and above
+   the controls, so the picture and the controls show without scrolling and the timeline follows below. The player
+   measures that header and those controls (--player-above, --player-controls). The small viewport height keeps the
+   size steady while a phone's toolbars come and go. The picture keeps 240px of height where the window has it: a header
+   that leaves less scrolls away instead, as on a phone on its side. The player keeps a width its controls fit, and a
+   tall film narrower than that shows with bars at its sides, as on a phone. */
+.fit-window { --player-room: calc(100vh - var(--player-controls) - 16px); }
+@supports (height: 100svh) { .fit-window { --player-room: calc(100svh - var(--player-controls) - 16px); } }
+.fit-window { --player-fit: max(var(--player-room) - var(--player-above), min(var(--player-room), 240px)); }
+.fit-window #theater:not(.expanded):not(:fullscreen), .fit-window .player-note { min-width: min(100%, 360px); max-width: calc(var(--player-fit) * var(--film-aspect) + 2px); margin-inline: auto; }
+.fit-window #theater:not(.expanded):not(:fullscreen) #canvas-host { max-height: var(--player-fit); }
 #canvas-host { width: 100%; position: relative; aspect-ratio: 16 / 9; }
 #canvas-host canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
 #loading { position: absolute; inset: 45% 0 auto; text-align: center; color: #788073; }
@@ -33,7 +44,7 @@ main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 #download-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 10px; text-align: left; font-size: 12px; }
 #download-menu small { color: #77836f; font-size: 10px; }
 #captions[aria-pressed="true"] { background: #e7ecdc; font-weight: 700; }
-.player-note { display: flex; justify-content: space-between; gap: 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
+.player-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
 .preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
 #status { color: #9a391c; font-size: 13px; margin: 10px 0; }
 .resource-timeline { min-width: 0; margin: 32px 0; border: 1px solid #daddcf; border-radius: 12px; overflow: hidden; background: #fbf9f3; }
@@ -108,11 +119,16 @@ body:not(.capture) #canvas-host canvas { cursor: pointer; }
 @media (max-width: 750px) {
   .masthead { padding: 20px; }.brand span { display: none; }.brand strong { font-size: 20px; }.template { font-size: 9px; padding: 8px 10px; }
   main { padding: 30px 20px 10px; }
-  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
   .player-note { flex-direction: column; gap: 6px; font-size: 9px; }
   .timeline-toolbar { flex-wrap: wrap; padding: 13px; }.timeline-zoom { margin-left: auto; }.timeline-clock { margin-right: 4px; }
   footer { padding: 25px 20px; }footer span:last-child { display: none; }
 }
+/* A short window, such as a phone on its side, keeps more of its height for the picture. */
+@media (max-height: 560px) { .masthead { padding-block: 12px; } main { padding-top: 16px; } }
+/* The transport wraps by the player's width, which a tall film keeps narrow on a wide screen too. */
+@container theater (max-width: 600px) {
+  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
+}
 @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
 
 #audio-status { margin: 0; padding: 9px 16px; font-size: 12px; color: #8b2f25; background: #fff1eb; }