এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কেস স্টাডি: কীভাবে Google তার নতুন এআই মোডের জন্য ভিউ ট্রানজিশন ব্যবহার করে একটি সংযুক্ত অভিজ্ঞতা তৈরি করেছে

Jason Michelson

Bramus

প্রকাশিত: আগস্ট 28, 2025

Google সার্চ বিশ্বের সবচেয়ে বড় প্রাপ্তিগুলির মধ্যে একটি, তাই আমাদের ব্যবহারকারীর অভিজ্ঞতার পরিবর্তনগুলি কোটি কোটি ব্যবহারকারীর উপর প্রভাব ফেলতে পারে৷ আমরা দীর্ঘদিন ধরে এমন একটি ওয়েব অভিজ্ঞতার স্বপ্ন দেখেছি যা আরও আধুনিক এবং অ্যাপের মতো মনে হয়৷ যখন এআই মোডে বিকাশ শুরু হয়, তখন আমরা আমাদের ব্যবহারকারীদের জন্য এমন একটি অভিজ্ঞতা তৈরি করতে চেয়েছিলাম যেখানে স্ট্যান্ডার্ড অনুসন্ধান থেকে এআই মোডে রূপান্তর বিরামহীন এবং সংযুক্ত অনুভূত হয়। যখন আমরা ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সম্পর্কে শুনেছিলাম তখন আমরা জানতাম যে এটি বৈশিষ্ট্যের জন্য একটি নিখুঁত জুড়ি ছিল। এই কেস স্টাডি শেয়ার করে যে আমরা AI মোড লঞ্চের পাশাপাশি ট্রানজিশন বৈশিষ্ট্য যোগ করে যা শিখেছি।

Google অনুসন্ধানে একটি অনুসন্ধানের রেকর্ডিং, অনুসন্ধান ফলাফল থেকে এআই মোডে স্যুইচ করা। রূপান্তরটি ভিউ ট্রানজিশন ব্যবহার করছে।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন হল একটি গেম চেঞ্জার যখন এটি নেটিভ ব্রাউজার টুলিংয়ের ক্ষেত্রে আসে এবং আমরা এটি দেখতে আগ্রহী যে এটি কীভাবে ওয়েবকে সামনের দিকে রূপ দেবে৷

Browser Support

Source

স্থিতাবস্থা পরিবর্তন

Google অনুসন্ধানে কঠোর এবং রক্ষণশীল ব্রাউজার সমর্থন প্রয়োজনীয়তা রয়েছে। সাধারণত, একটি সীমিত প্রাপ্যতা বৈশিষ্ট্য ব্যবহার সীমা বন্ধ করা হয়েছে। ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, আমরা দেখতে পেলাম যে একটি পলিফিল টেনেবল ছিল না, প্রধান ব্লকার হল যে কোনও পিক্সেল স্ন্যাপশটিং API ছিল না এবং পুরো ভিউপোর্ট ক্লোন করার ক্ষেত্রে বড় পারফরম্যান্স সমস্যা ছিল। অতএব, একটি প্রগতিশীল বর্ধিতকরণ হিসাবে বৈশিষ্ট্যটি ব্যবহার করা ছিল AI মোডের পাশাপাশি চালু করার সর্বোত্তম উপায়। যেহেতু ভিউ ট্রানজিশন দ্বারা তৈরি অ্যানিমেশনগুলি সরাসরি ওয়েবসাইটের কার্যকারিতাকে প্রভাবিত করে না, অসমর্থিত ট্র্যাফিকের জন্য সেগুলি কেবল অক্ষম করা হবে, যা ইতিমধ্যেই ট্রানজিশন অ্যানিমেশন ছাড়াই বর্তমান উত্পাদন অবস্থা ছিল৷

আমরা প্রথমে আমাদের অভ্যন্তরীণ ব্যবহারকারীদের সাথে এই প্রগতিশীল বর্ধিতকরণ কৌশলটি পরীক্ষা করেছি। এটি আমাদের প্রাথমিক প্রতিক্রিয়া প্রদান করেছে, যা ছিল ব্যাপকভাবে ইতিবাচক। প্রাপ্ত প্রতিক্রিয়াটি বাগগুলিও প্রকাশ করেছে, যার মধ্যে পারফরম্যান্সের সমস্যা এবং অন্যান্য বৈশিষ্ট্যগুলির সাথে অপ্রত্যাশিত মিথস্ক্রিয়া যেমন ওভারল্যাপিং স্ট্যাকিং প্রসঙ্গে।

