लॉगिन फ़ॉर्म मैस्कॉट एनिमेशन: Teddy-स्टाइल लॉगिन कैसे काम करते हैं

Rive का teddy लॉगिन एनिमेशन कैसे काम करता है?

Rive की "Animated login screen design" पोस्ट (मार्च 2022) मशहूर teddy bear लॉगिन बनाती है और उसके स्टेट मशीन इनपुट बताती है:

• isChecking (boolean): username फ़ील्ड active रहने तक true रहता है, जिससे भालू idle नज़र से हटकर फ़ील्ड की ओर देखने लगता है।
• numLook (number): बाएँ और दाएँ देखने के बीच blend को नियंत्रित करता है; "जब इनपुट की वैल्यू 0 होती है, नज़र बाईं ओर होती है; जब इनपुट की वैल्यू 100 होती है, नज़र दाईं ओर होती है।"
• isHandsUp (boolean): "जब यूज़र पासवर्ड डालता है, Teddy अपने हाथों से आँखें ढक लेता है," और false होने पर हाथ नीचे कर लेता है।
• trigSuccess और trigFail (ट्रिगर): लॉगिन के बाद एक रिएक्शन चलाते हैं, फिर idle पर लौट आते हैं।

पोस्ट में ऐप का कोड नहीं दिखाया गया है। numLook की गणना कैसे हो, यह आप पर है; आम तरीका है username फ़ील्ड में कैरेट की पोज़िशन को 0 से 100 के स्केल पर बदलना।

यह आइडिया हर जगह लागू होता है: इवेंट फ़ॉर्म के पास होते हैं, मोशन Rive फ़ाइल के पास, और कुछ नाम वाले इनपुट दोनों को जोड़ते हैं। Rive में pointer listeners भी हैं जो canvas के अंदर किसी ऑब्जेक्ट को कर्सर के पीछे चला सकते हैं, और इन्हें editor में सेट किया जाता है।

कौन-सा फ़ॉर्म इवेंट कौन-सी स्टेट ट्रिगर करे?

mood नंबर Charmotion फ़ाइलों में इस्तेमाल होने वाला नियम है (0 idle, 1 happy, 3 thinking, 4 sad, 5 loading, 6 listening, 9 attention); हाथ से बनाई गई फ़ाइल में उसके अपने नाम होंगे। "गलत पासवर्ड" पर रिएक्शन हल्का रखें: सिर हिलाना, कोई नाटकीय नाकामी नहीं, क्योंकि लोग बार-बार गलत टाइप करते हैं।

React में फ़ॉर्म इवेंट्स को Rive से कैसे जोड़ें?

Data Binding के साथ, फ़ाइल को autoBind: true से लोड करें और mood नंबर और हर ट्रिगर के लिए view model hooks इस्तेमाल करें। यह component अपने आप में पूरा है; signIn की जगह अपनी auth call डालें।

import { useRef } from "react";
import {
  useRive,
  useViewModelInstanceNumber,
  useViewModelInstanceTrigger,
} from "@rive-app/react-canvas";

const MOOD = { idle: 0, happy: 1, thinking: 3, sad: 4, loading: 5, attention: 9 };

export function LoginForm({ signIn }: { signIn: (e: string, p: string) => Promise<"ok" | "wrong" | "error"> }) {
  const { rive, RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  const vmi = rive?.viewModelInstance;
  const { setValue: setMood } = useViewModelInstanceNumber("mood", vmi);
  const { trigger: success } = useViewModelInstanceTrigger("success", vmi);
  const { trigger: no } = useViewModelInstanceTrigger("no", vmi);
  const { trigger: error } = useViewModelInstanceTrigger("error", vmi);
  const typing = useRef<number>();

  const onType = () => {
    setMood?.(MOOD.thinking);
    window.clearTimeout(typing.current);
    typing.current = window.setTimeout(() => setMood?.(MOOD.attention), 800);
  };

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    setMood?.(MOOD.loading);
    const result = await signIn(String(f.get("email")), String(f.get("password")));
    if (result === "ok") { success?.(); setMood?.(MOOD.happy); }
    else if (result === "wrong") { no?.(); setMood?.(MOOD.idle); }
    else { error?.(); setMood?.(MOOD.sad); }
  };

  return (
    <form onSubmit={onSubmit}>
      <div style={{ width: 160, height: 160 }} aria-hidden="true"><RiveComponent /></div>
      <input name="email" type="email" autoComplete="email"
        onFocus={() => setMood?.(MOOD.attention)} onInput={onType}
        onBlur={() => setMood?.(MOOD.idle)} />
      <input name="password" type="password" autoComplete="current-password"
        onFocus={() => setMood?.(MOOD.idle)} />
      <button type="submit">Sign in</button>
    </form>
  );
}

नोट: फ़ाइल लोड होने तक setters undefined रहते हैं, इसलिए ?. कॉल इस्तेमाल किए गए हैं। पासवर्ड फ़ील्ड फ़ोकस होने पर सिर्फ़ एक शांत स्टेट सेट करता है; वह कभी नहीं बताता कि क्या टाइप हुआ। इनपुट-आधारित फ़ाइल (जैसे teddy) के साथ, हर इनपुट पाने के लिए useStateMachineInput इस्तेमाल करें और उसकी जगह .value सेट करें या .fire() कॉल करें। और पैटर्न React और Next.js में Rive में हैं।

