KQ-1700 · TEASER/LENS

Teaser Lens

A premium report drawn from the account's own numbers and softly blurred, with a glass lens that reads one region clearly, a little enlarged. The lens follows the finger 1:1 and has weight: it lifts on springs.flick, its rim tilts toward its travel and its highlight slides the other way, and when let go it coasts by projection, settles on springs.glide with the release velocity and sets down on springs.recoil, while an upgrade card trails beside it on a glide spring naming what that region would tell you. The lens is a button: arrows move it, Page keys and Home/End jump between regions, Enter upgrades and Escape puts it away; with no data the report draws a labelled sample, and in a narrow container the lens becomes a full-width band.

KQ-1700 · TEASER/LENS

Delivery reportPro

Fieldline · September 2026

pro report · drag the lens over an area

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/teaser-lens

Props

summary: TeaserSummary | null; default defaultTeaserSummary; The account's numbers: { workspace, period, members, activeMembers, tasksDone, cycleDays, onTime, weekly, cohorts, stages }; null draws defaultTeaserSample, labelled as a sample.
regions: TeaserRegion[]; default defaultTeaserRegions; What each area would tell you, by id (pulse, trend, cohorts, stages): { id, title, teaser }.
value / defaultValue: { x: number; y: number }; default — / { x: 0.74, y: 0.52 }; The lens centre as fractions of the report, controlled or initial; a host change glides the lens there.
onValueChange: (value: { x: number; y: number }) => void; default —; Fires when the lens comes to rest after a drag, a key or a tap.
onRegionChange: (region: TeaserRegion) => void; default —; The lens came to rest over a different region.
onUpgrade: (region: TeaserRegion) => void; default —; Enter on the lens, or the card's call to action, with the region under the lens.
onDismiss: () => void; default —; The card's close button, or Escape on the lens.
dismissed / defaultDismissed: boolean; default — / false; Whether the lens and its card are put away, controlled or initial.
onDismissedChange: (dismissed: boolean) => void; default —; Fires from the close (true) or the pill that brings the lens back (false).
lensSize: number; default 136; The disc's diameter in px; the band's height (up to 200) in a narrow container.
blurAmount: number; default 6; How soft the rest of the report is, in px of blur.
accent: "cobalt" | "signal" | "amber" | "graphite" | string; default "cobalt"; The rim, the plan chip, the report's lead series and heatmap: a named accent or any CSS colour.
magnify: number; default 1.06; How much the glass enlarges what is under it (1 to 1.4); the band never enlarges.
weight: number; default 0.5; How heavy the glass is, 0 to 1: a heavy lens coasts less after a throw and tilts more while dragged.
planName: string; default "Pro"; The plan the report belongs to, in the chips and the call to action.
title: string; default "Delivery report"; The report's heading.
status: "ready" | "loading" | "error"; default "ready"; Whether the numbers have arrived: a blurred skeleton while loading, a retry on error.
onRetry: () => void; default —; Try again was pressed after the report failed to load.
disabled: boolean; default false; Holds the lens and every action.
className: string; default —; Classes for the surface; give it a height and the report scrolls inside it.

Prop	Type	Default	Description
summary	TeaserSummary \| null	defaultTeaserSummary	The account's numbers: { workspace, period, members, activeMembers, tasksDone, cycleDays, onTime, weekly, cohorts, stages }; null draws defaultTeaserSample, labelled as a sample.
regions	TeaserRegion[]	defaultTeaserRegions	What each area would tell you, by id (pulse, trend, cohorts, stages): { id, title, teaser }.
value / defaultValue	{ x: number; y: number }	— / { x: 0.74, y: 0.52 }	The lens centre as fractions of the report, controlled or initial; a host change glides the lens there.
onValueChange	(value: { x: number; y: number }) => void	—	Fires when the lens comes to rest after a drag, a key or a tap.
onRegionChange	(region: TeaserRegion) => void	—	The lens came to rest over a different region.
onUpgrade	(region: TeaserRegion) => void	—	Enter on the lens, or the card's call to action, with the region under the lens.
onDismiss	() => void	—	The card's close button, or Escape on the lens.
dismissed / defaultDismissed	boolean	— / false	Whether the lens and its card are put away, controlled or initial.
onDismissedChange	(dismissed: boolean) => void	—	Fires from the close (true) or the pill that brings the lens back (false).
lensSize	number	136	The disc's diameter in px; the band's height (up to 200) in a narrow container.
blurAmount	number	6	How soft the rest of the report is, in px of blur.
accent	"cobalt" \| "signal" \| "amber" \| "graphite" \| string	"cobalt"	The rim, the plan chip, the report's lead series and heatmap: a named accent or any CSS colour.
magnify	number	1.06	How much the glass enlarges what is under it (1 to 1.4); the band never enlarges.
weight	number	0.5	How heavy the glass is, 0 to 1: a heavy lens coasts less after a throw and tilts more while dragged.
planName	string	"Pro"	The plan the report belongs to, in the chips and the call to action.
title	string	"Delivery report"	The report's heading.
status	"ready" \| "loading" \| "error"	"ready"	Whether the numbers have arrived: a blurred skeleton while loading, a retry on error.
onRetry	() => void	—	Try again was pressed after the report failed to load.
disabled	boolean	false	Holds the lens and every action.
className	string	—	Classes for the surface; give it a height and the report scrolls inside it.