{"success":true,"data":{"block":{"id":"carousel-fullscreen-scroll-fx","name":"Carousel Fullscreen Scroll Effects","title":"Carousel Fullscreen Scroll FX","category":"Carousel","categorySlug":"carousel","description":"A GSAP-powered fullscreen carousel with scroll-triggered animations, pinned sections, and smooth parallax effects. Features immersive full-viewport slides with overlay content and navigation indicators.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295059/auiusd6ddgq17r2z6imi6bawl9ba/carousel-fullscreen-scroll-fx-desktop.png","mobile":"https://cdn.ing/assets/i/r/295060/uzkicw5slkpz53y2wrahhmiokhd6/carousel-fullscreen-scroll-fx-mobile.png"},"componentPath":"blocks/carousel/carousel-fullscreen-scroll-fx.tsx","code":"import { CarouselFullscreenScrollFx } from \"@opensite/ui/blocks/carousel/carousel-fullscreen-scroll-fx\";\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\n\nexport default function Demo() {\n  return (\n    <CarouselFullscreenScrollFx\n      slides={[\n        {\n          id: \"chapter-one\",\n          subtitle: \"Chapter One\",\n          title: \"The Journey Begins\",\n          description:\n            \"Every great story starts with a single step. This is where vision meets execution, where dreams transform into reality through determination and innovation.\",\n          image: imagePlaceholders[8],\n          overlayColor: \"rgba(0, 20, 40, 0.6)\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              asButton: true,\n            },\n            {\n              label: \"Learn More\",\n              href: \"#\",\n              asButton: true,\n              variant: \"outline\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n        },\n        {\n          id: \"chapter-two\",\n          subtitle: \"Chapter Two\",\n          title: \"Breaking Boundaries\",\n          description:\n            \"We challenged conventional thinking and pushed beyond the limits of what was thought possible. Innovation thrives when curiosity meets courage.\",\n          image: imagePlaceholders[31],\n          overlayColor: \"rgba(40, 20, 60, 0.6)\",\n        },\n        {\n          id: \"chapter-three\",\n          subtitle: \"Chapter Three\",\n          title: \"Building Together\",\n          description:\n            \"Success is a team sport. Through collaboration and shared purpose, we created something greater than the sum of its parts.\",\n          image: imagePlaceholders[54],\n          overlayColor: \"rgba(20, 40, 20, 0.6)\",\n        },\n        {\n          id: \"chapter-four\",\n          subtitle: \"Chapter Four\",\n          title: \"Global Impact\",\n          description:\n            \"From local roots to worldwide reach, our mission expanded to touch lives across continents and transform entire industries.\",\n          image: imagePlaceholders[73],\n          overlayColor: \"rgba(60, 30, 10, 0.6)\",\n        },\n        {\n          id: \"chapter-five\",\n          subtitle: \"Chapter Five\",\n          title: \"The Future Awaits\",\n          description:\n            \"This is just the beginning. The next chapter is being written right now, and you're invited to be part of this incredible journey.\",\n          image: imagePlaceholders[96],\n          overlayColor: \"rgba(10, 30, 50, 0.6)\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"slides":{"type":"array","description":"Array of fullscreen slides","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the slide","required":true},"title":{"type":"object","description":"Slide title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Slide subtitle/eyebrow text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"overlayColor":{"type":"string","description":"Overlay color (rgba format)","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"actions":{"type":"array","description":"Array of action configurations","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}},"typeLabel":"FullscreenSlide"},"typeLabel":"FullscreenSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation dots","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","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},"scrollIndicatorClassName":{"type":"string","description":"Additional CSS classes for the scroll indicator","required":false},"counterClassName":{"type":"string","description":"Additional CSS classes for the slide counter","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},"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},"containerMaxWidth":{"type":"string","description":"Optional max width for the content container","typeLabel":"ContainerMaxWidth","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","fullscreen","scroll","gsap","parallax","immersive","storytelling","portfolio","cinematic"],"performance":{},"importantUsageNotes":"Use 3-6 slides in the 'slides' array — this is a fullscreen scroll-fx carousel where each slide requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 3 valid real images. Do not exceed 40 characters for each slide's 'title' prop and 130 characters for each slide's 'description' prop. Per-slide 'actions' are supported; if supplying two actions on a slide, use 'default' variant for the first and 'outline' for the second. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:09.248Z"}