{"success":true,"data":{"block":{"id":"feature-animated-carousel","name":"Feature Animated Carousel","title":"Feature Animated Carousel","category":"Features","categorySlug":"features","description":"An interactive feature carousel with animated transitions between feature cards and images. Features a vertical card list with up/down navigation controls on desktop and horizontal swipe on mobile. Uses Framer Motion for smooth animations. Best for product feature showcases, service highlights, and interactive landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290481/l85gtlbsqgy15m6bu94jlubzviki/feature-animated-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290480/5y4onxoydckfy5ag12zentfm70vh/feature-animated-carousel-mobile.png"},"componentPath":"blocks/features/feature-animated-carousel.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureAnimatedCarousel } from \"@opensite/ui/blocks/features/feature-animated-carousel\";\n\nexport default function Demo() {\n  return (\n    <FeatureAnimatedCarousel\n      title=\"Elevate Your Projects\"\n      description=\"Discover the powerful features that set our platform apart. From lightning-fast performance to seamless scalability, explore how we can help you build, deploy, and manage your applications with ease.\"\n      features={[\n        {\n          title: \"Lightning Fast Performance\",\n          description:\n            \"Optimized for speed with sub-100ms response times globally. Edge computing and intelligent caching ensure your users get the best experience.\",\n          image: imagePlaceholders[51],\n          imageAlt: \"Performance dashboard\",\n          href: \"#\",\n        },\n        {\n          title: \"Enterprise Security\",\n          description:\n            \"Bank-level encryption with SOC 2 Type II compliance. Automated security scanning and regular penetration testing keep your data safe.\",\n          image: imagePlaceholders[75],\n          imageAlt: \"Security features\",\n          href: \"#\",\n        },\n        {\n          title: \"Seamless Scalability\",\n          description:\n            \"From zero to millions of users without configuration. Auto-scaling infrastructure handles demand spikes automatically.\",\n          image: imagePlaceholders[99],\n          imageAlt: \"Scalability metrics\",\n          href: \"#\",\n        },\n        {\n          title: \"Real-Time Collaboration\",\n          description:\n            \"Built-in tools for team communication, code review, and project management. Keep everyone aligned and productive.\",\n          image: imagePlaceholders[36],\n          imageAlt: \"Collaboration tools\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"features":{"type":"array","description":"Array of feature items to display","items":{"type":"object","description":"","fields":{"image":{"type":"string","description":"Image source URL for this feature","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"href":{"type":"string","description":"Optional href for item","required":false}},"typeLabel":"FeatureAnimatedCarouselItem"},"typeLabel":"FeatureAnimatedCarouselItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"blockCardClassName":{"type":"string","description":"CSS classes for the block's card container","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","carousel","animated","interactive","cards","showcase","framer-motion","responsive"],"performance":{},"importantUsageNotes":"Ensure to supply 4–8 items in the 'features' array for a well-paced animated carousel. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:08.955Z"}