{"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":true,"minItems":2,"maxItems":8},"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},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Impact in Numbers","description":"See the measurable difference we've made for businesses worldwide","stats":[{"value":500,"suffix":"+","label":"Projects Completed","icon":"lucide/folder-check"},{"value":98,"suffix":"%","label":"Client Satisfaction","icon":"lucide/heart"},{"value":50,"prefix":"$","suffix":"M+","label":"Revenue Generated","icon":"lucide/trending-up"},{"value":24,"suffix":"/7","label":"Support Available","icon":"lucide/headphones"}],"animationDuration":2000},"dependencies":["@opensite/ui"],"tags":["stats","animated","counter","numbers","scroll","intersection","impact","achievements"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The 'value' prop is a NUMBER — the counter animates from 0 to this value on scroll. Use 'prefix' and 'suffix' strings to build the full display (e.g. prefix='$', value=50, suffix='M} ${'). The grid renders 4 columns on large screens — provide 4 stats for best visual balance. Icon names use 'prefix/name' format (e.g. 'lucide/users').","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid."},"stats[].value":{"required":true,"note":"Number that the counter animates to. Source-backed."},"stats[].label":{"required":true,"note":"Short label describing the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:11:56.986Z"}