{"success":true,"data":{"block":{"id":"carousel-animated-sections","name":"Carousel Animated Sections","title":"Carousel Animated Sections","category":"Carousel","categorySlug":"carousel","description":"A fullscreen section carousel with smooth animated transitions between slides. Features click-to-advance navigation, progress indicators, and content overlays with CTAs. Perfect for immersive storytelling experiences.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289109/kn7njl53hgft99n489wb3azustqt/carousel-animated-sections-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289108/qgfrf5zsj38whcvv8d2dngx4cbgs/carousel-animated-sections-mobie.jpg"},"componentPath":"blocks/carousel/carousel-animated-sections.tsx","code":"import { CarouselAnimatedSections } from \"@opensite/ui/blocks/carousel/carousel-animated-sections\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselAnimatedSections\n      sections={[\n        {\n          id: \"innovation\",\n          subtitle: \"Technology Leadership\",\n          title: \"Building the Future of AI\",\n          description:\n            \"Explore groundbreaking innovations that transform how businesses harness artificial intelligence to solve complex challenges and unlock new opportunities.\",\n          image: imagePlaceholders[42],\n          ctaText: \"Discover Our Platform\",\n          ctaHref: \"#platform\",\n        },\n        {\n          id: \"design\",\n          subtitle: \"Creative Excellence\",\n          title: \"Design That Inspires Action\",\n          description:\n            \"Experience stunning visual narratives crafted with precision and purpose. Our design philosophy merges aesthetics with functionality to create memorable digital experiences.\",\n          image: imagePlaceholders[67],\n          ctaText: \"View Our Work\",\n          ctaHref: \"#portfolio\",\n        },\n        {\n          id: \"performance\",\n          subtitle: \"Speed & Efficiency\",\n          title: \"Lightning-Fast Performance\",\n          description:\n            \"Built on cutting-edge infrastructure that delivers millisecond response times. Every interaction is optimized for speed, reliability, and seamless user experience.\",\n          image: imagePlaceholders[89],\n          ctaText: \"See Benchmarks\",\n          ctaHref: \"#performance\",\n        },\n        {\n          id: \"security\",\n          subtitle: \"Enterprise Security\",\n          title: \"Fort Knox-Level Protection\",\n          description:\n            \"Your data is protected by military-grade encryption and multi-layered security protocols. We meet the highest compliance standards across all major industries.\",\n          image: imagePlaceholders[103],\n          ctaText: \"Security Details\",\n          ctaHref: \"#security\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"sections":{"type":"array","description":"Array of sections","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the section","required":true},"title":{"type":"object","description":"Section title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Section subtitle","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Section description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"ctaText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaHref":{"type":"string","description":"CTA button href","required":false},"ctaOnClick":{"type":"object","description":"CTA button onClick handler","typeLabel":"() => void","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"AnimatedSection"},"typeLabel":"AnimatedSection[]","required":false},"sectionsSlot":{"type":"object","description":"Custom slot for rendering sections (overrides sections array)","typeLabel":"React.ReactNode","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions","typeLabel":"React.ReactNode","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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation dots","required":false},"arrowsClassName":{"type":"string","description":"Additional CSS classes for the arrow navigation","required":false},"counterClassName":{"type":"string","description":"Additional CSS classes for the counter","required":false},"slideMediaOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on slide media","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"slideMediaBrightness":{"type":"string","description":"Granular control of brightness for slide media (deprecated - prefer slideMediaOverlayIntensity)\nValues 10-40 use arbitrary Tailwind values for finer control on bright images","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","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","slider","fullscreen","animated","transitions","storytelling","hero","sections","immersive"],"performance":{},"importantUsageNotes":"Use 3-6 sections in the 'sections' array — each section requires a real image URL for the full-bleed background. Do not exceed 40 characters for each section's 'title' prop. Do not exceed 130 characters for each section's 'description' prop. DO NOT USE this block if you don't have at least 3 valid real images. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:02.673Z"}