@morphika/andami 0.2.3 → 0.2.4

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -250,7 +250,13 @@ export default function ProjectGridBlockRenderer({
           observer.disconnect();
         }
       },
-      { threshold: 0.05 },
+      {
+        threshold: 0.01,
+        // Trigger 200px before the grid scrolls into view so cards
+        // start animating just before the user sees them (especially
+        // on mobile where the grid may sit just below the fold).
+        rootMargin: "200px 0px",
+      },
     );
 
     observer.observe(el);
@@ -438,9 +444,12 @@ const ProjectCard = memo(function ProjectCard({
   const handlePlay = useCallback(() => setIsPlaying(true), []);
   const handlePause = useCallback(() => setIsPlaying(false), []);
 
-  // Scale transform
-  const scaleTransform =
-    hoverEffect === "scale" && hovered ? "scale(1.03)" : "scale(1)";
+  // Scale hover: applied to an inner content wrapper so the zoom is
+  // visible inside the card's borderRadius + overflow:hidden boundary
+  // (the parent masonry cell also clips, so scaling the card wrapper
+  // itself would be invisible).
+  const contentScale =
+    hoverEffect === "scale" && hovered ? "scale(1.05)" : "scale(1)";
 
   return (
     <Link
@@ -459,15 +468,22 @@ const ProjectCard = memo(function ProjectCard({
           height: "100%",
           overflow: "hidden",
           borderRadius: radius,
+          // 3D tilt: applied on the card wrapper (set via handleMouseMove)
           transition:
             hoverEffect === "3d"
               ? "transform 100ms ease-out"
-              : hoverEffect === "scale"
-                ? "transform 300ms ease"
-                : undefined,
-          transform: hoverEffect === "scale" ? scaleTransform : undefined,
+              : undefined,
         }}
       >
+        {/* Inner content wrapper — receives scale hover transform */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            transition: hoverEffect === "scale" ? "transform 300ms ease" : undefined,
+            transform: hoverEffect === "scale" ? contentScale : undefined,
+          }}
+        >
         {/* Thumbnail image */}
         {imgSrc ? (
           <img
@@ -532,7 +548,9 @@ const ProjectCard = memo(function ProjectCard({
           />
         )}
 
-        {/* Subtitle overlay */}
+        </div>{/* end inner content wrapper */}
+
+        {/* Subtitle overlay — outside the scale wrapper so text stays crisp */}
         {showSubtitle && (
           <div
             style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",