Zum Hauptinhalt springen
So funktioniert's

Live-Ausgabe der echten Render-Engine — ändere die Einstellungen und sie aktualisiert sich sofort.

Nummerierte Schritt-Badges

gestaltete motion-karten

Nummerierte Badges erscheinen auf Ihrem Screenshot, verbunden durch einen Pfad.

Ideal für: Ein Tutorial auf einem einzigen Bildschirm.

Einstellungen

Schrift
Theme
Größe
Stimmung

Formate, die die Bildprüfung bestanden haben

Nummerierte Schritt-Badges
16:9
Nummerierte Schritt-Badges
9:16
1:1
1:1

Was du schreibst

  • title Headline over the shot, or empty to hide (≤56)· Pflicht
  • items Two to five steps, each with a caption and where its badge sits· Pflicht
  • 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

Bilder (image) kommen aus dem Bild der Szene, sonst aus einem Verlauf in deinen Farben.

Eine Code-Vorlage: in jedem Tarif kostenlos, ohne KI-Credits.

In einem Film verwenden

Was du ändern kannst:rushie.props.titlerushie.props.itemsrushie.props (others)
Für Entwickler (MCP und JSON)

Das ist genau die Szene für create_animation (MCP): Struktur behalten, Worte ändern und den Sprechertext schreiben — die Stimme bestimmt, wie lange die Szene dauert. Mit set_data in update_storyboard einfügen, um einen fertigen Film zu ändern.

{
  "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"
      }
    }
  }
}

Weitere So funktioniert's-Animationen