एनिमेटेड Notion पेज आइकन, कवर और मैस्कॉट

क्या Notion पेज आइकन एनिमेटेड GIF हो सकता है?

आप GIF अपलोड कर सकते हैं। Notion के help center के अनुसार आप "Upload टैब से अपनी इमेज या इमेज URL" जोड़ सकते हैं, "अपलोड किए गए आइकन आदर्श रूप से 280 x 280 पिक्सेल के होने चाहिए", और सपोर्टेड फ़ाइल टाइप की सूची में GIF शामिल है। Notion पर लिखी थर्ड-पार्टी गाइड बताती हैं कि एनिमेटेड GIF कवर के रूप में काम करते हैं। Notion के help पेज यह साफ़ नहीं बताते कि आइकन जहाँ-जहाँ दिखता है, वहाँ एनिमेशन कैसे बर्ताव करता है, इसलिए टीम space में लागू करने से पहले पेज header, sidebar, link mentions और मोबाइल ऐप में इसे जाँच लें।

डिज़ाइन उस जगह के हिसाब से करें जहाँ यह सबसे छोटा दिखता है। sidebar में आइकन बहुत छोटा होता है, इसलिए हल्की पलक झपकना या मुँह की हरकत गायब हो जाती है। ऐसा लूप चुनें जिसमें पूरा silhouette हिले:

• हाथ हिलाना, हल्का उछलना या सिर झुकाना आइकन साइज़ पर भी साफ़ दिखता है।
• लूप को seamless रखें; आखिरी और पहले फ़्रेम के बीच का झटका लगातार दोहराने पर साफ़ नज़र आता है।
• tight crop करें ताकि कैरेक्टर पूरे square को भर दे।

अपलोड करते समय Notion एक checkbox दिखाता है, Add to workspace Emoji library। इसे टिक करने पर इमेज एक custom इमोजी बन जाती है, जिसे आप पूरे workspace में पेज आइकन, रिएक्शन या inline text के रूप में दोबारा इस्तेमाल कर सकते हैं।

एनिमेटेड Notion कवर का साइज़ कितना होना चाहिए?

Notion का जवाब है कि "कवर इमेज आपकी window की चौड़ाई के हिसाब से बदलती हैं, इसलिए कोई एक साइज़ सबसे अच्छा नहीं है", और सुझाव है कि "इमेज कम से कम 1,500 पिक्सेल चौड़ी हों"। थर्ड-पार्टी गाइड आमतौर पर 1500×600 सुझाती हैं। दिखने वाली पट्टी window के साथ बदलती है, इसलिए कैरेक्टर को बीच में रखें और दोनों तरफ़ सादा बैकग्राउंड छोड़ें; किनारों के पास की कोई भी चीज़ पतली स्क्रीन पर crop हो जाती है।

छोटे कैरेक्टर GIF को 1,500 px तक खींचने की ज़रूरत नहीं है। इसके बजाय उसे उसी बैकग्राउंड रंग के चौड़े canvas पर pad करें, जिससे फ़ाइल छोटी रहती है क्योंकि padding फ़्रेम के बीच कभी नहीं बदलती। दोनों commands ffmpeg 7.1.1 पर चलाए गए और इनसे 480 px के square GIF से 280×280 का आइकन और 1500×600 का कवर बने:

# Icon: 280x280 from a square GIF
ffmpeg -i mascot.gif -filter_complex "scale=280:280:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 icon.gif

# Cover: center the 480 px GIF on a 1500x600 canvas of the same background color
ffmpeg -i mascot.gif -filter_complex "pad=1500:600:(ow-iw)/2:(oh-ih)/2:color=0xF4EFE6,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:diff_mode=rectangle" -loop 0 cover.gif

0xF4EFE6 को अपने GIF के बिल्कुल सही बैकग्राउंड रंग से बदलें। stats_mode=diff और diff_mode=rectangle palette स्टेप्स को हिलने वाले pixels पर ध्यान देने को कहते हैं, जिससे क्वालिटी और साइज़ दोनों बेहतर होते हैं।

अपलोड करने से पहले साइज़ जाँचें। Notion के help center के अनुसार Free प्लान पर "आपकी अपलोड की गई सभी फ़ाइलें 5MB से कम होनी चाहिए", और paid प्लान पर इमेज (PNG, JPG) 5 MB से कम होनी चाहिए। अगर GIF बहुत बड़ा है, तो frame rate कम करें, लूप छोटा करें या कैरेक्टर का साइज़ घटाएँ।

dark mode में GIF आइकन को बॉक्स जैसा दिखने से कैसे रोकें?

