diff --git a/.codex/skills/cinematic-scroll/SKILL.md b/.codex/skills/cinematic-scroll/SKILL.md index dd8211c..32a58d4 100644 --- a/.codex/skills/cinematic-scroll/SKILL.md +++ b/.codex/skills/cinematic-scroll/SKILL.md @@ -1,6 +1,6 @@ --- name: cinematic-scroll -description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, and kinetic text in story pages; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation. +description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, kinetic text, Gaussian-splat scenes, and baked simulation or frame sequences in story pages, built on the host's own stack (GSAP, Motion, Anime.js, Lenis, Three.js, Rive, Lottie, physics engines); includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards, video production, or unrelated animation. --- # cinematic-scroll (pointer) diff --git a/.cursor/skills/cinematic-scroll/SKILL.md b/.cursor/skills/cinematic-scroll/SKILL.md index dd8211c..32a58d4 100644 --- a/.cursor/skills/cinematic-scroll/SKILL.md +++ b/.cursor/skills/cinematic-scroll/SKILL.md @@ -1,6 +1,6 @@ --- name: cinematic-scroll -description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, and kinetic text in story pages; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation. +description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, kinetic text, Gaussian-splat scenes, and baked simulation or frame sequences in story pages, built on the host's own stack (GSAP, Motion, Anime.js, Lenis, Three.js, Rive, Lottie, physics engines); includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards, video production, or unrelated animation. --- # cinematic-scroll (pointer) diff --git a/AGENTS.md b/AGENTS.md index 14bc761..644effb 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -51,6 +51,14 @@ Toolkit references for maintainers and full-repository clones live in [`taste-guardrails.md`](./taste-guardrails.md). They are not part of any installed skill; do not link to them from inside `skills/`. +Third-party stack integration lives inside the skill so installed copies carry it: +`skills/cinematic-scroll/references/stack-shelf.md` (libraries, engines, editors, +licences, status and fallbacks), `skills/cinematic-scroll/references/bake-pipeline.md` +(offline simulation and frame sequences to scrubbed media) and +`skills/cinematic-scroll/references/splat-scene.md` (Gaussian splats with Spark). +Films about the work follow `docs/video-pipeline.md`; that production lane never +enters the skill, and the skill never bundles or installs any library it describes. + ## Media rule No tracked file may exceed 5 MB (`node tools/check-media-size.mjs`, allowlist in diff --git a/README.md b/README.md index 34a9662..4f1f764 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ Then ask: More prompts: [`examples/PROMPTS.md`](./examples/PROMPTS.md). Other agents and routes: [INTEGRATIONS.md](./INTEGRATIONS.md). +**Works with your stack.** The skill builds on whatever the project already uses, from GSAP, Motion, Anime.js and Lenis to Three.js, Spark splats, Rive and Lottie, and records each tool's licence, status and fallback in the [stack shelf](./skills/cinematic-scroll/references/stack-shelf.md). Offline simulations and renders reach a page through the [bake pipeline](./skills/cinematic-scroll/references/bake-pipeline.md); films about the work follow the [video pipeline](./docs/video-pipeline.md). + ## See it Everything below was built with the skill and is served from this repository. diff --git a/docs/superpowers/plans/2026-11-01-stack-integration.md b/docs/superpowers/plans/2026-11-01-stack-integration.md new file mode 100644 index 0000000..491ada5 --- /dev/null +++ b/docs/superpowers/plans/2026-11-01-stack-integration.md @@ -0,0 +1,60 @@ +# Stack integration plan (2026-11-01) + +**Goal:** make Web Design Studio the layer that integrates the motion, 3D, physics, +authoring and video-production tools people actually use, including tools outside +the website lane, without bundling any of them or adding owner costs. + +**Spec, in one paragraph.** Simone asked to integrate the 22 projects from a public +"free motion studio" list plus the standards that list omits (GSAP, Motion, Lenis, +Rive, dotLottie, Rapier, Matter.js, lygia, WebGPU/TSL, the asset and proof +pipelines). The skill's own rule stands: use the host project's stack, add a +dependency only when the signature moment needs it, keep one scroll clock and one +owner per property, and prove the reduced-motion, coarse-pointer, failure and +no-JavaScript states. Integration therefore means recipes, preflight, fallback +contracts and alias entries inside the text-only skill, plus toolkit documentation +for the production tools that are not website code. Licence and maintenance facts +were read from GitHub and npm on 2026-11-01 and are dated in the documents. + +## Deliverables + +1. `skills/cinematic-scroll/references/stack-shelf.md`: every library and tool, + its job in a cinematic page, how it integrates under the rules, licence, + maintenance status, fallback, and the words users use for it. +2. `skills/cinematic-scroll/references/bake-pipeline.md`: offline producers + (Taichi, SPlisHSPlasH, OpenToonz, Blender, After Effects exports) to frames, + RIFE interpolation, FFmpeg encoding for scrubbing, poster and budget rules. +3. `skills/cinematic-scroll/references/splat-scene.md`: Gaussian-splat scenes with + Spark inside the real-time 3D contract. +4. `docs/video-pipeline.md`: the promo lane (OBS, Remotion, Qwen3-TTS, Auto-Editor, + Audacity, Subtitle Edit, RIFE, FFmpeg) tied to the repository's existing tools, + with licence notes and the media rule. +5. Catalog, contract, index and discovery updates: recipe-catalog alias rows, + SKILL.md route and description, llms.txt entries, README and AGENTS pointers, + trigger evals and the evals README counts, mirrored skill copies synced. + +## Global constraints + +- Skill folders stay text-only, self-contained and under the size gate; links from + inside `skills/` resolve inside the folder (`node tools/check-skills.mjs --forbid-root-skill`). +- No version bump in this change; releases bump versions (`docs/releasing.md`). +- No new dependencies, telemetry, hosted services or paid-service integration. +- Do not touch `assets/promo-linkedin/README.md`, `video-launch/` or the LinkedIn + revision tools. +- Codex owns PR review norms: open a PR, never push to `main` directly. + +## Tasks and verification + +| Task | Verify | +|---|---| +| Write the three skill references | `npm run skills:check` | +| Update recipe catalog, SKILL.md, llms.txt, README, AGENTS | `npm run links:check && npm run consistency:check && npm run site:check` | +| Add trigger cases and update evals README counts | `npm run evals:run` | +| Sync mirrored skill copies | `npm run skill:sync:check` | +| Full gate | `npm test` | +| Install surface unchanged | CI job "install surface" on the PR | + +## Review focus + +- A reference that names an API must name one that exists in the current release. +- Licence statements must match the licence files read on 2026-11-01. +- No reference may imply the skill ships or installs any of these libraries. diff --git a/docs/video-pipeline.md b/docs/video-pipeline.md new file mode 100644 index 0000000..6d0a320 --- /dev/null +++ b/docs/video-pipeline.md @@ -0,0 +1,64 @@ +# Video and promo pipeline + +This is the production lane for films about the work: showcase previews, the +LinkedIn and X films, launch reels and GIFs. It is not website motion. The skill +builds pages; this document records how the repository produces and publishes video +with free, locally run tools, and what each tool's licence actually says. + +Rules that hold for every stage: + +- Everything runs on the maker's machine. No hosted inference, rendering or storage + paid by the owner, and no credentials in files, prompts or posts. +- Tracked media stays under 5 MB (`node tools/check-media-size.mjs`). Finished films + go to a `media-*` GitHub Release through `node tools/media-archive.mjs --plan` + then `--apply`, mapped in the launch kit manifest. +- Captions ship with every film, as burned-in text or a sidecar file. + +## Stages and tools + +| Stage | Tool | Licence | How this repository uses it | +|---|---|---|---| +| Capture a browser run | Playwright recording | Apache-2.0 | `tools/page-proof/record-gallery.mjs` scrolls each example and records it deterministically | +| Capture a screen or camera | OBS Studio | GPL-2.0 | Manual capture for talking-head or live demo footage | +| Compose titles and cuts | FFmpeg filters | LGPL, GPL with GPL components | `tools/render-linkedin-promo.mjs` composes the LinkedIn film from captures | +| Compose a video in React | Remotion | Free for individuals, for-profit organisations with up to three employees and non-profits; other companies need a company licence | Optional route for templated films. `compile-choreography.mjs` can emit a paused, fixed-time GSAP timeline that a frame-by-frame renderer such as Remotion or HyperFrames seeks per frame; the repository itself has no Remotion dependency | +| Voiceover | Qwen3-TTS, run locally | Apache-2.0 | Optional; needs a GPU for comfortable speed. Earlier films used the owner's own avatar-service account | +| Cut silences | Auto-Editor | Unlicense | `auto-editor input.mp4 --margin 0.2sec` before a manual pass | +| Clean and mix audio | Audacity | GPL | Noise reduction, levels, music ducking | +| Slow motion and smoothing | RIFE | MIT | Frame interpolation of sparse captures; check edges for ghosting | +| Captions | Subtitle Edit | MIT | Timing and export of SRT or VTT; burn in with FFmpeg or ship the sidecar | +| Encode and deliver | FFmpeg | LGPL, GPL with GPL components | H.264, `yuv420p`, `+faststart`, poster frame, platform sizes | + +## Delivery presets + +```sh +# 1080p landscape, platform-safe +ffmpeg -i edit.mov -c:v libx264 -crf 20 -preset slow -pix_fmt yuv420p \ + -movflags +faststart -c:a aac -b:a 160k out-1080.mp4 + +# square for feeds +ffmpeg -i edit.mov -vf "scale=1080:1080:force_original_aspect_ratio=increase,crop=1080:1080" \ + -c:v libx264 -crf 20 -pix_fmt yuv420p -movflags +faststart -c:a aac out-square.mp4 + +# burned-in captions +ffmpeg -i out-1080.mp4 -vf subtitles=captions.srt -c:a copy out-1080-captions.mp4 + +# poster +ffmpeg -i out-1080.mp4 -ss 00:00:03 -frames:v 1 -q:v 2 poster.jpg +``` + +## Verification before publishing + +- `ffprobe` confirms duration, dimensions, frame rate and audio presence. +- A contact sheet of evenly spaced frames catches flicker and wrong cuts. +- Play the file on a phone and on a desktop browser before uploading. +- Quote measured facts in captions and posts, with their date and limits, as the + launch kit in `docs/launch/` does. + +## Where the lines are + +The [stack shelf](../skills/cinematic-scroll/references/stack-shelf.md) covers +libraries that run inside a website. The [bake pipeline](../skills/cinematic-scroll/references/bake-pipeline.md) +covers offline renders that end up scrubbed on a page. This document covers films +about the work. Remotion, OBS, Audacity, Auto-Editor, Subtitle Edit, RIFE and TTS +belong here, not in the skill a visitor's browser ends up running. diff --git a/evals/README.md b/evals/README.md index b5191a8..dc369e0 100644 --- a/evals/README.md +++ b/evals/README.md @@ -24,18 +24,21 @@ Sibling-skill negatives test routing boundaries, not whether the request is usef Ten additional mechanism cases cover entrance reveal, depth card, scroll-to-seek, magnetic CTA, image sequence and horizontal collection with adjacent UI negatives. Existing cursor, tilt and scrub-video cases remain; this extends coverage rather -than claiming those mechanisms were previously absent. +than claiming those mechanisms were previously absent. Sixteen stack cases added on +2026-11-01 cover splat scans, baked simulation frames, Rive, Anime.js, Lenis, +physics and rendered flythroughs, with video-production, offline-simulation, +dashboard and app-animation negatives that belong to no skill here. | Skill | Should fire | Near-miss negatives | Total | |---|---:|---:|---:| -| cinematic-scroll | 19 | 14 | 33 | +| cinematic-scroll | 27 | 22 | 49 | | scroll-audit | 8 | 8 | 16 | | launch-page-strategy | 8 | 8 | 16 | -| **Collection** | **35** | **30** | **65** | +| **Collection** | **43** | **38** | **81** | ## What needs an LLM judge (not deterministic) -- **Triggering accuracy** — run the 65 cases in `trigger.json` against each named +- **Triggering accuracy** — run the 81 cases in `trigger.json` against each named skill's frontmatter `description` with an LLM judge; assess each skill separately. Targets: recall ≥ 0.9 on positives, precision ≥ 0.9 on negatives. Tune the description until both clear. diff --git a/evals/trigger.json b/evals/trigger.json index 945f94d..4f11d20 100644 --- a/evals/trigger.json +++ b/evals/trigger.json @@ -329,6 +329,86 @@ "skill": "cinematic-scroll", "query": "Fix the horizontal scrollbar on our data table", "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Add a Gaussian splat scan of our showroom that the visitor moves through as they scroll", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Turn the frames from our Taichi fluid simulation into a scroll-scrubbed hero on the landing page", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Our mascot is a Rive file; make it react as the product story scrolls", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "We use Anime.js, not GSAP. Build the pinned chapter sequence with it", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Add Lenis smooth scrolling to the editorial longread without breaking the pinned sections", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Drop physics tiles into the hero that fall and settle into the headline", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Use the Blender camera flythrough render as a scrubbed sequence on the about page", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Show a photoreal point-cloud capture of the venue as the hero, with stable views on mobile", + "should_trigger": true + }, + { + "skill": "cinematic-scroll", + "query": "Render our launch video from React components with Remotion", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Cut the silences out of the webinar recording", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Generate a voiceover for the promo film", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Set up OBS to capture the demo at 60 fps", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Write a Taichi fluid simulation script and export the particle data", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Add subtitles to the YouTube version of our launch film", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Build a D3 dashboard with filterable bar charts", + "should_trigger": false + }, + { + "skill": "cinematic-scroll", + "query": "Export this Lottie animation for the mobile app's loading screen", + "should_trigger": false } ] } diff --git a/llms.txt b/llms.txt index 4b07869..47907e4 100644 --- a/llms.txt +++ b/llms.txt @@ -6,6 +6,9 @@ - [Build contract](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/SKILL.md): Read before building; the host brand and stack take precedence. - [Recipe and mechanism catalog](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/references/recipe-catalog.md): Entrance reveal, pinned chapters, scrub video, tilt cards, magnetic controls, split text and frame sequences. +- [Stack shelf](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/references/stack-shelf.md): How GSAP, Motion, Anime.js, Lenis, Three.js, Spark, Rive, Lottie, Rapier and the production tools fit the recipes, with licences, status and fallbacks. +- [Bake pipeline](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/references/bake-pipeline.md): Offline simulations, renders and hand-drawn frames to scrubbed sequences with FFmpeg and RIFE. +- [Splat scene](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/references/splat-scene.md): Gaussian-splat captures as scroll-driven places with Spark inside the real-time 3D contract. - [Scroll audit](https://mustbesimo.github.io/web-design-studio/skills/scroll-audit/SKILL.md): Diagnose an existing page and prioritize repairs. - [Launch-page strategy](https://mustbesimo.github.io/web-design-studio/skills/launch-page-strategy/SKILL.md): Audience, promise, evidence and next action. @@ -20,3 +23,4 @@ - [Project quickstart](https://mustbesimo.github.io/web-design-studio/README.md): Skill installation and repository toolkit. - [Verification contract](https://mustbesimo.github.io/web-design-studio/skills/cinematic-scroll/references/verification.md): Browser, reduced motion, keyboard, no-JS and resource ownership checks. +- [Video and promo pipeline](https://mustbesimo.github.io/web-design-studio/docs/video-pipeline.md): Films about the work with OBS, Remotion, Qwen3-TTS, Auto-Editor, Audacity, Subtitle Edit, RIFE and FFmpeg, with licence notes. diff --git a/skills/cinematic-scroll/SKILL.md b/skills/cinematic-scroll/SKILL.md index 0f5202e..b1a9cb4 100644 --- a/skills/cinematic-scroll/SKILL.md +++ b/skills/cinematic-scroll/SKILL.md @@ -1,6 +1,6 @@ --- name: cinematic-scroll -description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, and kinetic text in story pages; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation. +description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, kinetic text, Gaussian-splat scenes, and baked simulation or frame sequences in story pages, built on the host's own stack (GSAP, Motion, Anime.js, Lenis, Three.js, Rive, Lottie, physics engines); includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards, video production, or unrelated animation. metadata: version: 3.0.1 openclaw: @@ -30,6 +30,11 @@ Otherwise, read the [recipe catalog](references/recipe-catalog.md), then read ** - [Real-time 3D](references/real-time-3d.md) for a GLB, procedural object, orbit, or camera flight. +When the brief or the host project names a library, engine, editor or production +tool, check the [stack shelf](references/stack-shelf.md) before adding a +dependency. Captured splat scenes and baked simulation or frame sequences have +their own references, reached from the catalog. + Companion skills: launch-page-strategy decides what the page must say and prove before motion; scroll-audit scores an existing page. diff --git a/skills/cinematic-scroll/references/bake-pipeline.md b/skills/cinematic-scroll/references/bake-pipeline.md new file mode 100644 index 0000000..003d370 --- /dev/null +++ b/skills/cinematic-scroll/references/bake-pipeline.md @@ -0,0 +1,87 @@ +# Bake pipeline + +Use this when the motion the story needs is produced offline: a fluid, smoke, foam, +cloth or particle simulation from Taichi or SPlisHSPlasH, a rendered camera move +from Blender, hand-drawn frames from OpenToonz, or an export from a motion editor. +The browser never runs the simulator. It receives frames, and the page scrubs or +plays them under the same rules as any other media mechanism. + +## Choose the delivery mechanism first + +| Need | Mechanism | Dependency | Static state | +|---|---|---|---| +| Scroll drives the sequence on desktop | Scrubbed video, as in [product reveal](product-reveal.md) | None; a `