Skip to content

feat(memes): full-bleed hero with Bayer dither image cycling#7586

Merged
h0lybyte merged 1 commit intodevfrom
trunk/meme-hero-1772581091
Mar 4, 2026
Merged

feat(memes): full-bleed hero with Bayer dither image cycling#7586
h0lybyte merged 1 commit intodevfrom
trunk/meme-hero-1772581091

Conversation

@h0lybyte
Copy link
Member

@h0lybyte h0lybyte commented Mar 4, 2026

Summary

  • Replace Starlight's default hero with a custom full-viewport magazine-style hero section
  • AstroHeroSection.astro renders static HTML at build time (zero JS, instant paint) with background image, gradient overlay, animated text, and CTA buttons
  • HeroDitherCycle.tsx is an O(1) React hydration island (renders null) that cycles unsplash backgrounds using an 8x8 Bayer ordered-dither dissolve on a quarter-resolution canvas with image-rendering: pixelated
  • PageTitle.astro override suppresses Starlight's h1 and content-panel padding on splash pages for true edge-to-edge layout with zero layout shift
  • Unsplash image rotation managed via a simple array of photo IDs

Test plan

  • Verify hero fills full viewport with no side dead space on mobile and desktop
  • Wait ~8s and confirm Bayer dither dissolve transition between images
  • Scroll down and verify hero fades out smoothly
  • Confirm non-splash pages (e.g. guides) still render h1 and normal layout
  • Resize browser and confirm canvas redraws correctly

🤖 Generated with Claude Code

Replace Starlight's default hero with a custom full-viewport hero section.
AstroHeroSection.astro renders static HTML (zero JS), HeroDitherCycle.tsx
hydrates as an O(1) React island that cycles unsplash backgrounds using an
8x8 Bayer ordered-dither dissolve on a quarter-res canvas. PageTitle
override suppresses Starlight's h1 and content-panel padding on splash
pages for true edge-to-edge layout.
@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2026

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

@h0lybyte h0lybyte merged commit 97bbc1f into dev Mar 4, 2026
5 checks passed
@h0lybyte h0lybyte deleted the trunk/meme-hero-1772581091 branch March 4, 2026 01:17
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