Tutoriel : Créer un poste motivé animé

Apprenez à créer une citation motivante animée attirante pour Instagram Stories en utilisant des animations Letter Collage.

Heure: 10 minutes Difficulté: Débutant

Ce que vous allez créer

Une superbe citation animée de motivation avec trois phrases, chacune utilisant différents styles de collage de lettres et étouffées révèlent des animations.

Caractéristiques que vous apprendrez

• Styles de collage de lettres — Tuiles de néon, découpes de magazines, effets de coupe de papier
• Animations stupéfiées — Lettres apparaissant une par une
• Générateurs d’arrière-plan — fonds d’ensoleillement animés
• Animations d’images clés — Transitions de couleurs et effets d’étincelles

Étape 1: Configurer la toile

1. Ouvrir l’éditeur PinePaper
2. Cliquez sur le menu déroulant de la taille canvas
3. Sélectionner Instagram Story (1080×1920)

Étape 2: Ajouter le contexte animé

1. Cliquez sur l’onglet Scènes dans le panneau de droite
2. Définir le mode de fond à Generator
3. Sélectionner Sunburst
4. Configurer les couleurs & #160;:
   • Couleur 1: #FF6B6B (rouge coral)
   • Couleur 2: #4ECDC4 (théâtre)
   • Couleur 3: #FFE66D (jaune)
5. Ensemble Nombre de rayons: 16
6. Activer Animate et régler Vitesse : 0.5
7. Cliquez sur Générer

Étape 3: Créer un collage de lettres “DREAM BIG”

1. Cliquez sur le bouton Letter Collage dans le barre d’outils (ou appuyez sur L)
2. Type: DREAM BIG
3. Configurer le style :
   • Style : Tile
   • Palette : Neon
   • Taille de la police: 72
   • Rayon d’angle: 8
   • Activer Ombre
4. Position au centre (x: 540, y: 750)

Équivalent de code:

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

Étape 4: Ajouter une animation décalée à “DREAM BIG”

1. Avec le collage sélectionné, ouvrez le panneau Timeline
2. Cliquez sur Ajouter une animation décalée
3. Configuration & #160;:
   • Effet : Pop In
   • Délai d’échelonnement : 0,08s
   • Durée: 0,5 s
   • Séquence: Linear (de gauche à droite)
   • Soulagement : Soulagement

Équivalent de code:

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

Étape 5 : Créer un collage de lettre “WORK HARD”

1. Créer un autre collage de lettres avec :

   • Texte : DURÉE DU TRAVAIL
   • Style: Magazine (l’aspect de la note de ransom)
   • Palette: Magazine
   • Taille de la police: 60
   • Fonction: (540, 920)

2. Ajouter une animation décalée :

   • Effet : Fade Slide Up
   • Délai de déclenchement : 0.1s
   • Séquence: Wave

Équivalent de code:

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'
});

Étape 6 : Créer un collage de lettres “STAY HUMBLE”

1. Créer le troisième collage de lettres :

   • Texte : DAY HUMBLE
   • Style : Coupe de papier Effet d’ombre (3D)
   • Taille de la police: 68
   • Fonction: (540, 1100)

2. Ajouter une animation décalée avec rebond :

   • Effet : Pop In
   • Délai de déclenchement : 0,06s
   • Séquence: Center (revéles du milieu vers l’extérieur)
   • Facilité : Bon

Équivalent de code:

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'
});

Étape 7: Ajouter une ligne d’entrée décorative

1. Créer un rectangle pour un diviseur décoratif:

   • Largeur: 500, Hauteur: 8
   • Couleur: Blanc (#FFFFFF)
   • Position en dessous des phrases

2. Ajouter l’animation d’image clé pour le pulsation de couleur:

Équivalent de code:

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' }
]);

Étape 8: Aperçu et lecture

1. Appuyez sur Space pour jouer l’animation
2. La Timeline affiche une boucle de 6 secondes
3. Regardez les révélations décalées :
   • “DREAM BIG” apparaît par lettre
   • “WORK HARD” glisse avec un effet d’onde
   • “SAY HUMBLE” rebondit du centre vers l’extérieur

Étape 9: Exportation

Pour Instagram (Vidéo)

1. Cliquez sur Exporter bouton
2. Sélectionner WebM (recommandé) ou MP4
3. Configuration & #160;:
   • Durée: 6 secondes
   • Taux d’encadrement : 30 fps
   • Qualité: Haute
4. Cliquez sur Export et attendez le téléchargement

Pour les autres plateformes

Code complet

Voici le code complet pour recréer cette animation :

// 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);

Démarrer rapidement : utilisez le modèle

Au lieu de construire à partir de zéro, charger le gabarit pré-construit:

1. Ouvrir Templates Panel (barre latérale droite)
2. Sélectionnez la catégorie : Médias sociaux
3. Cliquez sur Citation motivationnelle
4. Le modèle se charge avec toutes les animations prêtes

Letter Collage Styles Référence

Séquençage de l’écartement

Conseils pro

Questions contrastantes — Le texte clair sur les fonds sombres (ou vice versa) est essentiel pour la lisibilité.

Calendrier de frappe — 0,05-0,1s entre les lettres semble naturel. Trop rapide semble mécanique.

Mix styles — L’utilisation de différents styles de collage de lettres pour chaque phrase ajoute un intérêt visuel.

Bonnez pour mettre l’accent — Le bounce assouplissement sur “STAY HUMBLE” attire l’attention.

Prochaines étapes

• Letter Collage Reference — Tous les styles et toutes les options
• [Éditeur d’images clés] (/features/keyframes) — Contrôle de synchronisation personnalisé
• Effets — Ajouter des éclats et des reflets
• [Animation physique] (/tutorials/physics-animation) — Effets d’assouplissement avancés