@scenerok/cli 2.2.0

package/dist/utils/skillsManifest.js

@@ -0,0 +1,122 @@
+/**
+ * Remote skill freshness: hash flat markdown/json files against the published manifest.
+ */
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+export const DEFAULT_MANIFEST_URL = 'https://scenerok.com/.well-known/agent-skills/manifest.json';
+const TEXT_EXT = new Set(['.md', '.json', '.txt']);
+function hashFileContent(content, ext) {
+    const h = createHash('sha256');
+    const normalized = TEXT_EXT.has(ext) ? content.replace(/\r\n/g, '\n') : content;
+    h.update(normalized);
+    return h.digest('hex').slice(0, 16);
+}
+/** Map manifest slug to on-disk filename. */
+export function slugToFilename(slug) {
+    if (slug === 'catalog-index')
+        return 'catalog-index.json';
+    return `${slug}.md`;
+}
+export function hashInstalledFile(filePath) {
+    if (!existsSync(filePath))
+        return null;
+    const content = readFileSync(filePath, 'utf8');
+    const ext = filePath.slice(filePath.lastIndexOf('.'));
+    return { hash: hashFileContent(content, ext), files: 1 };
+}
+export function hashInstalled(skillDir, manifest) {
+    const out = {};
+    for (const slug of Object.keys(manifest.skills)) {
+        const filename = slugToFilename(slug);
+        const entry = hashInstalledFile(join(skillDir, filename));
+        if (entry)
+            out[slug] = entry;
+    }
+    return out;
+}
+export function diffSkills(installed, latest) {
+    const skills = [];
+    const summary = { current: 0, outdated: 0, missing: 0 };
+    for (const name of Object.keys(latest.skills).sort()) {
+        const latestEntry = latest.skills[name];
+        const installedEntry = installed[name];
+        let status;
+        if (!installedEntry)
+            status = 'missing';
+        else if (installedEntry.hash === latestEntry.hash)
+            status = 'current';
+        else
+            status = 'outdated';
+        if (status === 'current')
+            summary.current++;
+        else if (status === 'outdated')
+            summary.outdated++;
+        else
+            summary.missing++;
+        skills.push({
+            name,
+            status,
+            installedHash: installedEntry?.hash,
+            latestHash: latestEntry.hash,
+            filename: slugToFilename(name),
+        });
+    }
+    return {
+        updateAvailable: summary.outdated > 0 || summary.missing > 0,
+        summary,
+        skills,
+    };
+}
+export async function fetchManifest(url = DEFAULT_MANIFEST_URL) {
+    const res = await fetch(url, { headers: { Accept: 'application/json' } });
+    if (!res.ok)
+        throw new Error(`HTTP ${res.status} fetching ${url}`);
+    const data = (await res.json());
+    if (!data?.skills || typeof data.skills !== 'object') {
+        throw new Error(`Malformed skills manifest from ${url}`);
+    }
+    return data;
+}
+export async function fetchSkillFile(slug, baseUrl) {
+    const site = (baseUrl ?? 'https://scenerok.com').replace(/\/$/, '');
+    const filename = slugToFilename(slug);
+    const url = `${site}/.well-known/agent-skills/${filename}`;
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`HTTP ${res.status} fetching ${url}`);
+    return res.text();
+}
+export function locateSkillDir(platform) {
+    const dirs = {
+        opencode: join(homedir(), '.agents/skills/scenerok'),
+        claude: join(homedir(), '.claude/skills/scenerok'),
+        codex: join(homedir(), '.codex/skills/scenerok'),
+        cursor: join(homedir(), '.cursor/skills/scenerok'),
+        aider: join(homedir(), '.aider/skills/scenerok'),
+    };
+    if (platform && dirs[platform] && existsSync(dirs[platform])) {
+        return dirs[platform];
+    }
+    for (const dir of Object.values(dirs)) {
+        if (existsSync(join(dir, 'SKILL.md')))
+            return dir;
+    }
+    return null;
+}
+export async function checkSkills(opts = {}) {
+    const latest = await fetchManifest(opts.manifestUrl);
+    const location = opts.dir ?? locateSkillDir() ?? null;
+    const installed = location ? hashInstalled(location, latest) : {};
+    const diff = diffSkills(installed, latest);
+    return { location, ...diff };
+}
+/** List extra local files not in manifest (legacy bundled files). */
+export function listExtraLocalFiles(skillDir, manifest) {
+    if (!existsSync(skillDir))
+        return [];
+    const known = new Set(Object.keys(manifest.skills).map(slugToFilename));
+    known.add('SKILL.md');
+    return readdirSync(skillDir).filter((f) => !known.has(f));
+}

