Why a virtual product tour

Evaluating a developer tool usually means reading marketing copy and guessing what the actual workflow feels like. Vercel's virtual product tour tries to remove that guesswork by letting prospective users click through real product UI before they sign up or talk to sales. The goal is to give teams a hands-on sense of the platform—including features that only surface after deeper usage—so they arrive at adoption already knowing where things live and how they fit together.

The tour is structured as an interactive slideshow. Each slide shows genuine Vercel interface elements that are normally behind a login, and if a user is already signed in, slides are personalized with their avatar and username. A dynamic tooltip on each slide directs attention to the most relevant detail, which keeps the experience from becoming overwhelming given how much surface area the product has. The tooltip isn't just decorative: it has to be moved to and clicked to advance, and in some cases it lets users interact directly with product features like comments on Preview Deployments.

A "contact sales" option appears throughout the tour rather than only at the end, so a user who is convinced partway through can reach out immediately instead of finishing the whole loop first.

Designing for mobile and accessibility

Mobile traffic makes up most of Vercel's new-user visits, but shrinking the desktop tour down didn't work—it was too long and awkward on a small screen. The mobile version instead borrows from social media patterns: a stack of cards users tap through. Since building on Vercel typically happens on a desktop, the mobile tour's primary job is to drive account creation and sales conversations, with the understanding that users will move to a desktop to actually build.

Accessibility was treated as a design constraint rather than a retrofit. There is no standard ARIA role for a "product tour" or "demo," so the team mapped the experience to a carousel pattern. A hidden div with role="status" and an aria-live attribute notifies screen readers whenever the slide changes. Keyboard navigation mirrors mouse interaction: a "Get Started" button prevents users from being dropped abruptly into the first slide, and "Skip to Tooltip" replaces the usual "Skip to Content" link so screen reader users can jump straight to the interactive element rather than wading through mostly-disabled buttons. Race conditions during rapid navigation were handled with lodash.delay() to keep focus on the tooltip.

Under the hood

Data flow and navigation

All tour state lives in a single DemoContext, which supplies components with:

  • An index state for the current slide
  • A subIndex state for steps within a slide
  • The active tooltipRef for positioning
  • Per-slide data and components
  • State for the modal and tour survey

The current slide index is synced to a URL query parameter i via Next.js's useRouter hook. That makes each slide deep-linkable—/product-tour?i=6 always lands on the fourth slide—and gives users a way to share or bookmark a specific point in the tour.

Tooltip content and positioning

Each slide has its own TooltipContent object that defines the text, position, and styling of the tooltip. Developers populate a tooltipContentMap with properties per slide or sub-slide, and DemoContext tells the map which slide's properties to hand to TooltipContent.

export interface TooltipContent {
// Data populated from tooltipContentMap, based on current DemoContext index
// Tooltip text
  title?: string;
  description?: string;
// Tooltip style and position
  color?: 'white' | 'black';
  dotAlignX?: 'left' | 'center' | 'right';
  dotAlignY?: 'top' | 'center' | 'bottom';
  transform?: string;
  tooltipAlign?: 'top' | 'left' | 'right' | 'bottom';
// Custom TS type check
  type: 'TooltipContent';
}

Tooltip position has to respond both to slide changes and window resizing, so a repositionTooltip function handles all cases. When a slide changes, the updated tooltipRef triggers a scroll to the new element and a repositioning call. A ResizeObserver catches window resizes and also routes through repositionTooltip, which means the function can fire very frequently; timeouts throttle it to a reasonable update rate.

The same function keeps the tooltip inside the viewport. It calculates the projected size and position of the tooltip description, passes those dimensions to an isOutofViewport helper (credit to Chris Ferdinandi), and when overflow is detected, adjusts alignment values such as tooltipAlign, dotAlignX, and dotAlignY to bring the element back into bounds.

Animation timing

Animation was deliberately restrained—the tour should direct attention to the product, not to its own transitions. Moving between slides uses CSS transitions to interpolate the tooltip from its previous position to the new one. The dot indicator uses a CSS keyframe animation on scale for its pulse. If the user clicks outside the dot or the active tooltip element, a click handler triggers a more intense pulse on the dot to guide attention back.

The hard part was sequencing. Early versions suffered from flickering tooltip descriptions as race conditions between repositionTooltip and the dot animation resolved unpredictably. The desired behavior was for the dot to move first and the description to fade in only after the movement finished. A transitionEnd event listener (credit to Programming Bytes) checks the propertyName; the description only appears once the top property has completed its transition. Across the whole tour, lodash.delay() schedules a timeline of animations and transitions so that they resolve in the correct order regardless of the user's navigation path.

Applying the pattern elsewhere

The tour was built with the same Next.js and Vercel tooling used for Vercel's public-facing products. The team points to the Next.js Conf landing page and the Ship Week experience as further examples of interactive, marketing-forward builds on the same stack. Users can start from one of Vercel's 200+ templates or deploy an existing repository directly. For teams that want to evaluate the product with a live conversation rather than a self-guided walkthrough, sales contact is available at any point during the tour.