Película promocional de Tripo 3D creada con Claude Opus 5
Una película promocional con estilo de recortes de papel para Tripo 3D, creada con Claude Opus 5 usando Three.js. Observa cómo cobran vida cinco creaciones originales, explora los recursos 3D exportados de la animación y usa el prompt para recrearla.
Creado por tripo3d
Acerca de este ejemplo
Una propuesta inicial basada en el proyecto público del creador, no una transcripción de su prompt original. El resultado puede variar.
El creador confirmó que se trata de una película promocional para Tripo 3D, creada con Claude Opus 5. El prompt de reconstrucción se basa en el proyecto fuente claude-tripo proporcionado, la explicación técnica y el video terminado. El corto original genera su geometría, texturas y sonido de forma procedural; la secuencia de generación de Tripo que aparece en pantalla es una animación de shader, no una llamada a la API de Tripo. Los cinco archivos GLB descargables son exportaciones estáticas de esa fuente con materiales portables, no modelos generados por Tripo.
Claude Opus 5Tripo 3Dpelícula promocionalThree.jsanimación de recortes de papelanimación procedural
El prompt
1. Objetivo del proyecto
Crea un corto animado interactivo de aproximadamente 44 segundos titulado “Claude × Tripo”. Una pequeña chispa naranja de Claude aterriza sobre un escritorio de papel hecho a mano, dibuja o escribe cinco ideas divertidas en un portátil con la marca Tripo y conoce las creaciones cuando cobran vida. El visitante puede ver, pausar, desplazar la reproducción, repetir, cambiar la relación de aspecto, activar el sonido o grabar la animación. Es un corto coreografiado, sin puntuación, combate ni condición de victoria. Reproduce el vídeo proporcionado y la composición de la escena.
2. Estilo visual
Usa un diorama de papel recortado por capas, con bordes rasgados de color crema, grano de gouache, garabatos, detalles de papel cuadriculado y un cielo azul medianoche. Coloca una luna creciente, estrellas amarillas cálidas, colinas de papel azul y un pequeño pueblo detrás de un escritorio de papel kraft. Sitúa el portátil abierto a la izquierda, a Claude cerca del centro y una pequeña plataforma de exposición circular a la derecha. Mantén acentos naranja cálido, lila, menta, amarillo mantequilla y crema. La cámara en perspectiva se mueve suavemente entre planos generales y primeros planos; las piezas planas separadas por profundidad crean paralaje. Usa iluminación de dibujos animados escalonada, luz de contorno fría, contornos discretos, sombras suaves y una pasada final de grano de papel y viñeta. Termina con un destello blanco de cámara y una polaroid del elenco completo, ligeramente inclinada y pegada con cinta. Igualá el encuadre de referencia al inicio, en cada aparición de una creación y en el desenlace grupal.
3. Escena e historia
Controla cada pose y movimiento de cámara desde una única función determinista update(t), de modo que saltar directamente a cualquier marca de tiempo produzca el fotograma correcto sin reproducir los fotogramas anteriores. Nombra los momentos clave de la historia en un único cronograma compartido. Claude llega alrededor de los 0,55 segundos, aterriza alrededor de los 1,7 segundos y activa el portátil a los 2,92 segundos. Muestra el gato-pan alrededor de los 7,2 segundos, la casita-caracol alrededor de los 13,85 segundos, el cohete-tostadora alrededor de los 19,8 segundos, el pulpo-tetera alrededor de los 26,1 segundos y la ballena celeste alrededor de los 33,3 segundos. El cohete despega alrededor de los 21,25 segundos y regresa alrededor de los 24,05 segundos. La ballena nada sobre el elenco entre los 35 y 37 segundos. El destello de cámara ocurre a los 40,5 segundos; termina a los 44,2 segundos. Fusiona los planos de cámara y usa anticipación suavizada, sobreimpulso elástico, squash/stretch, pequeños saltos y bamboleos que se amortigüen. Evita reinicios bruscos al pasar de una escena a otra.
4. Lista de recursos
- claude-spark: una chispa naranja plana de doce rayos, con borde crema rasgado y un rostro animado amistoso. Parpadea, mira la acción actual, sonríe, se sonroja y usa ojos alegres, mareados y brillantes. Dos rayos se estiran para formar brazos que alcanzan teclas, dibujos y otros personajes. Conserva su rostro y el comportamiento de sus brazos como un shader procedural; una exportación estática no captura la identidad ni la actuación de este personaje.
- cat: un gato con forma de hogaza de pan dorada, cuerpo redondeado, marcas de corteza horneada, orejas pequeñas, patas, cola, ojos brillantes, mejillas rosas y bigotes. Aparece en la plataforma de exposición, gira para que se lo pueda inspeccionar, recibe una caricia y acaba instalado en la parte delantera del escritorio.
- snail: un caracol verde pálido que lleva una casita de color crema con tejado coral, chimenea, ventanas luminosas y una diminuta jardinera. Mantén sus tentáculos oculares diferenciados, la casa erguida y el rostro visible durante la elevación y el desplazamiento.
- toaster: una tostadora menta con detalles y palanca coral, remates redondeados de color crema, pequeñas aletas de cohete y una tobera inferior. Despega con una llama naranja, estelas de humo y un sonido de cámara que pasa, y luego regresa. La llama y el humo deben seguir siendo efectos separados.
- octopus: una criatura con forma de tetera rosa/lila, seis tentáculos flexibles, pico vertedor y asa, rostro alegre, monóculo dorado y pajarita morada. Anima los tentáculos, un gesto de inclinación y un pequeño paseo. Mantén las poses de los tentáculos diferenciadas del cuerpo rígido de la tetera.
- whale: una ballena celeste azul con vientre crema, aletas y rostro expresivo, que lleva un pueblo diminuto cubierto de césped, casitas coloridas, árboles y un faro a rayas. Es la creación más grande y debe seguir destacando en el desenlace. El haz del faro es un efecto transparente independiente.
- environment: escritorio, portátil, lámpara, portalápices, planta en maceta, plataforma de exposición, capas de cielo y pueblo de papel, notas y lápiz. Reutiliza estos elementos durante todo el corto. Los fondos de papel, la interfaz del portátil, los garabatos, las partículas, el humo, los haces de luz y el posprocesado deben seguir siendo procedurales.
Mantén identificadores de recursos estables y transformaciones separadas para la colocación en el mundo, el giro y squash, y las piezas articuladas. Conserva las proporciones y los colores del proyecto original. Las versiones GLB portátiles pueden usar materiales estándar y una pose estática; no afirmes que incluyen el shader de aparición personalizado, la actuación ni la animación completa.
5. Interacción y respuesta
Incluye reproducir/pausar, repetir, un control deslizante de búsqueda con el tiempo transcurrido y el total, opciones de relación de aspecto 1:1 / 16:9 / 9:16, un interruptor de sonido, una vista limpia y grabación. La barra espaciadora alterna la reproducción; R repite; H o C alternan la vista limpia; Escape restaura los controles; M activa o desactiva el sonido; las flechas izquierda/derecha avanzan o retroceden un segundo, y Shift reduce el paso a 0,1 segundos. Haz que los controles se puedan usar en una pantalla táctil estrecha. El sonido debe comenzar solo después de un gesto del usuario; ofrece “Reproducir con sonido” cuando el audio de reproducción automática esté bloqueado. Al desplazar la reproducción o repetir, reinicia el sonido en el momento correcto. Al finalizar, detén el corto y ofrece repetir.
El portátil muestra el dibujo o la idea escrita actual, una barra de progreso animada y una marca de finalización. La acción Generar en pantalla forma parte de la animación creada: el corto existente usa geometría procedural y no llama a una API de generación de modelos. Muestra cada creación desde abajo hacia arriba, primero como arcilla lila y después coloreándola con una banda de escaneo cálida y luminosa. Coordina la mirada y los brazos de Claude con estos eventos.
6. Implementación técnica y audio
Usa módulos JavaScript ES y Three.js r170 con WebGL, shaders personalizados, CanvasTexture y la API Web Audio. Incluye la aplicación y las fuentes como recursos estáticos del mismo origen mediante una compilación reproducible; no uses una CDN en tiempo de ejecución ni credenciales de servicios privados. Usa Fredoka local para los controles y Caveat para el texto manuscrito. Adapta la distancia de la cámara y el tamaño de renderizado a las tres relaciones de aspecto, limita la densidad excesiva de píxeles y mantén las exportaciones fuera de las solicitudes de red iniciales de la página.
Sintetiza la música y los efectos en Web Audio. Usa una voz FM de caja de música, un bajo de triángulo filtrado punteado, marimba, pad suave desafinado, bombo, palmada/shaker, reverberación generada y compresión final. Alinea el compás cero con la activación del portátil a los 2,92 segundos y el compás dieciséis con el destello a los 40,5 segundos, para obtener aproximadamente 102 BPM; usa el ciclo F–Dm–B-flat–C. Añade efectos de lápiz, teclado, whoosh, pop, boing, gato, ballena, cohete y obturador en los momentos clave nombrados. Desplaza y moldea el sonido del motor del cohete según su movimiento relativo a la cámara. Renderiza la banda sonora en pequeños fragmentos sin conexión y ensambla un único búfer; el reloj de audio activo controla la imagen, con una alternativa de respaldo si se detiene. La grabación debe combinar el vídeo del lienzo con la banda sonora y exportar un formato compatible con el navegador. No dependas del servidor local opcional de captura en Python del proyecto original para la reproducción normal ni para la grabación en el navegador.
7. Criterios de finalización
Entrega el código fuente editable, las dependencias fijadas, una compilación estática, instrucciones de inicio y el corto listo para usar. Verifica el desplazamiento directo cerca de los segundos 8, 15, 22, 28, 36 y 41; repetir y pausar deben conservar el estado determinista. Compara la composición del elenco con el vídeo de referencia. Confirma la activación del audio, el silencio, la sincronización al repetir y una descarga de grabación real con ambas pistas. Comprueba el encuadre cuadrado, horizontal y vertical, además de los controles en escritorio y pantallas estrechas. Valida la página alojada dentro del iframe aislado del sitio principal, sin fuentes faltantes, scripts bloqueados ni errores de recursos externos. Comprueba por separado que los GLB reutilizables tengan la geometría, orientación, materiales y caja delimitadora correctos; sus portadas deben mostrar los archivos reales. Documenta cualquier diferencia entre los recursos portátiles y la versión con shader animado.
Cómo usar este prompt
01
Empieza con la herramienta adecuada
Abre tu asistente de programación o herramienta 3D preferida. Usa como punto de partida el modelo indicado en el ejemplo y consulta las instrucciones de los proyectos enlazados.
02
Elige una cosa que cambiar
Cambia el sujeto, el estilo artístico o el entorno. Define bien la cámara y la interacción. Crea primero una versión pequeña y mejora un detalle a la vez.
03
Dale recursos propios a la escena
Para un personaje u objeto personalizado, crea un modelo 3D a partir de una breve descripción o imagen de referencia e impórtalo en tu proyecto.
Las vistas previas pertenecen a sus respectivos creadores. Consulta la fuente original y la licencia del proyecto antes de reutilizar código o recursos.