Dust Morph Hero
A hero whose subject is a point cloud rather than a mesh: every shape is area-weighted surface sampled into the same set of points, so moving between shapes carries each point from its old surface to its new one, staggered and bowed outward so the form comes apart into dust halfway and reforms on arrival. The pointer pushes points aside in screen space and the label reveals per character on each change.
npx shadcn@latest add https://ui.aryank.space/r/dust-morph-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| shapes | { label: string; model?: string; yaw?: number }[] | Four labelled parametric shapes | Shapes cycled through in order. Two or more to have anything to morph between. Give a shape a model URL to use instead of the built-in geometry: the file is dispatched on its magic bytes, so a glTF binary is sampled into a cloud and a PCLD/PCL2/PCL4 point cloud is decoded directly. A model that fails to load falls back to its parametric slot. Host your own models, nothing is bundled. |
| count | number | 240000 | Points drawn on every shape. The single biggest cost lever; still one draw call at any value. Density is what makes a cloud read as a volume rather than as grain, so lower this for weaker hardware before lowering anything else. |
| dwell / morphDuration | number | 4.2 / 1.9 | Seconds a shape holds before advancing on its own, and seconds a morph takes end to end. Set dwell to 0 to advance only on input. |
| disperse / settleOffset / spike | number | 0.47 / 0.21 / 0.18 | How far points burst along their own normal mid morph, how far off the target they gather before settling onto it, and how much that distance varies per point. 0 disperse gives a straight interpolation with no dust. |
| fit | number | 0.82 | Share of the frame the subject fills. The camera is placed to satisfy this against whichever of width or height is tighter, so a portrait viewport pulls back instead of cropping. |
| wipe / stagger | "x+" | "x-" | "y+" | "y-" | "z+" | "z-" | "none" / number | "y-" / 0.25 | Axis the morph wipes along and how much of it is spent handing over from the first point to the last. Set wipe to none to stagger by seed instead, which dissolves rather than sweeps. |
| lighting | { direction; ambient; diffuse; wrap; rim; rimPower } | [0.35, 0.9, 0.45], 0.24, 1.12, 0.64, 0.36, 3.35 | Ambient, wrapped diffuse and rim terms evaluated per point. The light sits in view space so it does not turn with the cloud: the shading sweeps across the form as it rotates, which is what tells you the thing has volume. The wrap softens the terminator, because a hard shadow line across loose points reads as a seam. |
| pointSize / pixelRatio | number | 3 / 1.25 | Point size in device pixels, flat, and how many device pixels are drawn per CSS pixel (capped by the screen's own ratio). Both are density controls: raise the ratio for a crisper but thinner cloud, lower it and spend the budget on count instead. |
| orbit / orbitSensitivity | boolean / number | true / 1 | Drag to turn the subject. Sensitivity is turns per full drag across the viewport, so 1 means the subject follows the cursor one-to-one. Pitch is clamped short of vertical. |
| pointerStrength / pointerRadius | number | 1.3 / 0.46 | Strength scales every force in the cursor simulation at once (repulsion, curl and flow), and radius is the brush reach as a fraction of half the viewport height. The spring, damping and clamp constants that give the drag its weight are fixed. |
| color / background | string | "#7b7c74" / "#d4d5cd" | Ink of the cloud at full light, and the paper behind it. The lighting term multiplies the ink, so it needs headroom to darken into: a near-black ink shades to the same near black everywhere and the volume disappears. |
shapestextareaThe labels cycled through. Each entry gets its own parametric shape and its own per character reveal, or a model URL to sample instead.
count / pointSize / dispersesliderPoints drawn per shape, their drawn size, and how far they burst along their own normal mid morph.
fit / staggersliderShare of the frame the subject fills, and how much of the morph is spent handing over from the first point to the last.
color / backgroundcolorInk of the cloud and the paper behind it.
three