Web oficial · post-punk · Ciudad Lineal, Madrid

El cuadro de Alcalá Norte

El scroll es una escalada Óleo pintado en directo Un compás que mueve el cuadro La banda en pixel art
Pasa la vela por el óleo

No le hicimos una web a Alcalá Norte: le abrimos la portada del disco y la convertimos en un camino. El óleo de Carle Naide para Dejémoslo como estaba se recorre de abajo arriba. Sales del metro de Ciudad Lineal, trepas el monolito con Arturo Soria, cruzas la calle de las once canciones, entras por el Ojo de Barad-Dûr y llegas al Movistar Arena con el volcán en erupción. Todo se pinta mientras lo miras y todo late al mismo compás.

No es un vídeo ni una captura: es la web en vivo — tócala
alcalá norte — la portada En vivo
▶ Tócalo · la vela sigue a tu cursor
Portada real · Canvas 2D + WebGL2 Ver la web completa ↗

Lo que sigue es el cuadro por dentro: quiénes son, qué necesitaban, de dónde sale cada decisión y cómo se pinta y late en un navegador. En orden.

Cómo hacemos las webs de este sector: webs para artistas y marcas culturales.

01

El contexto: un grupo con nombre de centro comercial

El centro comercial Alcalá Norte abrió en 1999 en la calle de Alcalá, en Ciudad Lineal, con un monolito en la puerta. Veinte años después, tres amigos del barrio quisieron llamar a su grupo como el distrito, pero ese nombre ya lo tenía otra banda. Se quedaron con el del centro comercial donde se juntaban, y con su monolito como logo. Hoy son cinco y hacen post-punk con letras de barrio, de Tolkien y de historia. El segundo disco, Dejémoslo como estaba, sale el 4 de noviembre de 2026 con una portada al óleo de Carle Naide. En ella, Arturo Soria, el urbanista que inventó la Ciudad Lineal, trepa el monolito mientras tres ermitaños lo miran con resignación. Lo presentan el 20 de febrero de 2027 en el Movistar Arena, y después en Valencia, Santiago, Barcelona y Ciudad de México.

1999
abre el centro comercial · el monolito ya estaba en la puerta
11
canciones en Dejémoslo como estaba · Cara A y Cara N
1.001
vinilos de la edición Barad-Dûr · agotada antes de salir el disco
20·II·27
Movistar Arena · el mayor concierto de su carrera
02

El objetivo: que la web fuera el disco, y que vendiera

El grupo necesitaba su web oficial para el lanzamiento: un sitio que presentara el disco, llevara a la tienda, vendiera la presentación del álbum y recogiera el correo de quien quiera enterarse de lo siguiente. Su público no es de webs: los sigue en X, en los conciertos y en el barrio, y se sabe las bromas. La web solo merecía la pena si se compartía como se comparte un buen tuit. Por eso planteamos lo contrario de una web de grupo: nada de secciones de «biografía» y «noticias», sino la portada del disco convertida en un sitio que se recorre de arriba abajo.

Que entrar en la web fuera meterse en la portada, no leer sobre ella.

Objetivo 01

El disco, en el centro

La portada no ilustra la web: es la web. Cada tramo del recorrido es una parte del cuadro de Naide.

Objetivo 02

Vender sin romper el cuento

Merch en Balaunka y entradas del Arena, pero dentro de la historia: un tenderete en una cueva, no una rejilla de productos.

Objetivo 03

Captar correos

Discos, conciertos, vinilos: lo que venga se anuncia después, así que la web tiene que guardar el correo de quien quiera enterarse antes que nadie.

Objetivo 04

Su universo, no el nuestro

El monolito, el bestiario, Tolkien, Ciudad Lineal y su forma de hablar. Nada de lenguaje de agencia.

La idea · el recorrido
El scroll no baja por una página: sube por un monolito.
03

La web es la escalada de Arturo Soria

En la portada, un anciano «desfallecido a la par que desafiante» se agarra al monolito. Nos hicimos una pregunta: ¿y si el visitante subiera con él? El recorrido entero es una cámara que se mueve por un único cuadro, en ocho capítulos y un final que lo devuelve todo a su sitio, como dice el título del disco. El índice lateral tampoco es un menú: es el propio monolito, que se llena según subes y se vacía al bajar. Cada capítulo entra con su intertítulo, como en un libro.

ILa contraportadaSe sale del metro de Ciudad Lineal y ahí está el monolito, en el llano.
IIEl ascensoSoria trepa el fuste. Abajo, los tres ermitaños; arriba, su lema para la Ciudad Lineal.
IIILa líneaEl travesaño se alarga y es la calle: once canciones en once papiros.
IVLa cimaAl fondo, Barad-Dûr. El vinilo splatter y su edición de 1.001.
VEl tendereteSe entra por la pupila del Ojo. En la cueva, un orco vende el merch.
VIEl directoEl monte revienta con el primer compás y la banda sale al Arena.
VIILa presentaciónEl mánager cava junto al volcán y desentierra el mapa con las cinco fechas.
VIIIEl palantírUn mago en la boca de metro te hace firmar el contrato de aviso.
FinComo estabaLos ermitaños bajan a Soria y la cámara vuelve al plano del principio.
04