package/examples/system/3-tips-fitness.vid

@@ -0,0 +1,45 @@
+# 3 Tips Fitness Reel - Reusable Template
+# Demonstrates dynamic timing [-] blocks + xAI video generation per tip (explicit import form)
+
+import xai from "@scenerok/xai"
+
+# === INPUTS (user provides these) ===
+input tip1_text = "{{tip1_text | Tip 1 goes here}}"
+input tip2_text = "{{tip2_text | Tip 2 goes here}}"
+input tip3_text = "{{tip3_text | Tip 3 goes here}}"
+input cta_text = "{{cta_text | Save this for later}}"
+
+# === DYNAMIC TIP SECTIONS ===
+# Each [-] block auto-calculates duration based on content
+[-] = text tip1_text, style: title, position: center, color: "#FFFFFF", size: 64, align: center
+
+# xAI generates a fresh visual for this specific tip
+[-] = video xai.imagine(
+    "Cinematic fitness shot: " + tip1_text,
+    aspect_ratio: "9:16",
+    resolution: "1k"
+)
+
+[-] = text tip2_text, style: title, position: center, color: "#FFFFFF", size: 64, align: center
+
+[-] = video xai.imagine(
+    "Cinematic fitness shot: " + tip2_text,
+    aspect_ratio: "9:16",
+    resolution: "1k"
+)
+
+[-] = text tip3_text, style: title, position: center, color: "#FFFFFF", size: 64, align: center
+
+[-] = video xai.imagine(
+    "Cinematic fitness shot: " + tip3_text,
+    aspect_ratio: "9:16",
+    resolution: "1k"
+)
+
+# === CTA + BRANDING ===
+[- 2s] = text cta_text, style: cta, position: bottom, color: "#FF0055", size: 48
+
+# Subtle brand watermark
+[-] = text "SceneRok", style: watermark, position: "85%, 92%", color: "#888888", size: 28, opacity: 0.6
+
+output to "3-tips-fitness.mp4", resolution: "1080x1920", fps: 30

package/examples/system/ecom-product-launch.vid

@@ -0,0 +1,31 @@
+# Ecom Product Launch Reel - Reusable Template
+# Shows product + lifestyle shot generated by xAI (@scenerok/xai), with strong CTA
+
+import xai from "@scenerok/xai"
+
+# === INPUTS ===
+input product_name = "{{product_name | Your Product}}"
+input hook_text = "{{hook_text | The one thing that actually works}}"
+input price = "{{price | $49}}"
+input cta_text = "{{cta_text | Shop Now}}"
+
+# === HOOK ===
+[0s .. 3s] = text hook_text, style: hook, position: center, color: "#FFFFFF", size: 72, align: center
+
+# === PRODUCT VISUAL (xAI generated lifestyle video) ===
+[3s .. 10s] = video xai.imagine(
+    "Premium lifestyle product shot of " + product_name + ", cinematic lighting, modern aesthetic, 9:16 vertical",
+    aspect_ratio: "9:16",
+    resolution: "1k"
+)
+
+# === PRICE + URGENCY ===
+[8s .. 12s] = text "Only " + price, style: price, position: "center, 70%", color: "#FF0055", size: 56
+
+# === STRONG CTA ===
+[- 3s] = text cta_text, style: cta, position: bottom, color: "#FFFFFF", size: 64, stroke: "#000000", stroke_width: 4
+
+# Subtle brand element
+[-] = text "SceneRok", style: watermark, position: "85%, 92%", color: "#888888", size: 26, opacity: 0.5
+
+output to "product-launch.mp4", resolution: "1080x1920", fps: 30

package/examples/system/glitch-title.vid

