{"success":true,"data":{"block":{"id":"process-scroll-image","name":"Process Scroll Image","title":"Process Scroll Image","category":"Process","categorySlug":"process","description":"A scroll-triggered process section with a sticky left panel containing title, description, animated image carousel, and CTA. As users scroll through the numbered steps on the right, the corresponding image animates into view with a clip-path reveal effect. Perfect for visual storytelling and step-by-step guides.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290536/680qw4gmev6cjmc12vu3p9d82fcl/process-scroll-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290537/vwhw8lhv8s60ppxohpyqe3r9zajy/process-scroll-image-mobile.png"},"componentPath":"blocks/process/process-scroll-image.tsx","code":"import { ProcessScrollImage } from \"@opensite/ui/blocks/process/process-scroll-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <ProcessScrollImage\n      heading=\"Build. Test. Launch.\"\n      description=\"Our agile methodology ensures rapid delivery without compromising quality.\"\n      actions={[\n        {\n          label: \"Start Your Project\",\n          href: \"/get-started\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Case Studies\",\n          href: \"/case-studies\",\n          variant: \"outline\",\n        },\n      ]}\n      steps={[\n        {\n          step: \"01\",\n          title: \"Requirements Gathering\",\n          description: \"Comprehensive analysis of business needs, technical requirements, and user expectations. We create detailed specifications that serve as the blueprint for success.\",\n          image: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n        },\n        {\n          step: \"02\",\n          title: \"Architecture Planning\",\n          description: \"Design scalable system architecture that supports growth. We select the right technologies, define data structures, and plan integration points.\",\n          image: \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\",\n        },\n        {\n          step: \"03\",\n          title: \"Iterative Development\",\n          description: \"Build features in focused sprints with continuous feedback loops. Regular demos and stakeholder reviews ensure alignment throughout the process.\",\n          image: \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n        },\n        {\n          step: \"04\",\n          title: \"Automated Testing\",\n          description: \"Comprehensive test coverage including unit tests, integration tests, and end-to-end scenarios. Catch bugs early and maintain code quality.\",\n          image: \"https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx\",\n        },\n        {\n          step: \"05\",\n          title: \"Staged Rollout\",\n          description: \"Gradual deployment strategy with feature flags, monitoring, and rollback capabilities. Minimize risk while maximizing user satisfaction.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image URL for the step","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessScrollImageItem"},"typeLabel":"ProcessScrollImageItem[]","required":true,"minItems":3,"maxItems":6,"mediaHints":{"path":"steps[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"preferredAspect":"4/3","note":"Per-step visual revealed as the user scrolls past each step. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","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},"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},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":220},"steps[].image":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Build. Test. Launch.","description":"Our agile methodology ensures rapid delivery without compromising quality.","actions":[{"label":"Start Your Project","href":"/get-started","variant":"default"},{"label":"View Case Studies","href":"/case-studies","variant":"outline"}],"steps":[{"step":"01","title":"Requirements Gathering","description":"Comprehensive analysis of business needs.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"02","title":"Architecture Planning","description":"Design scalable system architecture.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"03","title":"Iterative Development","description":"Build features in focused sprints.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"04","title":"Staged Rollout","description":"Gradual deployment with rollback capabilities.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}],"spacing":"xl","background":"white"},"dependencies":["@opensite/ui"],"tags":["process","scroll","animation","image","carousel","interactive","visual","storytelling","steps"],"performance":{},"importantUsageNotes":"Each step's image transitions with a spring animation as the user scrolls past it. Provide a real absolute image URL for every step — steps without images will show a blank panel. Keep 3–6 steps for best scroll pacing. image must be a direct absolute URL string, not a ReactNode.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":60},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":6},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":220},"steps[].image":{"required":true,"note":"Absolute URL to a real image. Required for the scroll-triggered image reveal to work."}},"mediaSlots":{"steps[].image":{"path":"steps[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"preferredAspect":"4/3","note":"Per-step visual revealed as the user scrolls past each step. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T19:53:09.633Z"}