Cómo se pinta un óleo sesenta veces por segundo

Una ilustración plana encima de un fondo animado no habría estado a la altura del cuadro de Naide. Así que la escena se dibuja primero en crudo, con formas lisas y una cámara que la recorre, y en cada fotograma un shader de WebGL2 la vuelve a pintar a pinceladas. Las pinceladas van por capas, siguen la forma de lo que pintan, suben en vertical en el cielo y se tumban en el llano, con empaste y relieve de verdad. Tu cursor es una vela: ilumina el relieve y deja una estela que se apaga sola, como estaba. Arrastra la línea para ver la escena antes y después del pincel.

La portada de la web de Alcalá Norte pintada al óleo: pinceladas, empaste y luz de vela
La misma escena antes del pincel: formas planas dibujadas en Canvas 2D
Escena en crudo · Canvas 2D Óleo · shader WebGL2
0
vídeos ni imágenes de fondo · todo se pinta en tu navegador
3×3
capas de pincel que siguen el gradiente de lo que pintan
2
pasadas · el óleo primero; la letra después, a resolución nativa, para que se lea
47–55
fotogramas por segundo medidos en un portátil M1
05

La partitura mueve el cuadro

La web se escribió con banda sonora propia, sin un solo archivo de audio: un post-punk que el navegador compone en directo, si menor, 150 BPM, Si menor, Sol, Re, La. Lleva un bajo agudo y melódico a lo Peter Hook, una guitarra de cuerda pulsada con chorus y eco y un sinte «marciano» que se arrastra entre notas. Cada capítulo tiene su partitura escrita compás a compás. Y lo importante: el cuadro baila con ella. El bombo hace latir el sol y temblar la lava, la caja suelta chispas, los monjes asienten a negras y los murciélagos aletean a tiempo. En la versión publicada el grupo prefirió el cuadro en silencio: la partitura ya no se oye, pero sigue marcando el pulso de todo lo que se mueve. Aquí abajo puedes escucharla.

Versión de bolsillo del motor · 150 BPM · Si menor

Solo bajo y charles: se sale del metro de noche.

El sol late con el bombo · la lava, con la caja · los monjes, a negras Mismos acordes y tempo que la web
Capítulo a capítulo
Cada tramo tiene trabajo que hacer. Ninguno está de adorno.
06

Qué pasa en cada capítulo, y para qué

Capturas reales de la web. Al lado de cada una, la idea y lo que la hace funcionar.

Pantalla de carga en pixel art: El Fary a lomos de un carnero levanta el monolito ante un público con mecheros
La carga · «caldeando el ambiente»
00 · El telón

Mientras carga, El Fary levanta el monolito

Una de las láminas del bestiario del grupo, la de «Arturo Soria», hecha pixel art: un hombre a lomos de un carnero con el monolito en alto, fuego de escenario y público con mecheros. El contador no dice «cargando»: dice «caldeando el ambiente». Dura tres segundos y medio la primera vez, la mitad si vuelves. Luego el negro se deshace en trama.

Pixel art a manoLámina del grupoSe ve una vez
Capítulo I: la boca de metro de Ciudad Lineal de noche, con su farol, y el texto pintado sobre el cuadro
I · la contraportada
I · La contraportada

La carpeta abierta: del metro al monolito

El disco se abre como una carpeta, y a la izquierda de la portada está la contraportada: la boca de metro de Ciudad Lineal, con su templete de hierro, el farol y las latas en el llano. La web empieza ahí, con la carpeta entera, y la cámara cruza el llano hasta el monolito. Los textos no flotan en HTML encima de la pintura: se maquetan dentro del cuadro y el pincel les da cuerpo.

Contraportada realTexto dentro del óleoCámara en el mundo
Capítulo II: Arturo Soria trepa el fuste del monolito; a la derecha, su lema «Cada familia un hogar, una huerta y un jardín»
II · el ascenso
II · El ascenso

Soria trepa al ritmo de tu scroll

El personaje está sacado de la ficha del cuadro: calvo, bigote blanco, ojos saltones, costillas marcadas. Se esculpe como un relieve, se pinta a pinceladas y escala de verdad. Cada mano y cada pie pasan tres cuartos del ciclo agarrados a la piedra, y si subes deprisa, él también. Si bajas, desciende. Si te paras, te habla.