@@ -0,0 +1,17 @@
+# Glitch Title
+# A stylized intro with glitch effects and bold typography.
+# Great for gaming, tech, or edgy brand content.
+
+input background = "{{background_clip}}"
+
+[0s .. 5s] = background
+background.Trim(start: 0s, end: 5s)
+background.Opacity(value: 0.8, duration: 5s)
+
+[0.5s .. 3s] = text "{{title}}", font: "Bebas Neue", position: center, color: "#00FF88", size: 72, stroke: "#000000", stroke_width: 4, x: "50%", y: "45%", align: center, letter_spacing: 4
+
+[3.2s .. 4.5s] = text "{{subtitle}}", font: "Oswald", position: center, color: "#FF0055", size: 96, stroke: "#000000", stroke_width: 4, x: "50%", y: "60%", align: center, rotation: 2, shadow_color: "#00FF88", shadow_blur: 8
+
+[0s .. 5s] = filter "glitch", intensity: 0.4
+
+output to "glitch-title.mp4", resolution: "1080x1920", fps: 30

package/examples/system/meme-remix.vid

@@ -0,0 +1,15 @@
+# Meme Remix
+# Fast-cut format with top and bottom text overlays.
+# Perfect for reaction clips, punchline edits, and viral-style content.
+
+input clip = "{{reaction_clip}}"
+
+[0s .. 4s] = clip
+clip.Trim(start: 0s, end: 4s)
+clip.Speed(factor: 1.2)
+
+[0.1s .. 1.5s] = text "{{hook_text}}", style: title, position: top, color: "#FFFFFF", size: 56, stroke: "#000000", stroke_width: 3
+
+[2.5s .. 3.8s] = text "{{punchline}}", style: title, position: bottom, color: "#EF4444", size: 64, stroke: "#000000", stroke_width: 4
+
+output to "meme-remix.mp4", resolution: "1080x1920", fps: 30

package/examples/system/minimal-text-reel.vid

@@ -0,0 +1,11 @@
+# Minimal Text Reel v2
+# A clean text-only reel demonstrating advanced typography:
+# dynamic placement, rotation, Google Fonts, shadows, letter spacing.
+
+[0s .. 2.5s] = text "{{headline}}", font: "Bebas Neue", size: 96, color: "#FFFFFF", x: "50%", y: "30%", align: center, letter_spacing: 8, shadow_color: "#FF0055", shadow_blur: 10, shadow_offset_x: 4, shadow_offset_y: 4
+
+[2s .. 4s] = text "{{subtitle}}", font: "Inter", size: 48, color: "#00FF88", x: "50%", y: "55%", align: center, rotation: -3, opacity: 0.9
+
+[3.5s .. 5.5s] = text "{{cta}}", font: "Space Grotesk", size: 44, color: "#6366F1", x: "50%", y: "75%", align: center, shadow_color: "#000000", shadow_blur: 16, shadow_offset_y: 6
+
+output to "minimal-text-reel.mp4", resolution: "1080x1920", fps: 30

package/examples/system/product-launch.vid

@@ -0,0 +1,18 @@
+# Product Launch
+# Showcase a product with bold headlines and a clear call-to-action.
+# Uses a subtle vignette filter for cinematic depth.
+
+input hero = "{{hero_clip}}"
+
+[0s .. 6s] = hero
+hero.Trim(start: 0s, end: 6s)
+
+[0.3s .. 2.3s] = text "{{headline}}", style: title, position: top, color: "#FFFFFF", size: 64, stroke: "#000000", stroke_width: 3
+
+[2.5s .. 4.5s] = text "{{description}}", style: caption, position: center, color: "#F3F4F6", size: 36, stroke: "#000000", stroke_width: 2
+
+[4.5s .. 5.8s] = text "{{cta}}", style: title, position: bottom, color: "#F59E0B", size: 52, stroke: "#000000", stroke_width: 3
+
+[0s .. 6s] = filter "vignette", intensity: 0.35
+
+output to "product-launch.mp4", resolution: "1080x1920", fps: 30

package/examples/system/rokmilk-chocolate-promo.vid

