How to Use Poko Animation Templates for SaaS Product Demos

A polished SaaS demo needs more than clean screenshots. It needs a motion system: where the camera moves, how the interface enters, when the viewer gets a pause, and how one scene hands attention to the next.

Poko Animation templates give the video agent a concrete motion reference. Instead of copying a template’s text, colors, or fake interface, the agent studies its timing, easing, camera movement, transitions, sequencing, and physical behavior. It then applies those principles to your product and your message.

That distinction matters. A conventional video template asks you to fit your product into fixed placeholders. Poko’s approach keeps your real product as the source and uses the selected animation as direction. You can choose a Featured motion study, reference one of your own animations, or combine a small set when each reference has a clear job.

The practical result is a faster way to communicate motion taste. Rather than writing a long prompt such as “use a fast camera push, decelerate into the dashboard, then transition through the CTA,” you can select a reference that already demonstrates that behavior and tell the agent what to adapt.

What Poko Animation templates actually control

A selected animation is not stock footage added on top of your demo. It is a reference the agent can inspect while building or editing the composition.

The useful information lives in the movement:

• Timing: how long the setup, reveal, hold, and exit receive
• Easing: whether an element glides, snaps, overshoots, or settles
• Camera language: push-ins, tracking moves, pans, depth shifts, and reframing
• Transitions: wipes, match cuts, masks, continuous backgrounds, and object-led cuts
• Sequencing: which element leads and which details follow
• Physical behavior: weight, inertia, spring response, drag, and collapse

The agent adapts those rules to the current product. It should not copy the reference’s words, branding, colors, or assets unless you explicitly request that treatment.

Use a template to answer “how should this move?”, while your product source answers “what should the viewer see?”

Choose a template based on the message

Start with the moment you need to communicate, not the animation that looks busiest.

For a before-and-after claim, use a mask-slider reference. The moving boundary makes the comparison legible without splitting the story into two disconnected shots.

For a dense analytics dashboard, choose an adaptive bento or reflow study. It gives charts and cards enough hierarchy while keeping the camera moving through the information.

For an AI prompt or command bar, an omnibox typing reference can move from input to intent to action. The camera tracks the typed request, then accelerates toward the send control.

For a workflow or automation, a path-camera or token-to-artifact reference can connect steps as one continuous journey instead of presenting a row of static screenshots.

For a dramatic feature reveal, a depth tunnel, fluid gradient, or text-mask study can establish scale before the product UI becomes the focal point.

Pick the reference whose motion explains the feature. Visual intensity without narrative purpose usually makes a demo harder to follow.

How to use Animations inside Poko Studio

The new library has two sources:

• Featured: motion studies curated by Poko
• My Animations: animation projects you created in Poko

Open your video in Studio, then follow this workflow:

1. Click Animations in the Studio settings group.
2. Switch between Featured and My Animations.
3. Preview the available motion studies.
4. Click a card to select it. A visible selected state appears on the card, and the reference is added to the chat composer.
5. Click the same card again if you want to remove it.
6. Write a prompt that identifies the product moment and the behavior you want adapted.
7. Send the message. Poko prepares the selected source and passes it to the video agent as a motion reference.

A useful prompt is direct: “Use the selected reference for the dashboard reveal. Keep our colors and UI, but adapt its camera acceleration, card sequencing, and transition into the CTA.”

Selection gives the agent an example; your prompt tells it where that example belongs.

Combine references without creating visual noise

Poko supports multiple selections, but more references do not automatically produce a better result. Each one should own a different part of the motion system.

A practical combination might be:

• one reference for the opening camera move
• one reference for UI card choreography
• one reference for the final transition or CTA impact

Avoid selecting several references that solve the same moment in conflicting ways. A spring-heavy card stack, a slow editorial reveal, and a high-speed tunnel can all work—but asking all three to control the same dashboard entrance gives the agent an unclear target.

Name the role of each reference in your message. For example: “Use the path-camera reference for scenes one and two. Use the mask-slider only for the comparison in scene three.”

Treat every selected animation as a direction with an assigned scene, not as decoration for the whole video.

Write prompts that preserve your product

The strongest prompt separates product fidelity from motion direction.

Include four things:

1. The source of truth: your real UI, screenshots, repo, or website
2. The product moment: onboarding, analytics, automation, generation, export, or CTA
3. The borrowed behavior: camera move, easing, transition, sequencing, or physical response
4. The boundary: what the agent must not copy from the reference

Here is a reusable structure:

Keep our real product UI, typography, colors, and copy. Use the selected animation only as a motion reference. Adapt its [camera/easing/transition] to [specific scene or feature]. End by moving attention to [CTA or next scene].

For an analytics product, that could become:

Keep our dashboard unchanged. Adapt the selected bento reference’s reflow and camera tracking as the metrics appear. Slow down when the revenue chart becomes readable, then accelerate into the export button.

This format protects product accuracy while giving the agent enough motion direction to make a deliberate edit.

Build a demo around one visual argument

Animation cannot rescue a demo that tries to explain every feature. Decide what the viewer should understand by the end, then choose motion that reinforces that point.

A focused structure for a SaaS product demo is:

1. Show the problem in one visual beat.
2. Introduce the product action that changes the situation.
3. Move through the proof: the generated result, dashboard change, or completed workflow.
4. Hold long enough for the result to register.
5. Transition into one next action.

The animation reference should strengthen this progression. A path move can connect the workflow. A mask can prove the change. A camera push can mark the moment of value. A physical settle can give the result weight.

Choose the story first, then use the animation template to make that story easier to feel and remember.

Start with one feature and one reference

Open a product video in Studio and choose the feature with the clearest visual change. Select one animation whose movement fits that change. Then ask Poko to adapt a named behavior while preserving your product UI.

Once the first pass works, add a second reference only if another scene needs a genuinely different motion idea. That sequence keeps your demo coherent and makes each iteration easy to judge.