Dynamic Images

Frames allows you to return dynamic images from your initial frame. This is useful for showing dynamic content each time the frame is rendered.

frames/route.tsx

// ...
const handleRequest = frames(async (ctx) => {
  return {
    image: (
      <div tw="bg-purple-800 text-white w-full h-full justify-center items-center flex text-[48px]">
        The current time is {new Date().toLocaleString()}
      </div>
    ),
    imageOptions: {
      dynamic: true,
    },
    // ...
  };
});

By default the dynamic image uses Cache-Control: public, immutable, no-transform, max-age=60. In order to change the default Cache-Control just provide your own.

frames/route.tsx

// ...
const handleRequest = frames(async (ctx) => {
  return {
    image: (
      <div tw="bg-purple-800 text-white w-full h-full justify-center items-center flex text-[48px]">
        The current time is {new Date().toLocaleString()}
      </div>
    ),
    imageOptions: {
      dynamic: true,
      headers: {
        'Cache-Control`: 'max-age=10',
      }
    },
    // ...
  };
});

See an example of how to use the dynamic images header in the Dynamic Image example.