Skip to main content

scrollytelling-frames-site

Why It Exists​

scrollytelling-frames-site covers step 5 of a manual, five-step product-reveal pipeline recorded in .omc/plans/reveal-shot-scrollytelling-skills.md (local research artifact, not tracked in this repo): a nano-banana hero image, a nano-banana "explosion shot" prompt, a nano-banana "transition flow" prompt fed into labs.google/fx/tools/flow (Veo 3.1) to produce a video, ezgif.com extracting 28-30 JPG/WebP frames from that video, and finally antigravity turning those frames into a Next.js scrollytelling page. The interview that shaped the plan explicitly locked scope to keep steps 3-4 (Flow, ezgif) as a manual checklist only — no browser automation — and to make step 5's "new site" variant produce only the filled antigravity prompt, never an actual scaffolding run.

The user separately asked for a second step-5 variant beyond a brand-new page: adapting the same frame sequence into an existing page in one of this repo's other sites. That request is why the skill ships two modes (--new and --existing) instead of one, and why --existing carries its own required inputs (target_app_path, target_page_file) and its own constraint — splice in one new section while leaving the existing page's header, footer, and unrelated sections untouched.

The skill was introduced alongside its sibling reveal-shot-prompts in a single commit (36e1d0e, "feat(skills): add reveal-shot-prompts and scrollytelling-frames-site skills"), whose message underscores the same trust boundary found in the plan and the SKILL.md body: "Both are prompt/checklist-only — neither calls a generation API, automates a browser, or scaffolds code." Both packages were later published live as @next-starters/skill-reveal-shot-prompts@1.0.0 and @next-starters/skill-scrollytelling-frames-site@1.0.0 (docs/sessions/2026-08-17-docs-site-and-skills/SUMMARY.md).

What It Does​

Given an already-extracted frame sequence (frame_0.webp -> frame_N.webp, typically produced by the sibling reveal-shot-prompts skill's ezgif frame-extraction step), this skill fills one of two prompt templates and hands the result to the user as text to paste into antigravity themselves. It never generates images or video, never invokes bin/create-client.mjs, never scaffolds a template, and never edits app code directly — its job ends the moment the filled prompt is handed over.

In --new mode it fills references/new-site-prompt.md for a fresh page built on this repo's marketing or dashboard template, reading that template's real template.config.json design tokens first so the prompt references actual conventions instead of generic Next.js boilerplate. In --existing mode it fills references/existing-page-prompt.md to splice the scrollytelling section into a page that already exists, instructing antigravity to preserve the target page's header, nav, and footer and to avoid touching unrelated sections.

How To Use It​

Triggers on: "scrollytelling from frames", "frame sequence landing page", "antigravity scrollytelling prompt", "adapt frames into existing page", or "image sequence scroll animation".

skills add git@github.com:catesandrew/next-starters.git --skill skills/scrollytelling-frames-site -g
npm install @next-starters/skill-scrollytelling-frames-site
/plugin marketplace add catesandrew/next-starters
/plugin install scrollytelling-frames-site@next-starters

Gotchas & Invariants​

  • Output is always a filled prompt in a code block for the user to paste into antigravity — never a scaffolded site. The skill states plainly that whatever antigravity produces is new code the user reviews and applies themselves; it never runs bin/create-client.mjs or edits app code in either mode.
  • mode is required and must be exactly --new or --existing — there is no default. --existing additionally requires target_app_path (e.g. apps/web) and target_page_file (e.g. app/(marketing)/page.tsx).
  • background_hex must match the frame sequence's own background color exactly, so the rendered object floats in a pure void rather than showing a seam against the page background.
  • In --new mode, base_template (marketing or dashboard, default marketing) determines which templates/[BASE_TEMPLATE]/template.config.json gets read first, so placeholders like __BRAND_NAME__, __COLOR_PRIMARY__, and __FONT_SANS__ (marketing) or __APP_NAME__, __PKG_SCOPE__, and __DOMAIN__ (dashboard) resolve to that template's real tokens instead of generic boilerplate.
  • In --existing mode, the filled prompt explicitly instructs antigravity to insert the scrollytelling section as one new section within the existing layout, add the new component under that app's components/ directory following its existing naming convention, and never touch target_page_file's header/nav/footer or unrelated sections.
  • [OBJECT / PRODUCT / SCENE] is asked of the user directly if it isn't already implied by product_name — the skill does not guess it silently.
  • reveal-shot-prompts — the upstream skill whose ezgif frame-extraction step produces the frame_0.webp -> frame_N.webp sequence this skill turns into a scroll-linked site.

Sourced from: skills/scrollytelling-frames-site/metadata.json, skills/scrollytelling-frames-site/SKILL.md, .omc/plans/reveal-shot-scrollytelling-skills.md (local research artifact, not tracked in this repo), docs/sessions/2026-08-17-docs-site-and-skills/SUMMARY.md, docs/sessions/2026-08-17-docs-site-and-skills/README.md, docs/sessions/2026-08-17-docs-site-and-skills/FOLLOWUPS.md, git log --follow -- skills/scrollytelling-frames-site (commit 36e1d0e)