TechPrufer
Sign inGet started

Blogs›Vercel›Interactive Product Tour

Interactive Product Tour

Interactive Product Tour

1
posts
2023

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. Technically, the tour uses a `DemoContext` for state management, syncs slide progression with URL query parameters for deep linking, and dynamically positions and animates a tooltip to guide user attention. Animations are carefully timed using CSS transitions and event listeners to ensure a smooth and predictable user experience.

2023

How to build an engaging virtual product tour

6/2/2023

This post details the technical implementation of Vercel's virtual product tour. Key contributions include the design of a `DemoContext` for managing tour state (current slide, sub-index, tooltip references, slide data), URL parameter synchronization (`i` query parameter) for deep linking using `useRouter`, dynamic tooltip positioning and resizing logic with `ResizeObserver` and throttling, and precise animation timing using CSS transitions and `transitionEnd` event listeners to synchronize tooltip appearance with dot movement. Accessibility considerations like `aria-live` and keyboard navigation are also discussed.