feat: use Cobe, enable Zoom-in to hover on the image

app/page.tsx

@@ -1,4 +1,4 @@
-import Bridge from '@/components/Brigde'
+import Cobe from '@/components/Cobe'
 import Gallery from '@/components/Gallery'
 
 const title = 'NEXT VALHALLA STARTER'
@@ -11,10 +11,10 @@ export default function Home() {
     <>
       <main className="mx-auto max-w-[1960px] p-4">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          <div className="after:content shadow-highlight after:shadow-highlight relative col-span-1 row-span-3 flex flex-col items-center justify-end gap-4 overflow-hidden rounded-lg border bg-card px-6 pb-16 pt-64 text-center after:pointer-events-none after:absolute after:inset-0 after:rounded-lg sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-0">
+          <div className="relative col-span-1 row-span-3 flex flex-col items-center justify-end gap-4 overflow-hidden rounded-lg border bg-card px-6 pb-16 pt-64 text-center after:pointer-events-none after:absolute after:inset-0 after:rounded-lg sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-0">
             <div className="absolute inset-0 flex items-center justify-center opacity-20">
               <span className="flex max-h-full max-w-full items-center justify-center">
-                <Bridge />
+                <Cobe />
               </span>
               <span className="absolute inset-x-0 bottom-0 h-[400px] bg-gradient-to-b from-card/0 via-card to-card"></span>
             </div>

components/Cobe.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import createGlobe from 'cobe'
+import { useEffect, useRef } from 'react'
+
+export default function Cobe() {
+  const canvasRef = useRef()
+
+  useEffect(() => {
+    let phi = 0
+    let width = 600
+
+    // Full API: https://cobe.vercel.app/docs/api
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: width * 2,
+      height: width * 2,
+      phi: 0,
+      theta: -0.1,
+      dark: 1,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [{ location: [21.18541, 106.07503], size: 0.04 }],
+      onRender: (state) => {
+        state.phi = phi
+        phi += 0.01
+      },
+    })
+
+    return () => {
+      globe.destroy()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: 600, height: 600, maxWidth: '100%', aspectRatio: 1 }}
+    />
+  )
+}

components/Gallery.tsx

@@ -24,22 +24,22 @@ async function ImageMetaFetcher(pattern: string) {
   return images
 }
 
-const images = await ImageMetaFetcher('public/gallery/*.{jpg,jpeg,png}')
+const images = await ImageMetaFetcher('public/gallery/*.{jpg,jpeg,png,webp}')
 
 export default function Gallery() {
   return images.map(({ src, height, width, base64 }) => (
     <Dialog>
       <DialogTrigger asChild>
         <AspectRatio
           ratio={3 / 2}
-          className="after:content after:shadow-highlight group relative cursor-zoom-in after:pointer-events-none after:absolute after:inset-0 after:rounded-lg"
+          className="group relative cursor-zoom-in overflow-hidden rounded-lg after:pointer-events-none after:absolute after:inset-0"
         >
           <Image
             src={src}
             placeholder="blur"
             blurDataURL={base64}
             alt="Photo from Unsplash"
-            className="rounded-lg object-cover brightness-90 transition will-change-auto group-hover:brightness-110"
+            className="object-cover transition will-change-auto group-hover:scale-110"
             fill
           />
         </AspectRatio>
@@ -56,7 +56,7 @@ export default function Gallery() {
           height={height}
           width={width}
           alt="Photo from Unsplash"
-          className="object-contain sm:rounded-lg"
+          className="rounded-lg object-contain"
         />
       </DialogContent>
     </Dialog>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area44/next-valhalla-starter",
-  "version": "23.9.18",
+  "version": "23.9.21",
   "private": true,
   "description": "An image gallery starter built with Next.js",
   "author": "AREA44",
@@ -16,6 +16,7 @@
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "clsx": "^2.0.0",
+    "cobe": "^0.6.3",
     "glob": "^10.3.4",
     "lucide-react": "^0.279.0",
     "next": "^13.5.1",