SCATMAN Local Landing

Full local SCATMAN / $SCAT landing page with downloaded scroll-film frames and local animation libraries.

Run

node server.js

Open http://localhost:4174.

Deploy

This repo is ready for Vercel static hosting. index.html, assets/, and vendor/ are served as static files, while api/claim.js mirrors the local TBD claim response for /api/claim.

Import https://github.com/Jaredweb3here/jap in Vercel and deploy as a static site:

• Framework Preset: Other
• Root Directory: ./
• Build Command: empty
• Output Directory: empty
• Install Command: empty/default

Included

• index.html copied from the live site.
• assets/frames/frames_meta.json.
• assets/frames/hero/ with 289 WebP frames generated from the imported video.
• assets/pfp/ favicons.
• assets/logo_scat.png used for visible logo lockups and favicon assets.
• vendor/ local GSAP, ScrollTrigger, and Lenis.
• server.js static file server plus local /api/claim TBD response.
• api/claim.js Vercel serverless /api/claim TBD response.
• Hat claim form in index.html; the placeholder PFP generator is intentionally hidden.

The scroll animation is a canvas frame scrub driven by GSAP ScrollTrigger and Lenis smooth scrolling. The frame sequence is loaded from assets/frames/hero/s{scene}_{frame}.webp using assets/frames/frames_meta.json.

Replace Scroll Frames From A Video

Requires ffmpeg and ffprobe in PATH.

Replace the whole scroll film with one video:

node tools/import-video.js "C:\path\to\video.mp4" --replace-all --frames 120

Import one video into only scene 1, leaving the other scenes intact:

node tools/import-video.js "C:\path\to\video.mp4" --scene 1 --frames 120

Import by frame rate instead of target count:

node tools/import-video.js "C:\path\to\video.mp4" --scene 1 --fps 24

Options:

• --scene 1 writes files as s1_0001.webp, s1_0002.webp, etc.
• --frames 120 samples the whole video into exactly about 120 frames, depending on ffmpeg rounding.
• --fps 24 samples at 24 frames per second.
• --width 1920 resizes frames to 1920px wide with preserved aspect ratio.
• --quality 78 controls WebP quality from 1 to 100.
• --replace-all deletes all old scroll frames and makes the input video the only frame sequence.

The script deletes old frames for that scene, writes new .webp files into assets/frames/hero/, and updates assets/frames/frames_meta.json.