04Concepto
Tejocote
Un sitio de una página para un restaurante: carta con filtros por dieta, reservaciones con apartado y código de confirmación, pedidos por WhatsApp y un formulario para eventos, en español e inglés.
- Platillos en la carta, con filtros por dieta
- 36
- Idiomas, con cada texto en los dos
- 2
/
/
/
Qué construí
- Un hero donde un shader en WebGL proyecta la sombra de las hojas sobre la foto del platillo y reacciona al cursor.
- Una carta en seis secciones, con filtros por dieta y pedido para llevar.
- Reservaciones con disponibilidad simulada, apartado de cinco minutos, código de confirmación y archivo de calendario.
- Estado de abierto o cerrado según el reloj del visitante, y un mapa ilustrado.
Notas de ingeniería
Sombra de hojas en un solo shader
Dos capas de hojas y los discos de sol que se cuelan por los huecos se dibujan en un solo fragment shader sobre la foto. Se pausa fuera de pantalla, dibuja un cuadro fijo con movimiento reducido y usa CSS si no hay WebGL.
Reservas sin servidor
La disponibilidad, la cuenta regresiva del apartado, el código de confirmación y el archivo .ics se generan en el navegador, así que el flujo completo se puede probar.
Qué corre en modo demo
- Las reservaciones, los pedidos y el formulario de eventos corren en el navegador. No se envía nada.
- El restaurante, su dirección y su carta son ficticios.