[benjavicente]

🤖 Made with codex, reviewed by human

The homepage currently assigns the hero video URL after hydration. Include the video source in server-rendered HTML so the browser can request it without waiting for hydration. A media condition preserves the initial download avoidance for reduced-motion users.

Crop the existing high-resolution still images to match the video's aspect ratio. Both layers use centered object-cover, preserving the palm's framing when playback starts across viewport sizes. Keep the still visible until canplay, and preserve playback controls and reduced-motion handling.

Earlier parser-blocking resources can still delay video discovery. Stylesheet ordering and font loading are separate work.

Before / after

The before with reduced motion should match the other 3.

View	Before	After
Mobile
Mobile · reduced motion
Desktop
Desktop · reduced motion

Motion-enabled rows show the unchanged video paused at its first frame. Reduced-motion rows show the still image. Captures use the production layout with original versus cropped still-image assets.

Validation

• Full test suite and production build passed.
• Chrome and WebKit checks covered loading before hydration, reduced-motion download avoidance, and playback controls.
• Firefox playback could not be verified: standalone MP4 and WebM controls also failed to decode frames in this environment.

Summary by CodeRabbit

• New Features
  • Hero video playback now respects motion preferences, loading video only when reduced motion is not enabled.
  • The poster image remains visible while the video loads or if playback fails, and fades out when the video is ready.
  • Video loading can be retried after a failed request.
• Tests
  • Added coverage for motion preferences, loading and failure states, retry behavior, and image/video sizing.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 45793b1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 2f78461a-10e6-4f22-9a4b-21298b062c59

Commits

Reviewing files that changed from the base of the PR and between bd54ef4 and 45793b1.

Files ignored due to path filters: 1

• public/images/hero-palm-gradient.jpg is excluded by !**/*.jpg

Files selected for processing: 5

• public/images/hero-palm-gradient-1600.webp
• public/images/hero-palm-gradient-2400.webp
• public/images/hero-palm-gradient-960.webp
• src/components/home/HeroPalmMedia.tsx
• tests/hero-media.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

Walkthrough

The hero media component now selects its video source based on motion preference. Playback loads video on demand, and the poster remains visible while video loads or when reduced motion is preferred. Tests cover pre-hydration requests, playback, failures, and retries.

Changes: Hero media behavior

Layer / File(s)	Summary
Motion-aware source and poster src/components/home/HeroPalmMedia.tsx, tests/hero-media.test.ts	The video source is restricted to no-preference. The poster overlays the video while it loads and remains opaque for reduced motion. Tests check source selection, poster layering, and image/video aspect ratios.
Playback, readiness, and retry src/components/home/HeroPalmMedia.tsx, tests/hero-media.test.ts	Playback loads the video when needed. The component initializes playback and readiness state from the video element. Tests cover requests before hydration, playback failures, and retrying a failed request.

Priority: Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant VideoElement
  participant HeroPalmMedia
  participant PlayControl
  participant PosterImage
  Browser->>VideoElement: Select source based on motion preference
  VideoElement->>Browser: Request video for no-preference
  PlayControl->>HeroPalmMedia: Request playback
  HeroPalmMedia->>VideoElement: Load when no source, then play
  VideoElement->>PosterImage: Update readiness state

Loading

Suggested reviewers: ladybluenotes

Merge Risk: Minimal · up to 45793

Users can start the hero video after changing their motion preference. No merge-blocking issue remains.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely summarizes the two main changes: loading the hero video before hydration and aligning the still image.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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