/jack-scroll-3d-sites

name: jack-scroll-3d-sites
description: >
  Build or review scroll-driven 3D/video/frame-sequence websites where a product,
  object, or visual transforms as the user scrolls. Use for 3D scroll websites,
  scroll-linked canvas, video-on-scroll, frame extraction with FFmpeg, GSAP
  ScrollTrigger, Framer Motion useScroll, Three.js accents, Apple-style
  scrollytelling, or Jack Roberts inspired scroll-stop site builds.

Jack Scroll 3D Sites

Use this skill to implement premium scroll-driven websites that scrub a video or image sequence as the user scrolls.

Source attribution: public-safe synthesis inspired by Jack Roberts' public teaching on 3D scroll-based websites. Credit Jack Roberts and link https://www.youtube.com/watch?v=TZUTe7s11-I when referencing the method publicly.

Choose The Build Mode

• Existing project: match its framework, routing, styling, and deployment conventions.
• Portable demo: use single-page HTML/CSS/JS with a local server.
• Next.js/React: use Framer Motion or GSAP when the app already uses React or needs componentized pages.
• 3D accent: use Three.js only when there is a real 3D requirement; keep the primary 3D/canvas scene full-bleed or clearly integrated.

Use Context7 for current docs when using Next.js, GSAP, Framer Motion, Three.js, Vercel, or browser APIs.

Asset Intake

Ask for or discover:

• video file or frame sequence
• brand name, logo, colors, fonts, CTA, and copy source
• intended pages and primary conversion
• whether this is a demo, production site, or client pitch

If the user has only prompts, route to `jack-scroll-asset-prompts` first.

Frame Sequence Pattern

Use FFmpeg when a video must be scrubbed by scroll:

ffprobe -v quiet -print_format json -show_streams -show_format video.mp4
ffmpeg -i video.mp4 -vf "fps=12,scale=1920:-2" -q:v 2 public/sequence/frame_%04d.jpg

Tune frame count to the experience:

• 40 to 80 frames for lightweight demos.
• 80 to 150 frames for premium hero sections.
• Prefer compressed JPG/WebP over huge PNG sequences.
• Preload frames and show loading progress before revealing the section.

Scroll Implementation Rules

• Map scroll progress to frame index and draw with `requestAnimationFrame`.
• Only redraw when the frame index changes.
• Use `devicePixelRatio` aware canvas sizing for crisp rendering.
• Use cover fit on desktop when the subject remains visible; use contain or slightly zoomed contain on mobile when cropping would hide the asset.
• Avoid `scroll-behavior: smooth` on frame-accurate scrub sections.
• Keep scroll duration adjustable, commonly 250vh to 500vh.
• Use sticky canvas sections for the scrubbed visual and normal document flow around it.

Motion And UX

• Add text beats sparingly. The asset is the hero; overlays should not block important object details.
• Use `emil-animation-polish` for overlay fades, buttons, nav transitions, and hover/press states.
• Use `fluid-animations` for snap points, scroll stops, gesture-controlled panels, or momentum-sensitive interactions.
• Respect `prefers-reduced-motion`: provide a still image, shorter fade, or non-scrubbed fallback.
• Keep mobile cards compact so text never overlaps the object or viewport controls.

Production Checks

• Test desktop and mobile viewport screenshots.
• Verify no blank canvas, missing frames, flicker, text overlap, or huge layout shift.
• Confirm assets load from a local server, not `file://`, when browser security requires it.
• Check Lighthouse/performance basics and image sizes.
• Add meaningful alt text or adjacent accessible copy for visual content.
• Do not deploy or publish without explicit user approval.

Routing

• Pair with `design-taste-frontend` for visual direction.
• Pair with `modern-web-guidance` for platform correctness and accessibility.
• Pair with `playwright-cli` for real-browser proof.
• Pair with `jack-seo-launch-audit` when pages are ready for SEO and launch review.