# Video technique analysis: Lando Norris website breakdown

**Source:** [Instagram Reel by syntax_fm](https://www.instagram.com/reel/DQMddyilQib/)  
**Media retrieved:** 720×1280, 869.10 s (14:29), video and audio.  
**Evidence method:** Speech was transcribed with timestamped automatic speech recognition. Representative frames were sampled at 15, 45, 90, 150, 210, 270, 330, 390, 450, 510, 570, 630, 690, 750, and 810 seconds. Timestamps below refer to the Reel, not to the website's scroll position. Transcript wording is lightly normalized; some proper names (notably “Lenis”) may be ASR spellings.

## 1. Executive summary

This is a narrated screen-recorded critique of a Lando Norris / McLaren racing website, presented with the host in a persistent picture-in-picture panel. The speaker explains interactive web motion and real-time 3D rather than demonstrating a conventional Premiere/Resolve edit. The substantial techniques are layered 2.5D parallax from depth/alpha/roughness maps; Three.js helmet rendering with material maps and scroll-linked rotation; shader and CSS/SVG masking; staggered per-letter hover animation; a page-transition curtain; Rive vector/canvas animation; a scroll-drawn signature; and performance-minded transform animation. The recording also shows browser DevTools for source inspection and FPS measurement.

The Reel itself visibly uses a talking-head plus screen-recording composite, a persistent large “LANDO NORRIS” title, a neon edge/background treatment, and browser developer tools over the screen capture. I found no clear evidence of music-led cutting, speed ramps, conventional transitions, or color grading. The techniques below are limited to what the speaker says or sampled frames support.

## 2. Timestamped transcript / topic map

This is a transcript-derived, timestamped map of the speaker's explanations, with representative short quotations where useful. Filler and repeated phrasing are omitted; the timeline covers the complete source.

| Time | Transcript content / concept |
|---|---|
| 00:00–00:38 | Introduces a visually rich Lando Norris site, “eight layers deep,” with scroll and hover effects; says he downloaded and inspected its code. |
| 00:38–01:53 | Identifies the hero scene as Three.js / 3D canvas. Describes cursor-reactive depth-map parallax; white map regions are near and dark regions far in the demo. Also mentions AI-generated depth, alpha cutout and roughness map. |
| 01:53–03:17 | Describes the layered portrait, shadow plate, helmet render and shader reveal. The speaker speculates about a fluid/blob cursor mask and qualifies that exact implementation as uncertain. |
| 03:17–05:26 | Helmet is a Three.js-rendered GLTF model. Flat artwork is mapped onto it; speaker points out base-color, normal, roughness and metallic maps. He contrasts a live model with pre-rendered video scrubbed by scroll. |
| 05:26–06:44 | Scroll behavior uses JavaScript and a smooth-scroll library he pronounces “Lienis” (likely Lenis); mentions horizontal movement, sticky elements, native scroll-driven animation APIs, inline style updates, jQuery and Tram. |
| 06:46–07:22 | Hovering helmet tiles reveals photos; explains SVG masks in CSS and how they cut a shape from an otherwise square image. |
| 07:22–08:28 | Hover reveal uses an expanding `clip-path: ellipse`; letter-by-letter text movement uses spans, transform, CSS transition, and increasing per-letter delay. |
| 08:31–09:38 | Describes page navigation: a full-screen loader/curtain appears, the destination is fetched and swapped behind it, then a mask reveals the new page. Says the site does this with JavaScript/HTML swapping, not the Page Transition API. |
| 09:38–11:12 | Race-track animations and decorative assets use Rive; he inspects different circuits and states. Describes a signature being drawn according to scroll progress (scroll-scrubbed path reveal). |
| 11:34–12:07 | Begins discussing performance and why these visually rich sites can be demanding. |
| 12:07–12:32 | Opens an FPS meter in DevTools and scrolls rapidly to inspect frame rate and dropped frames. |
| 12:56–13:44 | Attributes smoothness to a flat design with few shadows, blurs, gradients, filters, and absolute-positioned elements, and to animating transforms instead of layout properties such as font size/top/left. |
| 13:45–14:16 | Shows developer-console easter eggs: styled colored console text using `%c`, CSS arguments, and a “Load Norris” loader label. |
| 14:24–14:29 | Says to press F1 on the website. The clip cuts off before the resulting behavior is explained; do not infer what F1 does. |

**Note:** Topic timestamps in the table are reliable to approximately a second; the ASR is not a certified verbatim transcript. A few boundaries overlap slightly because the speech-to-text segments are phrase-based.

## 3. Complete technique inventory

### Techniques visible in the Reel's own edit

| Technique | Timestamp / evidence | Category | Confidence |
|---|---|---|---|
| Talking-head and screen-recording composite (picture-in-picture) | Throughout; sampled at 00:15, 01:30, 02:30, 06:30, 12:30 | Compositing / presentation | Direct visual evidence |
| Persistent topic title and graphic frame | “LANDO NORRIS” title and neon yellow-green framing recur in sampled frames | Typography / graphic overlay | Direct visual evidence |
| Screen-capture inserts with browser DevTools | E.g. 06:30, 08:30, 10:30, 12:30, 13:30; code/inspector panels appear beside the site | B-roll / instructional presentation | Direct visual evidence |
| Cursor-led demonstration | Speaker scrolls and hovers while explaining behavior | Demonstration / screen recording | Explicit speech and visual evidence |

These are presentation and compositing choices; there is not enough evidence to claim particular editing software or the exact keyframe method used to assemble the Reel.

### Website motion and visual effects explained by the speaker

| Technique | Timestamp | Category | Evidence status |
|---|---:|---|---|
| Depth-map parallax / 2.5D image displacement | 00:49–01:53 | Compositing / animation | Explicit explanation; cursor movement and layered hero shown |
| Alpha-map cutout | 01:53–02:08 | Masking / compositing | Explicit explanation |
| Roughness and metalness material maps | 02:08–02:21, 04:09–05:01 | 3D shading / VFX | Explicit explanation |
| Layered hero compositing: portrait, shadow, helmet, shader reveal | 02:22–03:17 | Compositing / VFX | Explicit explanation; speaker qualifies the exact blob shader as an informed guess |
| Real-time 3D model and UV/base-color artwork mapping | 03:17–05:25 | 3D / motion graphics | Explicit explanation; GLTF asset and Three.js visible |
| Normal mapping | 04:19 onward (about 04:20–04:50) | 3D shading | Explicit mention; brief explanation is limited |
| Scroll-linked model rotation | 05:02–05:27 | Animation / time remapping | Explicit explanation and visible behavior |
| Smooth scroll and sticky / horizontal scroll sequencing | 05:26–06:10 | Interaction design / animation | Explicit explanation |
| SVG image masks via CSS | 06:58–07:22 | Masking / compositing | Explicit explanation with inspector evidence |
| Animated elliptical `clip-path` reveal | 07:30–07:46 | Masking / animation | Explicit explanation and hover demonstration |
| Per-character staggered text animation | 07:46–08:28 | Typography / animation | Explicit explanation: wrap letters in spans, stagger delays, animate transform |
| Full-screen curtain / masked page transition | 08:31–09:16 | Transitions / compositing | Explicit explanation and demonstration |
| Rive canvas/vector animation with state changes | 09:38–11:13 | Motion graphics / animation | Explicit explanation and inspection of exported asset |
| Scroll-scrubbed path drawing | 11:12–11:34 | Animation / typography | Explicit explanation; signature progressively draws with scroll |
| FPS / dropped-frame profiling | 12:07–12:32 | Performance workflow | Explicit explanation and DevTools demonstration |
| Transform-based animation for rendering efficiency | 12:56–13:44 | Animation / performance | Explicit explanation |
| Styled browser-console message | 13:47–14:16 | Other / developer easter egg | Explicit explanation; not a video-editing technique |

## 4. Detailed explanations and recreation notes

Difficulty refers to recreating the demonstrated effect, not merely recognizing it. “Tools” names practical equivalents; the Reel does not establish which NLE was used to edit itself.

### 4.1 Picture-in-picture screen-recording composite

- **Timestamp / category:** Throughout; clearest sampled frames at 00:15 and 01:30. Compositing and instructional presentation.
- **What / why:** The host remains in a rounded top panel while the website occupies the larger lower area. This keeps a human narrator visible while preserving room for detailed screen evidence.
- **How it works:** Two synchronized video sources are placed on separate tracks/layers, scaled and cropped into regions of a vertical 9:16 composition. A shape mask or rounded-rectangle matte clips the host panel; title/background graphics sit on additional layers.
- **Recreate:** Record host and screen separately; synchronize by a clap or waveform; set a 1080×1920 sequence; crop the screen recording to the lower region; scale the host to a top inset; add a rounded mask, consistent margins, and a title plate. Keep browser UI readable and avoid shrinking the evidence too far.
- **Tools:** Premiere Pro, Resolve/Fusion, Final Cut, CapCut; FFmpeg `overlay`, `scale`, `crop`, and alpha masks.
- **Difficulty / prerequisites:** Beginner; learn tracks/layers, aspect ratio, crop, and audio sync first.
- **Related:** Screen capture, title graphics, masking, safe-area layout.

### 4.2 Depth-map parallax (2.5D)

- **Timestamp / category:** 00:49–01:53. Compositing and animation.
- **What:** A still portrait appears to have shallow depth as the view shifts with cursor movement. A grayscale depth image encodes approximate near/far distance.
- **Why:** Adds dimensionality to a photograph without modeling every object in 3D.
- **How:** A displacement shader samples the depth map and offsets image pixels according to the map value and a small camera/cursor offset. The image can be subdivided into planes or warped as a texture. The speaker describes white as near and dark as far for this particular demo; depth-map conventions can be inverted.
- **Recreate:** Make or generate a depth map; inspect its polarity; map it to a displacement shader; move the virtual camera slightly; tune displacement conservatively; feather/repair holes at edges. In an NLE, approximate with separated layers and small opposing position shifts, but a shader gives the continuous warp shown.
- **Tools:** Three.js/WebGL, After Effects displacement map, Blender compositing, depth-map generation tools; FFmpeg can combine rendered layers but does not itself infer depth.
- **Difficulty / prerequisites:** Intermediate; learn grayscale maps, UVs, shader/displacement basics, and edge handling.
- **Related:** Alpha matte, parallax, 2.5D camera move, compositing.

### 4.3 Alpha-map cutout and layered hero composite

- **Timestamp / category:** 01:53–03:17. Masking, compositing, VFX.
- **What:** The portrait is cut out with an alpha map; a separate shadow plate and 3D helmet are layered over/around it. The helmet is revealed selectively.
- **Why:** Makes a flat portrait and rendered object read as one integrated hero image.
- **How:** Alpha is an opacity channel: white/opaque keeps pixels; black/transparent removes them (depending on convention). Separate plates permit independent positioning and animation. A shader controls where the helmet becomes visible. The speaker says the reveal uses a custom shader and speculates that a fluid/blob cursor mask may be involved; the exact implementation is explicitly uncertain.
- **Recreate:** Rotoscope or derive an alpha matte; clean hair/edge detail; place the shadow plate and helmet on separate layers; match scale/perspective; animate a reveal matte; add contact shadow and color/light matching. Do not claim the exact fluid shader unless source inspection confirms it.
- **Tools:** After Effects, Fusion, Blender, Three.js/WebGL shaders; FFmpeg `overlay` with alpha for rendered elements.
- **Difficulty / prerequisites:** Intermediate to advanced; learn alpha channels, premultiplication, masks, layer order, and basic lighting.
- **Related:** Depth-map parallax, shader reveal, 3D render integration, matte painting.

### 4.4 Real-time 3D asset with material maps

- **Timestamp / category:** 03:17–05:25, especially 04:06–05:01. 3D shading and motion graphics.
- **What:** A GLTF helmet is rendered as a live 3D model, with flat artwork wrapped onto its surface and multiple maps controlling appearance.
- **Why:** A model can rotate and respond to scroll while preserving view-dependent reflections and surface detail; unlike a rendered video, it can respond to the viewer's current state.
- **How:** UV coordinates map 2D artwork to model surfaces. Base-color maps provide color; normal maps perturb surface normals to fake small relief; roughness maps vary specular spread; metalness maps identify metallic regions. The speaker describes the site's map-specific behavior; a map's black/white polarity depends on the shader convention.
- **Recreate:** Model or obtain a GLTF asset; unwrap UVs; paint a base-color texture; author normal, roughness and metalness maps; load the GLTF and textures into Three.js; add lights/environment; tune materials; test texture alignment at multiple angles.
- **Tools:** Blender, Substance 3D Painter, Three.js, GLTF viewers; Blender/Unreal for offline equivalents.
- **Difficulty / prerequisites:** Advanced; learn modeling, UVs, PBR material channels, lighting, and GLTF export first.
- **Related:** Normal mapping, texture baking, environment maps, scroll-driven rotation.

### 4.5 Scroll-linked model rotation and smooth scrolling

- **Timestamp / category:** 05:02–06:10. Animation / interaction design.
- **What:** Scroll progress rotates the live helmet and advances a long page sequence; some content moves horizontally or sticks in place.
- **Why:** Turns browsing into a paced visual sequence and ties content changes to a user-controlled input.
- **How:** Normalize scroll position within a section to progress `p ∈ [0,1]`, then map `p` to rotation/position/opacity. Sticky positioning holds a viewport element while the page's scroll range advances. The speaker identifies JavaScript, Lenis-like smoothing, inline style updates and mentions native scroll-driven APIs; exact code is not established by the video.
- **Recreate:** Define a bounded section; compute normalized progress; map it to transforms; clamp values; use `position: sticky` for the pinned viewport; retain keyboard, spacebar, search, and reduced-motion behavior. Smooth-scroll only if it does not break native scrolling or accessibility.
- **Tools:** CSS Scroll-driven Animations where supported, JavaScript `requestAnimationFrame`, Lenis (speaker pronounces it like “Lienis”), GSAP ScrollTrigger.
- **Difficulty / prerequisites:** Intermediate; learn scroll coordinates, interpolation, easing, CSS transforms, sticky layout, and accessibility.
- **Related:** Scroll scrubbing, parallax, sticky storytelling, transform animation.

### 4.6 SVG masks and expanding ellipse reveal

- **Timestamp / category:** 06:58–07:46. Compositing and animation.
- **What:** SVG silhouettes crop rectangular images into unusual shapes; a hover ellipse grows to uncover a photo.
- **Why:** Gives thumbnails a designed silhouette and makes hover feedback feel spatial.
- **How:** CSS `mask-image` uses alpha/luminance from an SVG to control visibility. `clip-path: ellipse(...)` clips pixels outside an ellipse; transition the ellipse radius/size on hover/focus to reveal more of the image. The speaker distinguishes SVG masks from the CSS clip-path used in the hover animation.
- **Recreate:** Create a clean SVG mask; apply with `mask`/`-webkit-mask`; specify sizing and position; create a `clip-path: ellipse(...)`; transition its radius on hover and keyboard focus; provide a static fallback for unsupported browsers.
- **Tools:** CSS/SVG, Figma/Illustrator for shapes; After Effects masks for rendered equivalents.
- **Difficulty / prerequisites:** Beginner to intermediate; learn alpha, SVG viewBox, CSS masks and transitions.
- **Related:** Alpha-map cutout, matte reveals, page-transition curtain.

### 4.7 Staggered per-letter kinetic typography

- **Timestamp / category:** 07:46–08:28. Typography and animation.
- **What:** Hover causes letters to travel vertically in a cascading sequence.
- **Why:** Adds personality and makes a text control feel responsive without moving the entire word uniformly.
- **How:** Each character is wrapped in an inline block/span. A hover/focus state changes `transform: translateY(...)`; each span receives an increasing transition delay. The speaker suggests about 0.1 ms but that is likely an ASR/transcription slip; use a visibly tuned delay (commonly tens of milliseconds) rather than copying that value literally.
- **Recreate:** Split text into spans while preserving accessible text; set `display:inline-block`; animate `transform`; assign delays by character index; animate back on pointer exit; ensure focus state and reduced-motion alternative.
- **Tools:** CSS transitions, JavaScript/React text splitting, GSAP stagger.
- **Difficulty / prerequisites:** Beginner; learn spans, transforms, timing functions, hover/focus states.
- **Related:** Kinetic typography, staggered animation, transform performance.

### 4.8 Curtain-style page transition

- **Timestamp / category:** 08:31–09:38. Transitions and compositing.
- **What:** A full-screen loader covers the current page, the next document content is loaded/swapped underneath, then the curtain masks away to reveal it.
- **Why:** Hides a hard content swap and makes navigation feel like a designed scene change.
- **How:** A fixed overlay animates in; navigation fetches or prepares the next content; content is replaced while covered; the overlay animates out through a mask/clip path. The speaker says it is custom JavaScript/HTML swapping rather than the browser Page Transition API. Avoid leaving a dead overlay if loading fails.
- **Recreate:** Intercept same-origin navigation; animate a covering panel; fetch/prepare next view; swap only after success; animate reveal; preserve browser history, focus, scroll restoration, and failure fallback.
- **Tools:** CSS masks/clip-path, JavaScript History/Fetch APIs, GSAP; in video editing, use a matching full-frame wipe/matte as an approximation.
- **Difficulty / prerequisites:** Advanced in a website; intermediate as a video transition. Learn async loading, DOM lifecycle, masks, state management, and navigation accessibility.
- **Related:** Matte wipe, mask reveal, loading animation, compositing.

### 4.9 Rive animation and state changes

- **Timestamp / category:** 09:38–11:13. Motion graphics / interactive animation.
- **What:** Animated track diagrams, decorative accents, and signature assets are shown as Rive exports in a canvas/runtime.
- **Why:** Packages vector-like animation and interactive states into an embeddable runtime asset rather than hand-authoring every frame in page code.
- **How:** Design elements and state transitions in Rive; export a runtime asset; load it through the platform runtime; trigger states from hover or other inputs. The Reel's speaker calls Rive a 3D tool, but that description is imprecise: the evidence here supports Rive-authored interactive graphics/canvas assets, not a claim that the shown artwork is a 3D model.
- **Recreate:** Build shapes and a state machine; define hover/on/off states; test transitions in Rive; export `.riv`; load through the appropriate runtime; connect input state to page interaction.
- **Tools:** Rive editor and web runtime; comparable NLE recreation with After Effects/Lottie loses the same native interactivity.
- **Difficulty / prerequisites:** Intermediate; learn vector animation, state machines, runtime integration, and input events.
- **Related:** Motion graphics, hover interaction, SVG animation, scroll-scrubbed path reveal.

### 4.10 Scroll-scrubbed signature/path draw

- **Timestamp / category:** 11:12–11:34. Animation / kinetic graphic.
- **What:** A signature is progressively painted as the viewer scrolls, and can be scrubbed backward and forward.
- **Why:** Connects a visual flourish to page progress and lets viewers control its timing.
- **How:** A vector path's stroke offset/trim amount is mapped to normalized scroll progress. The speaker contrasts this with an SVG offset-path approach and says this site uses a Rive asset; the Reel does not fully expose the implementation internals.
- **Recreate:** Prepare a vector path; animate trim/stroke dash offset or use a Rive state; map scroll progress to animation time; clamp progress and support reduced motion.
- **Tools:** Rive, SVG `stroke-dasharray`/`stroke-dashoffset`, GSAP DrawSVG, CSS/JavaScript.
- **Difficulty / prerequisites:** Intermediate; learn vector paths, interpolation, and scroll progress.
- **Related:** Scroll-linked animation, path animation, Rive state machines.

### 4.11 Transform animation and frame-rate profiling

- **Timestamp / category:** 12:07–13:44. Performance workflow and animation.
- **What:** The speaker uses an FPS meter while scrolling and recommends animating transforms rather than layout properties. He points out sparse shadows, blur, gradients, filters and absolute positioning.
- **Why:** Animations that only change transform/opacity are often cheaper for browsers to composite; changes to layout properties can trigger layout and paint work. Profiling checks whether the design actually stays responsive.
- **How:** Measure frame pacing while exercising the interaction; inspect dropped frames; keep motion on compositor-friendly properties when possible; reduce expensive effects and overdraw. This is a general optimization guideline, not a guarantee: transforms can still be expensive, and browser/GPU behavior varies.
- **Recreate:** Use DevTools FPS/performance tools; record a scroll trace; animate `transform`/`opacity`; compare with `top`/`left`/font-size; test target devices and reduced-motion behavior.
- **Tools:** Chrome/Firefox DevTools, Performance panel, FPS meter, CSS transforms, `requestAnimationFrame`.
- **Difficulty / prerequisites:** Intermediate; learn render pipeline, layout/paint/compositing, frame budgets.
- **Related:** Keyframes, scroll animations, compositing layers, performance budgets.

### 4.12 Styled console message (not an editing technique)

- **Timestamp / category:** 13:47–14:16. Developer easter egg.
- **What:** Console output uses `%c` formatting and CSS arguments to color and style a message; loader text says “Load Norris.”
- **Why:** Brand personality for developers inspecting the page.
- **How / recreate:** In browser JS, use `console.log('%c…', 'color:…; font-weight:…')`. This is unrelated to timeline editing or rendered video effects.
- **Tools / difficulty:** Browser JavaScript; beginner.

## 5. Visual evidence and representative timestamps

| Reel time | Sampled visual evidence |
|---:|---|
| 00:15 | Host inset above site grid; large persistent “LANDO NORRIS” title and bright graphic frame. |
| 01:30 | Website screen capture demonstrates layered helmet/portrait sequence; host remains in fixed panel. |
| 02:30 | Helmet/model/map explanation, shown within the screen recording. |
| 04:30–05:10 | Helmet variants and DevTools/source inspection support the mask and text-hover explanation. |
| 06:30 | Website page and inspector panes visible together, supporting screen-recording plus DevTools presentation. |
| 08:30–09:30 | Page transition is described and demonstrated; exact implementation inferred from the speaker's code inspection, not solely the appearance. |
| 10:30–11:30 | Rive-related animation and signature section. |
| 12:30–13:40 | DevTools and fast scrolling/FPS discussion; performance claims are speaker explanation. |
| 13:30–14:20 | Console inspection and styled-message discussion. |

Sampling is representative, not frame-by-frame. A visual style that is not visible in a sampled still is not asserted unless directly explained in the audio.

## 6. Technique dependency graph

```mermaid
flowchart TD
  Layers[Timeline layers and compositing] --> PiP[Picture-in-picture layout]
  Alpha[Alpha channels and masks] --> Hero[Layered hero composite]
  Depth[Depth maps] --> Parallax[2.5D parallax]
  Alpha --> Parallax
  UV[UV coordinates and textures] --> Materials[Base color / normal / roughness / metalness]
  Materials --> Model[Real-time 3D model]
  Model --> ScrollModel[Scroll-linked model rotation]
  Progress[Scroll progress and interpolation] --> ScrollModel
  Progress --> Signature[Scroll-scrubbed path draw]
  Progress --> Sticky[Sticky / horizontal scroll sequence]
  CSSMask[SVG/CSS masks] --> Ellipse[Animated ellipse reveal]
  CSSMask --> Curtain[Page-transition curtain]
  Spans[Per-letter spans] --> Stagger[Staggered kinetic typography]
  Transforms[Transforms and easing] --> Stagger
  Transforms --> ScrollModel
  Rive[Rive vectors and state machines] --> RiveCanvas[Interactive canvas motion graphics]
  RiveCanvas --> Signature
  Render[Layout / paint / composite pipeline] --> Profile[Frame-rate profiling]
  Transforms --> Profile
  Profile --> Optimize[Performance tuning]
```

## 7. Recommended learning roadmap

### Foundational

1. Timeline layers, alpha, cropping, and 9:16 composition (for the Reel's own host/screen composite).
2. CSS/SVG basics: masks, `clip-path`, transforms, transitions, and spans.
3. Keyframes/interpolation and normalized progress as time-dependent state.
4. Browser layout/paint/compositing and basic DevTools profiling.

### Intermediate

5. Staggered typography and accessible hover/focus motion.
6. Scroll-linked animation, sticky layout, and scroll-scrubbed path animation.
7. SVG/CSS matte reveals and layered hero compositing.
8. Depth-map displacement / 2.5D parallax.
9. Rive state machines and runtime embedding.

### Advanced

10. GLTF pipeline: modeling, UVs, material maps, lighting, Three.js rendering.
11. Custom shader reveals and multi-layer 3D/photo compositing.
12. Curtain-style asynchronous page transitions with history, focus, and failure handling.
13. Performance profiling across devices and motion accessibility.

This order starts with layers and maps, then progresses through transforms and scroll state, then to real-time 3D/shaders and complex page transitions.

## 8. Practical exercises

1. **Rebuild the Reel layout:** Put a webcam clip above a screen recording in a 9:16 sequence; add a title panel and rounded crop. Verify text remains readable at phone size.
2. **Depth parallax:** Create a still portrait and grayscale depth map. Move a virtual camera by a few pixels and tune displacement until the result feels subtle rather than rubbery.
3. **Matte stack:** Composite a portrait, shadow plate, and helmet render. Reveal the helmet with an animated matte; compare a hard edge, ellipse, and soft/blob edge.
4. **Material map lab:** Apply separate base-color, normal, roughness, and metalness maps to a GLTF helmet. Change a light while rotating the model to see each map's effect.
5. **Scroll choreography:** Map a section's scroll progress to one model rotation and one sticky panel. Add a reduced-motion fallback and test keyboard scrolling.
6. **Mask pair:** Crop a photo with an SVG silhouette, then build a separate expanding ellipse hover/focus reveal.
7. **Kinetic word:** Split a heading into spans and stagger transform transitions. Add focus-visible and reduced-motion variants.
8. **Curtain transition prototype:** Cover the page, load a local destination, swap the content, and reveal it. Simulate a failed request and ensure the curtain clears.
9. **Rive state machine:** Animate a track outline with idle, hover, and selected states; drive state changes from pointer and keyboard events.
10. **Performance A/B:** Profile a scroll interaction using `transform` versus `top`/`left`; compare dropped frames and paint activity on a modest device.

## 9. Glossary

- **Alpha map / matte:** Image channel used to define transparency.
- **Base-color map:** Texture that supplies an object's surface color.
- **Clip path:** Geometric boundary outside which pixels are not drawn.
- **Depth map:** Grayscale or numeric image encoding approximate scene depth.
- **GLTF:** Portable format for 3D scenes, models, materials, and animation.
- **Keyframe:** A value at a specific time/progress; interpolation fills values between keyframes.
- **Metalness map:** Per-pixel material control for metallic versus dielectric response.
- **Normal map:** Texture that perturbs surface-lighting normals to simulate fine detail.
- **Parallax:** Apparent relative movement between depth layers as viewpoint changes.
- **Roughness map:** Per-pixel control over how broad or sharp reflections appear.
- **Scroll scrubbing:** Mapping scroll progress directly to animation progress so motion can run forward or backward.
- **Shader:** Small GPU program that computes how geometry or pixels are rendered.
- **Stagger:** Delaying a group of elements by slightly different amounts to create a cascade.
- **Sticky positioning:** CSS layout behavior that holds an element within a viewport region while its containing page section scrolls.
- **Transform:** Geometric change such as translate, scale, or rotate, often composited without changing document layout.
- **UV mapping:** Coordinates that map a 2D texture onto a 3D surface.

## 10. Ten most important techniques to learn first

1. Layered compositing and alpha channels.
2. Transform animation and easing.
3. CSS/SVG masks and clip paths.
4. Keyframes and interpolation.
5. Per-letter staggered typography.
6. Scroll progress mapped to animation state.
7. Depth-map parallax.
8. Rive state-based motion graphics.
9. GLTF, UV mapping, and PBR material maps.
10. Performance profiling and compositor-friendly animation.