{"success":true,"data":{"block":{"id":"masonry-motion-grid","name":"Masonry Motion Grid","title":"Masonry Motion Grid","category":"Gallery","categorySlug":"gallery","description":"An animated masonry grid layout with Framer Motion animations. Features a 4-column grid with staggered heights and alternating animation directions on scroll. Ideal for image galleries, portfolios, photo collections, or any visual content that benefits from dynamic, Pinterest-style layouts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290104/gg1ooye1poevb4dfadoltvo7suq2/masonry-motion-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290103/s0g91nyumkr38op9hpbaqmvru8d6/masonry-motion-grid-mobile.png"},"componentPath":"blocks/gallery/masonry-motion-grid.tsx","code":"import { MasonryMotionGrid } from \"@opensite/ui/blocks/gallery/masonry-motion-grid\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <MasonryMotionGrid\n      title=\"Media Gallery\"\n      description=\"Explore our media gallery featuring a collection of stunning images arranged in a visually engaging layout. Each image is thoughtfully placed to create a harmonious balance of aesthetics and motion.\"\n      column1Images={[\n        {\n          src: imagePlaceholders[0],\n          alt: \"Gallery image 1\",\n          height: \"h-60\",\n        },\n        {\n          src: imagePlaceholders[1],\n          alt: \"Gallery image 2\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[2],\n          alt: \"Gallery image 3\",\n          height: \"h-72\",\n        },\n      ]}\n      column2Images={[\n        {\n          src: imagePlaceholders[3],\n          alt: \"Gallery image 4\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[4],\n          alt: \"Gallery image 5\",\n          height: \"h-60\",\n        },\n        {\n          src: imagePlaceholders[5],\n          alt: \"Gallery image 6\",\n          height: \"h-80\",\n        },\n      ]}\n      column3Images={[\n        {\n          src: imagePlaceholders[6],\n          alt: \"Gallery image 7\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[7],\n          alt: \"Gallery image 8\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[8],\n          alt: \"Gallery image 9\",\n          height: \"h-60\",\n        },\n      ]}\n      column4Images={[\n        {\n          src: imagePlaceholders[9],\n          alt: \"Gallery image 10\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[10],\n          alt: \"Gallery image 11\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[11],\n          alt: \"Gallery image 12\",\n          height: \"h-60\",\n        },\n      ]}\n      animationDuration={0.5}\n      animationDelayMultiplier={0.1}\n      showDuplicateGrid={true}\n      background=\"dark\"\n      spacing=\"py-12 md:py-40\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below title","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"column1Images":{"type":"array","description":"Images for column 1","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column2Images":{"type":"array","description":"Images for column 2","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column3Images":{"type":"array","description":"Images for column 3","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column4Images":{"type":"array","description":"Images for column 4","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"gridSlot":{"type":"object","description":"Custom slot for rendering the grid (overrides column images)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid container","required":false},"columnClassName":{"type":"string","description":"Additional CSS classes for each column","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for each image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"animationDuration":{"type":"number","description":"Animation duration in seconds","required":false},"animationDelayMultiplier":{"type":"number","description":"Animation delay multiplier for staggered effect","required":false},"showDuplicateGrid":{"type":"boolean","description":"Whether to show the duplicate grid below","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","masonry","grid","animated","motion","pinterest","photos","portfolio"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 12 real images from the site's media library. The grid is split across 4 columns: supply exactly 3 images per column ('column1Images', 'column2Images', 'column3Images', 'column4Images') for a total of 12. Each image requires a 'height' Tailwind class (e.g. 'h-60', 'h-72', 'h-80'). All image 'src' values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:15.996Z"}