TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Interactive Product Tour

1 post · Jun 2023

What this trail covers

Vercel has developed an interactive virtual product tour to provide prospective users with a no-commitment experience of the Vercel platform. This tour breaks down complex product information into digestible, interactive slides, highlighting key features and backend functionalities. It offers personalized experiences for logged-in users and a mobile-friendly, social media-like card-based interface. Accessibility was a core consideration, with ARIA attributes and keyboard navigation implemented.

All Vercel trails
  1. How to build an engaging virtual product tourThis post details the technical implementation of Vercel's virtual product tour, focusing on the design and development of an interactive slideshow experience. Key technical aspects covered include: the use of `DemoContext` as a single source of truth for tour data, navigation synchronization with URL query parameters using Next.js's `useRouter`, the structure of `TooltipContent` for dynamic tooltip information, a `repositionTooltip` function that handles dynamic positioning and viewport overflow with `ResizeObserver` and throttling, and animation techniques using CSS transitions and `transitionEnd` event listeners to ensure smooth and timed animations. Accessibility considerations such as ARIA attributes and keyboard navigation are also discussed.