{"success":true,"data":{"block":{"id":"stats-animated-counter","name":"Stats Animated Counter","title":"Stats Animated Counter","category":"Stats","categorySlug":"stats","description":"A stats section featuring animated number counters that trigger when scrolled into view. Each stat displays an optional icon, animated value with prefix/suffix, and label. Uses intersection observer to start the animation only when visible. Ideal for impact sections, achievements, or any metrics that benefit from engaging number animations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288928/2dihbv54sh18i33vb0x430kdzlkd/stats-animated-counter-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288929/q0mz3rzjtncypcevls5kl4n9myl4/stats-animated-counter-mobile.jpg"},"componentPath":"blocks/stats/stats-animated-counter.tsx","code":"import { StatsAnimatedCounter } from \"@opensite/ui/blocks/stats/stats-animated-counter\";\n\nexport default function Demo() {\n  return (\n    <StatsAnimatedCounter\n      heading=\"Our Impact in Numbers\"\n      description=\"See the measurable difference we've made for businesses worldwide\"\n      stats={[\n        {\n          value: 500,\n          suffix: \"+\",\n          label: \"Projects Completed\",\n          icon: \"lucide/folder-check\",\n        },\n        {\n          value: 98,\n          suffix: \"%\",\n          label: \"Client Satisfaction\",\n          icon: \"lucide/heart\",\n        },\n        {\n          value: 50,\n          prefix: \"$\",\n          suffix: \"M+\",\n          label: \"Revenue Generated\",\n          icon: \"lucide/trending-up\",\n        },\n        {\n          value: 24,\n          suffix: \"/7\",\n          label: \"Support Available\",\n          icon: \"lucide/headphones\",\n        },\n      ]}\n      animationDuration={2000}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stats to display with animated counters","items":{"type":"object","description":"","fields":{"value":{"type":"number","description":"The end value for the counter animation","required":true},"prefix":{"type":"string","description":"Prefix for the value (e.g., \"$\", \"+\")","required":false},"suffix":{"type":"string","description":"Suffix for the value (e.g., \"%\", \"K\", \"M\", \"+\")","required":false},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat item","required":false}},"typeLabel":"AnimatedStat"},"typeLabel":"AnimatedStat[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"animationDuration":{"type":"number","description":"Animation duration in milliseconds","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","animated","counter","numbers","scroll","intersection","impact","achievements"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column animated counter layout. The 'value' field must be a real numeric figure — only use real, verifiable stat values from the system; do not invent metrics. Use 'prefix' and 'suffix' to format the display value (e.g., prefix '$', suffix 'M+'). Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:30.225Z"}