OverlayMotion
PROFounder Support
Free template · Text

Quote Card

Testimonial with weight: oversized quote mark (swappable for your own SVG) and four text entrances via animateIn: wrapped lines, words dropping into place, character typewriter, or blurred words settling into focus. Spec time.appear sets how fast the whole card lands, time.hold how long it stays; a pull-out camera widens as the card enters.

Design
Aspect ratio
See technical details
Spec knobs

What the spec changes without touching props

These live on the overlay, not in this template. They are renderer-provided, so they behave the same here as on every other template.

region

Where it sits. One of the 12 named boxes, or your own { "x": 62, "y": 12, "w": 34, "h": 42 } in percent of the frame. This template is designed around center, which is what it uses when the spec says nothing.

fullscreentop-bannerlower-thirdupper-thirdcaption-zoneleft-panelright-panelcentercorner-tlcorner-trcorner-blcorner-br
scale

Uniform size inside the resolved region, 0.25 to 2. Props that size the artwork stay relative to the region box, so scale is how an overlay grows past it.

time

When it lives: start, duration, or the appear + hold pair (entrance length plus how long the finished overlay stays). Seconds (3s), percentages (66%) and negative seconds from the end (-2s) are all valid.

motion

Object motion, applied to the element itself so nothing is cropped or zoomed. This template ships { "style": "sway-3d" }; the spec replaces it, retunes it with amount (0..1) and its own time window, stacks several by passing an array, or stops it with { "style": "none" }. The oscillating styles also take frequency, seed, rampSec and rampOutSec; the one-shot skew-* sweeps take their tempo from time instead.

shakewobblefloatsway-3dskew-rightskew-leftskew-upskew-downnone
enter

Renderer-owned entrance, 0.6s, identical on every template. It stacks with whatever entrance the template already runs, so set the template's own entrance prop to none when you drive it from here.

slide-leftslide-rightspringmask
exit

How it leaves: blur-out melts it away, fade-down drifts down, shrink scales to center (0.9s each), vanish pops it out of existence in 0.45s. Set one and the template's own fade steps aside.

blur-outfade-downshrinkvanish
camera

Moves the region's VIEWPORT rather than the element: push-in, pull-out, the pan-* family, handheld. Its own transform layer, so it stacks with motion, enter, exit and scale.

sound

Per-overlay override of the spec's sound block: enabled, volume, and a sounds map that remaps one cue by name ({ "pop": "ding" }, a path to your own file, or false to mute just that cue). The map is keyed by CUE, so remapping pop also changes an exit: "vanish", which fires pop too. To change only this template's own sound, use its sfx prop instead. Core palette: click, pop, whoosh, ding, typewriter.

All 45 premade cues
popbubbletickdingwhooshkeyboard-typing-naturalmouse-click-pressmouse-click-releasetypewriter-scissor-metallic-lowtypewriter-scissor-metallic-basstypewriter-scissor-metallic-subtypewriter-scissor-metallictypewriter-scissor-lowtypewriter-scissor-deeptypewriter-laptoptypewriter-chiclettypewriter-scissortypewritertypewriter-softtypewriter-mechanicaltypewriter-digitaltypewriter-heavytypewriter-thocktypewriter-steeltypewriter-slamtypewriter-buttontypewriter-switchtypewriter-keycapclickclick-crispclick-roundclick-glasstogglesuccesserrornotificationsparkleswoopriserimpactglitchshutterswipedropdisplay
JSON spec

Copy and customize

This exact spec drives the preview. Replace media paths and props with your own.

{
  "theme": "<your-brand-tokens>",
  "version": 1,
  "format": "square",
  "fps": 60,
  "durationSec": 8,
  "source": {
    "type": "none"
  },
  "sound": {
    "enabled": true,
    "volume": 1,
    "sounds": {}
  },
  "overlays": [
    {
      "template": "quote-card",
      "region": "center",
      "time": {
        "appear": 2,
        "hold": 6
      },
      "camera": {
        "preset": "pull-out",
        "amount": 0.06,
        "rest": 0,
        "frequency": 2.4,
        "seed": 0,
        "time": {
          "start": 0,
          "duration": 4
        },
        "easing": "ease-in-out"
      },
      "motion": {
        "style": "sway-3d",
        "amount": 0.3,
        "frequency": 0.09,
        "seed": 1,
        "rampSec": 0.25,
        "rampOutSec": 0.4
      },
      "reveal": "typewriter",
      "props": {
        "quote": "We stopped briefing designers for launch clips. The templates already know our brand.",
        "author": "Ricardo Metring",
        "role": "Developer of OverlayMotion",
        "avatar": "/demo/avatar.png",
        "animateIn": "words"
      }
    }
  ]
}