लॉगिन मैस्कॉट को रुकावट बनने से कैसे रोकें?

• फ़ॉर्म सबसे पहले। तुरंत submit करें; अपने auth API को कॉल करने या redirect करने से पहले कभी किसी एनिमेशन के खत्म होने का इंतज़ार न करें।
• टाइपिंग को debounce करें। इनपुट पर "thinking" सेट करें और थोड़ी देर रुकने के बाद आराम वाली स्टेट पर लौटें, जैसा ऊपर दिखाया गया है। हर कीस्ट्रोक पर ट्रिगर फ़ायर न करें।
• पासवर्ड लीक न करें। अक्षरों की गिनती के हिसाब से आँखें घुमाना username फ़ील्ड पर प्यारा लगता है; पासवर्ड फ़ील्ड पर यह आसपास देखने वालों को बता देता है कि पासवर्ड कितना लंबा है।
• एक्सेसिबिलिटी। मैस्कॉट को aria-hidden="true" मार्क करें, असली एरर टेक्स्ट फ़ील्ड के पास रखें, और एक स्थिर पोज़ पर रोककर prefers-reduced-motion का पालन करें।
• वज़न। Rive का सबसे हल्का web runtime, canvas-lite 2.44.0, 25 अक्टूबर 2026 को लगभग 373 KB (brotli) मापा गया, और यह हर साइट पर एक बार लोड होता है। इसे लेज़ी लोड करें ताकि यह आपके साइन-इन पेज के first paint को धीमा न करे।

जनरेट किया गया लॉगिन मैस्कॉट क्या नहीं कर सकता?

teddy लॉगिन की दो खास हरकतें कस्टम एनिमेशन हैं: हाथों से आँखें ढकना, और blend state के ज़रिए आँखों का कैरेट को फ़ॉलो करना। स्टैंडर्ड स्टेट सेट में ये शामिल नहीं होते।

Charmotion के सेट इसका एक उदाहरण हैं। एक इमेज से आपको मैपिंग टेबल वाली स्टेट (attention, thinking, loading, success, no, error वगैरह) Data Binding के लिए जुड़ी एक .riv में मिलती हैं, React कोड के साथ, हर पेड प्लान पर ($20/माह से)। कोई "आँखें ढकना" स्टेट नहीं है और न ही आँख या कर्सर ट्रैकिंग। दी गई .riv एक रनटाइम फ़ाइल है, एडिट करने लायक प्रोजेक्ट नहीं, इसलिए इन्हें जोड़ने का मतलब है अपनी आर्टवर्क से Rive एडिटर में ये एनिमेशन बनाना या कस्टम काम के लिए किसी Rive एनिमेटर को हायर करना। Charmotion ऑटोमेटेड है और किसी सेट में एनिमेशन नहीं जोड़ता; अगर आपको कुछ खास चाहिए तो खरीदने से पहले support@charmotion.app पर पूछें।

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

क्या लॉगिन मैस्कॉट साइन-इन पेज को धीमा करता है?

इससे एक रनटाइम और एक फ़ाइल जुड़ती है। Rive का canvas-lite 2.44.0 web runtime 25 अक्टूबर 2026 को brotli-compressed होकर लगभग 373 KB मापा गया (हर साइट पर एक बार), और कैरेक्टर फ़ाइल अक्सर कुछ दसियों किलोबाइट की होती है। फ़ॉर्म रेंडर होने के बाद मैस्कॉट को लेज़ी लोड करें ताकि फ़ॉर्म पहले इस्तेमाल के लायक हो जाए।

क्या पासवर्ड फ़ील्ड पर लॉगिन मैस्कॉट को आँखें ढकनी चाहिए?

अगर आपकी फ़ाइल में वह एनिमेशन है, तो यह अच्छा टच है और प्राइवेसी का संकेत देता है। पासवर्ड की लंबाई ट्रैक करके इसकी नकल न करें, क्योंकि इससे जानकारी उजागर होती है। कस्टम एनिमेशन न हो, तो पासवर्ड फ़ोकस पर एक शांत idle स्टेट ठीक काम करती है।

क्या Rive मैस्कॉट माउस कर्सर को फ़ॉलो कर सकता है?

अपने canvas के अंदर, हाँ, अगर फ़ाइल इसके लिए बनाई गई हो। Rive editor में pointer listeners हैं, और Align Target action किसी ऑब्जेक्ट को pointer के पीछे चलाता है। इसे editor में ही सेट करना होता है; जिस फ़ाइल में यह नहीं है, उसमें रनटाइम कोड इसे नहीं जोड़ सकता।

स्रोत

• Animated login screen design, Rive Blog
• Listeners, Rive
• Data binding (React runtime), Rive
• Runtime sizes, Rive
• prefers-reduced-motion, MDN Web Docs