components / hazard
hazard.
diagonal caution-stripe tape — a band that reads as a boundary rather than a border, plus a HazardFrame that tapes the edges of any block. hard-stop repeating gradients stay knife-sharp at any pitch, and the optional march animates by exactly one pitch so the loop is seamless.
site notice
work in progress. mind the scaffolding.
installation
bunx @justin06lee/chrome@latest add hazardprops
| name | type | default | description |
|---|---|---|---|
| thickness | number | 8 | band thickness in px. |
| pitch | number | 12 | stripe pitch in px — one stripe plus one gap. |
| angle | number | 45 | stripe angle in degrees. |
| color | string | 'rgba(255,255,255,0.22)' | |
| gapColor | string | 'transparent' | colour between the stripes. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Hazard only. |
| animate | boolean | false | march the stripes; frozen under reduced motion. |
| duration | number | 1.2 | seconds for one full stripe cycle. |
| edges | ('top' | 'right' | 'bottom' | 'left')[] | ['top', 'bottom'] | HazardFrame only — which sides get taped. |
| className | string | - |