@@ -0,0 +1,25 @@
+# RokMilk Chocolate Milkshake — 15s promo (correct VidScript v2 patterns)
+# Requires: scenerok secrets set XAI_API_KEY=... (or configured on scenerok.com account)
+
+import xai from "@scenerok/xai"
+import motion from "@scenerok/basic-animations"
+
+# Generated visuals — one clip per segment; prompts must use straight double quotes only
+[-] = video xai.imagine("Cinematic slow-motion pour of rich creamy chocolate milk into a sleek modern 250ml carton on marble, warm studio lighting, shallow depth of field, 9:16 vertical", aspect_ratio: "9:16", duration: 5)
+
+[-] = video xai.imagine("Elegant rotating product shot of premium chocolate milk carton labeled RokMilk, brown and gold palette, soft bokeh, advertising visual, 9:16 vertical", aspect_ratio: "9:16", duration: 5)
+
+[-] = video xai.imagine("Silky chocolate milk swirl in glass with RokMilk carton blurred in background, golden light, appetizing food cinematography, 9:16 vertical", aspect_ratio: "9:16", duration: 5)
+
+[0s .. 2.5s] = text "RokMilk", font: "Bebas Neue", size: 80, color: "#FFD700", x: "50%", y: "18%", align: center, stroke: "#3E1C00", stroke_width: 4, letter_spacing: 6, animate: motion.fadeIn(0.6s)
+
+[2s .. 5s] = text "Chocolate Milkshake", font: "Outfit", size: 56, color: "#FFFFFF", x: "50%", y: "45%", align: center, stroke: "#3E1C00", stroke_width: 3, animate: motion.riseIn(0.8s)
+
+[5s .. 8s] = text "250ml of Pure Indulgence", font: "Inter", size: 42, color: "#F3E5AB", x: "50%", y: "55%", align: center, stroke: "#3E1C00", stroke_width: 2, animate: motion.slideY(40, 0, 0.8s)
+
+[11s .. 14s] = text "visit your nearest grocery store", font: "Bebas Neue", size: 48, color: "#FFD700", x: "50%", y: "82%", align: center, stroke: "#3E1C00", stroke_width: 4, letter_spacing: 3, animate: motion.fadeIn(1s)
+
+[0s .. 15s] = filter "vignette", intensity: 0.3
+[0s .. 15s] = filter "saturation", value: 1.12
+
+output to "rokmilk-chocolate-promo.mp4", resolution: "1080x1920", fps: 30, background: "#1A0F05"

package/examples/system/testimonial-cut.vid

@@ -0,0 +1,16 @@
+# Testimonial Cut
+# A quote-focused format with a subtle vintage feel.
+# Great for customer stories, reviews, and social proof clips.
+
+input speaker = "{{speaker_clip}}"
+
+[0s .. 5s] = speaker
+speaker.Trim(start: 0s, end: 5s)
+
+[0.5s .. 3s] = text "{{quote}}", style: subtitle, position: center, color: "#FFFFFF", size: 42, stroke: "#000000", stroke_width: 2
+
+[3.2s .. 4.8s] = text "{{attribution}}", style: caption, position: bottom, color: "#D1D5DB", size: 32, stroke: "#000000", stroke_width: 2
+
+[0s .. 5s] = filter "sepia", intensity: 0.3
+
+output to "testimonial.mp4", resolution: "1080x1920", fps: 30

package/examples/system/ugc-testimonial-voiceover.vid

@@ -0,0 +1,33 @@
+# UGC Testimonial with Voiceover - Reusable Template
+# Uses xAI (via explicit import) for TTS voiceover + generated visuals
+
+import xai from "@scenerok/xai"
+
+# === INPUTS ===
+input quote = "{{quote | This product completely changed how I work}}"
+input customer_name = "{{customer_name | Sarah K.}}"
+input product_name = "{{product_name | SceneRok}}"
+
+# === VOICEOVER + VISUAL ===
+[-] = audio xai.tts(
+    quote + ". " + customer_name + " from " + product_name,
+    voice: "eve",
+    speed: 1.05
+)
+
+[-] = video xai.imagine(
+    "Cinematic lifestyle shot representing: " + quote + ", premium modern aesthetic, 9:16 vertical",
+    aspect_ratio: "9:16",
+    resolution: "1k"
+)
+
+# === QUOTE TEXT (appears while voiceover plays) ===
+[-] = text "\"" + quote + "\"", style: quote, position: center, color: "#FFFFFF", size: 52, align: center
+
+# === ATTRIBUTION ===
+[- 2s] = text "— " + customer_name, style: attribution, position: "center, 75%", color: "#CCCCCC", size: 32
+
+# === BRANDING ===
+[-] = text "Made with SceneRok", style: watermark, position: "85%, 92%", color: "#888888", size: 24, opacity: 0.6
+
+output to "ugc-testimonial.mp4", resolution: "1080x1920", fps: 30

