{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n          alt: \"Gallery image 1\",\n          height: \"h-60\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n          alt: \"Gallery image 2\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n          alt: \"Gallery image 3\",\n          height: \"h-72\",\n        },\n      ]}\n      column2Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          alt: \"Gallery image 4\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\",\n          alt: \"Gallery image 5\",\n          height: \"h-60\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n          alt: \"Gallery image 6\",\n          height: \"h-80\",\n        },\n      ]}\n      column3Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          alt: \"Gallery image 7\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          alt: \"Gallery image 8\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          alt: \"Gallery image 9\",\n          height: \"h-60\",\n        },\n      ]}\n      column4Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\",\n          alt: \"Gallery image 10\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n          alt: \"Gallery image 11\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\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,"mediaHints":{"path":"column1Images[].src","roles":["gallery"],"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}},"exampleProps":{"title":"Media Gallery","description":"Explore our media gallery featuring a collection of stunning images in a visually engaging layout.","showDuplicateGrid":false,"background":"dark","spacing":"lg","column1Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 1","height":"h-60"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 2","height":"h-80"}],"column2Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 3","height":"h-72"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 4","height":"h-60"}],"column3Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 5","height":"h-80"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 6","height":"h-72"}],"column4Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 7","height":"h-72"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 8","height":"h-80"}]},"dependencies":["@opensite/ui"],"tags":["gallery","masonry","grid","animated","motion","pinterest","photos","portfolio"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. column2Images column3Images column4Images'. Each image object requires 'src alt Column 1 and 3 animate upward ('y: 50 → 0'); column 2 and 4 animate downward ('y: -50 → 0') for a natural wave effect. Provide 2–4 images per column for a balanced layout. 'showDuplicateGrid' (default 'true') renders an identical second grid below the first – set to 'false' for shorter galleries. Requires Framer Motion ('framer-motion') to be installed in the consuming app.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["media_library"],"mediaSlots":{"column1Images[].src":{"path":"column1Images[].src","roles":["gallery"],"required":false}}}}},"timestamp":"2026-06-27T19:59:54.103Z"}