CrazyGLFloating 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.
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
screenshotplusscreenshotX/Y/Z,screenshotScale,screenshotTilt,screenEmissive. - City —
towerCount,towerSpacing,towerWidth,heightVariation,centerBoost,animSpeed,animAmplitude,lowColor→highColorgradient,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.
One command, zero config.
npm install @crazygl/hero-metrics-cityImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import FloatingMetricsCity from '@crazygl/hero-metrics-city';
export default function Landing() {
return (
<FloatingMetricsCity />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import FloatingMetricsCity from '@crazygl/hero-metrics-city';
export default function Page() {
return (
<section>
<FloatingMetricsCity
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
