Purpose
Reveal layer B underneath layer A by splitting layer A into horizontal strips and wiping each strip sequentially. Creates a "venetian blind" / "shutter" reveal effect — distinctive and high-impact when used once per spot.
Params
{
"strip_count": 8,
"strip_axis": "horizontal", // horizontal | vertical
"reveal_direction": "top-to-bottom", // top-to-bottom | bottom-to-top | random-seeded
"per_strip_stagger_frames": 3,
"per_strip_wipe_frames": 8,
"wipe_direction_per_strip": "left-to-right",
"wipe_easing": "bezier(0.4, 0, 0.2, 1)",
"seed": 17 // for random reveal_direction
}
Behaviour
- Split the canvas (or target zone) into N horizontal strips of equal height.
- Each strip has its own CSS
clip-pathormaskwhose progress animates from 0 → 1 overper_strip_wipe_frames. - Stagger strip start frames by
per_strip_stagger_frames. - As each strip's progress reaches 1, layer B (the underlying content) is fully revealed in that strip.
Implementation: a Remotion component that renders N child <div>s each with a clipped layer-A on top of layer-B.
Style pack overrides
- Custom packs (e.g. wellness editorial) — see A18 archetype.
- Other 7 default packs: not used.
Quality Checks
- Strip count between 6 and 12.
- Strip wipe direction consistent (all left-to-right) unless random-seeded.
- Reveal completes by
start_frame + (strip_count - 1) * per_strip_stagger_frames + per_strip_wipe_frames.
Failure Modes
- Reveal chunky. Strip count too low.
- Reveal jittery. Strip count too high; reduce to 8-10.
- Strips reveal simultaneously. Stagger is 0; bump to 3+.