{"success":true,"data":{"block":{"id":"stats-number-ticker","name":"Stats Number Ticker","title":"Stats Number Ticker","category":"Stats","categorySlug":"stats","description":"A stats section featuring smooth number ticker animations that count up when scrolled into view. Each stat card displays an animated value with optional prefix/suffix, label, and description. Uses exponential easing for a polished counting effect. Supports both integer and decimal values. Ideal for landing pages, dashboards, or any section showcasing impressive metrics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288944/ca3col5wx2hgmrrqmbnk3cmzz69q/stats-number-ticker-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288945/w4qfcfre8mppb87n3be8nq4of2gb/stats-number-ticker-mobile.jpg"},"componentPath":"blocks/stats/stats-number-ticker.tsx","code":"import { StatsNumberTicker } from \"@opensite/ui/blocks/stats/stats-number-ticker\";\n\nexport default function Demo() {\n  return (\n    <StatsNumberTicker\n      badge=\"By The Numbers\"\n      heading=\"Platform Statistics\"\n      description=\"Real-time metrics that showcase our platform's reach and reliability\"\n      stats={[\n        {\n          value: 10000,\n          suffix: \"+\",\n          label: \"Active Users\",\n          description: \"Growing community of professionals\",\n        },\n        {\n          value: 99.9,\n          suffix: \"%\",\n          label: \"Uptime\",\n          description: \"Enterprise-grade reliability\",\n        },\n        {\n          value: 480,\n          label: \"Processed\",\n          description: \"Transactions this month\",\n        },\n        {\n          value: 45,\n          suffix: \"ms\",\n          label: \"Avg Response\",\n          description: \"Lightning-fast performance\",\n        },\n      ]}\n      animationDuration={2500}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge prop)","typeLabel":"React.ReactNode","required":false},"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 ticker animation","items":{"type":"object","description":"","fields":{"value":{"type":"number","description":"The end value for the ticker animation","required":true},"prefix":{"type":"object","description":"Prefix for the value (e.g., \"$\", \"+\")","typeLabel":"React.ReactNode","required":false},"suffix":{"type":"object","description":"Suffix for the value (e.g., \"%\", \"K\", \"M\", \"+\")","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"TickerStat"},"typeLabel":"TickerStat[]","required":true,"minItems":2,"maxItems":8},"statsSlot":{"type":"object","description":"Custom slot for 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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","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},"statDescriptionClassName":{"type":"string","description":"Additional CSS classes for stat descriptions","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":{"badge":"By The Numbers","heading":"Platform Statistics","description":"Real-time metrics that showcase our platform's reach and reliability","stats":[{"value":10000,"suffix":"+","label":"Active Users","description":"Growing community of professionals"},{"value":99.9,"suffix":"%","label":"Uptime","description":"Enterprise-grade reliability"},{"value":480,"label":"Transactions Processed","description":"This month"},{"value":45,"suffix":"ms","label":"Avg Response Time","description":"Lightning-fast performance"}],"animationDuration":2500},"dependencies":["@opensite/ui"],"tags":["stats","ticker","animated","numbers","scroll","cards","metrics","landing-page"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The 'value' prop is a NUMBER — the ticker animates smoothly from 0 to this value. Decimal values (e.g. 99.9) are automatically formatted with one decimal place. The 'suffix' appears after the animated number. Each stat card also supports an optional 'description' line below the label. The grid renders 4 columns on large screens — provide 4 stats for best visual balance.","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 ticker animates to. Supports decimals (e.g. 99.9). Source-backed."},"stats[].label":{"required":true,"note":"Short label describing the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:11:59.277Z"}