আমরা এই কৌশলটি সফল বলে মনে করেছি এবং আমি বিশ্বাস করি যে আমরা সামনের অন্যান্য নতুন ব্রাউজার বৈশিষ্ট্যগুলির সাথে এটি চেষ্টা করব।

অসুবিধা আমরা সম্মুখীন, এবং তাদের সমাধান

লেটেন্সি, রেন্ডার ব্লকিং এবং ওয়াচডগ টাইমার

সামগ্রিকভাবে, এমপিএ ভিউ ট্রানজিশনের সাথে যোগ করা লেটেন্সি 99% ব্যবহারের ক্ষেত্রে নগণ্য, বিশেষ করে আধুনিক হার্ডওয়্যারে। যাইহোক, যখন লেটেন্সি আসে তখন Google অনুসন্ধানের একটি অত্যন্ত উচ্চ বার রয়েছে এবং আমরা ব্যবহারকারীর অভিজ্ঞতা তৈরি করার চেষ্টা করি যা সমস্ত ডিভাইসে ভাল কাজ করে। আমাদের জন্য, এমনকি কিছু অতিরিক্ত মিলিসেকেন্ডও গুরুত্বপূর্ণ, তাই কারও জন্য ব্যবহারকারীর অভিজ্ঞতার ক্ষতি না করে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি কীভাবে সঠিকভাবে প্রয়োগ করা যায় সেগুলিতে আমাদের বিনিয়োগ করতে হয়েছিল।

রেন্ডার ব্লকিং এমন একটি কৌশল যা ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের সাথে ভালভাবে জোড়া দেয়। ইনকামিং ডকুমেন্টের ছদ্ম-উপাদান স্ন্যাপশটগুলি শুধুমাত্র সেই বিষয়বস্তু প্রদর্শন করতে পারে যা ইতিমধ্যে রেন্ডার করা হয়েছে। অতএব, ইনকামিং ডকুমেন্ট থেকে কন্টেন্ট অ্যানিমেট করতে, আপনি যে টার্গেট এলিমেন্ট অ্যানিমেট করতে চান তা রেন্ডার না হওয়া পর্যন্ত আপনাকে ব্লক রেন্ডার করতে হবে। এটি করার জন্য একটি HTMLLinkElement এ blocking অ্যাট্রিবিউট ব্যবহার করুন। রেন্ডার ব্লকিং এর ত্রুটি রয়েছে কারণ ইনকামিং ডকুমেন্টের DOM ট্রির শেষের দিকে থাকা একটি উপাদানের জন্য অপেক্ষা করলে তা যথেষ্ট লেটেন্সি প্রভাব ফেলতে পারে। আমাদের সেই অনুযায়ী এই ট্রেডঅফের ভারসাম্য বজায় রাখতে হয়েছিল এবং শুধুমাত্র সেই উপাদানগুলির উপর ব্লক রেন্ডার করতে হয়েছিল যা পৃষ্ঠার জীবনচক্রের প্রথম দিকে রেন্ডার করে।

<!-- Link tag in the <head> of the incoming document -->
<link blocking="render" href="#target-id" rel="expect">

<!-- Element you want to animate in the <body> of the incoming document -->
<div id="target-id">
  some content
</div>

কিছু ক্ষেত্রে, আপনি কোন উপাদানটিতে ব্লক রেন্ডার করেছেন সে সম্পর্কে সুনির্দিষ্ট হওয়া যথেষ্ট ছিল না। কিছু ডিভাইস বা সংযোগগুলি এখনও DOM ট্রির শুরুতে একটি উপাদানে ব্লক করা রেন্ডার করলেও অতিরিক্ত বিলম্ব দেখতে পাবে। এই কেসগুলি পরিচালনা করার জন্য আমরা একটি ওয়াচডগ টাইমার স্ক্রিপ্ট লিখেছিলাম যাতে একটি নির্দিষ্ট সময় অতিবাহিত হওয়ার পরে HTMLLinkElement অপসারণ করা হয় যাতে ইনকামিং ডকুমেন্টের রেন্ডারিং আনব্লক করা যায়৷

