SMPTE Wipe
Geometric broadcast transitions — bars, barn doors, box, iris, diagonal and blinds.
Named after the SMPTE 259M wipe codes used by vision mixers. Wrap anything to reveal it (mode="in")
or hide it (mode="out"). To replay, change the component's key.
Usage
import { SmpteWipe } from '@vinyl-ui/effects';
<SmpteWipe key={slide} pattern="iris" duration={600} onEnd={() => setReady(true)}>
<Slide />
</SmpteWipe>Or the utilities: animate-wipe-box, plus wipe-out to reverse, and [--wipe-duration:400ms].
They combine with state variants, for example data-[state=open]:animate-wipe-box.
Patterns
pattern | SMPTE | Reveal |
|---|---|---|
bar-left | 1 | Vertical edge sweeping left → right |
bar-right | – | Right → left |
bar-top | 2 | Horizontal edge sweeping top → bottom |
bar-bottom | – | Bottom → top |
barn-door-v | 21 | Opens from the vertical centre line |
barn-door-h | 22 | Opens from the horizontal centre line |
box | – | Rectangle growing from the centre |
iris | – | Circle growing from the centre |
diagonal | – | Triangle growing from the top-left corner |
blinds | – | Venetian blinds: 8 slats open together ([--blinds:12] to change the count on web) |
Props
Prop
Type
WIPE_PATTERNS lists every pattern. wipePath(pattern, progress, width, height) (native entry) returns the
SVG path if you want to drive a wipe yourself.