{"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 { 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: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\",\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: \"https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u\",\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: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\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: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"title":"A Complete Platform for Modern Teams","description":"Explore the features that make building and shipping faster than ever before.","features":[{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Visual page builder","title":"Visual Page Builder","description":"Build pages visually with drag-and-drop simplicity.","href":"/features/builder"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI content generation","title":"AI Content Generation","description":"Generate compelling copy in seconds with AI assistance.","href":"/features/ai"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics and reporting","title":"Analytics & Reporting","description":"Track every metric that matters to your business.","href":"/features/analytics"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Global deployment","title":"Global Deployment","description":"Ship to 200+ edge locations in one click.","href":"/features/deploy"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","carousel","animated","interactive","cards","showcase","framer-motion","responsive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description The active item is highlighted in the nav; clicking switches the displayed image with animation.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"features":{"minItems":3,"maxItems":6}}}}},"timestamp":"2026-06-27T19:59:45.276Z"}