এটি করার একটি সহজ উপায় নিম্নরূপ:

function unblockRendering() {
  const renderBlockingElements = document.querySelectorAll(
    'link[blocking=render]',
  );
  for (const element of renderBlockingElements) {
    element.remove();
  }
}

const timeToUnblockRendering = t - performance.now();

if (timeToUnblockRendering > 0) {
  setTimeout(unblockRendering, timeToUnblockRendering);
} else {
  unblockRendering();
}

কভারেজ সীমাবদ্ধতা

আমরা যে আরেকটি সমস্যার সম্মুখীন হয়েছি তা হল ক্রস-ডকুমেন্ট ভিউ নিয়মে navigation: auto ঘটে। শুধুমাত্র নির্দিষ্ট ক্লিক টার্গেটে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সক্ষম করার সুযোগের কোনো অন্তর্নির্মিত উপায় নেই। যেহেতু এটি এত বড় পরিবর্তন, আমরা Google অনুসন্ধানে 100% নেভিগেশনে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সক্ষম করতে পারিনি৷ ব্যবহারকারী কোন বৈশিষ্ট্যের সাথে ইন্টারঅ্যাক্ট করছে তার উপর নির্ভর করে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলিকে গতিশীলভাবে সক্ষম বা অক্ষম করার জন্য আমাদের একটি উপায় প্রয়োজন। আমাদের ক্ষেত্রে, আমরা এগুলিকে শুধুমাত্র এআই মোডে এবং থেকে মোড পরিবর্তনের জন্য সক্ষম করেছি। কোন টার্গেটে ক্লিক বা ট্যাপ করা হয়েছে তার উপর নির্ভর করে আমরা ন্যাভিগেশন অ্যাট-রুল প্রোগ্রাম্যাটিকভাবে আপডেট করে তা করেছি।

ভিউ ট্রানজিশন এ-রুল টগল করার একটি উপায় নিম্নরূপ:

let viewTransitionAtRule: HTMLElement | undefined;
const DISABLED_VIEW_TRANSITION = '@view-transition{navigation:none;}';
const ENABLED_VIEW_TRANSITION = '@view-transition{navigation:auto;}';

function getVtAtRule(): HTMLElement {
  if (!viewTransitionAtRule) {
    viewTransitionAtRule = document.createElement('style');
    document.head.append(viewTransitionAtRule);
  }
  return viewTransitionAtRule;
}

function disableVt() {
  getVtAtRule().textContent = DISABLED_VIEW_TRANSITION;
}

function enableVt() {
  getVtAtRule().textContent = ENABLED_VIEW_TRANSITION;
}

জ্যাঙ্ক এবং সংমিশ্রিত অ্যানিমেশন

ভিউ ট্রানজিশন সিউডো-এলিমেন্টে কিছু স্বয়ংক্রিয়ভাবে তৈরি অ্যানিমেশনগুলি পুরানো ডিভাইসগুলিতে ফ্রেম ড্রপ করে, আমরা ব্যবহারকারীদের অফার করতে চাই এমন পরিষ্কার, নির্বিঘ্ন অভিজ্ঞতার ক্ষতি করে৷ অ্যানিমেশনগুলির কর্মক্ষমতা উন্নত করতে, আমরা অ্যানিমেশন কৌশলগুলি ব্যবহার করে সেগুলি পুনরায় লিখি যা কম্পোজিটরে চলতে পারে৷ আমরা স্ন্যাপশটের আগে এবং পরে ছদ্ম-উপাদানগুলির মাত্রা পেতে কীফ্রেমগুলি পরিদর্শন করে এবং সেই অনুযায়ী কীফ্রেমগুলি পুনরায় লেখার জন্য ম্যাট্রিক্স গণিত ব্যবহার করে তা করতে সক্ষম হয়েছি। নিম্নলিখিত উদাহরণ দেখায় কিভাবে প্রতিটি ভিউ ট্রানজিশন সিউডো-এলিমেন্টের জন্য অ্যানিমেশন ধরতে হয়:

const pseudoElement = `::view-transition-group(${name})`;
const animation = document
  .getAnimations()
  .find(
    (animation) =>
      (animation.effect as KeyframeEffect)?.pseudoElement === pseudoElement,
  );