Notion की theme हर viewer की अपनी setting होती है, और एक पेज का एक ही आइकन होता है, इसलिए आप एक ही आइकन का light और dark वर्ज़न नहीं दे सकते। असली सवाल यह है कि GIF का बैकग्राउंड दोनों में कैसा दिखता है:

GIF में transparency हर pixel के लिए या तो चालू होती है या बंद, इसलिए light बैकग्राउंड के लिए बने soft anti-aliased किनारे dark पेज पर हल्का halo छोड़ते हैं। अगर transparency चाहिए, तो असली अल्फ़ा चैनल वाले source से convert करें और hard edges स्वीकार करें; ffmpeg settings ट्रांसपेरेंट GIF गाइड में हैं। अक्सर tile वाला तरीका ज़्यादा साफ़ रहता है: अंदर कैरेक्टर वाला रंगीन square दोनों themes में सोच-समझकर बनाया हुआ लगता है।

कवर आसान हैं। कवर एक चौड़ी पट्टी होती है, इसलिए light और dark के बीच का बैकग्राउंड रंग (कोई हल्का ब्रांड रंग) दोनों themes में ठीक दिखता है।

क्या मैं Notion में इंटरैक्टिव Rive एनिमेशन एम्बेड कर सकता हूँ?

सिर्फ़ hosted link के ज़रिए। Notion आपका अपना script नहीं चला सकता, लेकिन उसका /embed block Iframely सर्विस के ज़रिए 1,900 से ज़्यादा domains का content दिखाता है। Rive के docs के अनुसार उसका Embed link option "ऐसे platforms के लिए है जो links का अपने आप प्रीव्यू दिखाते हैं, जैसे Notion और Telegram"। सीमाएँ:

• embed URL बनाने के लिए Rive Voyager या Enterprise प्लान और Rive editor में एक फ़ाइल चाहिए।
• embed URL एक snapshot होता है; बदलाव के बाद आपको नया link बनाना होगा।
• Rive बताता है कि embeds "iframes का इस्तेमाल करते हैं और Rive के runtime APIs तक पहुँच नहीं देते", इसलिए कैरेक्टर अपनी स्टेट मशीन चला सकता है और frame के अंदर clicks पर रिएक्ट कर सकता है, लेकिन Notion से उसका मूड सेट नहीं किया जा सकता।

आप एनिमेशन होस्ट करने वाले अपने पेज का URL भी पेस्ट कर सकते हैं। यह दिखेगा या नहीं, यह इस पर निर्भर करता है कि Notion की embed सर्विस उस साइट को सपोर्ट करती है या नहीं; Notion बताता है कि कुछ वेबसाइटें एम्बेड नहीं हो सकतीं और "Failed to Load" दिखाती हैं।

Super.so साइट पर असली Rive मैस्कॉट कैसे चलाएँ?

Super Notion पेजों को वेबसाइट में बदलता है और आपको code जोड़ने देता है। इसके docs के अनुसार पूरी साइट का code site editor के Code पेज में जाता है, जिसमें Head, Body और CSS सेक्शन होते हैं, और किसी एक पेज का code "आपकी साइट के 'Pages' में उस पेज पर code आइकन क्लिक करके" जोड़ा जाता है। Body code "पेज के ऊपर जोड़ा जाएगा", इसलिए fixed-position canvas सबसे आसान placement है: यह Notion के पेज structure पर निर्भर नहीं करता।

<canvas id="mascot" width="160" height="160" role="img" aria-label="Animated mascot"
  style="position: fixed; right: 16px; bottom: 16px; width: 160px; height: 160px; z-index: 50"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  document.getElementById("mascot").addEventListener("click", () => {
    r.viewModelInstance.trigger("yes").trigger();
  });
</script>

