Tutorial: Crear un artículo motivacional animado

Aprende a crear una atractiva cita motivacional animada para Instagram Stories usando animaciones de Letter Collage.

Tiempo: 10 minutos Dificultad

Lo que crearás

Una impresionante cita motivacional animada con tres frases, cada una utilizando diferentes estilos de collage de letras y animaciones asombrosas revelan.

Características que aprenderás

• Estilos de Collage de letras — Azulejos de neón, cortes de revistas, efectos de corte de papel
• Animaciones grabadas — Cartas que aparecen una por una
• Generadores de base — Fondos de la explosión del sol animados
• Animaciones claves — Transiciones de color y efectos brillantes

Paso 1: Establece Canvas

1. Open PinePaper Editor
2. Haga clic en el desplegable del tamaño de los lienzos
3. Seleccionar Instagram Story (1080×1920)

Paso 2: Add Animated Background

1. Haga clic en la pestaña Escenas en el panel derecho
2. Modo de fondo para Generador
3. Seleccione Sunburst
4. Configure los colores:
   • Color 1: #FF6B6B (rojo coral)
   • Color 2: #4ECDC4 (teal)
   • Color 3: #FFE66D (amarillo)
5. Set Ray Count: 16
6. Activar Animate y establecer velocidad: 0.5
7. Click Generate

Paso 3: Crear “DREAM BIG” Carta Collage

1. Haga clic en el botón Imagen de la carta barra de herramientas (o prensa L)
2. Tipo: DREAM BIG
3. Configure el estilo:
   • Estilo: Tile
   • Palette: Neon
   • Tamaño de la fuente: 72
   • Corner Radius: 8
   • Enable Shadow
4. Posición en la zona central (x: 540, y: 750)

Código equivalente:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Paso 4: Añadir Animación apilada a “DREAM BIG”

1. Con el collage seleccionado, abra el panel Timeline
2. Haga clic en Agregar la animación en estadio
3. Configure:
   • Efecto: Pop In
   • Stagger Delay: 0.08s
   • Duración: 0.5s
   • Secuencia: Linear (izquierda a derecha)
   • Alimentando: Afuera

Código equivalente:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Paso 5: Crear “WORK HARD” Carta Collage

1. Crear otro Collage de Carta con:

   • Texto:
   • Estilo: Magazine (mirador de notas de baile)
   • Palette: Magazine
   • Tamaño de la fuente: 60
   • Posición: (540, 920)

2. Añadir animación asombrosa:

   • Efecto: Fade Slide Up
   • Stagger Delay: 0.1s
   • Secuencia: Espera (revelando)

Código equivalente:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Paso 6: Crear “STAY HUMBLE” Carta Collage

1. Crear el tercer Collage de Carta:

   • Texto:
   • Estilo: Paper Cut (3D efecto sombra)
   • Tamaño de la fuente: 68
   • Posición: (540, 1100)

2. Añadir animación asombrosa con rebote:

   • Efecto: Pop In
   • Stagger Delay: 0.06s
   • Secuencia: Centro (revelas desde el medio exterior)
   • Easing: Bounce

Código equivalente:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Paso 7: Agregar la línea de Accent decorativo

1. Crear un rectángulo para un divisor decorativo:

   • Ancho: 500, Altura: 8
   • Color: Blanco (#FFFFFF)
   • Posición debajo de las frases

2. Añadir la animación del marco clave para el pulsing de color:

Código equivalente:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Paso 8: Vista previa y reproducción

1. Pulse Space para reproducir la animación
2. El Timeline muestra un bucle de 6 segundos
3. Mira las revelaciones asombrosas:
   • “DREAM BIG” aparece en carta por carta
   • “WORK HARD” se desliza hacia arriba con un efecto de onda
   • “STAY HUMBLE” rebotes desde el centro hacia fuera

Paso 9: Exportación

Para Instagram Story (Video)

1. Haga clic en Deporte
2. Seleccione WebM (recomendado) o MP4
3. Configure:
   • Duración: 6 segundos
   • Tasa de marco: 30 fps**
   • Quality: High
4. Haga clic en Export y espere para descargar

Para otras plataformas

Código completo

Aquí está el código completo para recrear esta animación:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Inicio rápido: Use la plantilla

En lugar de construir desde cero, cargar la plantilla pre-construida:

1. Open Templates Panel (bar lateral derecho)
2. Seleccionar categoría: Medios sociales
3. Click Cita motivacional
4. La plantilla se carga con todas las animaciones listas

Carta Collage Styles Referencia

Patrones Stagger Sequence

Consejos Pro

Cuestiones de contexto — Texto claro sobre fondo oscuro (o viceversa) es esencial para la legibilidad.

Tiempo de puntuación — 0.05-0.1s entre letras se siente natural. Demasiado rápido parece mecánico.

Estilos de texto — Utilizar diferentes estilos de Cartas para cada frase añade interés visual.

Bounce for emphasis — El bounce que se asea en “STAY HUMBLE” llama más atención.

Siguientes pasos

• Letter Collage Reference — Todos los estilos y opciones
• Keyframe Editor — Control de tiempo personalizado
• Efectos — Añadir chispas y momentos destacados
• [Animación física] (/tutorials/physics-animation) — Efectos de relajación avanzados