fix

src/app/main.tsx

@@ -270,15 +270,14 @@ export default function Main() {
       </div>
 
       <div className={[
-        "flex flex-col w-full pt-4 space-y-3 px-2 text-gray-50 dark:text-gray-50",
+        "flex flex-col w-full pt-4 space-y-2 px-2 text-gray-50 dark:text-gray-50",
         getGame(gameRef.current).className // apply the game theme
       ].join(" ")}>
-        <p className="text-xl">A stable diffusion exploration game. Click on an item to explore a new scene!</p>
         <div className="flex flex-row">
           <div className="text-xl mr-2">
             {rendered.segments.length
-              ? <span>🔎 Clickable items:</span>
-              : <span>⌛ Loading clickable items..</span>
+              ? <span>🔎 Try to click on:</span>
+              : <span>⌛ Searching in the scene..</span>
             }
           </div>
           {clickables.map((clickable, i) => 

src/components/business/renderer.tsx

@@ -36,6 +36,7 @@ export const Renderer = ({
   const [progressPercent, setProcessPercent] = useState(0)
   const progressRef = useRef(0)
   const isLoadingRef = useRef(isLoading)
+  const maskUrl = `data:image/png;base64,${maskBase64}`
 
   useEffect(() => {
     if (maskBase64) {
@@ -212,10 +213,15 @@ export const Renderer = ({
         */
 
   return (
-    <div className="w-full py-8">
+    <div className="w-full pt-2">
       <div
         className={[
-          "relative w-full h-[800px] border-2 border-gray-50 rounded-xl overflow-hidden",
+          "relative border-2 border-gray-50 rounded-xl overflow-hidden",
+          engine.type === "cartesian_video"
+          || engine.type === "cartesian_image"
+            ? "w-[1024px] h-[512px]"
+            : "w-full h-[800px]",
+            
           isLoading
             ? "cursor-wait"
             : actionnable
@@ -236,12 +242,10 @@ export const Renderer = ({
           ? <SphericalImage
               src={assetUrl}
               ref={imgRef as any}
-              width="1024px"
-              height="512px"
               onEvent={handleMouseEvent}
             />
           : <CartesianImage
-              src={assetUrl}
+              src={maskUrl}
               ref={imgRef as any}
               width="1024px"
               height="512px"

src/components/business/spherical-image.tsx

@@ -1,19 +1,14 @@
 import { ForwardedRef, forwardRef } from "react"
 import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
-// import { CubemapAdapter } from "react-photo-sphere-viewer"
 
 import { SceneEventHandler } from "./types"
 
 export const SphericalImage = forwardRef(({
   src,
-  width,
-  height,
   onEvent,
   className,
 }: {
   src: string
-  width: number | string
-  height: number | string
   onEvent: SceneEventHandler
   className?: string
 }, ref: ForwardedRef<HTMLImageElement>) => {