ट्यूटोरियल: एनिमेटेड प्रेरणादायक पोस्ट बनाएं

लेटर कोलाज एनिमेशन का उपयोग करके Instagram कहानियों के लिए एक एनिमेटेड प्रेरणात्मक उद्धरण बनाने के लिए जानें।.

** समय:* 10 मिनट ** कठिनाई:*

आप क्या बना सकते हैं

तीन वाक्यांशों के साथ एक आश्चर्यजनक एनिमेटेड प्रेरणात्मक उद्धरण, प्रत्येक विभिन्न अक्षर कोलाज शैलियों का उपयोग करते हुए और प्रेरित एनिमेशन प्रकट करते हैं।.

आप सीख सकते हैं

• लीटर कोलाज शैलियों - नियॉन टाइल्स, पत्रिका कटआउट, पेपर कट इफेक्ट
• *Staggered एनिमेशन - अक्षर एक-एक करके दिखाई देते हैं
• ** बैकग्राउंड जनरेटर* - एनिमेटेड सनबर्स्ट पृष्ठभूमि
• ** कुंजीफ्रेम एनिमेशन* - रंग संक्रमण और चमक प्रभाव

चरण 1: सेट अप कैनवास

1. PinePaper संपादक
2. क्लिक करें कैनवास आकार ड्रॉपडाउन * पाद लेख में
3. Instagram स्टोरी (1080×1920) चुनें

चरण 2: एनिमेटेड पृष्ठभूमि जोड़ें

1. सही पैनल में *स्क्रीन टैब पर क्लिक करें
2. *जेनरेटर के लिए पृष्ठभूमि मोड सेट करें
3. **
4. रंगों को कॉन्फ़िगर करें:
   • रंग 1: #FF6B6B (कोरल लाल)
   • रंग 2: #4ECDC4 (टील)
   • रंग 3: #FFE66D (पीला)
5. *Ray count: 16
6. सक्षम करें Animate और सेट स्पीड: 0.5
7. **

जीवंत रंगों के साथ

चरण 3: “DREAM BIG” अक्षर कोलाज बनाएं

1. टूलबार में लीटर कोलाज बटन पर क्लिक करें (या L दबायें)
2. E-Mail साइटमैप
3. शैली को कॉन्फ़िगर करें:
   • शैली: ** टाइल*
   • पैलेट: नियॉन
   • फ़ॉन्ट आकार: 72
   • कॉर्नर त्रिज्या: 8
   • सक्षम छाया
4. केंद्र शीर्ष क्षेत्र में स्थिति (x: 540, y: 750)

कोड बराबर:

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

चरण 4: “DREAM BIG” में Staggered Animation जोड़ें

1. चयन के साथ, टाइमलाइन पैनल खोलें
2. **
3. विन्यास:
   • प्रभाव:*
   • Stagger Delay: *0.08s
   • अवधि: 0.5
   • अनुक्रम: रैखिक (दाएं से बाएं)
   • Easing: **

कोड बराबर:

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

स्टेप 5: “WORK HARD” लेटर कोलाज बनाएं

1. इसके साथ एक और अक्षर कोलाज बनाएं:

   • *WORK HARD
   • शैली: Magazine (ransom Note look)
   • पैलेट: Magazine
   • फ़ॉन्ट आकार: ** 60 * *
   • स्थिति: (540, 920)

2. Staggered एनिमेशन जोड़ें:

   • प्रभाव: फेड स्लाइड अप
   • Stagger Delay: *0.1s
   • अनुक्रम: वेव (प्रवाह प्रकट होता है)

कोड बराबर:

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

चरण 6: “STAY HUMBLE” अक्षर कोलाज बनाएं

1. तीसरे अक्षर कोलाज बनाएँ:

   • STAY HUMBLE
   • शैली: ** पेपर कट * (3 डी छाया प्रभाव)
   • फ़ॉन्ट आकार:68*
   • स्थिति: (540, 1100)

2. उछाल के साथ staggered एनीमेशन जोड़ें:

   • प्रभाव:*
   • Stagger Delay: *0.06s
   • Sequence: *Center (मध्यवर्ती)
   • Easing: Bounce

कोड बराबर:

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

चरण 7: सजावटी एक्सेंट लाइन जोड़ें

1. एक सजावटी विभक्त के लिए एक आयत बनाएं:

   • चौड़ाई: 500, ऊंचाई: 8
   • रंग: सफेद (#FFFFFF)
   • वाक्यांशों के नीचे स्थिति

2. रंग pulsing के लिए कुंजीफ्रेम एनीमेशन जोड़ें:

कोड बराबर:

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

चरण 8: पूर्वावलोकन और प्ले

1. प्रेस Space एनीमेशन खेलने के लिए
2. टाइमलाइन एक 6 सेकंड का लूप दिखाता है
3. देखो staggered खुलासा:
   • “DREAM BIG” अक्षर द्वारा अक्षर में पॉप
   • “WORK HARD” एक लहर प्रभाव के साथ स्लाइड अप
   • “STAY HUMBLE” केंद्र से बाहर की ओर उछालता है

चरण 9: निर्यात

इंस्टाग्राम स्टोरी (वीडियो) के लिए

1. *Export बटन
2. WebM (recommended)
3. विन्यास:
   • अवधि: ** 6 सेकंड*
   • फ्रेम रेट: 30 एफपीएस
   • गुणवत्ता: उच्च
4. *Export पर क्लिक करें और डाउनलोड करने की प्रतीक्षा करें

अन्य प्लेटफार्मों के लिए

पूरा कोड

यहाँ इस एनीमेशन को फिर से बनाने के लिए पूर्ण कोड है:

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

त्वरित प्रारंभ: टेम्पलेट का उपयोग करें

खरोंच से निर्माण के बजाय, पूर्व निर्मित टेम्पलेट लोड करें:

1. ओपन टेम्पलेट्स पैनल (दाएं साइडबार)
2. चयन श्रेणी: ** सामाजिक मीडिया*
3. *Motivational Quote
4. टेम्पलेट सभी एनिमेशन तैयार के साथ लोड करता है

पत्र कोलाज शैलियाँ संदर्भ

Stagger Sequence पैटर्न

प्रो टिप्स

** विपरीत मामले* - अंधेरे पृष्ठभूमि पर प्रकाश पाठ (या इसके विपरीत) पठनीयता के लिए आवश्यक है।.

** स्टेगर टाइमिंग* - 0.05-0.1 अक्षरों के बीच प्राकृतिक महसूस होता है। बहुत तेजी से यांत्रिक दिखता है।.

*Mix शैलियों - प्रत्येक वाक्यांश के लिए विभिन्न अक्षर कोलाज शैलियों का उपयोग दृश्य रुचि को जोड़ता है।.

** जोर के लिए उछाल* - bounce “STAY HUMBLE” पर विस्तार से ध्यान आकर्षित करता है।.

अगला कदम

• [Letter Collage Reference] (/features/letter-collage) - सभी शैलियों और विकल्पों
• [Keyframe संपादक] (/features/keyframes) - कस्टम टाइमिंग कंट्रोल
• [Effects] (/features/effects) - स्पार्कल्स जोड़ें और हाइलाइट्स जोड़ें
• [Physics Animation] (/tutorials/physics-animation) - उन्नत सहज प्रभाव