कर्सर के पीछे चलने वाला लोगो कैसे बनाएँ

लोगो माउस पर किन तरीकों से रिएक्ट कर सकता है?

3D मॉडल के लिए अपनी वेबसाइट पर इंटरैक्टिव 3D लोगो देखें। इस गाइड का बाकी हिस्सा 2D विकल्पों के बारे में है।

क्या सिर्फ़ CSS से लोगो को माउस पर रिएक्ट कराया जा सकता है?

कुछ हद तक। CSS इस पर रिएक्ट कर सकता है कि पॉइंटर लोगो के ऊपर है या नहीं, लेकिन इस पर नहीं कि वह कहाँ है। hover रिएक्शन पूरी तरह CSS है:

.logo { transition: transform 0.25s ease-out; }

@media (hover: hover) {
  .logo:hover { transform: rotate(-6deg) scale(1.05); }
}

hover media feature जाँचता है कि "यूज़र का मुख्य इनपुट तरीका एलिमेंट के ऊपर hover कर सकता है या नहीं।" कई फ़ोन पर यह none बताता है, क्योंकि वे "यूज़र के असुविधाजनक लंबे टैप पर hover की नकल करते हैं।" hover इफ़ेक्ट को @media (hover: hover) में रखने से वे सिर्फ़ उन डिवाइस तक सीमित रहते हैं जिनका मुख्य इनपुट सच में hover कर सकता है।

पॉइंटर की ओर झुकाने के लिए आपको उसके coordinates चाहिए, यानी एक छोटी स्क्रिप्ट।

JavaScript से लोगो को कर्सर की ओर कैसे झुकाएँ?

मापें कि पॉइंटर लोगो के केंद्र के सापेक्ष कहाँ है, उसे angle में बदलें, और custom properties के ज़रिए CSS को दें। CSS transition मोशन को स्मूद करता है, इसलिए कोई एनिमेशन लूप संभालना नहीं पड़ता।

<a class="logo-link" href="/"><img class="logo" src="/logo.svg" alt="Hushwave"></a>

.logo {
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .logo { transform: none; transition: none; }
}

const logo = document.querySelector(".logo");
const moves = matchMedia("(prefers-reduced-motion: no-preference) and (hover: hover)");

if (moves.matches) {
  window.addEventListener("pointermove", (e) => {
    const r = logo.getBoundingClientRect();
    const x = (e.clientX - (r.left + r.width / 2)) / innerWidth;   // about -1 to 1
    const y = (e.clientY - (r.top + r.height / 2)) / innerHeight;
    logo.style.setProperty("--ry", (x * 20) + "deg");  // flip the signs to tilt away instead
    logo.style.setProperty("--rx", (-y * 20) + "deg");
  });
}

Angles छोटे रखें। 45 डिग्री घूमने वाला लोगो टूटा हुआ लगता है, जबकि कुछ डिग्री ज़िंदा लगते हैं। अगर लोगो एक स्थिर header में है, तो हर event पर नहीं, resize पर एक बार मापें।

window पर सुनने से लोगो पेज पर कहीं भी रिएक्ट करता है। अगर उसे सिर्फ़ आस-पास रिएक्ट करना है, तो इसके बजाय header एलिमेंट पर सुनें।

लोगो की आँखें कर्सर के पीछे कैसे चलाएँ?

लोगो एक inline SVG होना चाहिए जिसमें पुतलियाँ अलग एलिमेंट हों, ताकि आप उन्हें हिला सकें। फिर हर आँख के लिए, Math.atan2 से आँख के केंद्र से पॉइंटर तक का angle निकालें, जो MDN के अनुसार "radians में angle (-π और π के बीच, दोनों शामिल)" लौटाता है और "पहले y-coordinate और फिर x-coordinate" लेता है।

const eye = document.querySelector("#eye-left");
const pupil = document.querySelector("#pupil-left");
const reach = 3; // how far the pupil may travel, in SVG units

window.addEventListener("pointermove", (e) => {
  const r = eye.getBoundingClientRect();
  const a = Math.atan2(e.clientY - (r.top + r.height / 2), e.clientX - (r.left + r.width / 2));
  pupil.setAttribute("transform", "translate(" + Math.cos(a) * reach + " " + Math.sin(a) * reach + ")");
});