Figura esculpida y pintadaEscalada por cinemáticaBocadillos en píxel
Capítulo III: los papiros de las canciones cuelgan de la línea, cada uno con una lámina del bestiario a tinta
III · la línea y los papiros
III · La línea

Once canciones colgadas de una sola calle

Arriba, el travesaño del monolito se alarga hasta ser la Ciudad Lineal, y Soria la recorre trazándola con una brocha. De ella cuelgan once papiros que se desenrollan a su paso. Cada uno lleva el título de su canción y su lámina del «Bestiario Alcalá Norte», escaneada del cuaderno del grupo y pasada a tinta. El grupo eligió qué dibujo iba con cada tema.

11 papirosBestiario del grupoOrden fijado por ellos
Capítulo IV: la cima con Barad-Dûr al fondo y el vinilo splatter de la edición especial junto a la portada
IV · la cima · el vinilo Barad-Dûr
IV · La cima

Lo que se ve desde arriba

Desde lo alto del monolito se ve Barad-Dûr, y aparece el disco: la carpeta y el vinilo splatter girando, con la inscripción oficial de la tirada alrededor. Es la edición de 1.001 copias, una sola dorada y marmolada, y ya agotada. Se cuenta como un objeto, no como una ficha de producto.

Vinilo girandoEdición agotadaFotos oficiales
El Ojo de Barad-Dûr despierta entre los cuernos de la torre, una almendra de fuego con la pupila rasgada
Transición · dentro del Ojo
IV → V · El Ojo

Un zoom de cien aumentos hasta la pupila

Para ir de la cima a la tienda no hay corte: el Ojo de la torre despierta y la cámara se lanza contra él hasta colarse por la pupila. Todo se funde a negro, suben chispas y, al otro lado, aparece una cueva vista desde abajo. Es un túnel en 3D con luz de hoguera y cuatro antorchas, pintado con el mismo pincel que el resto.

Zoom logarítmicoTúnel 3D al óleoSonido de sala
Capítulo V: el tenderete, una mesa de madera vista desde arriba con camisetas, vinilos, gorras y bolsa del grupo y sus etiquetas de precio a rotulador
V · el tenderete
V · El tenderete

La tienda es una mesa de mercadillo

En la cueva espera un orco vestido con el merch del grupo, que pregona como en el mercadillo y te enseña el puesto. La tienda es una mesa de madera castigada, con quemaduras y cercos de cerveza, vista desde arriba. El merch está dibujado como objetos, con los estampados reales y su etiqueta de cartón a rotulador. Cada pieza enlaza a su ficha en Balaunka. Al final, «toda la tienda» es una tiendecita de juguete.

13 piezas realesEnlaces a BalaunkaEl orco pregonero
Capítulo VI: el volcán en erupción sobre la fecha 20·II·27 Movistar Arena, con los cinco miembros de la banda en pixel art y un bocadillo
VI · el directo · 20·II·27
VI · El directo

El monte revienta con el primer compás

El Arena es el mayor concierto de su carrera, y era el único momento que pedía algo espectacular. Detrás de la torre hay un volcán dormido desde la cima. Al llegar, revienta justo en el primer compás de la sección, sincronizado con la partitura: el bombo levanta la fuente de lava, la caja lanza bombas y los platos, rayos. Salen los cinco miembros en pixel art, cada uno sacado de las fotos de prensa, y el cantante los presenta como en un concierto.

Erupción sincronizadaBanda fiel a la prensaCuenta atrás real
El mánager del grupo, en pixel art, saca de un cofre enterrado el mapa de la presentación del álbum, que se despliega en 3D
VII · el mapa enterrado
VII · La presentación

El mánager cava y saca el mapa

La banda se va andando a la furgo y entra el mánager, en pixel art y con su ropa de verdad. Cava junto al volcán al ritmo del scroll, abre un cofre con luz dorada y saca un mapa plegado que se despliega en 3D, panel a panel, hasta quedar en su sitio. El mapa está hecho con geografía real (costas, ríos y relieve) y nombres a lo Tolkien: Madrid es el Monte del Destino. Cada plaza tiene su punto rojo y su fecha: Madrid, Valencia, Santiago, Barcelona y Ciudad de México. No inventamos ninguna.

Despliegue 3DGeografía realSin fechas inventadas
Capítulo VIII: un mago en un trono de roble con un palantír verde en la boca de metro, junto al contrato de aviso
VIII · el palantír y el contrato
VIII · El palantír

El formulario es un contrato con un mago

La captación de correos vuelve a la boca de metro. Allí, un mago en su trono mira el palantír, verde amarillento con pinceladas turquesa y la torre al fondo. El formulario es un «contrato de aviso» para enterarse antes que nadie de discos, conciertos y vinilos, con sus cláusulas, y la letra pequeña es la protección de datos de verdad, legible y sin trampas. Se firma con la huella. Al cerrar el trato, la piedra se enciende, el mago alza las manos y te entrega tu copia del contrato, con tu número de firmante, lista para compartir en stories.

