apple-scroll-hud

Apple-style scroll-driven canvas frame animation with HUD telemetry overlays.

Build immersive scroll storytelling experiences — the same technique Apple uses for product pages. Map image sequences to scroll progress, layer HUD overlays, and animate sections with Framer Motion.

---

What's inside

Feature	Description
Canvas frame sequencer	Render JPG/WebP sequences tied to scroll progress — retina-ready, decoupled RAF loop
Lenis smooth scroll	Normalized inertia scroll with React hook, App Router provider, and raw scroll fallback
HUD overlay system	Telemetry readouts, corner brackets, scanlines, crosshair, live clock, progress bar
Framer Motion sections	Scroll-driven opacity, blur, and Y transforms for cinematic section transitions
5 HUD themes	Cyber Cyan, Amber Cockpit, Arctic Cold, Blood Red, Hologram Blue — via CSS custom properties
Vanilla JS support	Zero-dependency implementation with Lenis CDN — single HTML file, no build step

---

Why this skill

Apple technique — implemented correctly

Scroll progress is mapped directly to a canvas frame index — not CSS animation, not video. The same approach Apple uses for product storytelling pages (iPhone, MacBook, Vision Pro). RAF and scroll events are fully decoupled: scroll only updates the index, RAF handles drawing.

Performance-first

• Passive scroll listeners — zero main thread blocking
• WebP over JPG — 30–50% file size reduction
• devicePixelRatio canvas sizing — crisp on retina displays
• Mobile fallback — CSS video or poster image when frame count is high
• Preload via IntersectionObserver — frames load before the user reaches the scroll zone

Multi-framework, one skill

Covers four environments with a decision tree that routes you to the right pattern:

Environment	Pattern
Vanilla JS / HTML	CDN Lenis + raw canvas
React + Vite	useLenis hook + CanvasFrameSequencer
Next.js Pages Router	Same as React + Vite
Next.js App Router	LenisProvider client component

Copy-paste ready components

Every component is production-ready out of the box — CanvasFrameSequencer, HUDOverlay, LenisProvider, ScrollSection. No extra configuration needed.

---

HUD themes

Theme	Primary color	Vibe
Cyber Cyan	#00d4ff	Classic hacker
Amber Cockpit	#ffb000	Fighter jet
Arctic Cold	#7df9ff	Submarine sonar
Blood Red	#ff0040	Combat alert
Hologram Blue	#00aaff	Sci-fi hologram

Switch themes via CSS custom properties — no per-component edits needed:

:root {
  --hud-primary: #00d4ff;
  --hud-accent: #00ff41;
  --hud-bg: #000;
  --hud-warn: #ff6600;
}

---

Quick start

npm install lenis framer-motion

Then use the skill with any prompt like:

"Build an Apple-style HUD scroll page with canvas frame animation
using Next.js App Router and Cyber Cyan theme"

---

Performance checklist

• Preload frames via IntersectionObserver before user reaches scroll zone
• 60–120 frames at 1280px wide — sweet spot for web performance
• WebP over JPG — 30–50% smaller files, same visual quality
• Canvas sized with devicePixelRatio for crisp retina rendering
• Passive scroll listeners — { passive: true } always
• Decouple scroll and render — scroll sets index, RAF does drawing
• Mobile fallback — CSS video or poster image if frame count is high

---

File structure

hud-scroll-canvas/
├── .skill/    
    └── SKILL.md            ← main skill guide (decision tree, all components)
├── assets/
│   └── hud-globals.css       ← scanlines, glitch animations, CSS theme vars
└── references/
    ├── full-template.tsx     ← complete Next.js App Router page (copy-paste ready)
    ├── vanilla.md            ← pure HTML/JS implementation, no build step
    └── frame-prep.md         ← FFmpeg frame extraction and optimization guide

---

Frame preparation (FFmpeg)

# Extract frames from video at 24fps
ffmpeg -i input.mp4 -vf "fps=24,scale=1920:-1" frames/frame_%04d.jpg -q:v 3

# Optimized for web (faster load)
ffmpeg -i input.mp4 -vf "fps=12,scale=1280:-1" frames/frame_%04d.jpg -q:v 5

# WebP (recommended — smallest file size)
ffmpeg -i input.mp4 -vf "fps=12,scale=1280:-1" frames/frame_%04d.webp

---

Integration

Works well alongside:

• gsap-scrolltrigger — timeline-pinned scroll control
• threejs-webgl — 3D scene behind canvas
• locomotive-scroll — alternative to Lenis
• frontend-design — design tokens and visual polish

---

Built as a Claude skill. Install via the Claude skill installer, then prompt Claude to build HUD scroll interfaces.