Counter Section

A collection of 4 animated high-impact Counter and Stats Sections designed for modern landing pages, SaaS platforms, agency portfolios, and enterprise portals. From high-tech telemetry HUDs to clean agency minimalism with monospace slash labels, architectural halftone strips, and interactive cursor spotlights. All variants are built with viewport-triggered count-up animations, zero shadows, clean flat borders, and full adaptive styling for both Light and Dark modes.

1. Cyber HUD (Terminal & Telemetry)

Developer and fintech terminal HUD with bracket corner crosshairs [+], subtle scanlines, live status LEDs, and character scramble decryption on reveal.

Setvariant"cyber-hud": to activate the cyber terminal layout. Pass custom metrics through the stats prop.

Active Color

2. Minimal Slash (Agency / Studio)

Clean, high-impact typographic layout with floating Swiss modular cards, giant watermark numerals, monospace uppercase /LABELS, and interactive expanding accents.

Setvariant"minimal-slash": to activate floating Swiss cards with watermark numbers. Pass custom stats through the stats prop.

3. Halftone Cinema (Architectural)

Atmospheric architectural strip featuring an authentic dot-matrix halftone texture, hairline vertical column dividers, and multi-line descriptions. Adapts cleanly to light and dark modes.

Setvariant"halftone-cinema": to activate the halftone dot-matrix strip. Pass custom stats through the stats prop.

4. Spotlight Gradient (Interactive Pointer)

Interactive radial spotlight that tracks the cursor across modern floating cards, highlighting gradient accents, category icon badges, and micro-metric trends with zero box shadows.

Setvariant"spotlight-gradient": to activate the cursor-tracking spotlight cards. Pass custom stats through the stats prop.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Counter Section

npx shadcn@latest add @algorize-ui/counter-section

components/custom/blocks/CounterSectionBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Counter Section needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

4 Production Variants

Cyber HUD for fintech & developer tools, Minimal Slash for agencies, Halftone Cinema for architecture, and Spotlight Gradient for modern tech.

100% Reusable with Custom Datasets

Every variant accepts a typed stats array prop with value, prefix, suffix, label, sublabel, and tag for complete customization.

No Shadows, Pure Flat Design

Engineered with clean, crisp borders and zero box-shadows for a modern, sleek aesthetic that blends into any layout.

100% Theme Adaptive

Every variant—including Halftone and Cyber HUD—renders completely light in Light Mode and deep dark in Dark Mode.

Best Practices & Guidelines

Layout & Placement

Place counter sections below the hero fold or immediately after high-level feature highlights. The animated count-up runs automatically when the section intersects the viewport (using useInView), making it ideal for social proof and conversion trust anchors.

Variant Selection

Choose variant="cyber-hud" for developer tools, Web3, security, and fintech telemetry; variant="minimal-slash" for modern agencies, SaaS, and portfolios; variant="halftone-cinema" for architecture and editorial brands; and variant="spotlight-gradient" for interactive consumer tech and modern AI applications.

Custom Data & Precision

Always specify the decimals prop on stats when dealing with floating-point metrics (e.g., decimals: 1 for 2.4 or decimals: 3 for 99.999). This prevents awkward integer rounding during the count-up animation.

Props Reference

Prop	Type	Default	Description
`variant`	`"cyber-hud" \| "minimal-slash" \| "halftone-cinema" \| "spotlight-gradient"`	`"cyber-hud"`	Design aesthetic variant to render.
`stats`	`StatItem[]`	`DEFAULT_STATS[variant]`	Array of numerical metrics to animate and display.
`eyebrow`	`string`	`undefined`	Optional pill or category badge rendered above the header.
`heading`	`string`	`undefined`	Main title copy for the counter section.
`description`	`string`	`undefined`	Supporting paragraph copy below the main heading.
`allowReplay`	`boolean`	`true`	Enables or disables the interactive replay trigger button.
`className`	`string`	`undefined`	Custom CSS classes for outer container styling.

StatItem Object

Property	Type	Default	Description
`value`	`number`	Required	Target numerical value to interpolate and display.
`label`	`string`	Required	Primary metric title (e.g., "/REVENUE UNLOCKED").
`prefix`	`string`	`""`	Text placed before the count-up number (e.g., "$").
`suffix`	`string`	`""`	Text placed after the count-up number (e.g., "%", "+", "M").
`decimals`	`number`	`0`	Number of decimal places to format during the count-up.
`sublabel`	`string`	`undefined`	Secondary descriptive copy rendered beneath the metric.
`tag`	`string`	`undefined`	Status badge or delta indicator pill.
`trend`	`string`	`undefined`	Percentage or trend delta string.
`icon`	`React.ReactNode`	`undefined`	Optional Lucide icon or custom SVG graphic element.