Rediseño flagship · rap · Zaragoza

El casete de Kase.O

Home = canción, 88 BPM Audio sintetizado en directo Tracklist-cabeza lectora Instrumento propio
Mantén pulsado cuatro tiempos

No diseñamos una web para Kase.O: diseñamos un tema de 3:33 a 88 BPM que se navega. La home de Camisa de fuerza sigue la estructura real de una canción — intro, verso, estribillo, puente, verso, outro — y late al mismo pulso en cada elemento de la interfaz. Al final, un instrumento propio: el casete, un looper de ocho teclas que sintetiza su propia batería en el navegador y te deja irte con tu loop en un WAV.

No es un vídeo ni una captura: es la web en vivo — tócala
kase.o — la portada En vivo
▶ Tócala · mantén pulsado 4 tiempos
Portada real · Three.js + Web Audio + GSAP Ver la web completa ↗

Lo que sigue es la pieza abierta en canal: qué se pedía, de dónde sale cada decisión, cómo suena por dentro y qué hace cada elemento. En orden, y sin humo.

01

El encargo

Kase.O tenía disco nuevo — Camisa de fuerza, diez años después de El Círculo — y una presencia digital que no estaba a la altura de lo que significa su nombre en el rap en español. El briefing cabía en una frase suya: que fuera espectacular, nivel Awwwards. La nuestra fue la contraria de lo habitual: en vez de ilustrar la música con imágenes bonitas, convertir la música en la estructura de la página.

Que la home se sintiera como suena su música, no solo como se ve.

Exigencia 01

Nivel de referente internacional

No una web de artista más: una que aguante la comparación con lo premiado fuera.

Exigencia 02

El sonido, estructural

Audio en toda la web, sintetizado en directo y siempre a elección del visitante. Ni un clip, ni un sample externo.

Exigencia 03

Su voz, no la de una agencia

Todo el texto en primera persona, deconstruyendo su propio mito. Nada de lenguaje corporativo.

Exigencia 04

La verdad de Zaragoza

Que La Jota y lo maño se sientan sin folclore: en el tono, no en la decoración.

02

Por qué el listón estaba ahí

Javier Ibarra lleva rapeando desde los trece años. Con Violadores del Verso fue número uno de ventas en España; en solitario, disco de oro y nominación al Latin Grammy con El Círculo, y una gira de 52 fechas por siete países. Una web para él no compite con webs de música: compite con su propio catálogo.

+60 K
copias de Vivir para contarlo · disco de oro
6 días
tardó ese disco en llegar al oro desde su salida
Nº1
en ventas en España con Violadores del Verso
1992→
de las maquetas en casete de La Jota al Latin Grammy
La idea · y cómo está hecha
Todo lo que suena aquí lo calcula el navegador: ni un solo archivo de audio.
Enciende el sonido y tócalo
03

La home no es una web: es un tema de 3:33

Si el artista es rapero, la página no debe hablar de música: debe ser música. Así que la home no se organiza por secciones de web — inicio, sobre mí, contacto — sino por las partes de una canción, en su orden. Cada tramo hace lo que hace esa parte en un tema: la intro te mete, el verso te cuenta, el estribillo se repite hasta que es tuyo. El menú es el tracklist y el indicador de posición, la cabeza lectora avanzando por el surco.

IntroEl dropMantienes pulsado cuatro tiempos y el nombre se ensambla. No entras: te dejan entrar.
Verso 1La palabraUn poema escrito para el sitio, con su mapa de rimas a la vista.
EstribilloEl discoCambia el color de la web: vinilo que se raya, tracklist y treinta años de fundas.
PuenteEl directoCambio de aire: un terreno que respira con las fechas de la gira.
Verso 2La memoriaTreinta años en dieciséis compases, y un corte oculto detrás.
OutroEl caseteFin de cara. La aguja la levantas tú — o grabas tu propia vuelta.
04

El pulso: qué es, exactamente, una base de rap

