Aller au contenu principal
Fonctionnement

Sortie en direct du vrai moteur de rendu — modifiez les réglages et elle se met à jour instantanément.

Pastilles d'étapes numérotées

cartes animées design

Des pastilles numérotées apparaissent sur votre capture, reliées par un tracé.

Idéal pour : Un tutoriel sur un seul écran.

Réglages

Police
Thème
Taille
Humeur

Formats validés par le contrôle d'image

Pastilles d'étapes numérotées
16:9
Pastilles d'étapes numérotées
9:16
1:1
1:1

Ce que vous écrivez

  • title Headline over the shot, or empty to hide (≤56)· obligatoire
  • items Two to five steps, each with a caption and where its badge sits· obligatoire
  • badge Round badges, map pins or rounded squares
  • path A marching dashed line joining the steps, or none
  • layout A framed card over its own blurred backdrop, or the picture filling the whole frame

Les images (image) viennent de l'image de la scène, sinon d'un dégradé à vos couleurs.

Un modèle en code : gratuit sur toutes les offres, sans crédits IA.

L'utiliser dans un film

Ce que vous pouvez changer :rushie.props.titlerushie.props.itemsrushie.props (others)
Pour les développeurs (MCP et JSON)

Voici la scène exacte à envoyer à create_animation (MCP) : gardez la structure, changez les mots et écrivez la narration — c'est la voix qui fixe la durée de la scène. Collez-la dans update_storyboard avec set_data pour modifier un film déjà fait.

{
  "visual": "rushie",
  "heading": "Step badges",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "rushie": {
      "template": "step-badges",
      "props": {
        "image": "https://storage.googleapis.com/pagetovid-media/demo/pagetovid-demo-en-v2.jpg",
        "title": "Three clicks to a film",
        "items": [
          {
            "label": "Paste a link",
            "x": 0.3,
            "y": 0.35
          },
          {
            "label": "Pick a format",
            "x": 0.6,
            "y": 0.5
          },
          {
            "label": "Render",
            "x": 0.45,
            "y": 0.7
          }
        ],
        "badge": "circle",
        "path": "dashed",
        "layout": "framed"
      }
    }
  }
}

Autres animations Fonctionnement