Skip to content

feat(docs): landing hero video (twd.dev + twd-js page) - #298

Merged
kevinccbsg merged 2 commits into
mainfrom
feat/landing-hero-video
Jul 15, 2026
Merged

feat(docs): landing hero video (twd.dev + twd-js page)#298
kevinccbsg merged 2 commits into
mainfrom
feat/landing-hero-video

Conversation

@kevinccbsg

Copy link
Copy Markdown
Member

What

Adds the new 30s product hero video to the docs site:

  • / (landing): hero screenshot replaced with a muted autoplay loop (docs/public/videos/twd-hero.mp4, 2.0 MB web-optimized, 1920×1080)
  • /twd-js: LandingHero gains an optional video-src prop; the twd-js page opts in. twd-relay / contract-testing unchanged — future videos are one prop away.

Accessibility

  • prefers-reduced-motion: reduce → no video mounts at all; the original static screenshot renders (WCAG 2.3.3)
  • Pause/play control on every video (WCAG 2.2.2), aria-pressed, focus-visible
  • SSR/no-JS → static screenshot (video mounts client-side only; screenshot doubles as poster)

About the footage

Every second is a real capture: Playwright recorded the TWD sidebar executing the actual twd-vue-example suite — nothing staged. Capture pipeline lives in twd-vue-example/video/.

Verification

  • npm run docs:build green
  • Playwright against the built site: video plays on / and /twd-js; toggle pauses; reduced-motion contexts render 0 videos + static img; /twd-relay unaffected

@kevinccbsg
kevinccbsg merged commit 5ba68be into main Jul 15, 2026
9 checks passed
@kevinccbsg
kevinccbsg deleted the feat/landing-hero-video branch July 15, 2026 08:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant