{"success":true,"data":{"block":{"id":"blur-vignette-grid","name":"Blur Vignette Grid","title":"Blur Vignette Grid","category":"Gallery","categorySlug":"gallery","description":"A grid gallery with animated blur vignette effect on hover. Features a 5-column grid with varying column spans and CSS blur mask effect that reveals on interaction. Ideal for artistic galleries, photography portfolios, or any visual content that benefits from dramatic hover effects.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290101/1nnz635xwi8ho7s4h42p3c1i0gqf/blur-vignette-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290100/7z3s0umkbu7n0cgsy4dh4dxxm4be/blur-vignette-grid-mobile.png"},"componentPath":"blocks/gallery/blur-vignette-grid.tsx","code":"import { BlurVignetteGrid } from \"@opensite/ui/blocks/gallery/blur-vignette-grid\";\n\nexport default function Demo() {\n  return (\n    <BlurVignetteGrid\n      title=\"Our Portfolio\"\n      description=\"A curated selection of our finest work, showcasing the diversity and quality of projects we've had the privilege to bring to life. Each image represents a unique story of creativity, innovation, and collaboration.\"\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n          alt: \"Photo 1\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n          alt: \"Photo 2\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n          alt: \"Photo 3\",\n          colSpan: 3,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          alt: \"Photo 4\",\n          colSpan: 2,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\",\n          alt: \"Photo 5\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n          alt: \"Photo 6\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          alt: \"Photo 7\",\n          colSpan: 5,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          alt: \"Photo 8\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          alt: \"Photo 9\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n      ]}\n      vignetteConfig={{\n        radius: \"5px\",\n        inset: \"5px\",\n        transitionLength: \"42px\",\n        blur: \"3px\",\n      }}\n      gridColumns={5}\n      gridGap=\"gap-4\"\n      background=\"white\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.8}\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},"images":{"type":"array","description":"Array of images to display in the grid","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"colSpan":{"type":"number","description":"Number of columns to span (1-5)","required":true},"height":{"type":"string","description":"Height class for the image (e.g., \"h-82\", \"h-100\")","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"BlurVignetteGridImage"},"typeLabel":"BlurVignetteGridImage[]","required":false,"mediaHints":{"path":"images[].src","roles":["gallery"],"required":false}},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"vignetteConfig":{"type":"object","description":"Configuration for the blur vignette effect","fields":{"radius":{"type":"string","description":"Border radius of the vignette","required":false},"inset":{"type":"string","description":"Inset distance from edges","required":false},"transitionLength":{"type":"string","description":"Length of the blur transition","required":false},"blur":{"type":"string","description":"Blur intensity","required":false}},"typeLabel":"BlurVignetteConfig","required":false},"gridColumns":{"type":"number","description":"Number of grid columns","required":false},"gridGap":{"type":"string","description":"Gap between grid items","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},"itemClassName":{"type":"string","description":"Additional CSS classes for each grid item","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"title":"Our Portfolio","description":"A curated selection of our finest work, showcasing the diversity and quality of our projects.","gridColumns":5,"gridGap":"gap-4","vignetteConfig":{"radius":"5px","inset":"5px","transitionLength":"42px","blur":"3px"},"background":"white","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 1","colSpan":2,"height":"h-82"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 2","colSpan":3,"height":"h-82"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 3","colSpan":3,"height":"h-100"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 4","colSpan":2,"height":"h-100"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 5","colSpan":5,"height":"h-82"}]},"dependencies":["@opensite/ui"],"tags":["gallery","grid","blur","vignette","hover","artistic","photography","dramatic"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. alt The 'colSpan' values in your image array should sum to multiples of 'gridColumns' (default 5) per row for a neat layout. Common patterns: [2, 3] or [3, 2] per row. The vignette effect is a CSS 'backdrop-filter: blur' mask that is active by default and dissolves on hover. Tweak 'vignetteConfig' props ('radius', 'inset', 'transitionLength', 'blur') to adjust the edge effect. Requires Framer Motion ('framer-motion') to be installed in the consuming app. No built-in lightbox – clicking images has no default action.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["media_library"],"mediaSlots":{"images[].src":{"path":"images[].src","roles":["gallery"],"required":false}}}}},"timestamp":"2026-06-27T20:13:52.538Z"}