De una solución para BBVA a un sistema completo

From a BBVA solution to a complete system

ShapingCharts nació en 2018 en el BBVA Innovation Center, con una necesidad muy concreta: mostrar los KPIs del banco en las distintas pantallas del interior del edificio. Datos que cambian, pantallas con formatos distintos y la exigencia de una marca muy cuidada. Así que en lugar de animar gráficos uno a uno, empecé a programar cómo debe comportarse un gráfico.

Lo que empezó como un puñado de barras animadas es hoy un sistema completo de plantillas que no ha dejado de crecer. Y hasta 2026, lo hice todo completamente a mano: cada expresión, cada control y cada ajuste.

ShapingCharts was born in 2018 at the BBVA Innovation Center, out of a very specific need: showing the bank's KPIs on the different screens inside the building. Changing data, screens with different formats and a brand that demands great care. So instead of animating charts one by one, I started programming how a chart should behave.

What began as a handful of animated bars is now a complete system of templates that has never stopped growing. And until 2026, I did everything entirely by hand: every expression, every control and every adjustment.

Las plantillas se reparten en cinco familias: barras, líneas y áreas, radar, círculos e Independent Shapes, que verás más abajo. Todas hablan el mismo idioma: los mismos grupos de controles, la misma paleta y la misma lógica de animación.

The templates are grouped into five families: bars, lines and areas, radar, circles and Independent Shapes, which you'll see further down. They all speak the same language: the same control groups, the same palette and the same animation logic.

Cada composición, su propio ecosistema

Every composition, its own ecosystem

Si hay algo que define este proyecto es que cada composición se basta a sí misma. Todo lo que el gráfico necesita para dibujarse, animarse y colorearse vive dentro de él: ni nulos, ni sólidos de los que dependa nada, ni capas de referencia escondidas, ni enlaces a otras composiciones.

If anything defines this project, it is that every composition is self-sufficient. Everything the chart needs to draw, animate and color itself lives inside it: no nulls, no solids anything depends on, no hidden reference layers, no links to other compositions.

Toda la parte gráfica está construida con shape layers, de ahí el nombre: Shaping Charts (y porque sonaba "Chasing Cars" en ese momento). Las 927 capas del proyecto son 309 de forma y 618 de texto. Fue una decisión tomada a conciencia: formas vectoriales que escalan sin perder calidad y gráficos que copio a cualquier proyecto y funcionan a la primera, sin reconstruir nada ni arrastrar dependencias.

All the graphics are built with shape layers, hence the name: Shaping Charts (and because "Chasing Cars" was playing at the time). The project's 927 layers are 309 shape layers and 618 text layers. It was a deliberate decision: vector shapes that scale without losing quality, and charts that I copy into any project and work right away, without rebuilding anything or dragging dependencies along.

Una plantilla, mil identidades One template, a thousand identities

Estas imágenes salen de la misma composición y los mismos datos. No hay capas nuevas ni duplicadas, solo cambian los valores del panel de control. Ese es el punto de partida de todo el proyecto: la identidad de marca es un conjunto de parámetros, y un gráfico bien construido tiene que poder adoptar cualquiera sin romperse.

These images come from the same composition and the same data. No new or duplicated layers, only the values in the control panel change. That is the starting point of the whole project: brand identity is a set of parameters, and a well-built chart must be able to take on any of them without breaking.

Un panel de control para gobernarlo todo

One control panel to rule them all

Cada gráfico se maneja desde una única capa, CONTROL, organizada en grupos de pseudo efectos con nombres claros. Para editarlo no hace falta abrir ninguna capa ni tocar un keyframe: cambias un valor y el gráfico se recalcula, se reordena y se vuelve a animar. Estos son los grupos reales de la familia de barras:

Each chart is driven from a single layer, CONTROL, organized into clearly named pseudo-effect groups. Editing it doesn't require opening a layer or touching a keyframe: you change a value and the chart recalculates, reorders and re-animates itself. These are the real groups of the bars family:

Una decisión de diseño que atraviesa todo el proyecto: no existe un control de "número de elementos". Cada barra, sector o punto sabe qué posición ocupa por su propio nombre. Si necesito una barra más, la duplico y el sistema la coloca, la escala, la colorea con la siguiente muestra de la paleta y le asigna su retardo de animación; si sobra una, la borro y el resto se redistribuye.

A design decision that runs through the whole project: there is no "number of items" control. Each bar, slice or point knows its position from its own name. If I need one more bar, I duplicate it and the system places it, scales it, colors it with the next palette swatch and assigns its animation delay; if one is too many, I delete it and the rest redistribute themselves.

Un solo control, un gráfico distinto

One control, a different chart

Para que veas hasta dónde llega la parametrización, en cada tira solo cambia un único valor; todo lo demás se recalcula solo.

To show you how far the parametrization goes, each strip changes a single value; everything else recalculates itself.

Las familias The families

La auditoría

The audit

La primera prueba de estrés llegó pronto. Al poco de empezar le pedí a un compañero del equipo de motion que pusiera el proyecto a prueba y, tras revisarlo, su conclusión fue: "estás loco". Acababa de ver la magnitud de lo que estaba construyendo con After Effects: "has hecho un software dentro del software". Por eso, antes de enseñarlo, quise una revisión mucho más sistemática.

The first stress test came early. Shortly after starting, I asked a teammate from the motion team to put the project to the test and, after reviewing it, his conclusion was: "you're crazy". He had just seen the scale of what I was building with After Effects: "you've built a software inside the software". That is why, before showing it, I wanted a far more systematic review.

Sometí el proyecto a una auditoría técnica con Claude: yo marcaba qué revisar y tomaba cada decisión; Claude preparaba los scripts de revisión que yo ejecutaba y validaba en After Effects. La regla era simple: ningún cambio entra si altera un solo valor que no debía alterar. Cada script mide el gráfico antes y después, en varios instantes y configuraciones, y ante cualquier diferencia revierte la composición entera.

I put the project through a technical audit with Claude: I set what to review and made every decision; Claude prepared the review scripts that I ran and validated in After Effects. The rule was simple: no change goes in if it alters a single value it shouldn't. Each script measures the chart before and after, at several points in time and setups, and at any difference reverts the entire composition.

El resultado: nombres de controles unificados entre familias, decenas de miles de comprobaciones sin diferencias y 407 comentarios revisados para que el código se explique solo. No se ve en ningún fotograma, pero se nota en todos: un proyecto que puedo entregar, editar y escalar sin miedo a que algo se rompa.

The result: control names unified across families, tens of thousands of checks with no differences and 407 comments reviewed so the code explains itself. It isn't visible in any single frame, but it shows in all of them: a project that I can deliver, edit and scale without fear of breaking anything.

"Más que animar gráficos, programo cómo se comportan. Si cambian los datos, la marca o el formato, el gráfico no se rehace: se adapta."

"Rather than animating charts, I program how they behave. If the data, the brand or the format changes, the chart isn't rebuilt: it adapts."