# How to animate a poster without losing its identity

Turn a static poster into editable motion graphics with readable type, purposeful transitions and a vertical version. Includes prompts and a complete source project.

Author: John Holliman

Canonical: https://voyager.so/blog/animate-a-poster

Published: 2026-10-07T19:12:38-07:00
Updated: 2026-10-07

Animate a poster without losing its type, spacing or identity. Motion adds a reading order: notice the name, feel the mood, remember the date.

We made **AFTERIMAGE**, a fictional listening night, to show the process. Its static poster uses oversized type, paper-colored space and a lime orbital pattern. The 16-second film lets that pattern flex while the words briefly take over, then returns to the event details. It works with the sound off.

![AFTERIMAGE motion poster with a flexing lime orbital pattern, masked typography and a readable event closing frame](https://cdn.moda.app/voyager/blog/animate-a-poster/poster-v2-d45e2dcab41acefe.webp)

[Video: AFTERIMAGE motion poster with a flexing lime orbital pattern, masked typography and a readable event closing frame](https://cdn.moda.app/voyager/blog/animate-a-poster/afterimage-v4-07a34c92725dc8b8.mp4)

One identity, three beats: establish the name, move through the message, return to the event details. The 16-second film is intentionally silent.

The AFTERIMAGE poster comes alive as concentric lines flex. The title clears and SOUND, LEAVES, A TRACE move through a dark band. The original poster returns with Friday 23 October, 20:00 to late, The Signal Room.

## Start with the poster's hierarchy

Before animating, decide what must remain recognizable. Here, it is the two-line AFTER / IMAGE title, the ink-and-lime palette and the concentric shape. The supporting information can wait for the closing beat.

Use an editable source when you have one. Text should remain text; the central graphic should be separate from the background. A flattened JPEG can serve as a reference, but moving its letters independently requires reconstructing them. Check that reconstruction against the original before adding motion.

Our example is built from text and SVG shapes in a small Remotion project. The download includes the fonts and source, so changing the date does not require repainting an image.

![Original AFTERIMAGE poster: large dark lettering, a lime orbital graphic and event information on warm paper](https://cdn.moda.app/voyager/blog/animate-a-poster/poster-v2-d45e2dcab41acefe.webp)

The input: a fictional event poster with a clear title, graphic motif and supporting information.

This reusable prompt turns the design into a motion brief:

```text
Turn this poster into a 16-second motion graphic.

Preserve the title, exact event information, palette and typefaces. Keep the original poster intact. Build the animation in a separate editable composition.

Give each element a job:
- The event name establishes the identity immediately.
- The concentric graphic supplies the movement and mood.
- A short typographic passage reads SOUND / LEAVES / A TRACE.
- The final composition returns to the poster and holds the event details for at least three seconds.

Use purposeful masks and smooth changes of shape. Avoid bouncing every line, generic particle effects, full-frame flashes or a camera zoom over a flat image. Make it work muted. Render an MP4 and retain the editable source.
```

The useful constraint is **one main source of movement**. If the title, ornament, date and background all compete, the poster loses its hierarchy.

## Turn space into time

The static poster gives readers everything at once. The animated version can control when each part matters.

Our opening is already recognizable. The orbital lines move gently while the name stays in place. Around four seconds, the title clears upward and the graphic makes room for a short message. Each phrase arrives through the same masked band. The closing movement brings the original layout back, with the venue and date stationary long enough to read.

| Beat    | Viewer should notice                | What moves                       |
| ------- | ----------------------------------- | -------------------------------- |
| Opening | AFTERIMAGE and the orbital identity | The line field flexes            |
| Middle  | SOUND / LEAVES / A TRACE            | Type moves through a mask        |
| Closing | Date, time and venue                | The layout settles; details hold |

These choices make the movement specific to the design. A listening night can borrow the feeling of a vibrating record or a signal. A film screening might use a shutter; a print exhibition might use registration marks. Pick the motif from the poster before reaching for an animation preset.

Under the hood, the lines and text positions are calculated from the frame number. This makes the same frame reproducible during previews and exports. Remotion specifically recommends [driving animation with `useCurrentFrame`](https://www.remotion.dev/docs/animating-properties), rather than browser-time CSS transitions that can render inconsistently.

## Make a vertical version in Voyager

Open the source folder as a Voyager project, rather than handing the agent only the finished MP4. The type, shapes and timing remain available to edit. Ask for a second composition so the approved original stays intact.

We made a 1080 × 1920 version and rendered it through Voyager's Remotion tools. The headline moves lower, the motif gets more breathing room and the event details sit inside the central reading area. The motion timing stays the same. This is a new layout, not a crop.

![Vertical AFTERIMAGE motion poster with the headline, orbital pattern and event details rearranged for a taller frame](https://cdn.moda.app/voyager/blog/animate-a-poster/story-poster-v2-324e79ca719c17fa.webp)

[Video: Vertical AFTERIMAGE motion poster with the headline, orbital pattern and event details rearranged for a taller frame](https://cdn.moda.app/voyager/blog/animate-a-poster/afterimage-story-v2-6a44cfce7cfda571.mp4)

The 9:16 version preserves the identity and timing while changing the layout. The closing date and venue remain readable.

The vertical version shows the same AFTERIMAGE identity, a moving orbital pattern, SOUND LEAVES A TRACE, and a closing frame with the date, time and venue.

```text
Make a separate 1080 × 1920 story version of this motion poster. Preserve the original composition and its 16-second timing.

Recompose for the taller frame; do not crop the existing video. Keep the headline, orbital graphic and event details. Keep essential text inside x=90–990 and y=180–1630. Split long supporting lines where that improves readability. Hold the final event information for at least three seconds.

Render the new MP4 and present both versions so I can compare them. Keep the source editable.
```

Those margins are our working layout constraint, not a universal guarantee against every social app's interface. Check the final export in its intended placement.

## Review at the size people will see

Watch the film once without stopping. Can you recall the name and date? Then pause on the busiest frames and inspect the actual export on a phone.

Check three things closely:

* **Letterforms:** no warped type, hidden characters or accidental overlaps.
* **Timing:** each phrase gets time to read, especially the closing information.
* **Motion:** fine lines do not shimmer distractingly, and a transition does not introduce a stray flash or clipped edge.

An attractive frame is not enough. The sequence has to remain legible between those frames, and a vertical version needs its own review.

[Download the poster, finished films and editable source](https://cdn.moda.app/voyager/blog/animate-a-poster/afterimage-kit-6e445415dd27eddd.zip). The package includes local fonts, the original project and a standalone HTML preview. Extract it before opening the preview. For photographic motion instead of animated typography, see [how to make a product photo loop](/blog/product-photo-loop).

Use this approach for event announcements, exhibition promotions, release artwork or a campaign that already has a strong static identity. If viewers remember the animation but miss the date, simplify the animation. The identity should get noticed and the information should survive.


## Make your next project in Voyager

Create an account, download Voyager, and start making.

[Sign up](/sign-up)