Índice · Lab · Finanzas y contabilidad / Cuadros de mando

Cómo se construyó Índice

Laboratorio de inversión con cotizaciones ficticias y una cartera que se recalcula con cada movimiento. Una interfaz editorial de fondo carbón, tarjetas salvia, crema y azul, acentos naranja y gráficos SVG propios: patrimonio con eje, línea de apertura, crosshair y transición entre periodos, donut de asignación frente a un objetivo y barras que siguen el precio real simulado. El usuario puede comprar y vender con capital virtual viendo antes el impacto en su cartera, rebalancear hacia su objetivo en un gesto, consultar coste y resultado de cada posición, filtrar su historial y exportarlo. Todo funciona en el navegador, con persistencia local y sin servicios financieros externos.

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

• Gráfico de patrimonio en SVG a tamaño real: curva monótona, línea de apertura con área bicolor, eje con ticks que se deslizan, máximo y mínimo, etiqueta de precio viva y crosshair con ratón, táctil y teclado
• Cinco periodos con series seedeadas que se transforman por interpolación al cambiar de rango, con banda de variaciones por punto
• Compra y venta con precio fijado, importes rápidos, validación y vista previa de unidades, capital resultante y peso del activo antes de confirmar
• Asignación frente a un objetivo 45/35/20 con donut interpolado, desvío en puntos y rebalanceo que calcula y ejecuta las órdenes en un gesto
• Modelo de datos con coste por posición y resultado latente y realizado: aportado + latente + realizado = patrimonio, visible en pantalla
• Tarjetas de activo con 12 tramos reales del precio, destello de subida o bajada y posición del usuario; ticker vivo con mini-sparklines
• Coreografía de entrada escalonada y contadores que interpolan en un único bucle requestAnimationFrame; pausa, volatilidad y reinicio del mercado
• Vistas de cartera, mercados con búsqueda y actividad con filtros; primeros pasos guiados, persistencia en localStorage y exportación CSV
• Diseño adaptable, objetivos táctiles de 44 px, diálogos accesibles, contraste AA y estado final estático con movimiento reducido