Aller au contenu principal
Fonctionnement

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

Points de balayage

cartes animées design

Des cartes d'onboarding empilées en paquet sont balayées une à une par un bout de doigt tandis que les grands points de pagination dessous suivent chaque balayage (en s'étirant comme un ver, se remplissant ou grossissant), jusqu'à ce que « Commencer » soit touché sur la dernière.

Idéal pour : Onboarding d'appli, carrousels et visites de fonctionnalités.

Réglages

Police
Thème
Taille
Humeur

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

Points de balayage
16:9
Points de balayage
9:16
1:1
1:1

Ce que vous écrivez

  • pages Onboarding pages, swiped through in order· obligatoire
  • backdrop What it sits on: dark, light, pure chroma-key green (#00b140) to key over your footage, or your picture
  • pointer Who does the tapping: a fingertip touch, a mouse cursor, or nobody
  • cta Button on the last page (empty for none) (≤18)
  • dots The active dot stretches like a worm, the dots fill in as you go, or the active dot grows

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.pagesrushie.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": "Swipe dots",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "rushie": {
      "template": "swipe-dots",
      "props": {
        "backdrop": "dark",
        "image": "https://storage.googleapis.com/pagetovid-media/demo/pagetovid-demo-en-v2.jpg",
        "pointer": "finger",
        "pages": [
          {
            "title": "Plan your week",
            "text": "Drag tasks into the days that suit you."
          },
          {
            "title": "Share the load",
            "text": "Invite your team and split the list in a tap."
          },
          {
            "title": "Stay on track",
            "text": "Gentle nudges before anything is due."
          },
          {
            "title": "You're all set",
            "text": "Let's make this week count."
          }
        ],
        "cta": "Get started",
        "dots": "worm"
      }
    }
  }
}

Autres animations Fonctionnement