Cyber Speedometer

Installation

Mechanics

This dashboard widget utilizes pure SVG for crisp, scalable graphics combined with Framer Motion for the fluid physics:

1. Stroke Dasharray Math: The circumference of the <circle> is calculated using 2 * Math.PI * r. We constrain the gauge to a 270-degree arc (arcSpan), then map the value prop (0-100) to a strokeDashoffset to fill the meter.
2. Neon Glow Filter: We apply an SVG <filter> containing feGaussianBlur and feMerge directly to the active stroke path to create a performant bloom effect that perfectly tracks the animated stroke.
3. Number Interpolation: The large center text isn't just updated reactively; we use a requestAnimationFrame loop with an easeOutExpo easing function to animate the digits rolling up and down, matching the speed of the physical dial.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CyberSpeedometer } from "@/components/creative/cyber-speedometer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CyberSpeedometer } from "@/components/creative/cyber-speedometer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CyberSpeedometer
        value{10}
        label="example"
      />
    </div>
  );
}