Caso de estudio · Diseño y desarrollo
Que abrir el enlace se sintiera como abrir un regalo.
Sant Jordi es una de las fiestas más queridas de Cataluña: el día de las rosas y los libros. Rosesstjordi.cat traslada esa tradición al mundo digital, para que cualquiera pueda enviar una rosa virtual con una dedicatoria personal a alguien especial, con la misma emoción que regalar una rosa de verdad.
El reto: la tradición hecha digital
El objetivo no era solo construir una web bonita, sino crear un pequeño momento de magia: que abrir el enlace y ver la rosa se sintiera como abrir un regalo, no como rellenar un formulario más.
Alma antes que plantilla
Nos alejamos deliberadamente de la estética fría y genérica que suele verse en muchos proyectos hechos con IA: formas 3D, degradados suaves y todo excesivamente pulido. La rosa se dibuja a mano, con un filtro que le da un trazo ligeramente imperfecto, sobre una paleta cálida de granate y oro que remite directamente a la fiesta.
Playfair Display sostiene los titulares; una serif clásica reservada para el cuerpo de la carta acompaña la dedicatoria. Dos tipografías con carácter editorial, muy alejadas del aspecto de plantilla genérica.
Diada de Sant Jordi
Playfair Display · 700 · Titulares
El corazón: un sobre que se cierra ante tus ojos
El centro de la experiencia es un sobre animado: la persona elige su rosa, escribe su dedicatoria y ve cómo la carta se sella con una animación cuidada antes de generar el enlace para compartir.
Cuidamos mucho ese momento de transición para que fuera fluido y no diera ningún salto visual raro: es la parte en la que más tiempo de pulido se invirtió, porque es la que decide si la sorpresa funciona o no.
Envío personalizado, sin fricción
El formulario pide justo lo necesario: quién envía la rosa, para quién y la dedicatoria, con un límite de 280 caracteres que obliga a decir lo importante sin alargarse. Sin registro ni cuenta de por medio.
Enlaces que se ven bien en cualquier red
Cada rosa enviada genera un enlace único con sus propias etiquetas Open Graph: al compartirlo por WhatsApp, X, Facebook o Telegram (los cuatro canales con botón directo), o al pegarlo en Instagram, LinkedIn o cualquier otro sitio, se muestra una vista previa con la rosa y el mensaje en vez de un enlace pelado.
Bilingüe, sin fricción
Toda la experiencia está disponible en catalán y castellano, con un selector de idioma siempre a la vista. Cada rosa guarda el idioma en el que se creó, así que quien la recibe la lee en el mismo idioma con el que se envió.
Responsive de verdad
El diseño está pensado para el móvil desde la primera línea de CSS, porque es ahí donde la mayoría de la gente abrió y compartió su rosa. El sobre, la tipografía y las animaciones se comportan igual de bien en una pantalla de 380 px que en un monitor de escritorio.
Bajo el capó
Next.js con App Router en el frontend, MongoDB para guardar cada rosa (remitente, destinatario, dedicatoria e idioma) con un índice TTL que la borra automáticamente a los 30 días, e IDs cortos generados con nanoid para que el enlace sea fácil de compartir. Un límite de peticiones por IP evita el spam de rosas.
Desplegado en Vercel, con dominio propio en rosesstjordi.cat.
Resultados y aprendizaje
El proyecto conectó con la gente mucho más de lo esperado: más de 500 rosas enviadas durante la campaña, cerca de 5.000 visitas reales (la mayoría llegadas de forma orgánica por el propio efecto de compartir) y tendencia en Reddit Catalunya ese mismo día, algo que no se buscaba activamente y que demuestra el boca-oreja que generó la experiencia.
Este proyecto confirma algo en lo que creemos: los pequeños detalles de diseño y de interacción (una animación bien resuelta, una transición sin sobresaltos, una estética con carácter propio) son los que convierten una web funcional en una experiencia que la gente quiere compartir con otros.