KQ-881 · IMAGE/BUBBLE

Image Bubble

A photo message that develops in the thread. The picture is drawn from its seed — three bands of sky, water and shore that stand from the first frame, with the sun, stars and rocks settling onto them as progress climbs — while the frame's blur clears and its saturation lifts on a slow tween, because blur and colour are tweens rather than physics. Pressing a sharp picture grows it into a viewer inside the component's own box on glide via a shared layoutId, with the frame's height measured by a ResizeObserver; Escape closes it and focus returns to the tile.

KQ-881 · IMAGE/BUBBLE

Dock four clear6:04

1 photos · all sharp

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/image-bubble

Props

photos: PhotoMessage[]; default —; The pictures in the thread, oldest first: id, from, seed, caption, progress and time.
peerName: string; default "Them"; The other person; every spoken sentence names them.
onOpen: (id: string) => void; default —; Fires when a picture opens in the viewer.
onClose: (id: string) => void; default —; Fires when the viewer closes, from the control or from Escape.
onSharp: (id: string) => void; default —; Fires once, the first time a picture's progress reaches 1.
label: string; default —; Names the thread list for assistive technology.
className: string; default —; Classes for the outer column.

Prop	Type	Default	Description
photos	PhotoMessage[]	—	The pictures in the thread, oldest first: id, from, seed, caption, progress and time.
peerName	string	"Them"	The other person; every spoken sentence names them.
onOpen	(id: string) => void	—	Fires when a picture opens in the viewer.
onClose	(id: string) => void	—	Fires when the viewer closes, from the control or from Escape.
onSharp	(id: string) => void	—	Fires once, the first time a picture's progress reaches 1.
label	string	—	Names the thread list for assistive technology.
className	string	—	Classes for the outer column.