Captación de correosProtección de datos realFirma con huellaCopia para compartir
La portada en el móvil: el monolito, el rótulo gótico y el botón de entradas
La línea en el móvil: Soria camina sobre el travesaño encima de un papiro
El Arena en el móvil: la banda en pixel art al pie del volcán y el cantante saludando al público
En el móvil

Otro encuadre, no la misma web encogida

En vertical la cámara recompone cada plano: el cráter sube al quinto superior, la banda baja a ras de suelo y los bocadillos salen de uno en uno. La escena se mide con la altura real de Safari, con y sin barra, para que la letra pintada no se estire. Abajo, una barra de capítulos como la de una app deja saltar de tramo con el pulgar.

Encuadres propiosSafari medidoBarra de capítulos
El recorrido · pruébalo
Salta a cualquier capítulo de la web real y muévete por él.
Elige un capítulo
alcalá norte — VI · el directo En vivo
▶ Toca para entrar · la rueda avanza el cuadro
La web entera, embebida · elige un capítulo y haz scroll dentro Abrirla a pantalla completa ↗
08

Las seis decisiones que sostienen la pieza

Ninguna es un efecto. Cada una traduce algo del grupo a una regla de la web.

Eje

El monolito manda

Es su logo, su origen y su nombre. Todo parte de él: el recorrido lo trepa, el índice lo rellena y hasta la rosa de los vientos del mapa marca el norte con él.

Recorrido

El scroll es una escalada

Bajar la página es subir por el cuadro. Una sola cámara en un solo mundo: no hay cortes de sección, solo planos que se encadenan.

Materia

Nada plano, nada fotográfico

Todo pasa por el mismo pincel, también la letra. Los botones son de pan de oro con bisel, los papeles tienen el canto roto y las fotos del merch se funden en el papel.

Compás

La partitura mueve la imagen

La partitura está escrita por capítulos, y sus golpes mueven la escena: el sol, la lava, los monjes y los murciélagos. Aunque la web publicada calla, todo sigue a compás.

Reparto

Los personajes son ellos

La banda, el mánager y su gente, en pixel art y fieles a sus fotos. Los bocadillos hablan como ellos: el dedito, los gritos en mayúsculas, el «¿eres jevi?».

Negocio

Vender dentro del cuento

Tienda, entradas y correos, cada uno con su escena: el tenderete del orco, las fechas del mapa y el contrato del mago. Ninguno saca al visitante de la historia.

09

Cómo se construyó: once versiones con el grupo al lado

Cada versión se publicó en su propio enlace para que el grupo la viera en el móvil. Lo que no les convencía se rehacía. Así fue creciendo el cuadro.

v1–v3
El cuadro se mueve
La escalada y el pincel. El rótulo, la tipografía y los originales salen del disco.
→
v4
Suena y respira
La música generativa, Soria pintado al óleo, la contraportada del metro y el tenderete.
→
v5
Hablan
Bocadillos en píxel, la banda en el Arena y el volcán en erupción.
→
v6–v7
Lo que pidió el grupo
Papiros con su bestiario, el mapa, el telón y sus tipografías.
→
v8–v9
Cada paso, una escena
El mánager desentierra el mapa, la entrada por el Ojo, el orco y el mago del palantír.
→
v10–v11
Para compartir
Capítulos con intertítulo, barra en el móvil, la copia del contrato, la presentación del álbum y huevos de pascua para los fans.
11
versiones publicadas para que el grupo las revisara en el móvil
90–95
en Lighthouse escritorio tras la optimización · antes, 74–86
568 KB
al entrar · antes 938 · el resto se pide cuando hace falta
0
fuentes de Google ni terceros sin permiso · analítica solo si aceptas
09·b

Con qué está hecho

EscenaCanvas 2D con cámaraUn solo mundo en unidades · el logo trazado a polígono
PinturaShader WebGL2Pinceladas por capas · empaste · luz de vela
CompásPartitura generativaPost-punk compuesto en el navegador · marca el pulso · cero archivos
PersonajesPixel art en GPUBanda, mánager, orco y mago · bocadillos en rejilla
RendimientoWeb WorkerSoria se esculpe fuera del hilo principal · carga por partes
ScrollLenis con retenciónLa rueda pesa más en los momentos clave
Nota de dirección
Cromat® Estudio · Alcalá Norte
No le hicimos una web a Alcalá Norte: le abrimos la portada. El cuadro de Carle Naide ya contaba la historia, un viejo trepando un monolito mientras tres ermitaños lo miran, y lo único que hicimos fue dejar subir al visitante con él. Al final, como dice el disco, todo vuelve a quedar como estaba.
Siguiente proyecto
Kase.O →