WEBCHARRA STUDIO
Una nueva
dimensión.
DIGITAL EXPERIENCE001 / ∞
01 / SUPERFICIES
Spotlight & profundidad
Una luz que acompaña al cursor. Perspectiva sutil, sin perder el foco en el contenido.
EXPERIMENTOS DIGITALES / VOL. 01
No solo se ve.
Se siente.
Un pequeño laboratorio de grandes interacciones.
Texturas, movimiento y detalles que convierten una interfaz en una experiencia.
HTML + CSS + JS · Sin dependencias · Hecho para experimentar
LA COLECCIÓN
Ideas que puedes tocar.
No son capturas. Son componentes reales.
Interactúa con cada uno y mira cómo está pensado.
Tu espacio de trabajo
EXPLORAR
Primero, la idea.
Del primer boceto a una identidad que se reconoce.
CONSTRUIR
Simple por dentro.
Componentes pequeños. Intención en cada línea.
<button class="idea">
Hazlo posible ↗
</button>PUBLICAR
Listo para salir.
Una última revisión antes de compartir tu proyecto.
- ✓ Adaptación móvil
- ✓ Navegación por teclado
- ✓ Contenido revisado
02 / NAVEGACIÓN
Pestañas con intención
Cambia de contexto sin cambiar de página. Prueba también las flechas del teclado.
AHORAstudio✳
Tu próxima
gran idea.
ANTESMi página web
Inicio Servicios Contacto
Bienvenido a
nuestra web
03 / NARRATIVA VISUAL
Antes. Después. Wow.
Cuenta una transformación con un gesto. Un control nativo, también accesible con teclado.
ONBOARDINGGrandes proyectos.
Grandes proyectos.
Pequeños pasos.
Un formulario que pregunta lo justo, en el momento justo.
DEMO · NO ENVÍA DATOS04 / FLUJOS UX
Menos preguntas. Más avance.
Progreso visible, validación amable y un resumen antes de terminar. Sin perder lo escrito al volver.
DISEÑO QUE ESCUCHALo complejo,
Lo complejo,
hecho simple.
Información cuando la necesitas.
No toda de golpe.
01 ¿Por qué usar movimiento?
Para explicar una relación, señalar un cambio o confirmar una acción. La animación debe ayudar, no distraer.
02 ¿Y si prefiero menos efectos?
Este laboratorio respeta el ajuste de movimiento reducido del dispositivo. También puedes pausar los efectos desde la cabecera.
03 ¿Funciona sin JavaScript?
Este acordeón sí: utiliza los elementos nativos details y summary. El contenido permanece disponible sin scripts.
05 / DIVULGACIÓN PROGRESIVA
Espacio para las respuestas
Acordeón editorial con apertura suave. Una solución nativa, sin reinventar controles.
Los detalles
lo cambian todo.
Reposo → carga → confirmación.
Una demo, no una publicación real.
06 / MICROINTERACCIONES
Una respuesta que se nota
Un estado para cada momento. Sin dobles clics ni dudas sobre qué está pasando.
COLECCIÓN 02 / SUAVE
Pastel, pero con intención.
Pequeños gestos, superficies cálidas y controles amables.
TU ESTADO, TU ESPACIO
Baja el ritmo.
Un poco de espacio para respirar y empezar sin prisa.
07 / COLOR VARIABLE
Una atmósfera a elegir
Cambia la paleta y el mensaje con controles reales.
UN DÍA MÁS LIGERO
Tu pequeño ritual.
Tres pasos. Sin prisa.
08 / PROGRESO AMABLE
Pequeños rituales
Una lista clara con progreso visible.
UN PLAN PARA CADA RITMO
Studio ✳
12€ / mes
Facturación mensual. Precios ficticios.
DEMO · SIN CONTRATACIÓN09 / PRECIO TRANSPARENTE
Una cuenta, dos ritmos
Compara periodos y muestra el importe completo.
COLECCIÓN 03 / EXPRESIVA
Color pop. Sin pedir permiso.
Tipografía potente, contraste y un punto de juego.
SEÑAL DE ESTUDIO / 001
En reposo
10 / CONTRASTE LUMINOSO
Neón a demanda
Un acento brillante que tú decides encender.
WC / LIVE14 JUN · 20:30
IDEAS
EN VIVO
EN VIVO
SALA ABIERTA · SALAMANCA
Total: 24 €
Evento ficticio · No se venden entradas.11 / BRUTALISMO POP
Una entrada con carácter
Una estética editorial y total actualizado.
POSTER STUDY / 03
Ácido
12 / SISTEMA DE COLOR
Un póster, tres tonos
La misma composición cambia de personalidad.
COLECCIÓN 04 / TRANSLÚCIDA
Glass, con capas y propósito.
Profundidad suave: el contenido permanece por delante del efecto.
CREATIVE CLOUD / 08
W.
Ideas en otra dimensión.
Una superficie ligera entre el fondo y lo que importa.
EN LÍNEA ●13 / SUPERFICIE FROSTED
Transparencia regulable
Prueba el blur sin comprometer la legibilidad.
W.
Tu espacioActividad reciente
STodo al día. Qué bien se siente.
Demo local · Máximo 3 avisos
14 / MENSAJERÍA
Avisos que no interrumpen
Apilables, descartables y con límite.
ATMÓSFERA DE ESTUDIO18:00AtardecerUn paisaje imaginario · No es el pronóstico real.
15 / CONTEXTO AMBIENTAL
La hora cambia la luz
Un selector sencillo crea una atmósfera distinta.
COLECCIÓN 05 / CINÉTICA
Pequeños movimientos. Gran intención.
Ritmo, respuesta y control. Pausa los efectos cuando quieras.
UNIVERSO / 001Controla el botón de efectos de la cabecera.
16 / ÓRBITAS CSS
Movimiento en calma
El ritmo cambia; la pausa también se respeta.
WEBCHARRA / CLUBUna idea
en marcha.MEMBRESÍA DE ESTUDIO
en marcha.MEMBRESÍA DE ESTUDIO
17 / GIRO 3D
La otra cara de la idea
Una tarjeta reversible con control explícito.
RESPUESTA / ELASTIC
Un poco de impulso. Sin salirte del camino.
Posición inicial
18 / CURVA ELÁSTICA
Un rebote con propósito
La transición responde y acaba exactamente en su sitio.
COLECCIÓN 06 / HERRAMIENTAS
Útiles, claros y listos para probar.
Controles que resuelven tareas reales, diseñados para jugar sin guardar ni enviar datos.
COLOR TOOL / LOCAL
Una paleta al azar.
Paleta inicial · No se guarda.
19 / COLOR SYSTEMS
Paleta en un clic
Genera combinaciones y copia un color pulsando su muestra.
SOUND CHECK / 04
Encuentra tu nivel.
Un nivel cómodo para empezar.
Solo es una representación visual. No reproduce audio.20 / CONTROL CONTINUO
Un control con respuesta
El valor se refleja con número, medidor y texto.
QUICK FIND / 05
Busca una idea.
- 01 Sistema de color
- 02 Órbitas en calma
- 03 Cristal a tu medida
- 04 Formulario por pasos
4 ideas disponibles
21 / BÚSQUEDA RÁPIDA
Menos scroll. Más hallazgos.
Filtra una lista pequeña con escritura o atajos.
OPEN STUDIO / HORARIOS
Elige un momento.
Martes · 20 mayo, a las 10:30. Demo, sin reserva.
22 / SELECCIÓN DE HORARIO
Un turno, sin fricción
Selector compacto con un resumen comprensible.
FORM UX / LOCAL
Una clave de ejemplo.
El texto solo se analiza en tu navegador y no se almacena.23 / FEEDBACK DE FORMULARIO
Orientación, no juicio
Una demostración local de medidor orientativo.
CONTENT STATE / 06
El contenido está llegando.
Estado inicial: cargando.
Es una simulación visual, no una petición real.24 / ESTADOS DE CARGA
Espera con contexto
Un skeleton evita dejar un espacio sin explicación.
COLECCIÓN 07 / MAPAS & LUGAR
El lugar también es parte de la experiencia.
Mapas esquemáticos, búsqueda local y rutas interactivas.
Sin GPS, teselas externas ni llamadas a servicios.
ATLAS / CENTRO IMAGINARIO
CALLE MAYORPASEO DEL NORTE
Plaza del OlmoPunto de encuentro · Zona centro
Mapa conceptual · Barrios y lugares ficticios.25 / PINS INTERACTIVOS
Un mapa con puntos de interés
Selecciona un marcador para actualizar el resumen accesible.
ROUTE PLANNER / LOCAL
Traza una ruta.
Ruta conceptual · 8 min andando
Estimación ilustrativa, no navegación real.26 / RUTAS Y MODOS
Un recorrido a tu manera
Origen, destino y modo en un resumen inmediato.
NEARBY / DEMO
¿Qué tienes cerca?
- Café OlmoPlaza del Olmo · 3 min☕
- Galería PatioPatio de la Luz · 6 min◇
- Tostador NortePaseo del Norte · 8 min☕
3 lugares ficticios · No se usa tu ubicación.
27 / BUSCADOR LOCAL
Cerca, sin pedir tu ubicación
Un directorio de muestra filtrado por texto y categoría.
PLACE CARD / SalamancaABIERTOPlaza del Olmo, 4 · Salamanca
Dirección de demostración
UN BARRIO ILUSTRADO
Estudio del Olmo
Espacio creativo · Centro ficticio
Dirección de demostración
Ubicación de ejemplo, no corresponde a un local.
28 / FICHA DE UBICACIÓN
Una dirección con contexto
Combina datos esenciales y mini mapa ilustrado.
SERVICE AREA / RADIUS
Define tu zona de servicio.
TÚABC
ZONA DE EJEMPLOUna zona orientativa alrededor de tu punto.
Diagrama ilustrativo · No consulta tu ubicación.29 / COBERTURA
Comunica hasta dónde llegas
Un rango ajustable sobre una zona esquemática.
DATA MAP / SAMPLE
Una mirada al conjunto.
Zona norte12 puntos de interés
Datos sintéticos · Sin direcciones reales.
30 / DATOS GEOAGRUPADOS
Del punto al panorama
Explora grupos sin llenar el mapa de marcadores.
BONITO ES SOLO EL PRINCIPIO
El mejor efecto es
que todo funcione.
Teclado, móvil, contraste y movimiento reducido.
La experiencia también está en lo que no se ve.