01Recreación
Tidewell Hall
Un sitio que vende eventos y estancias de hotel a la vez: una página de inicio guiada por el scroll sobre un shader de agua en WebGL, una página de campaña fija y un flujo de reserva detrás de cada botón de Book Room.
/
/summer-series
Qué construí
- Página de inicio que abre con una cuadrícula de fotos y se sumerge en un shader de agua en vivo.
- Página de campaña contada dentro de una sección fija de 400vh.
- Modal de reservas con disponibilidad, tarifas por noche, apartado y código de confirmación.
Notas de ingeniería
Shader de agua en WebGL puro
Ruido con domain warping y ondas que siguen al puntero, a una resolución interna reducida. Se pausa fuera de pantalla, dibuja un cuadro fijo con movimiento reducido y usa CSS como respaldo sin WebGL.
Una versión fijada con razón
Las versiones nuevas de Framer Motion pasaron la opacidad ligada al scroll a un ViewTimeline nativo, y eso rompía los transforms de varios segmentos dentro de la sección fija. El sitio se queda en la versión con la que salió, y la razón está documentada.
Qué corre en modo demo
- Los formularios, la disponibilidad, las tarifas y los códigos de confirmación se generan en el navegador.