Skip to content

fix: make hero 3D scene and header mobile-friendly - #16

Closed
mattzcarey wants to merge 1 commit into
mainfrom
fix/mobile-hero
Closed

fix: make hero 3D scene and header mobile-friendly#16
mattzcarey wants to merge 1 commit into
mainfrom
fix/mobile-hero

Conversation

@mattzcarey

Copy link
Copy Markdown
Contributor

Summary

  • Adds a ResponsiveCamera component that pulls the Three.js camera back on narrow viewports so the "MODEL CONTEXT PROTOCOL" 3D text fits without clipping
  • Adds touch event support (touchmove/touchend) for the interactive trail/x-ray effect and icon desaturation, so the hero is interactive on mobile
  • Reduces icon card count from 6 to 3 on small screens (< 640px) to avoid crowding
  • Hides "mcp.cloudflare.com" text and tightens header padding on mobile

Test plan

  • Open on a mobile device or use Chrome DevTools device emulation
  • Verify 3D text is fully visible and not clipped on narrow screens
  • Verify touch interactions trigger the trail/x-ray effect
  • Verify icon cards don't crowd the scene on mobile
  • Verify header looks good on small screens

- Add responsive camera that pulls back on narrow viewports so 3D text fits
- Add touch event support for trail/x-ray and icon desaturation effects
- Reduce icon card count on small screens (6 → 3)
- Hide domain text and tighten header padding on mobile
@mattzcarey mattzcarey closed this Feb 18, 2026
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