Claude Code से सुरक्षित UI animation लागू करने की गाइड

पहले उद्देश्य तय करें

Claude Code से UI animation बनाते समय पहला सवाल यह नहीं होना चाहिए कि “कौन सा effect अच्छा लगेगा।” सही सवाल है: यह movement user की कौन सी confusion कम करेगा? अगर card धीरे से दिखता है, तो वह अगले section की ओर ध्यान ले जा सकता है। Save button छोटा सा response दे, तो user को पता चलता है कि click लिया गया। Loading state साफ हो, तो user को लगता है कि app अटका नहीं है। Safe animation हमेशा feedback है, सिर्फ सजावट नहीं।

Beginner अक्सर Claude Code को लिखते हैं: “इस page को animated बना दो।” इससे demo जल्दी बनता है, लेकिन production page में mobile width, keyboard focus, long headings, code blocks, ads, pricing table, empty state और prefers-reduced-motion जैसी चीजें भी होती हैं। इस article में हम CSS और छोटे JavaScript helper से scroll reveal, button feedback और state update जोड़ेंगे, ताकि code copy-paste करके चल सके और review भी आसान रहे।

Related basics के लिए Claude Code design system, Claude Code responsive design और Claude Code performance optimization देखें। Official references हैं Claude Code docs, MDN CSS animation, MDN Intersection Observer API, MDN prefers-reduced-motion, और web.dev CSS animations। Intersection Observer browser API है जो बताता है कि element viewport में आया या नहीं। prefers-reduced-motion उन users का सम्मान करता है जिन्होंने system में कम motion चुना है।

Claude Code के लिए prompt

Task छोटा रखें। छोटा diff review करना आसान है, पूरी screen का animated redesign मुश्किल।

इस screen में हल्की UI animation जोड़ें।
Scope सिर्फ CTA से पहले वाले cards, loading के बाद दिखने वाला section, और save button feedback है।
Existing components, routes, copy और design tokens न बदलें।
CSS और छोटे JavaScript helper को प्राथमिकता दें। बिना वजह animation library न जोड़ें।
Use case, Pitfall, accessibility, prefers-reduced-motion behavior और 375px mobile result वापस दें।

इस prompt में target, limits और verification साफ हैं। Claude Code को अगर बहुत खुली instruction मिले, तो वह आसपास के layout भी बदल सकता है। Published site में product card, pricing section और consultation form conversion path का हिस्सा होते हैं। Animation को इन paths की मदद करनी चाहिए, उन्हें छिपाना या धीमा नहीं करना चाहिए।

Use case（व्यावहारिक उपयोग）

Use case	उद्देश्य	Animated area	Success signal
Article conversion	Reader को next resource दिखाना	Related cards और CTA	Code पढ़ना या copy करना बाधित नहीं
SaaS dashboard	Save, sync, loading और error clear करना	Buttons, toast, empty state	Meaning सिर्फ color पर निर्भर नहीं
Product page	Price और benefits पर ध्यान ले जाना	Comparison rows और cards	Main CTA visible रहता है
Team review	Claude Code diff audit करना आसान बनाना	Scope और checklist	Intent और risk लिखे जाते हैं

पहला Use case technical article है। Reader code पढ़ने के बाद templates या team help खोज सकता है। ऐसे में ClaudeCodeLab products या Claude Code training की ओर subtle reveal मदद करता है। लेकिन CTA अगर लगातार pulse करे, तो वह code copy करने वाले reader को distract करेगा।

दूसरा Use case dashboard है। Save button click के बाद छोटा response दे और text “Saved” हो जाए, तो user को action समझ आता है। फिर भी animation अकेला signal नहीं होना चाहिए। Visible text, aria-busy, focus style और error message रहने चाहिए।

तीसरा Use case product page है। Pricing और feature comparison में information बहुत होती है। Cards का क्रम से आना helpful है, पर बहुत slow sequence decision को रोकता है। Decorative animation को अक्सर 200 से 500 ms में खत्म करें। User action का feedback लगभग तुरंत दिखना चाहिए।