package/examples/system/voice-visual-promo.vid

@@ -0,0 +1,21 @@
+# Voice + Visual Promo
+# Combines main footage with voiceover or music and layered titles.
+
+input main = "{{main_video}}"
+input voice = "{{voiceover_audio}}"
+
+[0s .. 12s] = main
+main.Trim(start: 0s, end: 12s)
+
+[0s .. 12s] = audio voice, volume: 0.9
+
+[0.5s .. 3s] = text "{{title}}", font: "Inter", size: 68, color: "{{brand_color}}", x: "50%", y: "22%", align: center, stroke: "#111827", stroke_width: 3
+
+[3s .. 7s] = text "{{subtitle}}", font: "Inter", size: 34, color: "#F3F4F6", x: "50%", y: "50%", align: center, stroke: "#0F172A", stroke_width: 2
+
+[7s .. 11s] = text "{{cta}}", font: "Inter", size: 56, color: "#FFFFFF", x: "50%", y: "78%", align: center, stroke: "#000000", stroke_width: 3
+
+[0s .. 12s] = filter "vignette", intensity: 0.22
+[0s .. 12s] = filter "saturation", value: 1.12
+
+output to "voice-visual-promo.mp4", resolution: "1080x1920", fps: 30

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@scenerok/cli",
+  "version": "2.2.0",
+  "description": "SceneRok CLI - Create videos from your terminal and agent workflows",
+  "type": "module",
+  "bin": {
+    "scenerok": "dist/index.js",
+    "sr": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "examples",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "sync:skills": "node ../../scripts/sync-scenerok-skills.mjs",
+    "prepublishOnly": "npm run sync:skills && npm run build"
+  },
+  "keywords": [
+    "scenerok",
+    "@scenerok/cli",
+    "video",
+    "cli",
+    "vidscript",
+    "agent",
+    "ai"
+  ],
+  "author": "SceneRok",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.1",
+    "inquirer": "^9.2.0",
+    "node-fetch": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/inquirer": "^9.0.7",
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/skills/remote/ai-models.md

@@ -0,0 +1,65 @@
+# AI Models — Video and Image Generation
+
+## Modality picker
+
+| Intent | API | When |
+| --- | --- | --- |
+| Clean still / key visual | `xai.image(...)` · `cf.image(...)` | Product shot, poster frame |
+| Text-to-video | `xai.imagine(...)` · `xai.genVideo(...)` · `cf.video(...)` | B-roll, lifestyle, cinematic |
+| Animate one image | `xai.imageToVideo(img, prompt, ...)` · `cf.imageToVideo(...)` | Product photo → motion |
+| Multi-reference scene | `xai.referenceToVideo([imgs], prompt, ...)` | Brand elements guide scene |
+| Extend existing clip | `xai.extendVideo(...)` · `cf.extendVideo(...)` | Continue generated clip |
+
+**Always import:** `import xai from "@scenerok/xai"` and/or `import cf from "@scenerok/cloudflare"`.
+
+Prefer **720p** (or the model default) for generative video. Cap spend with duration, not exotic post-steps.
+
+Generative prompts must require: no text, no words, no letters, no captions, no logos, no watermarks, no readable UI copy.
+
+## Examples
+
+### Grok genVideo()
+
+Explicit duration, resolution, and aspect ratio for text-to-video.
+
+**Landscape 8 s**
+
+```vidscript
+import xai from "@scenerok/xai"
+
+[- 3s] = video xai.genVideo("Timelapse of clouds over desert mesas, wide cinematic, anamorphic flare", duration: 3, aspect_ratio: "16:9", resolution: "720p")
+
+[prev .. prev + 0.8s] = text "genVideo()", font: "Inter Bold", size: 44, color: "#FFFFFF", shadow_blur: 10, align: "center", y: "88%"
+```
+
+**Vertical 6 s reel**
+
+```vidscript
+import xai from "@scenerok/xai"
+
+[- 3s] = video xai.genVideo("Drone shot over a futuristic city at sunset, lens flare, cinematic", duration: 3, aspect_ratio: "9:16", resolution: "720p")
+```
+
+### Grok imagine()
+
+One-call text-to-video. Default 5 s, 720p, 9:16.
+
+**Ocean drone**
+
+```vidscript
+import xai from "@scenerok/xai"
+
+[- 3s] = video xai.imagine("Slow aerial drone over turquoise ocean waves, golden hour, cinematic", aspect_ratio: "16:9", resolution: "720p")
+
+[prev .. prev + 0.8s] = text "imagine()", font: "Inter Bold", size: 48, color: "#FFFFFF", align: "center", y: "85%"
+```
+
+**Street market**
+
+```vidscript
+import xai from "@scenerok/xai"
+
+[- 3s] = video xai.imagine("A neon-lit street market at night, cinematic, volumetric light", aspect_ratio: "9:16", resolution: "720p")
+
+[prev .. prev + 0.8s] = text "Grok imagine()", font: "Inter Bold", size: 56, color: "#FFFFFF", shadow_color: "#000000", shadow_blur: 12, position: "bottom", align: "center"
+```