Un bucle corto que se repite mientras alguien rapea encima. Se mide en compases, no en segundos: cada compás son cuatro pulsaciones, y cada pulsación se parte en cuatro para poder colocar los golpes con precisión — de ahí los dieciséis pasos de la cuadrícula. Encima de esa retícula, tres piezas hacen todo el trabajo: el bombo marca el peso, la caja responde en los tiempos 2 y 4 (es la palmada donde entra el público), y el charles cose el hueco entre ambos para que la cosa avance. El bajo sigue al bombo y le pone nota. Nada más. Esto es el patrón exacto que suena en la web.

Cara A · 88 BPM · un compás de dieciséis pasos
Bombo 1 · 2& · 3& — nunca en el 3 seco: ahí está la cojera que hace que suene a rap Caja en 2 y 4
88
pulsaciones por minuto · el tempo clásico del boom bap
0,682 s
dura cada pulsación · todo el sitio se mueve en múltiplos de esta cifra
0
archivos de audio · ni un mp3, ni un sample: osciladores y ruido filtrado
3:33
dura el tema · y dura la home: el reloj de la web es el reloj de la canción
05

Las melodías: por qué es imposible desafinar

De las doce notas que existen, la web solo usa cinco: la · do · re · mi · sol, la escala pentatónica menor de La — la misma sobre la que gira el acorde de la base. Cualquier cosa que toques cae dentro de esas cinco y se coloca sola en el paso de rejilla más cercano. Por eso un visitante que no ha tocado un instrumento en su vida no puede sonar mal: no le hemos quitado libertad, le hemos quitado las notas equivocadas. Prueba las teclas — las apagadas son las que la web nunca toca.

Y todo llega a tiempo. Un clic no suena cuando lo haces: suena en la siguiente semicorchea — 0,17 s de margen, imperceptible para ti, decisivo para que encaje. Es el mismo principio de un teclado con cuantización, aplicado a la interfaz entera.
Rayar el vinilo arrastra el disco y suena el plato
El wordmark cada letra, una nota de la escala
La discografía el disco seleccionado dispara su nota
La memoria el tono sube con el año y crece con la velocidad del scroll
El bombo agacha el resto de la mezcla en cada golpe, como en un estudio
Los elementos, uno a uno
Ocho piezas que hacen el trabajo. Ninguna es decoración.
06

Qué hace cada parte, y por qué está ahí

Capturas reales del sitio. Debajo de cada una, la decisión artística y lo que la sostiene por dentro.

Intro: el wordmark KASE.O construido con partículas, con líneas de fuga rojas saliendo del centro
Intro · el drop
01 · Intro

El nombre no está: lo montas tú manteniendo pulsado

Un tema no empieza: entra. Aquí la portada te pide cuatro tiempos con el dedo apretado y, mientras cuentas, el wordmark se ensambla partícula a partícula hasta reventar en el golpe. Quien no quiera esperar tiene su salida — entrar sin beat — pero quien espera se lleva la entrada del tema.

Partículas en canvasCuenta cuantizadaAudio opt-in
Verso 1: poema manifiesto con las familias de rimas resaltadas por color
Verso 1 · la palabra
02 · Verso 1

Un poema propio, con el mapa de rimas encendido

El texto no es relleno: se escribió para el sitio, en su registro. Y en vez de explicar que el rap tiene técnica, la enseña: cada familia de asonancias se colorea sola, así que ves la arquitectura de la rima como quien ve el esqueleto de un edificio.

Copy originalRimas por colorAparición al compás
Estribillo: el disco Camisa de Fuerza en tema claro, con su portada montada como un vinilo que se arrastra y el botón para escucharlo entero
Estribillo · el disco · «arrastra el vinilo — tensa la camisa»
03 · Estribillo

Se cae el negro y entra el papel

El estribillo es el momento en que un tema cambia de color, y aquí cambia literalmente: la web pasa a fondo claro para presentar Camisa de fuerza. La portada va montada como un vinilo que se arrastra con el dedo y raya de verdad — suena el plato —, y al soltarlo vuelve a su sitio. Debajo cae el tracklist de los dieciséis cortes con sus enlaces reales, sin inventarse un vídeo que no existe.

Cambio de temaVinilo rayable16 cortes enlazados
El cajón de la discografía: las fundas de todos los discos en perspectiva, con Rompecabezas de 1994 al frente
El disco · el cajón de la discografía
04 · La discografía

