Ir al contenido principal
Cómo funciona

Salida en vivo del motor de render real — edita los ajustes y se actualiza al instante.

Puntos de deslizamiento

tarjetas animadas de diseño

Tarjetas de incorporación apiladas como una baraja son deslizadas una tras otra por una yema mientras los grandes puntos de página inferiores siguen cada deslizamiento (estirándose como un gusano, rellenándose o creciendo), hasta tocar «Empezar» en la última.

Ideal para: Incorporación a apps, carruseles y recorridos de funciones.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Formatos que pasaron el control de imagen

Puntos de deslizamiento
16:9
Puntos de deslizamiento
9:16
1:1
1:1

Lo que escribes

  • pages Onboarding pages, swiped through in order· obligatorio
  • 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

Las imágenes (image) salen de la imagen de la escena o, si no hay, de un degradado con tus colores.

Una plantilla en código: gratis en todos los planes, sin créditos de IA.

Úsala en un vídeo

Lo que puedes cambiar:rushie.props.pagesrushie.props (others)
Para desarrolladores (MCP y JSON)

Esta es la escena exacta para enviar a create_animation (MCP): mantén la estructura, cambia las palabras y escribe la narración — la voz fija cuánto dura la escena. Pégala en update_storyboard con set_data para cambiar un vídeo que ya hiciste.

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

Más animaciones de Cómo funciona