ভিউ ট্রানজিশন অ্যাপ্লায়েড-এ পারফরম্যান্ট ভিউ ট্রানজিশন কীফ্রেম লেখার বিষয়ে আরও পড়ুন: স্ন্যাপশট ধারণকারী ব্লকের সাথে ডিল করা ।

অন্যান্য জিনিসের জন্য সতর্ক থাকুন

আরও বিশিষ্ট সমস্যাগুলির মধ্যে একটি হল view-transition-name CSS প্রোপার্টি সহ ট্যাগিং উপাদানগুলি স্ট্যাকিং প্রসঙ্গকে প্রভাবিত করে ( ট্রানজিশন স্পেসিফিকেশন দেখুন: বিভাগ 2.1.1 )। এটি একাধিক বাগগুলির উত্স ছিল যার জন্য কনটেইনার উপাদানগুলির z-index সংশোধন করা প্রয়োজন।

আরেকটা বিষয় সচেতন হতে হবে যে আপনি ডিফল্টরূপে উপাদানগুলিতে view-transition-name মান যোগ করতে চান না। গুগল সার্চে অনেক লোক কাজ করছে। view-transition-name মানগুলিকে প্রতিরোধ করার জন্য আমাদের টিম যে মানগুলির সাথে সাংঘর্ষিক উপাদানগুলির উপর অন্য দলের লোকেরা ব্যবহার করতে পারে তা প্রতিরোধ করতে, আমরা একটি নির্দিষ্ট ভিউ ট্রানজিশন টাইপ সক্রিয় থাকাকালীন শর্তসাপেক্ষে view-transition-name বৈশিষ্ট্য যুক্ত করার জন্য ভিউ ট্রানজিশন প্রকারগুলি ব্যবহার করেছি৷

ai-mode ভিউ ট্রানজিশন টাইপ সক্রিয় থাকলেই the-element view-transition-name যোগ করার উদাহরণ CSS:

html:active-view-transition-type(ai-mode) {
  #target {
    view-transition-name: the-element;
  }
}

একবার আপনার সমস্ত ভিউ ট্রানজিশনের জন্য এই CSS নিয়মগুলি চালু হয়ে গেলে, আপনি pageswap এবং pagereveal ইভেন্টের সময় যেকোনো নেভিগেশনের জন্য বর্তমান ভিউ ট্রানজিশনের ধরন পরিবর্তন করতে পারেন।

pageswap ইভেন্টের সময় ভিউ ট্রানজিশন টাইপ ai-mode আপডেট করার উদাহরণ।

function updateViewTransitionTypes(
  event: ViewTransitionEvent,
  types: string[],
): void {
  event.viewTransition.types.clear();
  for (const type of types) {
    event.viewTransition.types.add(type);
  }
}

window.addEventListener(
  'pageswap',
  (e) => {
    updateViewTransitionTypes(
      e as ViewTransitionEvent,
      ['ai-mode'],
    );
  }
);

এইভাবে আমরা নামকরণ সংঘর্ষ প্রতিরোধ করি এবং অপ্রয়োজনীয়ভাবে স্ন্যাপশট এলিমেন্ট করি না যেগুলি এআই মোডে যাওয়া এবং যাওয়ার অংশ হিসাবে স্ন্যাপশট করার প্রয়োজন নেই।

সবশেষে, কোনো স্ট্যাকিং প্রসঙ্গ সমস্যা শুধুমাত্র ভিউ ট্রানজিশনের সময় উপস্থিত থাকবে। এই সমস্যাগুলি সমাধান করার জন্য, আমরা ভিউ ট্রানজিশন ব্যবহার করার সময় এই সমস্যাটি সমাধান করার একমাত্র কারণের জন্য মূল উপাদানগুলির z-সূচকগুলিকে নির্বিচারে সংশোধন করার পরিবর্তে জেনারেট করা সিউডো উপাদানগুলির z-সূচকগুলিকে লক্ষ্য করতে পারি।

::view-transition-group(the-element) {
  z-index: 100;
}

এরপর কি

Google অনুসন্ধানের জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন ব্যবহার করার পরিকল্পনা আছে, যার মধ্যে নেভিগেশন এপিআই ক্রস-ব্রাউজার উপলব্ধ হয়ে গেলে এর সাথে ইন্টিগ্রেশন সহ। আমরা পরবর্তী নির্মাণ শেষ কি দেখতে টিউন থাকুন!