Перейти к основному содержимому

Перевод: оболочка страницы на русском; тело навыка (SKILL.md) пока на английском — это исходные инструкции агента.

Cinematic Web

Build live Next.js scroll-motion cinematic sites.

Метаданные навыка​

ИсточникВстроенный (установлен по умолчанию)
Путьskills/web-development/cinematic-web
Версия1.0.0
АвторVibeOS
ЛицензияMIT
Платформыlinux, macos, windows
Тегиnextjs, scroll, gsap, lenis, motion, cinematic, web, landing
Связанные навыкиinternet-starter, design-to-code-loop, browser-e2e, site-page-analyze, site-map-crawl, large-admin-ia

Справка: полный SKILL.md​

к сведению

Ниже полное определение навыка, которое VibeOS загружает при активации. Это инструкции, которые видит агент.

Cinematic Web Skill

Build live, interactive cinematic marketing/landing sites: scroll-driven chapters, pinned heroes, and parallax layers that run in the browser.

Not HyperFrames. The optional skill hyperframes turns HTML/GSAP into an MP4/WebM video. This skill ships a live Next.js App Router site users scroll. Do not route video-render requests here.

When to Use​

  • User wants a scroll-story, product launch, or cinematic landing (interactive)
  • Pin/scrub hero, sticky chapters, layered parallax — not a card dashboard
  • After internet-starter (Next) or when polishing an existing App Router app
  • Brand/tokens via design-to-code-loop; verify with browser-e2e

Prerequisites​

  • Node.js 20+ and npm (scaffold/dev via terminal)
  • Next.js App Router + TypeScript + Tailwind target (or scaffold first)
  • Optional: Lenis, GSAP + ScrollTrigger, Framer Motion for UI micro only
  • Browser tools for verify: browser_navigate, browser_snapshot

How to Run​

  1. Scaffold or open a Next App Router app (internet-starter / terminal + npm).
  2. Add Lenis (smooth scroll) + GSAP ScrollTrigger; optional Framer Motion for small UI transitions — not the scroll timeline.
  3. Define motion tokens in CSS: --motion-duration-*, --motion-ease-*.
  4. Implement sections from references/motion-recipes.md (hero pin, sticky chapter, parallax, reduced-motion fallback).
  5. Honor prefers-reduced-motion: shorten or disable scrub/pin; keep layout.
  6. terminal: npm run dev → browser_navigate + browser_snapshot smoke.
  7. Polish brand with design-to-code-loop; avoid purple-glow AI slop.

If paths are unknown: search_files for cinematic-web/.

Quick Reference​

PieceRole
Next.js App Router + TS + TailwindApp shell
LenisSmooth scroll (scroll-driven sites)
GSAP + ScrollTriggerPin, scrub, chapter timelines
Framer Motion (optional)UI micro only (menus, presence)
CSS --motion-*Duration/easing tokens
references/motion-recipes.mdPin, sticky, parallax, a11y
DoDon't
Animate transform / opacityAnimate width / height / top / left
One hero plane + brand + CTACard stacks / dashboard hero
Live interactive siteHyperFrames MP4 pipeline

Procedure​

  1. Scope — Confirm deliverable is a live site, not rendered video. If the user asks for MP4 from GSAP/HTML, hand off to optional hyperframes.
  2. Shell — App Router layout, global CSS with motion tokens, Tailwind.
  3. Scroll stack — Wire Lenis → document; register GSAP ScrollTrigger once (client component / effect). Kill triggers on unmount.
  4. Composition — First viewport: brand, one headline, one support line, one CTA group, one full-bleed visual plane. No hero cards, emoji stickers, or stat strips.
  5. Chapters — Sticky or pinned sections with scrubbed progress; keep one job per section (headline + short support).
  6. Parallax — Layer translateY/scale on transform only; clamp speeds.
  7. Reduced motion — Media query / matchMedia: static or fade-in only; no scrub dependence for content meaning.
  8. Verify — Dev server via terminal; browser_navigate home; snapshot hero + mid-scroll chapter; check no layout jump on reduced-motion path.

Pitfalls​

  • Wrong skill — HyperFrames = video encode; this skill = live Next scroll.
  • Layout thrash — Never drive scroll with width/height/top/left.
  • AI slop look — No purple gradients, glow orbs, emoji decoration, or multi-card hero dashboards.
  • Double smooth-scroll — Don't stack native CSS scroll-smooth with Lenis without testing; prefer one owner.
  • SSR traps — GSAP/Lenis are client-only; guard window / use "use client".
  • Meaning in motion — Content must remain readable with motion off.

Verification​

  1. npm run dev (or project script) succeeds in terminal.
  2. browser_navigate → local URL; browser_snapshot shows brand + hero CTA.
  3. Scroll mid-page; snapshot confirms chapter/sticky content (not blank).
  4. With reduced-motion (OS or emulated), page still readable; no broken pin.
  5. Optional: site-page-analyze on / for SEO basics after motion lands.