agentsclimarketplace

Jack scroll 3d sites

Skill radustefandumitru/overdrive/skills/jack-scroll-3d-sites

Improve your AI coding agents easily.

Install
npx -y skills add radustefandumitru/overdrive --skill jack-scroll-3d-sites

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.9 KB, 798 tokens by cl100k_base, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.