• .riv को CORS चालू करके HTTPS पर होस्ट करें, ठीक वैसे ही जैसे किसी भी वेबसाइट embed के लिए।
• Super, Notion के रंगों को CSS variables के रूप में लिस्ट करता है, जैसे --color-bg-default (उसकी टेबल में लाइट मोड में #FFFFFF और डार्क मोड में #2F3437)। Rive canvas ट्रांसपेरेंट होता है, इसलिए कैरेक्टर साइट के किसी भी बैकग्राउंड पर ठीक से दिखता है।
• अगर मैस्कॉट हर पेज के बजाय किसी एक पेज से जुड़ा है, जैसे help center का होम पेज, तो उसे सिर्फ़ उसी पेज पर जोड़ें।

कैनवस का पूरा सेटअप वेबसाइट में एनिमेशन कैसे जोड़ें गाइड में बताया गया है।

Notion और Super के लिए Charmotion के कौन से एक्सपोर्ट सही रहते हैं?

Charmotion एक कैरेक्टर या लोगो इमेज से 17 एनिमेशन बनाता है। Notion के लिए GIF एक्सपोर्ट (480 px, सॉलिड बैकग्राउंड) सीधे काम आता है: ऊपर दी गई commands से आइकन के लिए इसे 280×280 पर छोटा करें और cover के लिए इसके चारों ओर padding जोड़ें, padding का रंग GIF के बैकग्राउंड से मिलाएँ। Charmotion ट्रांसपेरेंट GIF एक्सपोर्ट नहीं करता; अगर आपको ऐसी GIF चाहिए, तो ट्रांसपेरेंट WebM को खुद कन्वर्ट करें और किनारे hard (बिना smoothing के) आने की उम्मीद रखें।

Super.so साइट के लिए .riv इस्तेमाल करें: mood नंबर से चुने जाने वाले दस लूप होने वाले मूड और छह वन-शॉट ट्रिगर, साथ में अपने हिसाब से बदलने लायक वेब कोड। .riv और ट्रांसपेरेंट वीडियो हर पेड प्लान पर हैं ($20/माह से), साथ में सॉलिड बैकग्राउंड पर MP4, GIF और 9:16 लॉन्च वीडियो।

Notion पेज में एनिमेटेड मैस्कॉट आइकन और cover कैसे जोड़ें

1. लूप चुनें. ऐसा सीमलेस लूप चुनें जिसमें पूरा कैरेक्टर हिलता हो, जैसे wave या bounce।
2. आइकन बनाएँ. ffmpeg से GIF को 280×280 पर स्केल करें और palette फिर से बनाएँ।
3. cover बनाएँ. GIF को उसी बैकग्राउंड रंग के 1500×600 कैनवस पर padding के साथ रखें, ताकि कैरेक्टर बीच में रहे।
4. साइज़ जाँचें. हर फ़ाइल 5 MB से छोटी रखें; अगर बड़ी हो, तो frame rate कम करें या लूप छोटा करें।
5. अपलोड करें. icon के लिए Upload टैब और cover के लिए Change cover इस्तेमाल करें; चाहें तो icon को workspace की emoji library में भी जोड़ें।
6. दोनों थीम में टेस्ट करें. पेज को लाइट और डार्क मोड में, डेस्कटॉप और मोबाइल पर, और साइडबार में देखें।

अक्सर पूछे जाने वाले सवाल

Notion मेरी GIF अपलोड क्यों नहीं ले रहा?

सबसे आम वजह साइज़ है। Notion के help center के अनुसार Free प्लान पर अपलोड 5 MB से कम होने चाहिए, और paid प्लान पर भी इमेज की सीमा 5 MB से कम बताई गई है। दोबारा अपलोड करने से पहले frame rate कम करें, लूप छोटा करें, खाली जगह crop करें या GIF को छोटा करें।

क्या मैं डार्क मोड के लिए Notion पेज का अलग icon सेट कर सकता हूँ?

Notion के help pages में डार्क मोड के लिए अलग icon का कोई ज़िक्र नहीं है। हर व्यक्ति अपनी थीम खुद चुनता है और पेज सभी को एक ही icon दिखाता है, इसलिए ऐसी एक इमेज बनाएँ जो दोनों पर अच्छी लगे, जैसे रंगीन rounded tile पर कैरेक्टर।

क्या मैं अपनी मैस्कॉट GIF को Notion custom emoji की तरह इस्तेमाल कर सकता हूँ?

हाँ। पेज icon अपलोड करते समय Add to workspace Emoji library पर टिक करें। इसके बाद Notion पूरे workspace में इसे पेज icon, रिएक्शन या पेज के अंदर inline इस्तेमाल करने देता है। इसे रिएक्शन साइज़ पर टेस्ट करें, जहाँ छोटी डिटेल्स दिखनी बंद हो जाती हैं।

इस गाइड से झटपट जवाब

• क्या Notion पेज icon एनिमेटेड हो सकता है?
• क्या मैं Notion में Rive एनिमेशन एम्बेड कर सकता हूँ?

स्रोत

• Customize and style your content (icons and covers), Notion Help Center
• Images, files and media, Notion Help Center
• Embeds, bookmarks and link mentions, Notion Help Center
• Sharing and embedding: Embed URLs, Rive
• Custom code, Super Docs
• Notion colors, Super Docs
• How to add Notion cover images (GIFs too), Simple.ink
• FFmpeg filters documentation (pad, palettegen, paletteuse), FFmpeg