Skip to content

Merge dev: touch-aware hero demo and autoplay - #90

Merged
icanvardar merged 3 commits into
mainfrom
dev
Sep 4, 2026
Merged

Merge dev: touch-aware hero demo and autoplay#90
icanvardar merged 3 commits into
mainfrom
dev

Conversation

@icanvardar

@icanvardar icanvardar commented Sep 4, 2026

Copy link
Copy Markdown
Member

Summary

  • Touch-specific hero demo guide copy and coarse pointer detection
  • Autoplay share loop on touch devices when stage is in view

Test plan


Note

Low Risk
Marketing/landing UI and demo interaction only; no auth, APIs, or data handling changes.

Overview
Makes the landing hero product demo work on touch/coarse pointers without pretending visitors can type into the Mac shell, while tightening responsive layout and note legibility.

Touch vs keyboard: Adds useCoarsePointer (fine pointer = (hover: hover) and (pointer: fine)) and CSS toggles .demoWhenKeys / .demoWhenTouch so guide copy and a single Action button show the right label before hydration. On touch, MacTerminal and the phone terminal become display-only (no hidden input, drag handle, caret, or “show keyboard” key); guide actions render as 40px pill buttons. KeycapTrail is hidden on touch.

Autoplay on touch: useDemoAutoplay runs the share → tap → type ls → unshare loop once when ~50% of the stage is visible; it stops on visitor interaction (sendFromVisitor), scroll-away, or reduced motion. Keyboard users still drive the loop manually.

Layout/CSS: Tablet stack recenters the device pair and bumps phone/terminal scale; at ≤760px the Mac becomes a display panel (no base), the iPhone is larger with a bottom fade mask, dock hides, and trailing arrows nudge down toward the phone. landingHeroMedia aspect ratios update to match. Guide note tint is stronger in light mode (contrast) with a lighter dark-mode variant; quiet notes dim via text color, not opacity.

Reviewed by Cursor Bugbot for commit 0c8b6be. Bugbot is set up for automated code reviews on this repo. Configure here.

Detect coarse pointers, show touch-specific guide copy and actions, autoplay
the share loop on touch devices, and refine compact hero layout styles.
feat(web): touch-aware hero demo guide and autoplay
@vercel

vercel Bot commented Sep 4, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
wrapper-web Building Building Preview Sep 4, 2026 9:48am UTC

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 0c8b6be. Configure here.

Comment thread apps/web/components/hero-demo/phone-app.tsx
@icanvardar icanvardar closed this Sep 4, 2026
@icanvardar icanvardar reopened this Sep 4, 2026
@icanvardar
icanvardar merged commit 6152c82 into main Sep 4, 2026
6 checks passed
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