KQ-439 · TEAR/STRIP

Tear Strip

A transition between panels: a strip tears across the old panel along a perforated line, the torn edge ragged and slightly lifted with a shadow, and the new panel is under it. Tear direction and the perforation's row are yours.

KQ-439 · TEAR/STRIP

Waylight · first light

The morning board clears before the tide turns.

Overnight arrivals log in as the light comes up. Whatever clears the morning board holds its berth through midday.

  • Harbour approachclear
  • Fog banklifting
  • Pilot boatstanding by

torn open

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/tear-strip

Props

PropTypeDefaultDescription
index / childrennumber · ReactNode[]Which panel shows; the children are the panels.
duration / row / roughnumberThe tear's length in seconds, where the perforation sits as a fraction of the height, and edge roughness.