Un cajón de discos que se hojea con el dedo

Toda su obra en fila, en perspectiva, como quien pasa fundas en una tienda: de la maqueta Rompecabezas — La Jota, catorce años, etiqueta escrita a boli — a Camisa de fuerza. Se arrastra, rueda con la rueda del ratón o va con las flechas; el disco que entra al frente suelta su nota y abre sus enlaces reales de Spotify y YouTube.

Perspectiva CSS 3DArrastre físicoEnlaces verificados
Una letra S pintada con spray a pantalla completa sobre fondo de papel, con su grano y su niebla de pintura
La letra · grafiti a pantalla completa
05 · La letra

K–A–S–E: cuatro letras que eran buenas para pintar

El alias no viene del rap, viene del grafiti: eligió esas letras porque se movían bien en una pared. Así que la web deletrea el nombre a pantalla completa, letra a letra, pintadas con spray — con su grano y su niebla de pintura, no con una tipografía «urbana» de catálogo. Cada letra que cae suena en la escala.

Spray realUna letra, una notaRaíz b-boy
Puente: terreno tridimensional de malla con las fechas de la gira sobre él
Puente · el directo
06 · Puente

Un terreno que respira con la gira

El puente rompe el aire de la canción, y aquí rompe el de la página: se va el papel y aparece un relieve de malla que late con el pulso mientras pasan las nueve fechas reales de 2027. Zaragoza no es una fila más de la lista: es su ciudad, y se trata como tal.

Malla 3DFechas realesShaker en la mezcla
Verso 2: contador de años a pantalla completa marcando 1999 sobre fondo oscuro
Verso 2 · la memoria
07 · Verso 2

Treinta años en dieciséis compases

La biografía no es una lista de hitos con foto: es un contador de años que corre con tu scroll. El tono sube según avanza el año y crece con la velocidad a la que empujas, así que recorrer su vida deprisa suena distinto a recorrerla despacio. La cronología entra por el oído antes que por el ojo.

Scroll sonoroDatos verificadosTimeline 1992→2026
Corte oculto: pantalla en silencio que da paso a los proyectos personales del artista
Corte oculto · lo que hace cuando no rapea
08 · Corte oculto

El silencio también es parte del disco

Todo disco de rap tiene su corte escondido al final. El del sitio abre la puerta a lo que hay fuera de la música — sus proyectos personales — y lo hace con un compás de silencio: el latido de la interfaz baja, y por un momento la página deja de insistir. Es lo que permite que la web sobreviva a este disco.

Compás de silencioEspacio para lo no musical
El instrumento · pruébalo
Ocho teclas. Grabas dos compases y te llevas tu loop en un WAV.
Suena aquí mismo
el casete · looper de 8 teclas En vivo
▶ Toca para sonar
ASD percusión · GHJKL escala · todo sintetizado en el navegador Abrirlo en la web ↗
07

El casete: el reproductor que resultó ser un grabador

La pieza que cierra la web no reproduce nada: graba. Es un instrumento de ocho teclas anclado abajo, con tres huecos de bucle y un botón de cinta. Tocas encima de la base, aprietas un hueco y quedan grabados dos compases que empiezan a girar solos; encima de eso vuelves a tocar y grabas otro. Cuando te gusta lo que suena, la cinta te lo baja en un WAV. De cero a canción propia en minuto y medio, sin saber música y sin leer instrucciones.

El casete de la web de Kase.O: ocho teclas (bombo, caja, clap y las notas la, do, re, mi, sol), tres huecos de bucle con el primero grabado y sonando, el botón de la base y el botón de descarga de la cinta en WAV 1 2 3 4 5
El casete, a tamaño real · primer hueco grabado y girando Ocho teclas · tres huecos · una cinta
1

Tres golpes

Bombo, caja y clap. Los mismos que suenan en la base, con los mismos parámetros de síntesis.

2

Cinco notas

La escala completa, ascendente. Toques lo que toques, afina con lo que ya está sonando.

3

Tres huecos de bucle

