Social Proof Stat Counter Stream

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface RegionLatency {
  city: string
  latencyMs: number
}

Files installed (2)

• src/app/components/blocks/social-proof-stat-counter-stream/social-proof-stat-counter-stream.component.ts7.7 kB

  Copy

  // Live infrastructure telemetry and animated metric counter stream with real-time
  // global edge round-trip latency ticker. Port of the Vue/React block 1:1.
  import { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, inject, signal } from '@angular/core'
  import { Activity, ArrowRight, CheckCircle2, Cpu, Globe2, LucideAngularModule, Radio, Server } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  
  export interface RegionLatency {
    city: string
    latencyMs: number
  }
  
  const initialLatencies: RegionLatency[] = [
    { city: 'San Jose (SJC)', latencyMs: 8 },
    { city: 'Frankfurt (FRA)', latencyMs: 11 },
    { city: 'Tokyo (NRT)', latencyMs: 9 },
    { city: 'Singapore (SIN)', latencyMs: 12 },
    { city: 'London (LHR)', latencyMs: 10 },
    { city: 'Sydney (SYD)', latencyMs: 14 },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-social-proof-stat-counter-stream, [ui-social-proof-stat-counter-stream]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiCardComponent, UiCardContentComponent],
    template: `
      <section data-slot="social-proof-stat-counter-stream" [class]="rootClass">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <!-- Section Header -->
          <div class="mx-auto max-w-3xl space-y-4 text-center">
            <a
              href="#telemetry-stream"
              class="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
            >
              <lucide-icon [img]="Radio" class="text-primary size-3.5 animate-pulse" />
              <span>Live Infrastructure Telemetry</span>
              <lucide-icon
                [img]="ArrowRight"
                class="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5"
              />
            </a>
  
            <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">{{ title }}</h2>
  
            <p class="text-muted-foreground text-base sm:text-lg">{{ description }}</p>
          </div>
  
          <!-- KPI Stat Counter Grid -->
          <div class="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div ui-card class="border-border bg-card shadow-xs">
              <div ui-card-content class="space-y-2 p-6">
                <div class="text-muted-foreground flex items-center justify-between text-xs">
                  <span class="font-medium">Total Edge Invocations</span>
                  <lucide-icon [img]="Activity" class="text-primary size-4" />
                </div>
                <div class="text-foreground font-mono text-3xl font-bold tracking-tight">
                  {{ invocations().toLocaleString() }}
                </div>
                <div class="text-success flex items-center gap-1 text-xs font-medium">
                  <span class="bg-success size-1.5 rounded-full"></span>
                  <span>Streaming live</span>
                </div>
              </div>
            </div>
  
            <div ui-card class="border-border bg-card shadow-xs">
              <div ui-card-content class="space-y-2 p-6">
                <div class="text-muted-foreground flex items-center justify-between text-xs">
                  <span class="font-medium">Direct Registry Pulls</span>
                  <lucide-icon [img]="Cpu" class="text-primary size-4" />
                </div>
                <div class="text-foreground font-mono text-3xl font-bold tracking-tight">
                  {{ activeClones().toLocaleString() }}+
                </div>
                <div class="text-muted-foreground text-xs">Across shadcn & shadcn-vue</div>
              </div>
            </div>
  
            <div ui-card class="border-border bg-card shadow-xs">
              <div ui-card-content class="space-y-2 p-6">
                <div class="text-muted-foreground flex items-center justify-between text-xs">
                  <span class="font-medium">Dual-Framework Parity</span>
                  <lucide-icon [img]="CheckCircle2" class="text-success size-4" />
                </div>
                <div class="text-foreground font-mono text-3xl font-bold tracking-tight">{{ parityPercentage() }}%</div>
                <div class="text-success text-xs font-medium">1:1 Vue & React token sync</div>
              </div>
            </div>
  
            <div ui-card class="border-border bg-card shadow-xs">
              <div ui-card-content class="space-y-2 p-6">
                <div class="text-muted-foreground flex items-center justify-between text-xs">
                  <span class="font-medium">Global Edge Locations</span>
                  <lucide-icon [img]="Globe2" class="text-primary size-4" />
                </div>
                <div class="text-foreground font-mono text-3xl font-bold tracking-tight">
                  {{ edgeRegionsCount() }} PoPs
                </div>
                <div class="text-muted-foreground text-xs">Anycast routed worldwide</div>
              </div>
            </div>
          </div>
  
          <!-- Regional Latency Live Ticker Band -->
          <div class="border-border bg-muted/30 mt-8 rounded-xl border p-4">
            <div class="flex flex-wrap items-center justify-between gap-4">
              <div class="text-muted-foreground flex items-center gap-2 text-xs font-bold tracking-wider uppercase">
                <lucide-icon [img]="Server" class="text-primary size-4" />
                <span>Real-time Global Edge Round-Trip Latency</span>
              </div>
  
              <div class="flex flex-wrap items-center gap-3">
                @for (reg of latencies(); track reg.city) {
                  <div
                    class="border-border bg-background inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 font-mono text-xs"
                  >
                    <span class="text-muted-foreground">{{ reg.city }}:</span>
                    <span class="text-success font-bold">{{ reg.latencyMs }}ms</span>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiSocialProofStatCounterStreamComponent implements OnInit {
    protected readonly Activity = Activity
    protected readonly ArrowRight = ArrowRight
    protected readonly CheckCircle2 = CheckCircle2
    protected readonly Cpu = Cpu
    protected readonly Globe2 = Globe2
    protected readonly Radio = Radio
    protected readonly Server = Server
  
    @Input() title = 'Real-time telemetry stream across global edge infrastructure.'
    @Input()
    description =
      'Continuously aggregated metrics verifying zero-latency invocation throughput and multi-region synchronization.'
    @Input('class') className?: string
  
    readonly invocations = signal(48291040)
    readonly activeClones = signal(128450)
    readonly parityPercentage = signal(100)
    readonly edgeRegionsCount = signal(36)
    readonly latencies = signal<RegionLatency[]>(initialLatencies.map((l) => ({ ...l })))
  
    private timer: ReturnType<typeof setInterval> | undefined
  
    constructor() {
      inject(DestroyRef).onDestroy(() => clearInterval(this.timer))
    }
  
    ngOnInit(): void {
      this.timer = setInterval(() => this.tick(), 1200)
    }
  
    tick(): void {
      this.invocations.update((v) => v + Math.floor(Math.random() * 12) + 3)
      this.latencies.update((prev) => {
        const next = prev.map((l) => ({ ...l }))
        const idx = Math.floor(Math.random() * next.length)
        const current = next[idx]!.latencyMs
        const delta = Math.random() > 0.5 ? 1 : -1
        next[idx]!.latencyMs = Math.max(5, Math.min(22, current + delta))
        return next
      })
    }
  
    get rootClass(): string {
      return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)
    }
  }
  

• src/app/components/blocks/social-proof-stat-counter-stream/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/social-proof-stat-counter-stream.json