चौथा Use case team workflow है। Claude Code से हर animation के लिए पूछें कि वह कौन सा Use case serve करती है और कौन सा Pitfall avoid करती है। इससे review “अच्छा लग रहा है या नहीं” से हटकर purpose, accessibility और risk पर आता है।

Implementation model

Safe implementation को तीन layers में रखें।

Layer	Role	Check
HTML	कौन से elements animate होंगे	Heading, text और CTA का meaning बचा है
CSS	Opacity, distance, duration, easing	opacity और transform use हो रहे हैं
JavaScript	Timing और cleanup	reduce motion, fallback और observer disconnect है

HTML में सिर्फ data-reveal और reveal class जोड़ें। CSS common motion style रखेगा। JavaScript सिर्फ is-visible add करेगा। यह pattern Astro, React, Next.js या static page में भी आसानी से जाता है।

Copy-paste HTML

<section class="motion-demo" aria-labelledby="motion-demo-title">
  <p class="eyebrow">ClaudeCodeLab workflow</p>
  <h2 id="motion-demo-title">Safe UI animation rollout</h2>
  <p>
    Claude Code से patch मांगने से पहले purpose, target और verification तय करें।
  </p>

  <div class="motion-grid">
    <article class="reveal" data-reveal>
      <h3>Design</h3>
      <p>एक Use case और एक success condition चुनें।</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Build</h3>
      <p>CSS variables और छोटे JS helper से existing UI सुरक्षित रखें।</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Verify</h3>
      <p>Pitfall, reduce motion, mobile और keyboard checks करें।</p>
    </article>
  </div>

  <a class="motion-cta reveal" data-reveal href="/hi/training/">
    Claude Code training पर बात करें
  </a>
</section>

Copy-paste CSS

CSS में opacity और transform को प्राथमिकता दें। width, height, top, left animate करने से layout work बढ़ सकता है। will-change सिर्फ reveal elements पर रखें।

:root {
  --motion-duration: 420ms;
  --motion-distance: 16px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-border: #d8e2ee;
  --motion-bg: #ffffff;
  --motion-text: #182230;
  --motion-accent: #2563eb;
}

.motion-demo {
  color: var(--motion-text);
  max-width: 920px;
  margin: 48px auto;
  padding: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--motion-accent);
  font-weight: 700;
}

.motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.motion-grid article {
  border: 1px solid var(--motion-border);
  border-radius: 8px;
  background: var(--motion-bg);
  padding: 16px;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--motion-accent);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.motion-cta:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .motion-demo {
    margin: 32px auto;
    padding: 16px;
  }

  .motion-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

Copy-paste JavaScript

यह helper element को एक बार reveal करता है और फिर observe करना बंद कर देता है। अगर Intersection Observer नहीं है या reduce motion active है, content तुरंत दिखता है।

export function setupScrollReveal(root = document) {
  const targets = Array.from(root.querySelectorAll("[data-reveal]"));
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (targets.length === 0) {
    return () => {};
  }

  if (reduceMotion || !("IntersectionObserver" in window)) {
    targets.forEach((target) => target.classList.add("is-visible"));
    return () => {};
  }

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      }
    },
    {
      root: null,
      rootMargin: "0px 0px -10% 0px",
      threshold: 0.1,
    },
  );

  targets.forEach((target) => observer.observe(target));

  return () => observer.disconnect();
}

document.addEventListener("DOMContentLoaded", () => {
  setupScrollReveal();
});

Astro या React में component mount होने के बाद setupScrollReveal() call करें। Modal या tab में बाद में content आए, तो उसी container को root दें ताकि पूरा document scan न हो।

Button feedback example

Button feedback बहुत छोटा रखें। यह code Web Animations API use करता है, लेकिन reduce motion में केवल text और ARIA state बदलता है।

const button = document.querySelector("[data-save-button]");
const status = document.querySelector("[data-save-status]");