Pulsa uno vacío y se arma: cuenta 1·2·3·¡4!, graba dos compases y se cierra sola en el uno. Tocar el hueco lo silencia; mantener pulsado lo borra.

4

La base, dentro o fuera

La única mezcla que existe. Quítala y quedan solo tus bucles; devuélvela y todo vuelve a encajar en el compás.

5

La cinta

Arranca en el uno del siguiente compás y para cuando tú digas: descarga un .wav a 44,1 kHz grabado de la salida real, no de una copia.

07·b

Lo que ocurre entre que tocas y que se descarga

Gesto
Tocas
Una tecla, el vinilo, una letra del nombre: cualquier cosa que suene en la página.
Rejilla
Se coloca en el paso
El gesto no se ejecuta al instante: espera a la siguiente semicorchea del reloj de la canción.
Memoria
Se guarda el gesto, no el sonido
El bucle almacena qué tocaste y cuándo, no audio. Ocupa nada y siempre suena limpio.
Repetición
Gira cada dos compases
El mismo planificador que sostiene la base vuelve a disparar tus gestos, siempre a tiempo.
Cinta
Se convierte en WAV
Un hilo de audio aparte copia la mezcla final muestra a muestra y la empaqueta en un archivo descargable.
08

Las seis decisiones que sostienen la pieza

Ninguna es un efecto: cada una traduce algo del artista a una regla de comportamiento de la interfaz.

Estructura

La home es una canción, no una web

Intro, verso, estribillo, puente, verso, outro. El menú es un tracklist y el indicador de posición, una cabeza lectora que avanza por el surco.

Pulso

Todo late al mismo compás

Un único reloj a 88 BPM alimenta una variable de CSS. Los textos aparecen en el tiempo fuerte, los puntos respiran con el bombo: nada se mueve fuera de tempo.

Palabra

Un poema propio, con su mapa de rimas

El verso no es texto de relleno: se escribió para el sitio y cada familia de asonancias se colorea sola, para que se vea la técnica de la que presume el rap.

Grafiti

Su firma, trazada de verdad

El autógrafo real, vectorizado trazo a trazo y dibujado en vivo al mantener pulsado. Kase.O es escritor de grafiti antes que rapero; la web firma como él.

Mezcla

La página se comporta como un estudio

Los sonidos entran por un bus musical que se agacha con cada bombo y cambian de capas según la sección: bajo en el disco, shaker en el directo, aro en la memoria.

Control

El disco va de libertad: la web te la da

Camisa de fuerza habla de pensar por cuenta propia. Por eso el final no es un formulario: es un instrumento que te llevas grabado con tu nombre encima.

09

Cómo se construyó

Cuatro movimientos, en este orden. Cada uno cerró una decisión que condicionaba al siguiente.

Fase 01
Reconstruir de cero
«Tiene que ser espectacular, nivel Awwwards». La home anterior no se retocó: se tiró.
Fase 02
Poner el reloj
Antes que ningún diseño, el pulso: 88 BPM alimentando toda la interfaz.
Fase 03
Vectorizar su firma
Su autógrafo real, trazo a trazo, en vez de un icono comprado.
Fase 04
Del reproductor al instrumento
El casete: lo que iba a ser un botón de play acabó siendo un looper que se toca.
09·b

Con qué está hecho

RelojPulso a 88 BPMCSS var por frame · reveals cuantizados al compás
AudioSíntesis en directoWeb Audio API · scheduler con lookahead · cero samples
InstrumentoEl caseteLooper de 8 teclas · AudioWorklet PCM · export WAV
MotionGSAP + LenisScrollTrigger · scroll suave sincronizado al reloj
3DThree.jsTerreno wireframe del directo · partículas del wordmark
FirmaSVG vectorizado a manoAutógrafo real trazado en vivo, no una animación genérica
Nota de dirección
Cromat® Estudio · Concepto Kase.O
No diseñamos una web para escuchar a Kase.O. Diseñamos una que se comporta como su música: late a su compás, se lee como su letra, y al final te deja tocarla tú. Camisa de fuerza no se explica en la home — se ejecuta en ella.
Siguiente proyecto
Alfabeta →