Plantilla gratuita de página de aterrizaje 3D para sitios web de jugos, bebidas y marketing de productos (Next.js + Three.js + GSAP)

En resumen: la plantilla de landing 3D es un sitio de una sola página para una marca de jugos, construido con Next.js 15, Three.js y GSAP, en el que una rueda de cuatro latas 3D gira y la página adopta los colores de cada sabor. Es gratuita: la reclamas en Aniq-UI con tu correo y tu nombre y descargas el código fuente completo. Su licencia comercial cubre proyectos ilimitados, tuyos o de tus clientes.

Eleva tu sitio de productos con UI 3D

Si estás lanzando una marca de bebidas, una muestra de productos o un portafolio creativo, una experiencia 3D puede captar la atención instantáneamente. Esta plantilla está diseñada para crear impacto visual, manteniéndose ligera y responsiva.

¿Qué incluye esta página de aterrizaje 3D?

🍓 Construida con Next.js App Router para enrutamiento rápido y SEO

🎨 Estilizada con Tailwind CSS para actualizaciones rápidas de UI

🌀 Animación Three.js en tiempo real de tu producto (lata, objeto o dispositivo)

📱 Diseño totalmente responsivo para móvil/tablet

⚙️ Fácil de personalizar texto, assets y visuales de fondo

🎁 Consíguelo Gratis

¡Esta plantilla ahora es completamente gratuita! No se necesita código promocional.

Descarga Gratuita: Obtén la plantilla completa con todas las funciones y actualizaciones de por vida sin costo alguno.

Obtén la plantilla ahora:

1. 👉 Descargar Plantilla Gratis
2. Gratis: escribe tu nombre y tu correo, y descarga el ZIP

¿Quieres más plantillas como esta?

Esto es parte de mi sistema continuo de plantillas UI en Aniq-UI. Estoy construyendo plantillas modernas y amigables para desarrolladores no para dashboards pesados, sino para proyectos web creativos, páginas de aterrizaje y uso en el mundo real.

🚀 Primeros pasos

Instalación de la plantilla

# Descarga la plantilla desde Buy Me a Coffee
# Descomprime el archivo y navega al directorio

# Instala las dependencias
yarn install

# Ejecuta el servidor de desarrollo
yarn dev

Nota: la descarga ya no pasa por Buy Me a Coffee. El ZIP se obtiene ahora en la página de la plantilla en Aniq-UI, y Yarn 4 necesita ejecutar corepack enable una vez antes de yarn install. Los pasos actuales están en Ejecutarla en local, más abajo.

🎨 Tecnologías utilizadas

1. Next.js 15.2.4: Framework React moderno con App Router
2. Three.js: Biblioteca 3D para WebGL
3. GSAP: Animaciones de alto rendimiento
4. Tailwind CSS 4: Framework CSS utilitario
5. TypeScript: Tipado estático para mejor desarrollo

La descarga actual (versión 2026-10-24) funciona con Next.js 15.5.28, según sus notas de versión. Consulta Stack técnico y versiones, más abajo.

💡 Casos de uso perfectos

1. Marcas de bebidas: Muestra latas, botellas o packaging
2. Portafolios creativos: Presenta trabajos de diseño en 3D
3. Sitios de productos: Destaca características con visuales inmersivos
4. Agencias: Impresiona clientes con experiencias interactivas

🔧 Características técnicas

1. Optimizado para SEO con metadatos estructurados
2. Carga lazy de modelos 3D para mejor rendimiento
3. Animaciones suaves y responsivas
4. Compatible con todos los navegadores modernos
5. Código limpio y bien documentado

📱 Diseño responsivo

La plantilla se adapta perfectamente a:

1. Desktop: Experiencia 3D completa
2. Tablet: Animaciones optimizadas
3. Móvil: Versión ligera con controles táctiles

---

¿Listo para crear una experiencia 3D impactante? Descarga gratis ahora y lleva tu sitio web al siguiente nivel.

---

Referencias:

1. Three.js Documentation
2. GSAP Animation Library
3. Next.js App Router
4. Más plantillas en Aniq-UI

Descarga gratis la plantilla de landing page 3D construida con Next.js y Three.js, explora más plantillas de landing page Next.js o descubre la colección completa de plantillas Next.js en Aniq UI.

Qué incluye la descarga actual

La plantilla es un sitio de una sola página para una marca de jugos llamada Juicy. Puedes probarla antes en la demo en vivo.

