A continue on your phone card with a QR pattern built from the link, a scan line sweeping over it and a countdown that refreshes the code. A text me a link form and a phone preview of the session sit alongside.
Your open document, scroll position and unsaved comments travel with you. No sign in, no typing.
We only use your number to send this link.
npx shadcn@latest add https://hyperblur.dev/r/download-qr-handoff.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/download-qr-handoff.tsx.
import { DownloadQrHandoff } from "@/components/hyperblur/download-qr-handoff"
<DownloadQrHandoff url="https://example.com/h/abc" onSend={(n) => sendSms(n)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Slate for mobile" | Label above the title. |
| title | string | "Continue on your phone in one scan" | Section heading. |
| subtitle | string | What travels to the phone | Paragraph under the heading. |
| url | string | "https://slate.so/h/7KQ2-M9XW" | Link the code stands for. The pattern is derived from it, so it stays the same on server and client. It is decorative: use a real QR library if it must scan. |
| steps | string[] | Three steps | Numbered instructions. |
| refreshSeconds | number | 60 | Seconds before the pattern refreshes. Zero hides the countdown. |
| session | { title: string; detail: string } | { title: "Q3 board deck", detail: "Slide 14 of 32, 3 comments" } | What the phone preview shows as ready to continue. |
| onSend | (phone: string) => void | Called with the number when the text me a link form is submitted. | |
| storeLinks | { label: string; href: string }[] | iPhone, Android | Small app links under the form. Pass an empty array to hide them. |
| accent | string | "#8b5cf6" | Color of the scan line, corner brackets, logo tile and glow. |