BarShift
Slices content into parallel bars, each offset independently for a fractured or glitch-like effect
Slices content into parallel bars, each offset independently for a fractured or glitch-like effect
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | range | 6 | Number of bars across the longest viewport dimension |
| angle | range | 0 | Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars) |
| intensity | range | 0.15 | Maximum displacement per bar |
| seed | range | 0 | Randomization seed for per-bar offset variation |
| speed | range | 0 | Animation speed - each bar drifts at its own rate and direction |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | mirror | How to handle edges when distortion pushes content out of bounds |
Usage
vue
<Shader>
<BarShift
:intensity="0.15"
>
<Circle />
</BarShift>
</Shader>