Shape Wipe Set

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Shape

  shape · "bars" | "circles" | "diamonds" | "stripes"

  The pattern. bars: diagonal bars shooting across in a staggered cascade, the fastest and loudest. circles: a grid of dots swelling out of one corner. diamonds: a diamond lattice flipping over like tiles. stripes: thin diagonal lines that fatten until they close, the calmest.

  now: bars

• Direction

  direction · "right" | "left" | "down" | "up"

  Which way the wipe travels. right enters from the left edge; circles and diamonds lean into a corner as well, so right starts top left and left starts bottom right.

  now: right

• Peak

  peak · number

  Where the frame is fully covered, as a fraction of the clip. Line this up with your cut: at 0.5 it is frame 30 of the 60, the middle of the clip.

  now: 0.5

• Colors

  colors · array

  Up to three CSS colours, front first: the first is the one that fills the whole frame at the peak, the last is the outer band that leads the wipe in. Two colours give a two-band wipe. Leave empty for the brand's accent, second accent and ink.

  now: 0 items

• Stage

  stage · boolean

  Draw the two stand-in scenes (a studio product shot, then a sale poster) under the wipe so the preview shows it hiding a cut. Switch it off when you lay the wipe over your own video.

  now: true

• Ground

  ground · boolean

  Paint the plain brand background behind the wipe when the stand-in scenes are off. Leave it off for a transparent background, which is what you want over footage.

  now: false

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS. Sets the three wipe colours and regrades the stand-in scenes. Light brands keep the dark ink as a crisp outer edge.

  now: sky