button?.addEventListener("click", async () => {
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  button.setAttribute("aria-busy", "true");
  status.textContent = "Saving...";

  if (!reduceMotion) {
    await button.animate(
      [
        { transform: "scale(1)" },
        { transform: "scale(0.97)" },
        { transform: "scale(1)" },
      ],
      { duration: 180, easing: "ease-out" },
    ).finished;
  }

  await new Promise((resolve) => window.setTimeout(resolve, 300));
  button.setAttribute("aria-busy", "false");
  status.textContent = "Saved";
});

जरूरी बात यह है कि movement बंद होने पर भी interface समझ आए। Text बदलता है, focus visible रहता है, और assistive technology DOM से state पढ़ सकती है।

Pitfall（सामान्य गलतियां）

पहला Pitfall unclear intent है। “Premium लगना चाहिए” test नहीं हो सकता। “तीन pricing cards viewport में आने पर दिखें और buy button न छिपे” test हो सकता है।

दूसरा Pitfall लंबी duration है। Article reader code तक जल्दी पहुंचना चाहता है। Product page reader comparison जल्दी देखना चाहता है। Slow sequence page को heavy महसूस कराता है।

तीसरा Pitfall mobile overflow है। translateX(40px) shadows, tables या code blocks के साथ 375px पर horizontal scroll बना सकता है। translateY() को प्राथमिकता दें और 375px, 414px, tablet widths जांचें।

चौथा Pitfall सिर्फ color या shake से error बताना है। Error text, aria-describedby, focus management और visible label जोड़ें।

पांचवां Pitfall पहले library install करना है। Complex timeline में library ठीक है, पर card reveal, toast और button feedback अक्सर CSS और छोटे JS से हो जाते हैं।

छठा Pitfall generated patch को बिना audit merge करना है। Claude Code से changed files, CSS variables, accessibility behavior, rejected alternatives और manual checks लिखवाएं।

Review और verification

Implementation के बाद review-only prompt चलाएं।

सिर्फ current diff review करें। नया feature implement न करें।
इन order में report करें:
1. Accessibility risks
2. Missing prefers-reduced-motion
3. 375px mobile layout risks
4. Performance concerns
5. Existing CSS/components conflicts
6. Manual checks before release
Strict रहें और selector या file बताएं।

Human check में normal motion, reduce motion, keyboard navigation, mobile width, slow network और empty data शामिल करें। DevTools में prefers-reduced-motion emulate करें। देखें कि products और training CTA visible और tap करने योग्य हैं। Code block page को चौड़ा न करे; scroll सिर्फ block के अंदर होना चाहिए।

Conversion path से जोड़ना

UI animation खुद revenue नहीं बनाता। यह user को अगले step तक कम friction के साथ ले जाता है। Individual developers ClaudeCodeLab products से templates और checklists ले सकते हैं। Teams अगर Claude Code को real repo में अपनाना चाहती हैं, तो permissions, CI, review rules, CLAUDE.md और workshop के लिए Claude Code training देख सकती हैं।

Masa ने article जैसे layout में test किया तो सबसे उपयोगी चीज बड़ा hero animation नहीं थी। सबसे उपयोगी था related resource cards और CTA का एक बार शांत तरीके से दिखना। Implementation, review और fix को अलग करने से diff छोटा रहा और जोखिम जल्दी दिखे।

Test करने के बाद परिणाम

यह workflow article-like page पर test किया गया। पहली pass में सिर्फ data-reveal cards, reduced motion support और save button feedback मांगा गया। दूसरी pass सिर्फ review थी: 375px width, keyboard focus, empty data और CTA visibility।

Result यह रहा कि छोटा diff audit करना आसान था। Motion को opacity और transform: translateY() तक सीमित रखने से mobile issues कम हुए। असली सुधार animation की संख्या में नहीं था, बल्कि हर movement के Use case, Pitfall, no-motion fallback और manual check को साफ लिखने में था।