DEVELOPMENT·Landing·Playground·Branding
DEV ONLY

Branding

Fondo animado de marca <MetroLinesBanner> (líneas estilo metro, glow y destellos en los cruces) con un <GlassPanel> encima. Ambos viven en el brand-kit. El modo auto elige rendimiento según el dispositivo.

Controles

canvas: render: FPS medido:
Tema:
Modo (rendimiento):
Panel:
Overlay:
numbers
ERP
El sistema operativo de tu empresa

Copia standalone del banner (HTML + React por CDN, no el componente del brand-kit). Es el laboratorio: aquí se prueban ideas nuevas (modos de rastro, capas, pausa/cámara lenta, auto-fill, anticipación, FPS en vivo…) antes de portarlas al componente. Vive en public/debug/metro-lines-sandbox.html.

Cómo usar

import { MetroLinesBanner, GlassPanel } from "@/components/brand-kit";

// El contenedor define el tamaño; el banner es el fondo (position: relative).
<div style={{ position: "relative", width: "100%", height: 480 }}>
  <MetroLinesBanner theme="dark" mode="auto">
    <GlassPanel theme="dark" style={{
      position: "absolute", top: "50%", left: "50%",
      transform: "translate(-50%,-50%)",
    }}>
      <h1>numbers ERP</h1>
    </GlassPanel>
  </MetroLinesBanner>
</div>