- Scroll animado
- Carrusel
Qué hace especial
- Scroll animado
- Escenas 3D
- Carrusel
- Preguntas frecuentes
- Hero: pliegues violeta animados con shader propio que reaccionan al puntero, con póster sin WebGL o con movimiento reducido
- Testimonios en bucle continuo e infinito, con pausa por hover/foco y botón Pause/Play
- Tres objetos 3D perlados (un canvas por hueco), entrada con GSAP y puntero limitado
- Recorrido con un único progreso de scroll para marcador, rótulo y regla; rótulos a ≥ 24 px de los puntos
- Tarjetas de especialistas con hover 3D de 3° como máximo
- Entradas de texto con framer-motion y prefers-reduced-motion respetado
Qué incluye
- Prompt para recrear y personalizar el diseño con IA.
- Código y archivos del sitio: imágenes, fuentes y licencias.
- Demo interactiva e instrucciones.
- Uso en sitios propios y proyectos finales de clientes.
Secciones y pantallas de la demo (8)
- Hero violeta interactivo con titular, CTA y testimonios en cristal
- Sobre nosotros y tres tratamientos con ilustraciones propias
- Beneficios con tres escenas 3D (cuidado, tecnología, resultados)
- Recorrido de seis pasos sincronizado con el scroll
- Especialistas con tarjetas y cita
- Cifras de resultados, FAQ en acordeón e historias
- Expertos, testimonios y CTA de cierre
- Footer con wordmark de gran formato
Qué puedes personalizar
- Marca, paleta, copy y datos de contacto (src/config/site.ts)
- Logo y favicon propios (obligatorio: los de la demo son externos)
- Fotos y decoraciones
- Estaciones del recorrido, especialistas, FAQ y testimonios
- Fondo del hero (pliegues propios o vídeo)
Cómo empezar
- Copia el prompt y descarga los archivos.
- Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
- Revisa el resultado y publícalo en tu dominio.
Descarga el paquete y copia el prompt: tu herramienta de IA trabaja sobre sitio/ con REPRODUCCION.md, recreacion-spec.json y las capturas como referencia. `npm ci`, `npm run build` y `npm run preview` ejecutan la versión final. Cambia marca, logo y textos desde src/config/site.ts sin tocar las escenas ni las animaciones.
El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.
Detalles técnicos y requisitos
Requisitos
- Node.js 20.19 o superior y npm para instalar con el lockfile incluido.
- Navegador con WebGL para el hero y las escenas 3D (con respaldo estático).
- Plantilla de demostración: personas y testimonios ilustrativos; no ofrece atención médica ni reservas conectadas.
- El logotipo y el favicon de la demo se cargan desde el dominio de la plantilla original: sustitúyelos por los tuyos.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- React
- Vite
- TypeScript
- Tailwind CSS
- Three.js
- GSAP
- Motion
- WebGL
Implementadas en el paquete que descargas.
React 19 · Vite 7 · TypeScript · Tailwind CSS 4 · GSAP 3 · Three.js (WebGL) · framer-motion
Herramientas de IA sugeridas
ClaudeCodexCursor
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
- General Sans 400/500 (incluida)
Composición: Escritorio desde 1280 px (lienzo 1728 escalado) · móvil y tableta con composición propia; probado a 1440, 768 y 390 px
Licencia y versiones
Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia
Procedencia: Paquete v1.1.0: código final del piloto 11 (dpl_8qDotd2mCgL1tb4pT66qH1JFqLtN) con hero de pliegues propio, carrusel en bucle, objetos 3D e ilustraciones propias, fotos, decoraciones y General Sans; sin código de terceros restringido. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.1.0 · Publicado 4 nov 2026
- Versiones
- v1.1.0 · 2026-11-05 — Reapertura aprobada por Israel (5 nov 2026): hero de pliegues violeta con shader propio; carrusel de testimonios en bucle continuo con pausa accesible; tres objetos 3D nuevos (geometría cerrada, perlado) con una sola representación por hueco; ilustraciones de tratamientos redibujadas; rótulos del recorrido sin cruzar los puntos.
- v1.0.0 · 2026-11-05 — Primera versión: código final corregido (hero propio, tres ilustraciones, tres escenas 3D, recorrido sincronizado, tarjetas y footer), assets, General Sans, especificación medida, capturas, prompt, README, REPRODUCCION y licencias.