experimenting view transition

app/components/FeaturedProducts.tsx

@@ -110,12 +110,7 @@ function FeatureProductsContent({
   return (
     <>
       {products.map((product) => (
-        <ProductCard
-          product={product}
-          key={product.id}
-          onClick={onClick}
-          quickAdd
-        />
+        <ProductCard product={product} key={product.id} quickAdd />
       ))}
     </>
   );

app/components/Link.tsx

@@ -38,9 +38,21 @@ export function Link(props: LinkProps) {
 
   if (typeof className === 'function') {
     return (
-      <RemixNavLink to={toWithLocale} className={className} {...resOfProps} />
+      <RemixNavLink
+        unstable_viewTransition
+        to={toWithLocale}
+        className={className}
+        {...resOfProps}
+      />
     );
   }
 
-  return <RemixLink to={toWithLocale} className={className} {...resOfProps} />;
+  return (
+    <RemixLink
+      unstable_viewTransition
+      to={toWithLocale}
+      className={className}
+      {...resOfProps}
+    />
+  );
 }

app/components/ProductCard.tsx

@@ -56,9 +56,12 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <Link
-        onClick={onClick}
+        // onClick={onClick}
         to={`/products/${product.handle}`}
         prefetch="intent"
+        className={({isTransitioning}) => {
+          return isTransitioning ? 'vt-product-image' : '';
+        }}
       >
         <div className={clsx('grid gap-4', className)}>
           <div className="card-image aspect-[4/5] bg-primary/5">

app/components/ProductGallery.tsx

@@ -1,6 +1,7 @@
 import {Image} from '@shopify/hydrogen';
 
 import type {MediaFragment} from 'storefrontapi.generated';
+import clsx from 'clsx';
 
 /**
  * A client component that defines a media gallery for hosting images, 3D models, and videos of products
@@ -48,7 +49,10 @@ export function ProductGallery({
                     ? '(min-width: 48em) 60vw, 90vw'
                     : '(min-width: 48em) 30vw, 90vw'
                 }
-                className="object-cover w-full h-full aspect-square fadeIn"
+                className={clsx(
+                  'object-cover w-full h-full aspect-square',
+                  i === 0 ? 'vt-product-image' : '',
+                )}
               />
             )}
           </div>

app/routes/($locale).products.$productHandle.tsx

@@ -38,9 +38,9 @@ export async function loader({params, request, context}: RouteLoaderArgs) {
     throw new Response('product', {status: 404});
   }
 
-  if (!product.selectedVariant) {
-    throw redirectToFirstVariant({product, request});
-  }
+  // if (!product.selectedVariant) {
+  //   throw redirectToFirstVariant({product, request});
+  // }
 
   // In order to show which variants are available in the UI, we need to query
   // all of them. But there might be a *lot*, so instead separate the variants

app/sections/product-information/index.tsx

@@ -64,8 +64,8 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
                     gallerySize === 'small'
                       ? 'large'
                       : gallerySize === 'large'
-                      ? 'small'
-                      : 'medium'
+                        ? 'small'
+                        : 'medium'
                   ],
                 )}
               >

app/styles/app.css

@@ -166,3 +166,7 @@
     transform-origin: top left;
   }
 }
+
+.vt-product-image {
+  view-transition-name: product-image;
+}