App Demo

Dónde está

En un proyecto: Estudio → App Demo. Ves el video y pulsas Open editor para el estudio (variables, código y preview).

Cómo escribir el código

Exporta un componente con export default. Solo puedes importar remotion y react.

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const durationInFrames = 180;
export const fps = 30;
export const width = 1080;
export const height = 1920;

export default function AppDemo() {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill style={{ backgroundColor: "#fff" }}>
      Frame {frame}
    </AbsoluteFill>
  );
}

Variables

El botón Variables abre un panel al centro. Ahí editas tokens del preview: texto, número, sí/no, color y foto. Créalas con Añadir o decláralas en el código. Escribir vars.nombre no crea una variable: solo lee las que ya existen.

Decláralas así:

export const variables = {
  appName: "Mi app",
  precio: 9.99,
  destacado: true,
  accent: "#6366f1",
  photo: "",
};

Úsalas así:

<h1>{vars.appName}</h1>
<div style={{ color: vars.accent }} />
{vars.photo ? <Img src={vars.photo} /> : null}

Las fotos se suben, se pegan, se arrastran o se eligen de Galería. En el código la variable es una URL (o data URL). Importa Img de remotion para mostrarlas. Los valores del panel no se pisan si ya los editaste a mano.

Duración y tamaño

export const durationInFrames = 180;
export const fps = 30;
export const width = 1080;
export const height = 1920;

Marco iPhone

Si está activo, envuelve cualquier composición en un iPhone sobre fondo blanco. No hace falta dibujar el marco en el código. Puedes apagarlo para exportar a pantalla completa.

Guardar

Los cambios se autoguardan solos. También puedes pulsar Guardar o ⌘S / Ctrl+S.

Exportar

Exportar MP4 descarga el video y lo guarda en Galería → App Demo. Usa Chrome o Edge. El archivo incluye el código y las variables actuales.