Cuidado en cada detalle
- Scroll animado
- Escenas 3D
Nuevo
Qué hace especial
- Escenas 3D
- Audio interactivo
- Escarcha con refracción y recongelación en tiempo real (shaders WebGL con React Three Fiber)
- Vídeo de producto en bucle en la escena Bebida
- Sonido interactivo opcional tras la primera interacción
- prefers-reduced-motion respetado en la interfaz
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 (5)
- Escena a pantalla completa con escarcha que se despeja con el cursor o el dedo y se recongela
- Helado: imagen del envase bajo el hielo
- Bebida: lata «Bajo cero» girando en bucle
- Cámara: la imagen de la cámara bajo el hielo (con permiso)
- Interfaz mínima con cambio de escena y sonido opcional
Qué puedes personalizar
- Imágenes y vídeo de las escenas (src/config/medios.ts y public/image/), respetando los formatos de manifest-assets.json
- Textos de la interfaz
- Tipografía con tu propio kit de Adobe Fonts (VITE_ADOBE_FONTS_KIT)
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 proyecto y copia el prompt: tu herramienta de IA trabaja sobre sitio/ con REPRODUCCION.md, recreacion-spec.json, manifest-assets.json y las capturas como referencia. Instala con npm ci y ejecuta el proyecto sin cambios antes de sustituir imágenes o textos.
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 para instalar y compilar (npm ci, npm run build).
- Navegador con WebGL; sin él muestra un aviso y no hay versión estática.
- La cámara pide permiso, exige HTTPS o localhost y solo funciona en navegadores compatibles; la imagen no se graba ni se envía.
- La tipografía de la demo (VDL LogoJr Black, Adobe Fonts) no se incluye: hace falta un kit propio; sin él, los textos usan sans-serif.
- Los envases y la marca «Bajo cero» son ficticios. El vídeo de Bebida conserva el sello «KlingAI 3.0 4K» y su giro decelera al mostrar el frente.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- React
- Vite
- TypeScript
- Three.js
- React Three Fiber
- drei
- WebGL
- Web Audio
- 3D
Implementadas en el paquete que descargas.
React 19 + Vite + TypeScript · three.js con React Three Fiber y drei · Shaders WebGL · Web Audio (sonido opcional)
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
#000000#ffffff
- VDL LogoJr Black (Adobe Fonts, no incluida: requiere kit propio; sin él, sans-serif)
Composición: 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.0.0: proyecto completo del Piloto 16 con los medios de la versión v3 (vídeo bebida-bajo-cero-v3-964fb527.mp4), máster 4K, marca y capturas. Avisos y procedencia en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.0.0 · Publicado 11 nov 2026