package/skills/remote/animations-catalog.md

@@ -0,0 +1,89 @@
+# Animations Catalog
+
+All `animations.<fn>(...)` blocks from `@scenerok/animations`. Total: **67** entries.
+
+```vidscript
+import animations from "@scenerok/animations"
+```
+
+| fn | family | verified | defaultDuration | params |
+| --- | --- | --- | --- | --- |
+| `app_showcase` | other | yes | 6s | positional: `imageUrl` · named: `imageUrl, userName, userRole, tagline, accentColor` |
+| `apple_money_count` | other | yes | 5s | positional: `amount` · named: `amount, currency, accentColor` |
+| `blend_caption` | lower-third | yes | 5s | positional: `text` · named: `text, color` |
+| `blue_sweater_intro_video` | other | yes | 12s | positional: `creatorName` · named: `headline, creatorName, creatorHandle, creatorBio, avatarUrl` |
+| `code_3d_extrude` | code-anim | yes | 8s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_diff` | code-anim | yes | 6s | positional: `from, to` · named: `from, to, lang, theme` |
+| `code_highlight` | code-anim | yes | 5s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_morph` | code-anim | yes | 7s | positional: `from, to` · named: `from, to, lang, theme` |
+| `code_particle_assemble` | code-anim | yes | 8s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_scroll` | code-anim | yes | 6s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_shader_dissolve` | code-anim | yes | 7s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_snippet_apple_terminal_basic` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_clear_dark` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_clear_light` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_grass` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_homebrew` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_man_page` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_novel` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_ocean` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_pro` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_red_sands` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_silver_aerogel` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_apple_terminal_solid_colors` | code-snippet | yes | 12s | positional: `command` · named: `command, output, prompt, title` |
+| `code_snippet_dark_2026` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_dark_modern` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_dark_plus` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_flight` | code-snippet | yes | 6s | positional: `code` · named: `code, lang, theme, filename` |
+| `code_snippet_high_contrast` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_high_contrast_light` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_light_2026` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_light_modern` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_light_plus` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_monokai` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_solarized_light` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_visual_studio_dark` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_snippet_visual_studio_light` | code-snippet | yes | 11s | positional: `code` · named: `code, filename, lang` |
+| `code_typing` | code-anim | yes | 5s | positional: `code` · named: `code, lang, theme, filename` |
+| `instagram_follow` | social-card | yes | 5s | positional: `displayName, handle` · named: `displayName, handle, followers, avatarUrl, url` |
+| `ios26_liquid_glass` | other | yes | 15s | positional: `(none)` · named: `(none)` |
+| `liquid_glass_context_menu` | other | yes | 8s | positional: `fileName` · named: `fileName, fileMeta` |
+| `liquid_glass_media_controls` | other | yes | 8s | positional: `trackTitle` · named: `trackTitle, artist` |
+| `liquid_glass_notification` | other | yes | 8s | positional: `title` · named: `title, body, messageText` |
+| `liquid_glass_widgets` | other | yes | 8s | positional: `showcaseTitle` · named: `showcaseTitle, showcaseDescription` |
+| `logo_outro` | brand | yes | 6s | positional: `tagline` · named: `tagline, url` |
+| `lower_third` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle` |
+| `lower_third_bild` | lower-third | yes | 8s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_accent_underline` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_bold_block` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_clean_bar` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_color_block` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_dark_card` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_kicker_name` | lower-third | yes | 5s | positional: `kicker, title` · named: `kicker, title, accent` |
+| `lt_mask_reveal` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_side_rule` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_soft_pill` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `lt_stack_bars` | lower-third | yes | 5s | positional: `title, subtitle` · named: `title, subtitle, accent, bg` |
+| `macos_notification` | social-card | yes | 5s | positional: `appName, title` · named: `appName, timeLabel, title, body` |
+| `macos_tahoe_liquid_glass` | other | yes | 15s | positional: `windowTitle` · named: `wallpaperUrl, windowTitle, toastBody, weatherLocation` |
+| `news_ticker` | social-card | yes | 7s | positional: `headline` · named: `desk, time, label, headline, headlineAccent, ticker` |
+| `reddit_post` | social-card | yes | 5s | positional: `subreddit, title` · named: `subreddit, author, title, body, votes` |
+| `spotify_card` | social-card | yes | 5s | positional: `track, artist` · named: `track, artist` |
+| `tiktok_follow` | social-card | yes | 5s | positional: `displayName, handle` · named: `displayName, handle, followers, avatarUrl, url` |
+| `ui_3d_reveal` | other | yes | 13s | positional: `heroTitle` · named: `heroTitle, outroUrl` |
+| `vfx_iphone_device` | other | yes | 15s | positional: `imageUrl` · named: `imageUrl` |
+| `vpn_youtube_spot` | other | yes | 7s | positional: `headlineLine1` · named: `headlineLine1, headlineLine2, subtext, appTitle, appSubtitle` |
+| `x_post` | social-card | yes | 5s | positional: `displayName, handle` · named: `displayName, handle, body, hashtag, timestamp` |
+| `yt_lower_third` | lower-third | yes | 5s | positional: `channel, subscribers` · named: `channel, subscribers, avatarUrl` |
+
+## Unverified blocks
+
+Blocks with `verified: no` vendor upstream demo content and may ignore user params. `scenerok validate` warns but does not error.
+
+## Usage
+
+```vidscript
+[0s .. 6s] = animations.code_typing("const x = 1;")
+```
+
+See `animations-picker.md` for intent-based selection. Preview samples: https://scenerok.com/catalog#animations

