Emisora · Lab · Paneles de control / Fintech

Cómo se construyó Emisora

El panel que ve un responsable financiero de su tarjeta de empresa: saldo, gasto de la semana, abonos, neto contra comisiones, disputas y un listado de movimientos que va entrando solo. Todo vive sobre cristal esmerilado apoyado en una fuga de luz de colores, que es lo que hace que el desenfoque tenga algo que desenfocar. La tarjeta no es una imagen: es un apilado de capas —un espectro en conic-gradient cuyo ángulo sale de un atan2 sobre la posición del puntero, un barrido especular que se desplaza con el ratón y una trama fina en mix-blend-mode— sobre una inclinación 3D con perspectiva real; al pulsarla gira y enseña banda, firma y CVV. Los movimientos se pueden buscar, reordenar por importe, pausar y abrir en el panel de detalle, que a su vez da de alta disputas.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Tarjeta holográfica de tres capas: espectro en conic-gradient con mix-blend-mode: screen, barrido especular en overlay y trama de líneas finas
• El ángulo del espectro sale de atan2 sobre la posición del puntero dentro de la tarjeta, así que el arcoíris gira igual que giraría un plástico real bajo una luz
• Inclinación 3D con perspectiva de 900 px y rotaciones de ±15° / ±18°, desactivable desde los mandos
• Giro completo con backface-visibility para enseñar banda magnética, firma y CVV; el número enmascarado se revela al girar
• Mando de intensidad del holograma (0–150 %) por variable CSS y modo «girar solo», que recorre el ángulo con requestAnimationFrame
• Todo el cristal descansa sobre una fuga de luz de fondo: sin algo que desenfocar, backdrop-filter no se nota
• Movimientos que entran cada 3,4 s, con buscador por comercio, orden por importe o fecha, y pausa
• Cada movimiento descuenta del saldo y suma al gasto salvo los rechazados; el porcentaje semanal se recalcula solo
• Selección de fila que alimenta el panel de detalle, y alta de disputas que incrementa el contador y el aviso de la campana
• Gráfico de abonos con curva de Bézier suavizada y relleno, y velas de neto contra comisiones, ambos en SVG a mano
• Formato español (Intl.NumberFormat es-ES) y cifras en tabular-nums
• Cero dependencias