{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[0],\n          alt: \"Photo 1\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[1],\n          alt: \"Photo 2\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[2],\n          alt: \"Photo 3\",\n          colSpan: 3,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[3],\n          alt: \"Photo 4\",\n          colSpan: 2,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[4],\n          alt: \"Photo 5\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[5],\n          alt: \"Photo 6\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[6],\n          alt: \"Photo 7\",\n          colSpan: 5,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[7],\n          alt: \"Photo 8\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[8],\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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","grid","blur","vignette","hover","artistic","photography","dramatic"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 9 real images from the site's media library. Provide exactly 9 items in the 'images' array to match the demo grid layout (5-column spanning grid). Each item requires a 'colSpan' (spanning 2 or 3 columns within a 5-column grid) and a 'height' Tailwind class; follow the demo's alternating pattern closely. 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:44:16.883Z"}