hhse/threeui-3d-pages

ThreeUI 3D Pages

Utiliza ThreeUI como una fuente visual curada, no como una colección de comandos para pegar a ciegas. El objetivo es una interfaz coherente y lista para producción, cuyo efecto de héroe, tipografía, espaciado, movimiento y contenido refuercen una misma dirección artística.

Flujo de trabajo

1. Establece el brief de diseño a partir de la solicitud del usuario: producto, audiencia, ambiente deseado, contenido principal y cualquier restricción de marca requerida. No inventes afirmaciones sobre el producto ni reemplaces el texto proporcionado con texto de demostración.

2. Busca en el catálogo incluido:

   node scripts/threeui.mjs search "botón de lanzamiento de metal líquido"
   node scripts/threeui.mjs search "página de aterrizaje de perfume de lujo con humo"
   

3. Preselecciona dos o tres candidatos compatibles, luego inspecciona el más sólido:

   node scripts/threeui.mjs show <item-id>
   node scripts/threeui.mjs guide <item-id>
   

4. Elige un efecto ancla. Agrega como máximo un elemento ThreeUI de apoyo, y solo si cumple un rol jerárquico o de interacción distinto. No acumules shaders no relacionados solo para que la página se vea más recargada.

5. Lee references/integration.md antes de modificar el código de la aplicación. Contiene las reglas de fuente, asset, composición, rendimiento y verificación.

Reglas de decisión

• Haz coincidir el efecto con el contenido. Una página de producto tranquila no debe recibir automáticamente un campo de partículas de alta energía, y un dashboard no debe usar un shader cinematográfico de página completa como superficie principal.
• Prefiere una página completa o un héroe de las categorías Landing Pages y Hero cuando la tarea sea un nuevo sitio. Prefiere un componente de fondo cuando una UI existente necesite profundidad, y un botón o elemento de UI cuando el alcance solicitado sea más pequeño.
• Utiliza los metadatos del catálogo (runtime, interaction, asset y variants) para rechazar candidatos que entren en conflicto con el stack objetivo o el límite de rendimiento.
• Trata la imagen y el efecto de movimiento como una capa del diseño. El diseño circundante, la escala tipográfica, los espacios en blanco, el contraste y las llamadas a la acción siguen determinando si el resultado se ve terminado.
• Si el catálogo no tiene un componente de Comunidad adecuado, indícalo claramente y construye la solución más apropiada a partir del stack existente del proyecto. No afirmes que se usó un asset Pro o no disponible de ThreeUI.

Reglas de fuente

• El código de la Comunidad tiene licencia MIT. Conserva la atribución y los avisos de licencia incluidos; consulta references/THIRD_PARTY_NOTICES.md. No redistribuyas miniaturas o vistas previas remotas de ThreeUI.
• Prefiere el paquete npm @designcodeio/threeui y sus nombres de importación documentados. No copies un catálogo de plantillas completo en el proyecto de destino.
• Si existe una guía de implementación, síguela antes de improvisar. La guía identifica los archivos fuente canónicos, los assets, las versiones de runtime y el comportamiento.
• Nunca reemplaces un shader, geometría o asset creado por un autor con una aproximación visual tosca cuando la fuente exacta esté disponible.
• Utiliza el Pro MCP o CLI solo cuando el usuario tenga su propio acceso autorizado. Nunca solicites, almacenes ni incorpores credenciales en el proyecto generado.

Barra de finalización

Antes de finalizar, ejecuta los comandos de compilación, pruebas y lint que existan en el proyecto de destino. Inspecciona los renderizados de escritorio y móvil, la salida de la consola del navegador, el comportamiento de movimiento reducido y la ruta de fallback de WebGL cuando corresponda. Informa las comprobaciones exactas realizadas y cualquier validación que no se haya podido completar.