A laptop lid swings open to reveal a live board, then a phone slides in with notifications and a progress chip pops up. Each device sits on its own depth layer and drifts with the pointer.
Desktop, web and mobile
Tandem keeps your board, standups and releases in sync across every device, even when the train goes underground.
npx shadcn@latest add https://hyperblur.dev/r/hero-devices.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-devices.tsx.
import { HeroDevices } from "@/components/hyperblur/hero-devices"
<HeroDevices title="Your roadmap, on every screen" accent="#10b981" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Desktop, web and mobile" | Line with device icons above the headline. Hidden when empty. |
| title | string | "Plan the sprint on one screen. Ship it from any other." | Headline. |
| subtitle | string | "Tandem keeps your board..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Get Tandem free", href: "#" } | Accent button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Download for iOS", href: "#" } | Outlined button with a download icon. null hides it. |
| accent | string | "#2f7bff" | Color of the floor glow, active nav, progress ring and primary button. |
| interactive | boolean | true | Moves the laptop, phone and chip at different depths with the pointer. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |