Motion

Ken Burns effect with keyframes

A Ken Burns push on a still photo. The box scales from 1 to 1.15 across the clip, eased in and out, so a photograph becomes a shot.

Shown on A photo of a laptop on a desk

Before · the same request without it
After · rendered from the request below

The entry

Put it on the clip, in place of the plain value the field would otherwise take.

{
  "transform": {
    "scale": [
      {
        "time": "0%",
        "value": 1,
        "easing": "easeInOutSine"
      },
      {
        "time": "100%",
        "value": 1.15
      }
    ]
  }
}

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

job.ts
import { createClient, outputUrl } from "@rendobar/sdk";


const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });


const job = await rb.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 960,
        height: 540
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "image",
                src: "https://cdn.rendobar.com/compose/showcase/media/laptop.jpg"
              },
              start: 0,
              length: 5,
              transform: {
                scale: [
                  {
                    time: "0%",
                    value: 1,
                    easing: "easeInOutSine"
                  },
                  {
                    time: "100%",
                    value: 1.15
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  },
});


console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

terminal
curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":960,"height":540}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/showcase/media/laptop.jpg"},"start":0,"length":5,"transform":{"scale":[{"time":"0%","value":1,"easing":"easeInOutSine"},{"time":"100%","value":1.15}]}}]}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

Questions

What does the keyframes effect do in compose?

A Ken Burns push on a still photo. The box scales from 1 to 1.15 across the clip, eased in and out, so a photograph becomes a shot.

How do I add keyframes to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"transform":{"scale":[{"time":"0%","value":1,"easing":"easeInOutSine"},{"time":"100%","value":1.15}]}}. Put it on the clip, in place of the plain value the field would otherwise take. The request on this page is complete and renders as shown.

Footage and sound

More in the reference

Speed Play the source faster or slower. 2 is double speed, and the clip lasts half as long. Color A warm cinematic grade: the light pulled towards gold, contrast and color lifted a little, skin left believable. LUT A film grade from a LUT file: shadows toward teal, skin and highlights toward orange, the look a colourist hands over as a .cube. Looks The whole archive look in one word: sepia, grain, dust, scratches, projector flicker and a vignette together. Blur Knock the footage back so a title over it stays readable. Sharpen Crisp up footage that is slightly out of focus. Look at the rocks and the life jackets.

See all 77 in the effects reference →