तय पहुँच से पुतली दूरी चाहे जो हो, आँख के अंदर ही रहती है। नरम लुक के लिए, जब पॉइंटर आँख के बहुत पास हो तो पहुँच कम करें, ताकि पुतली झटके से किनारे पर न जाए।

Figma से एक्सपोर्ट करते समय SVG विकल्प Include "id" attribute, layer के नामों के आधार पर ids जोड़ता है, इसलिए layers के नाम eye-left और pupil-left रखने से स्क्रिप्ट को ढूँढने के लिए कुछ मिल जाता है।

Rive लोगो को पॉइंटर के पीछे कैसे चलाएँ?

Rive आपको दो रास्ते देता है, और सही रास्ता इस पर निर्भर है कि पॉइंटर का पीछा कितनी दूर तक करना है।

Listeners, canvas के अंदर। स्टेट मशीन listener, Pointer Enter, Exit, Move, Down और Up पर फ़ायर हो सकता है। इसका Align Target action "किसी object को ऐसी जगह रखता है कि वह पॉइंटर के पीछे चले," जैसे एक अदृश्य target जिससे आँखें या सिर बँधे हों। Rive के डॉक्स चेतावनी देते हैं कि Pointer Exit "सिर्फ़ तब फ़ायर होता है जब Rive पॉइंटर की स्थिति पढ़ सकता है," इसलिए listeners पॉइंटर को सिर्फ़ canvas के ऊपर देखते हैं। पुराना Input Change action deprecated चिह्नित है।

Data binding, पूरे पेज पर। Data binding "View Models में स्टोर डेटा को आपके Rive सीन की properties से जोड़ता है," और वैल्यू runtime कोड से अपडेट की जा सकती हैं। पेज पर पॉइंटर सुनें और फ़ाइल में नंबर लिखें:

const r = new rive.Rive({
  src: "/logo.riv",
  canvas: document.querySelector("#logo"),
  stateMachine: "Main",
  autoplay: true,
  autoBind: true,
  isTouchScrollEnabled: true,
  onLoad: () => {
    const lookX = r.viewModelInstance.number("lookX"); // a number property defined in your file
    window.addEventListener("pointermove", (e) => {
      lookX.value = (e.clientX / innerWidth) * 100;
    });
  },
});

isTouchScrollEnabled उंगली के canvas पर खिसकने पर भी पेज को स्क्रॉल होने लायक रखता है; इसके बिना, Rive कहता है "स्क्रॉल बिहेवियर रुक सकता है।" एनिमेशन वाला हिस्सा (नंबर से चलने वाले blend states) एडिटर में सेट होता है; Rive स्टेट मशीन गाइड इसका तरीका समझाती है, और SVG से Rive लोगो को Rive में लाना कवर करती है।

बिना माउस वाले फ़ोन और टैबलेट पर क्या होता है?

टच स्क्रीन पर कोई ठहरा हुआ पॉइंटर नहीं होता। MDN के pointer events डॉक्स बताते हैं कि "hover सपोर्ट न करने वाले" डिवाइस पर enter और leave events दबाने और छोड़ने के साथ ही आते हैं, इसलिए कर्सर के पीछे चलने वाला लोगो सिर्फ़ तब हिलता है जब उंगली स्क्रीन पर हो, फिर जहाँ था वहीं जम जाता है।

• इफ़ेक्ट पर शर्त लगाएँ: झुकाव वाले उदाहरण की तरह, कर्सर फ़ॉलो सिर्फ़ (hover: hover) में चलाएँ।
• टच को उसकी अपनी मोशन दें: धीमा idle लूप, या टैप पर छोटा रिएक्शन, आधे-अधूरे फ़ॉलो से बेहतर काम करता है।
• स्क्रॉलिंग न रोकें: MDN बताता है कि touch-action: none उस हिस्से के लिए ब्राउज़र का डिफ़ॉल्ट टच बिहेवियर, जैसे pan और zoom, बंद कर देता है। पेज के फ़्लो में रखे लोगो पर, उस पर शुरू होने वाला ड्रैग अब पेज स्क्रॉल नहीं करेगा।
• छोड़ने पर रीसेट करें: pointerup और pointercancel पर धीरे-धीरे आराम की मुद्रा में लौटें, ताकि लोगो मुड़ा हुआ न रह जाए।

