feature: longform visual explainer polish

[ndizazzo]

Summary

Polishes the website's longform visual explainer so the scroll story is clearer, the final mesh payoff is stronger, and the supporting UI details hold up across desktop and mobile.

This comes from feedback from technical users that it doesn't convey much information, despite looking good.

What changed

• Makes Learn more jump directly to the first topology anchor instead of replaying the animated scroll sequence.
• Adds responsive phase titles for the aperture sequence: model splitting, smaller layer slices on memory-bound GPUs, and right-sized node placement.
• Adds the final hook, Run bigger models without buying bigger GPUs., with the split-line layout around the mesh diagram and the smoother Anime.js word/glow pulse on both bigger words.
• Tightens responsive behavior for the hero title, footer buttons, mesh alignment, aperture opening/closing state, and final diagram line/icon consistency.
• Colorizes the tool compatibility strip using project-specific accent dots.
• Restores visual whitespace inside the hero mesh node icon rings.

Visual samples

Final hook, desktop

Final hook, iPhone SE

Colorized tool strip

Node icon padding

Validation

• just website-build
• Playwright visual checks across desktop, iPhone SE, iPhone Pro/Pro Max-style mobile sizes, iPad mini width, and WebKit/Safari emulation during iteration.
• Targeted SVG measurements for final node icon sizing after the 10% reduction.

Summary by CodeRabbit

• New Features

  • Animated multi-line final headline with per-word pulse effects in Stage 2
  • Stage 2 phase copy and improved title synchronization and transitions
  • Improved "learn more"/stage-completion navigation and anchor handling

• Style

  • Refined hero typography, glow and layout; responsive hero/topology adjustments
  • Consistent node sizing and visual scaling in hero visualization
  • Trust strip labels restyled with per-tool dot colors and glow effects

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d1f4ea6a-280e-4208-a8d4-fcb45534702f

📥 Commits

Reviewing files that changed from the base of the PR and between c5d228f and 9e531f4.

⛔ Files ignored due to path filters (4)

• .github/pr-samples/longform-visual-explainer/final-hook-desktop.png is excluded by !**/*.png
• .github/pr-samples/longform-visual-explainer/final-hook-iphone-se.png is excluded by !**/*.png
• .github/pr-samples/longform-visual-explainer/node-icon-padding.png is excluded by !**/*.png
• .github/pr-samples/longform-visual-explainer/trust-strip-colorized.png is excluded by !**/*.png

📒 Files selected for processing (5)

• website/src/_includes/sections/hero.njk
• website/src/_includes/sections/trust-strip.njk
• website/src/assets/hero-viz.js
• website/src/assets/model-slicing.js
• website/src/assets/site.css

✅ Files skipped from review due to trivial changes (1)

• website/src/_includes/sections/trust-strip.njk

🚧 Files skipped from review as they are similar to previous changes (3)

• website/src/_includes/sections/hero.njk
• website/src/assets/hero-viz.js
• website/src/assets/model-slicing.js

---

📝 Walkthrough

Walkthrough

This PR enhances the Stage 2 hero section with animated final headline messaging and phase description overlay. Template markup adds final-hook and phase-copy containers; JavaScript introduces title-progress synchronization and final-hook word animation with pulse effects; CSS styling enables the new visual experience across desktop and mobile layouts.

Changes

Stage 2 Hero Animation and Phase Messaging

Layer / File(s)	Summary
HTML Structure for Stage 2 Hero and Trust Strip website/src/_includes/sections/hero.njk, website/src/_includes/sections/trust-strip.njk	Template markup adds stage2-final-hook container with three animated headline lines and stage2-phase-copy overlay describing model-to-node mapping. Trust strip tool labels gain data-tool attributes for styling hooks.
Hero SVG Node Geometry Refactoring website/src/assets/hero-viz.js	Shared constants NODE_PLATE_RATIO and NODE_ICON_DIAMETER_RATIO centralize node plate sizing and icon scaling. Icon scale formula and plate radius calculations updated across initial SVG build and responsive layout updates to use the new constants.
Stage 2 Title Synchronization Architecture website/src/assets/model-slicing.js	New syncTitleFromProgress function separates title update logic from scroll calculation. Phone-portrait title lift, responsive title target adjustments, and applyHeroVizTransform behavior enable title animations tied to stage progress. Constants govern title fade/clear thresholds and final-hook pulse triggers.
Final Hook Word Animation and Pulse System website/src/assets/model-slicing.js	Complete final-hook implementation: module-level state, DOM text lines split into per-word spans (anime.splitText fallback), "bigger" keyword words tracked, and a two-part pulse Anime timeline with reduced-motion/missing-anime guards. Initialization collects final hook lines and prepares word spans.
Stage 2 Completion and Learn-More Navigation website/src/assets/model-slicing.js	New anchor resolution and scrolling utility functions (targetForAnchor, pushAnchorHash, restoreScrollBehaviorSoon, scrollToAnchorTarget, lockCompletedStageAtAnchor) replace prior scroll-position logic. Hero-learn click handler refactored to use these helpers and repeated locking/restore scheduling.
Hero Visual and Typography Styling website/src/assets/site.css	Hero-viz node halo blend mode updated; hero title gains new color variables and multi-layer text-shadow glow stack; subtitle adds matching text-shadow; hero install and hero-learn buttons refactored for flex layout and explicit nowrap handling to improve button text wrapping on narrow viewports.
Trust Strip Tool Dot Styling website/src/assets/site.css	Trust strip tool labels restyled with ::before pseudo-element dots. Data-tool attribute hooks drive per-tool color variables and layered glow via box-shadow for visual distinction across tools.
Topology Section CSS Refinements website/src/assets/site.css	Topology section gains scroll-margin-top for anchor navigation. Mesh-node, mesh-core, and typography selectors scoped to .topology to avoid unintended inheritance. Mesh-core enforces consistent aspect-ratio and responsive min-width/min-height constraints. Mobile layout selectors expanded for fine-grained responsive control.
Stage 2 Phase and Final Hook Complete Styling System website/src/assets/site.css	Comprehensive CSS for stage2-phase-copy overlay with grid positioning, per-phase title variants, and opacity animation variables. Complete .stage2-final-hook system with multi-line typography, per-line/span positioning/transform/filter/glow, and keyword-based pulse effects on [data-stage2-final-keyword="bigger"]. Hero-title-loop hidden when final hook visible. Mobile, small-height, and landscape breakpoints provide responsive tuning for phase copy and final hook positioning, sizing, and visibility. Reduced-motion mode hides animated elements.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title "feature: longform visual explainer polish" directly aligns with the PR's primary objective of polishing the website's longform visual explainer with improvements to the scroll story, final mesh payoff, and responsive UI behavior.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/longform-visual-explainer-titles

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}