• Carrusel de latas 3D: cuatro latas en una rueda, una por cada cuarto de vuelta. Gira con la rueda del ratón, las flechas del teclado o los botones de flecha, y una lata que arrastras vuelve a su sitio al soltarla.
• Un tema por sabor: el fondo, el resplandor detrás de la lata y los botones cambian de color con el jugo seleccionado.
• Frutas flotantes, cubitos de hielo y hojas, y una onda de agua que sigue al puntero.
• Un diseño propio para teléfonos, que se usa a 600 píxeles de ancho o menos.
• Inglés y árabe, con la página en árabe de derecha a izquierda.

Los sabores son Lemon Ginger, Blueberry Açai, Mango Burst y Raspberry Rosé. El formulario de inicio de sesión y el panel del carrito son elementos de demostración sin back-end, así que no se envía nada a ningún sitio. El ZIP contiene una sola carpeta, juicy, con el sitio, un Dockerfile, la guía README.md y la licencia LICENSE.md. Las dependencias están fijadas a versiones exactas e incluye yarn.lock.

Stack técnico y versiones

Parte	Qué usa
Framework	Next.js 15.5.28 (App Router), React 19, TypeScript 5
Estilos	Tailwind CSS 4
Escena 3D	Three.js 0.176.0 con React Three Fiber y Drei
Animación	GSAP 3.15.0, y react-water-wave para la onda
Idiomas	next-intl
Datos	Ninguno: sin base de datos, sin API y sin variables de entorno

Para quién es

Encaja en un proyecto donde un solo producto cuenta toda la historia: una marca de bebidas, el hero de un producto de comida o bebida, una página de marketing de producto, una intro 3D para un portafolio o una demo de presentación para una agencia. También es un ejemplo práctico de Three.js dentro del App Router de Next.js, si quieres aprender a combinar GSAP con una escena 3D.

No es una tienda ni un sitio de varias páginas. Los botones See More, Checkout y View Cart todavía no tienen acción, así que los conectas a tu propia tienda. Si necesitas una tabla de precios o casos de éxito, mira la comparación más abajo.

Cómo conseguirla gratis

1. Abre la página de la plantilla de landing 3D y pulsa Obtener Gratis.
2. Introduce tu correo y tu nombre y pulsa Reclamar. Así se crea tu cuenta de Aniq-UI y se abre tu panel con la sesión iniciada.
3. Descarga el ZIP desde Mis plantillas.

El precio es de 0 $ y no hay ningún paso de pago.

Ejecutarla en local

Usa Docker o Node.js, no ambos. No hay que crear ningún archivo .env. Con Docker Desktop abierto:

unzip juicy-*.zip
cd juicy
docker build -t juicy .
docker run -p 3030:3030 juicy

Sin Docker, instala Node.js 22 o posterior y ejecuta esto en la carpeta juicy:

corepack enable
yarn install
yarn dev

En ambos casos el sitio responde en http://localhost:3030, con el árabe en /ar. Para una compilación de producción, ejecuta yarn build y luego yarn start. Si el puerto 3030 está ocupado, usa docker run -p 3041:3030 juicy o yarn dev -p 3041. La guía de instalación tiene todos los pasos y una página de solución de problemas.

Desplegarla

El sitio no necesita ninguna variable de entorno, así que el despliegue es corto:

• Vercel: sube la carpeta juicy a un repositorio Git, impórtala en Vercel con la configuración de Next.js por defecto y añade ENABLE_EXPERIMENTAL_COREPACK=1 antes del primer despliegue para que Vercel instale con Yarn 4.
• Un servidor con Node.js: con Node.js 22 o posterior, ejecuta corepack enable, yarn install, yarn build y yarn start, y dirige tu dominio al puerto 3030 con Nginx o Caddy. yarn start ignora PORT; en un hosting que lo define, arranca con yarn next start -p $PORT.
• Docker: la imagen local también funciona en un servidor, con docker run -d --restart unless-stopped --name juicy -p 3030:3030 juicy.

Los detalles están en la guía de despliegue.

Personalizar la escena 3D y los colores

Todos los textos están en messages/en.json y messages/ar.json, incluidos el título y la descripción de la página bajo metadata. Un sabor es un identificador que une una lata 3D, un tema de colores, una imagen de fruta y sus textos. La rueda tiene exactamente cuatro latas, así que reemplazas un sabor en lugar de añadir un quinto:

1. Cambia el identificador en src/types/juice.ts. TypeScript señala después cada archivo que todavía usa el anterior.
2. Crea la lata: un archivo .glb con un cuerpo M_Aluminum y una etiqueta M_Cola, una imagen de 2048 por 958 píxeles. Abre una lata existente en Blender, cambia la etiqueta y expórtala como glTF Binary (.glb) con el mismo tamaño y posición.
3. Añade el modelo en src/features/carousel/constants/juiceCans.ts. La primera lata es la que se muestra al abrir la página.
4. Define sus colores en src/features/product-showcase/constants/themes.ts, añade un PNG de fruta de 400 por 600 píxeles y escribe sus textos en los dos archivos de mensajes.
5. Ejecuta yarn typecheck para encontrar lo que se te haya pasado.