क्या कर्सर के पीछे चलने वाला लोगो accessible है?

हो सकता है, अगर लोग मोशन बंद कर सकें। WCAG के दो मानदंड लागू होते हैं:

कर्सर के पीछे चलने वाला लोगो इंटरैक्शन से शुरू होने वाली मोशन है, और यह कभी ज़रूरी नहीं होता। W3C, prefers-reduced-motion media query को 2.3.3 के लिए एक पर्याप्त तकनीक (C39) के रूप में लिस्ट करता है, इसीलिए ऊपर का हर उदाहरण इसे जाँचता है। अगर लोगो में लगातार चलने वाला idle लूप भी है, तो 2.2.2 पूरा करने के लिए कुछ चक्रों के बाद उसे रोकें या pause कंट्रोल दें।

लोगो को alt टेक्स्ट वाला सामान्य लिंक भी रखें। मोशन सजावट है; ब्रांड का नाम और होम पेज का लिंक ही असली कंटेंट है। और जानकारी accessible एनिमेशन और reduced motion में।

क्या पॉइंटर के पीछे चलने वाला लोगो तैयार मिल सकता है?

Charmotion का Motion Studio आपके अपने लोगो से वेबसाइट हीरो बनाता है जो पॉइंटर के पीछे चलता है, hover पर रिएक्ट करता है और idle रहते हुए लूप करता है। यह आपकी फ़ाइल के अपने हिस्सों से काम करता है, इसलिए लोगो दोबारा ड्रॉ नहीं होता। आपको एक होस्टेड embed मिलता है जो ऑफ़-स्क्रीन होने पर रुकता है और reduced motion का सम्मान करता है, साथ में self-host फ़ाइलें और एक React कंपोनेंट। कॉन्सेप्ट फ़्री हैं; किसी एक को बनाना Starter (नवंबर 2026 तक $9/माह) से शुरू होता है। ऐसे लोगो के लिए जिसका चेहरा पलक झपकाए और बात करे, कैरेक्टर सेट बेहतर है।

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

क्या कर्सर के पीछे चलने वाला लोगो पेज को धीमा करता है?

नहीं, अगर यह छोटा रहे। दो CSS variables सेट करने वाला pointermove handler सस्ता है। जब लोगो हिल नहीं रहा हो तो हर event पर layout मापने से बचें, लोगो के ऑफ़-स्क्रीन रहते कोई भी एनिमेशन लूप रोकें, और टच डिवाइस व reduced motion के लिए इफ़ेक्ट पूरी तरह छोड़ दें।

क्या Rive लोगो अपने canvas के बाहर कर्सर के पीछे चल सकता है?

सिर्फ़ listeners से नहीं, जो पॉइंटर को सिर्फ़ canvas के ऊपर देखते हैं। JavaScript में पेज पर pointermove सुनें और data binding से वैल्यू को view model की number property में लिखें; फिर स्टेट मशीन उन नंबरों को मोशन में बदलती है।

लोगो को कर्सर की ओर कितना झुकना चाहिए?

कुछ डिग्री काफ़ी हैं, ताकि वह रिस्पॉन्सिव लगे पर टूटा हुआ न दिखे। बड़े angles लोगो को बिगाड़ते हैं और टेक्स्ट पढ़ना मुश्किल करते हैं। झटके से जाने के बजाय एक सेकंड के हिस्से में मोशन को ease करें, और पॉइंटर के हटने पर आराम की मुद्रा में लौटें।

स्रोत

• Pointer events, MDN Web Docs
• hover media feature, MDN Web Docs
• Math.atan2(), MDN Web Docs
• Window: requestAnimationFrame() method, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Listeners, Rive docs
• Data binding overview, Rive docs
• Web data binding, Rive docs
• Rive parameters (web runtime), Rive docs
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• C39: Using the CSS prefers-reduced-motion query to prevent motion, W3C WAI
• Export formats and settings for static designs, Figma Learn