package/skills/remote/animations-picker.md

@@ -0,0 +1,77 @@
+# Animation Block Picker
+
+`import animations from "@scenerok/animations"` surfaces the vendored HyperFrames block catalog as positionable, time-windowed VidScript surfaces. Each `animations.<fn>(...)` call resolves to a `hyperframes` IR surface; no LLM runs at render time.
+
+**Reuse-first:** prefer `animations.<fn>(...)` over hand-authoring composition HTML. Full per-fn param shapes: `animations-catalog.md`.
+
+## Intent → `animations.<fn>(...)`
+
+| Intent | Family | `animations.<fn>(…)` | Positional args (in order) |
+| --- | --- | --- | --- |
+| typing / live code walk | code-anim | `code_typing` | `code`, `lang`, `theme`, `filename` |
+| scroll through a file | code-anim | `code_scroll` | `code`, `lang`, `theme` |
+| spotlight a line | code-anim | `code_highlight` | `code`, `lang`, `theme` |
+| 3D extrude / shader dissolve / particle title | code-anim | `code_3d_extrude` · `code_shader_dissolve` · `code_particle_assemble` | `code`, `theme` |
+| assemble snippets in flight | code-anim | `code_snippet_flight` | `code`, `theme` |
+| before/after code change | code-anim | `code_morph` · `code_diff` | `from`, `to`, `lang`, `theme` |
+| themed VS Code window | code-snippet | 24 `code_snippet_*` themes | `code`, `filename` |
+| Apple Terminal command + output | code-snippet | 12 `code_snippet_apple_terminal_*` | `command`, `output`, `prompt`, `title` |
+| broadcast name / title bar | lower-third | `lt_clean_bar` · `lt_accent_underline` · `lt_kicker_name` · `lt_mask_reveal` · `lt_stack_bars` | `title`, `subtitle`, `accent?` |
+| lower-third with kicker | lower-third | `lt_kicker_name` · `lt_side_rule` | `kicker`, `title`, `accent?` |
+| YouTube channel card | lower-third | `yt_lower_third` | `channel`, `subscribers`, `avatarUrl?` |
+| Bild-style brand accent | lower-third | `lower_third_bild` | `title`, `subtitle`, `accent?` |
+| inline text over footage | text-overlay | `lower_third` · `blend_caption` | inline `{{title}}` / `{{subtitle}}` tokens |
+| X / Twitter post | social-card | `x_post` | `displayName`, `handle`, `body?`, `hashtag?`, `timestamp?` |
+| Reddit thread | social-card | `reddit_post` | `subreddit`, `title`, `body?`, `author?`, `votes?` |
+| TikTok / Instagram follow | social-card | `tiktok_follow` · `instagram_follow` | `displayName`, `handle`, `avatarUrl?`, `url?` |
+| Spotify now-playing | social-card | `spotify_card` | `track`, `artist` |
+| macOS notification | social-card | `macos_notification` | `appName`, `title`, `body?`, `timeLabel?` |
+| news ticker / headline crawl | social-card | `news_ticker` | `headline`, `headlineAccent?`, `ticker?`, `desk?`, `time?` |
+| logo outro / brand sting | brand | `logo_outro` | `tagline`, `url?` |
+| punchy kinetic title (no block) | kinetic-type | (use `text` + `motion.*` — see `text-styles.md`) | — |
+
+Param resolution: **named > positional > default**.
+
+## Gotchas
+
+| Block / family | Issue | Fix |
+| --- | --- | --- |
+| `code_diff` | Line indices may be 0-based in adapter | Match sample in `animations-catalog.md` |
+| Unverified blocks | `scenerok validate` warns `verified:false` | Accept demo render or switch to verified family |
+| Maps / liquid-glass / app-showcase | Ignore user params | Use for demo aesthetic only, or hand-author |
+| Adapter blocks | No inline audio/text siblings | Put `audio`, `text`, `filter` on separate time blocks |
+
+## Two-phase compose recipe
+
+**Part 1 — classify (before probing assets):**
+
+1. Decide intent family from the table above.
+2. Pick `animations.<fn>` (or `text` + `motion.*` for kinetic-type).
+3. Note param values from the user request.
+4. Draft time blocks: `[<start>s .. <end>s] = animations.<fn>(...)`.
+
+**Part 2 — compose (after probing assets):**
+
+1. Probe assets (logo, avatar, code) — never guess dimensions.
+2. Resolve params: named override positional; defaults fill the rest.
+3. Emit VidScript call.
+4. Adjacent `audio`, `text`, `filter` on **separate** time blocks.
+5. Run `scenerok validate script.vid`.
+
+## Demo script
+
+```vidscript
+import animations from "@scenerok/animations"
+import tr from "@scenerok/transitions"
+output to "demo.mp4", resolution: "1920x1080", fps: 30
+
+[0s .. 6s]   = animations.code_typing("let abc = 23; abc += 10; console.log(abc);")
+[6s .. 6.6s] = tr.dissolve()
+[6.6s .. 13s] = animations.code_morph("const a = 1", "const a = 2")
+[13s .. 19s] = animations.code_typing(code: "const z = 5;", duration: 6, filename: "app.ts", theme: "monokai")
+[19s .. 24s] = animations.lt_clean_bar("Ada Lovelace", "Engineer", accent: "#00ff00")
+[24s .. 29s] = animations.x_post("SceneRok", "@scenerok", body: "Shipped adapters.", hashtag: "#v1")
+[29s .. 34s] = animations.news_ticker("Tech Desk", time: "15:30 UTC",
+                                       headline: "SceneRok ships", headlineAccent: "53 verified blocks",
+                                       ticker: "Verified count: 53/78\nBeta opens July")
+```