Hero made by @ybouane.

@crazygl/hero-metrics-city

Your KPIs become tall glowing 3D towers in a dark abstract city. The dashboard screenshot floats above the skyline like a control layer, with FogExp2 atmospheric perspective fading distant towers into deep blue-black.

Demo

Floating Metrics City

Install

npm install @crazygl/hero-metrics-city

Usage

import MetricsCity from '@crazygl/hero-metrics-city';

export default function Hero() {
  return (
    <MetricsCity
      screenshot="/product/dashboard.png"
      towerCount={220}
      highColor="#FFB45A"
      lowColor="#3A4D7A"
    />
  );
}

Customise

• Screenshot — the floating screenshot plus screenshotX/Y/Z, screenshotScale, screenshotTilt, screenEmissive.
• City — towerCount, towerSpacing, towerWidth, heightVariation, centerBoost, animSpeed, animAmplitude, lowColor→highColor gradient, topGlow (cap brightness).
• Atmosphere — fogDensity, fogColor, groundColor, bgColor, transparentBackground.
• Camera — cameraPitch, cameraDistance, cameraHeight, parallaxStrength.

Best for

• Analytics, BI, and financial / fintech dashboard products.
• Marketing and revenue-ops landing pages where "data as architecture" is the pitch.
• Premium SaaS heroes that want a product screenshot to sit above a living scene.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.