{"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\";\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:\n            \"https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg\",\n          ctaText: \"Discover Our Platform\",\n          ctaHref: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc\",\n          ctaText: \"View Our Work\",\n          ctaHref: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo\",\n          ctaText: \"See Benchmarks\",\n          ctaHref: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n          ctaText: \"Security Details\",\n          ctaHref: \"#\",\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}},"exampleProps":{"sections":[{"id":"innovation","subtitle":"Technology Leadership","title":"Building the Future of AI","description":"Explore groundbreaking innovations that transform how businesses harness artificial intelligence.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","ctaText":"Discover Our Platform","ctaHref":"#platform"},{"id":"design","subtitle":"Creative Excellence","title":"Design That Inspires Action","description":"Experience stunning visual narratives crafted with precision and purpose.","image":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","ctaText":"View Our Work","ctaHref":"#portfolio"},{"id":"performance","subtitle":"Speed & Efficiency","title":"Lightning-Fast Performance","description":"Built on cutting-edge infrastructure that delivers millisecond response times.","image":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","ctaText":"See Benchmarks","ctaHref":"#performance"}],"background":"dark","spacing":"py-0"},"dependencies":["@opensite/ui"],"tags":["carousel","slider","fullscreen","animated","transitions","storytelling","hero","sections","immersive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each section requires a unique 'id' string and an 'image' absolute URL. Supports 2–6 sections; fewer than 2 sections defeats the carousel purpose. The component is full-screen (h-screen) — do not wrap in a height-constrained container. CTA text/href are per-slide; alternatively use the top-level 'actions' array for shared CTA buttons. Default background is 'dark'; slide images render with a high-intensity gradient overlay for readability.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T19:57:38.997Z"}