Cada tema define mainBgColor (el fondo de la página), blurColor (el resplandor detrás de la lata), buttonBgColor y buttonTextColor. La luz de las latas viene de un archivo HDR local, Forest Slope de Poly Haven (CC0), indicado en environment.ts. El acabado metálico se define en el código, en useCanModel.ts. La guía de personalización cubre cada archivo, incluidas las fuentes, los tamaños y los enlaces de contacto.

Notas de rendimiento

Son ajustes del código, no puntuaciones medidas:

• Todos los archivos vienen con el sitio, incluidos los modelos 3D y el mapa de iluminación de 1k, así que la página no llama a ningún servicio externo.
• Los cuatro modelos de latas empiezan a cargarse al abrir la página, así que la rueda nunca espera un modelo al girar.
• La rueda permanece oculta tras un indicador de carga hasta que la lata del frente y la iluminación se han cargado.
• El canvas 3D limita su relación de píxeles a 1,5.
• En teléfonos, la escena usa el modo de GPU por defecto del navegador, calcula la iluminación a menor resolución y muestra menos cubitos de hielo (6 en lugar de 8) y hojas (10 en lugar de 14).

Las latas necesitan WebGL en una versión actual de Chrome, Edge, Firefox o Safari.

Comparación con las otras plantillas gratuitas de Aniq-UI

Aniq-UI tiene cuatro plantillas gratuitas. Las cuatro funcionan con Next.js 15.5.28, y solo esta tiene una escena 3D.

Plantilla	Ideal para	Escena 3D	Estilos	Licencia
Plantilla de landing 3D	El hero de un producto o una bebida	Sí (Three.js)	Tailwind CSS 4	Comercial
Plantilla Landing Page SaaS con Precios	Lanzamientos SaaS con tabla de precios	No	Tailwind CSS 3	MIT
Plantilla Sitio Empresa con Casos de Éxito	Sitios de empresa con casos de éxito y equipo	No	Tailwind CSS 3	MIT
Plantilla Portafolio Agencia Diseño Web	Portafolios de agencias y freelancers	No	Tailwind CSS 3	MIT

Revisa la licencia: las plantillas MIT pueden usarse en proyectos de código abierto, mientras que la licencia comercial de esta no permite compartir su código fuente.

Preguntas frecuentes

¿Es realmente gratis la plantilla de landing 3D?

Sí. Su precio es de 0 $. Pulsa Obtener Gratis en su página, introduce tu correo y tu nombre y descarga el código fuente desde Mis plantillas en tu panel de Aniq-UI.

¿Puedo usarla en proyectos comerciales o para clientes?

Sí. Su licencia comercial cubre proyectos ilimitados, tus propios productos o trabajos para clientes, y puedes modificar el código. No puedes revender ni compartir el código fuente, venderlo como plantilla, kit de UI o tema, ni incluirlo en un proyecto de código abierto. Lee la licencia completa.

¿Qué versión de Next.js usa?

Next.js 15 con el App Router. La versión actual funciona con Next.js 15.5.28, con React 19 y Tailwind CSS 4.

¿Cómo cambio el modelo 3D de la lata?

Cada lata es un archivo .glb en public/assets/3d/can/, listado en juiceCans.ts. Cambia la imagen de la etiqueta del material M_Cola en Blender, exporta como glTF Binary y apunta la lista al nuevo archivo.

¿Puedo desplegarla en Vercel?

Sí. Importa el repositorio con la configuración de Next.js por defecto y añade ENABLE_EXPERIMENTAL_COREPACK=1 para que Vercel use Yarn 4. No hace falta ninguna otra variable.

¿Necesita un back-end o una base de datos?

No. No hay base de datos, ni API, ni variables de entorno. El formulario de inicio de sesión y el carrito son elementos de demostración que conectas a tu propio back-end.

¿Admite árabe y diseño de derecha a izquierda?

Sí. El inglés está en /en y el árabe en /ar, donde el texto y los botones van de derecha a izquierda. Puedes añadir un idioma en src/i18n/routing.ts.

Guías relacionadas

• Las mejores plantillas de landing page Next.js para 2026, gratis y premium
• Plantillas gratuitas de landing page para agencias, empresas y SaaS
• Las mejores plantillas Next.js para 2026, por caso de uso
• Guía práctica para optimizar el rendimiento de Next.js
• Todas las plantillas de Aniq-UI, incluidas las cuatro gratuitas