Cell Portrait
A portrait drawn as a grid of circles that join into capsules and thin bridges. The cells shrink from 36px to 7px while the joins reshuffle every 133ms, then the image colors in and the loop runs back out. Dark areas hold the most circles, so a face reads before any color arrives. Canvas 2D and GSAP, timed frame by frame against the reference recording.
npx shadcn@latest add @compronents/cell-portraitInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Hosted demo illustration | Portrait image, served with CORS. A transparent PNG gives the exact silhouette; an opaque image has its background keyed out. |
| alt | string | "Portrait drawn as joined circles" | Accessible label for the canvas. |
| background | string | "#2253E9" | Frame color, also used to fill each shape in the outline phase. |
| stroke | string | "#FFFFFF" | Outline and silhouette color. |
| cellFrom | number | 36 | Coarsest cell, in px on a 540px frame. |
| cellTo | number | 7 | Finest outline cell, in px on a 540px frame. |
| cellDetail | number | 5 | Cell size while the image is in color. |
| speed | number | 1 | Multiplier on the six-second loop. |
| className | string | — | Additional root class. The component fills its parent. |
| style | CSSProperties | — | Additional root styling. |
backgroundcolorFrame color.
strokecolorOutline color.
cellFromsliderCoarsest cell size.
cellTosliderFinest cell size.
speedsliderLoop speed.
gsap