Halftone Wave Hero
A hero built around a travelling waveform of halftone dot columns: a sine envelope stretches each column until the palette reads at full saturation, then collapses it so the multiply blend drives the whole stack to black at the node. The pointer parts the wave and swells the dots, and an opening sweep unpacks it left to right.
npx shadcn@latest add https://ui.aryank.space/r/halftone-wave-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 |
|---|---|---|---|
| palette | string[] | Cyan, blue, pink, red, amber, green | Colors cycled down each column, one per row, in the order they run top to bottom. Length need not match rows. |
| rows | number | 11 | Dots per column. Just under two palette cycles, so no color sits directly above itself. |
| columnGap / dotRadius | number | 34.8 / 16.3 | Column spacing and dot radius in px, authored against a 1440px viewport and scaled from there. Keep the radius under half the gap or the columns fuse. |
| amplitude | number | 0.9 | Ceiling on column height as a share of half the canvas, 0 to 1. Only bites on a short canvas; the row pitch sets the height otherwise. |
| floor | number | 0.006 | Column height at a node as a share of the widest column. At this value the stack collapses to a single dot. |
| swell | number | 0 | Optional lean, off by default: how much wider the right side runs than the left, 0 to 1. The asymmetry already comes from where the node sits. |
| introDuration | number | 1.7 | Seconds for the opening sweep, which unpacks the wave left to right out of its collapsed state. 0 starts at the resting wave. |
| hoverStrength | number | 0.75 | How far the pointer parts the wave toward full spread, 0 to 1. 0 disables hover entirely. |
| hoverGrowth | number | 0.34 | How much the dots swell under the pointer, as a share of their radius. |
| hoverRadius | number | 190 | Reach of the pointer's influence in px, at a 1440px viewport. |
| speed | number | 1 | Envelope travel speed. 0 freezes the wave in place. |
palettecolorThe color cycled down each column. Colors that multiply toward black give the strongest node contrast.
amplitude / floor / swellsliderWidest column height, how far a node collapses, and how much louder the right side runs than the left.
headline / standfirst / actionstextareaThe copy block and its two call to action pills.
None.