Bannerify can turn the layers and current timings from one banner into a structured prompt for ChatGPT, Claude, Gemini, or another AI assistant. Paste the returned JSON into Bannerify to validate and review the proposed entry, exit, and hover animations before applying anything.

Bannerify does not contact an AI service or change the timeline when you copy the prompt. You choose where to paste it, and the timeline is only updated after its JSON response passes validation and you click Apply AI Timeline.

Create an AI timeline

1. Load your banner frames or sections into Bannerify.
2. Click the Create AI Animation Timeline prompt icon in the header of the banner you want to animate.
3. Describe the direction you want. Include the intended mood, visual hierarchy, important layer order, or elements that should remain subtle.
4. Click Copy AI Prompt.
5. After Bannerify confirms that the prompt was copied, paste it into your preferred AI assistant and send it without removing the included timeline data or rules. The generated prompt is copied directly to your clipboard rather than displayed in the plugin.
6. Copy the JSON object from the AI response.
7. Return to Bannerify and paste the response into Paste and validate the JSON response. Bannerify automatically validates pasted JSON, or you can click Validate JSON.
8. If Bannerify reports an issue, click Copy JSON Fix Prompt, paste that prompt into the same AI conversation, then copy and validate its corrected JSON response.
9. Review every proposed change, including the previous and recommended animation and timing.
10. Click Apply AI Timeline to update only this banner. If you loaded more than one banner and their layer structure is consistent, click Apply to All Matching Banners instead.

The preview updates immediately and Bannerify saves the new animation settings to the Figma layers.

For more useful results, describe the viewing sequence instead of naming animation presets. For example: Introduce the headline first, bring the product in from the right, then reveal the CTA. Keep the motion restrained and add a subtle CTA hover. The copied prompt already supplies the supported Bannerify animation names.

Review and undo the result

The review panel opens in the right-hand column and shows only the tracks that will change. Its layer list scrolls independently so the review title and apply buttons remain available. Each changed track compares the current entry, exit, and hover settings with the validated recommendation for the affected layer.

Apply to All Matching Banners safely reuses the validated plan across the banners currently loaded in Bannerify. A banner only matches when every editable source layer has one unique layer with the same normalized name, layer type, and section scene position, and the banner uses the same source mode and timeline length. Bannerify validates the remapped plan against that banner's animation compatibility and timing windows before applying it. Ambiguous or incompatible banners are skipped, and the confirmation message reports how many banners matched or were skipped.

Applying an AI timeline creates one Bannerify history step, even when several layers or matching banners change. Use the Undo button or Command + Z on macOS / Ctrl + Z on Windows to restore the complete previous timeline. You can then redo the same AI plan or generate a fresh one. See Undoing and redoing timeline changes for all shortcuts and history behavior.

What Bannerify includes in the prompt

Each copied prompt contains the information the AI needs to create a valid plan:

• A temporary reference such as L1 for every editable timeline layer
• Layer names, types, stack order, and bounds
• The banner dimensions and timeline length
• Current entry, exit, and hover settings
• The allowed timing window for each layer or section scene
• Split Text and SVG Draw compatibility
• A catalog of supported Bannerify animation IDs, including saved custom animations that can be used for entry or exit tracks
• Your animation direction

Bannerify does not include raw Figma banner or layer IDs, exported image data, SVG markup, or other layer asset bytes. The copied prompt does include layer names and layout/timeline metadata, so review it before sharing designs that contain confidential naming or structure.

How the JSON is validated

Bannerify validates the complete response before changing any layer. It checks that:

• The response uses the current Bannerify timeline schema and matches the copied prompt
• Every supplied layer reference appears exactly once
• No unknown layer references or animation IDs were invented
• Split Text and SVG Draw animations are only used on compatible layers
• Entry and exit animations fit inside the layer's allowed timeline or scene window
• Entry and exit ranges do not overlap
• Durations are at least 0.1 seconds
• Timing values can be normalized to Bannerify's 0.1-second timeline increments

The original prompt asks the AI to self-check strict JSON before responding and explicitly excludes prose, URLs, comments, trailing commas, and JSON wrapped inside another string. If the response still fails validation, Copy JSON Fix Prompt creates a new prompt containing the exact errors, the rejected response, and the original sanitized timeline instructions so the AI can correct it without starting again.

If the timeline, layer settings, custom animation catalog, or scene timing changes after you copy a prompt, Bannerify rejects the old response. Click Copy Fresh Prompt and ask the AI again so its plan is based on the current timeline.

JSON response format

The copied prompt asks the AI to return a single JSON object in this format:

{
  "schemaVersion": "bannerify.timeline-plan.v1",
  "snapshotId": "ai-example-snapshot",
  "timelineSeconds": 5,
  "layers": [
    {
      "layerRef": "L1",
      "entry": {
        "animationId": "fade-in-bottom",
        "startSeconds": 0.2,
        "durationSeconds": 0.6,
        "loop": false
      },
      "exit": {
        "animationId": "fade-out",
        "startSeconds": 4.3,
        "durationSeconds": 0.5,
        "loop": false
      },
      "hover": null
    }
  ]
}

Each entry, exit, or hover value can be:

• An animation object to replace that track
• null to remove its animation
• "keep" to leave its current value unchanged

Do not edit the schemaVersion, snapshotId, timelineSeconds, layer references, or animation IDs. If an AI wraps the response in a single json code block, Bannerify can still read it.

Working with section scenes and special animations

For banners loaded from Figma sections, the prompt contains the current timing window for each scene. The AI can change layer timings inside that window, but it cannot move a layer into another scene. Adjust scene timing in Bannerify first, then copy a fresh prompt if you want the AI to use the new window.

Split Text animations are only available when the text layer is eligible. SVG Draw animations are only available for compatible SVG layers. Saved custom keyframe animations are included as entry and exit choices. Existing animations that are not in the supplied AI catalog can still be preserved by returning "keep" for that track.

Layers beginning with locked- are intentionally omitted. If a nested layer is missing, expand it into the Bannerify timeline, refresh the banner, and copy a fresh prompt.

Troubleshooting

The response is not valid JSON

Click Copy JSON Fix Prompt in the validation warning, paste it into the same AI conversation, and send it without editing the included errors or timeline instructions. Replace the rejected response in Bannerify with the corrected JSON, then click Validate JSON again.

The response says the timeline changed

The prompt is no longer based on the current banner state. Click Copy Fresh Prompt, replace the previous prompt in your AI assistant, and use its new JSON response.

An animation ID is not in the catalog

Ask the AI to use only the exact animationCatalog IDs supplied in the copied prompt. Do not substitute a display name or invent a new animation name.

A layer is missing or duplicated

The AI response must include every supplied layerRef exactly once, even when every track for that layer is set to "keep".

The entry and exit animations overlap

Ask the AI to finish the entry before the exit starts. Both ranges must also remain inside that layer's timeWindowSeconds.

The JSON is valid but shows no changes

The response preserved the current values or recommended the settings already on the timeline. Adjust your direction and copy a fresh prompt if you want a different result.

Always preview the complete banner before exporting. JSON validation confirms that the plan is structurally safe and compatible with the current timeline, but the creative result still needs a visual review.