Actúa como director de arte digital y desarrollador frontend especializado en webs de marca con animación. Construye la web de [NOMBRE DEL NEGOCIO], [qué es: una ferretería de barrio, una panadería, un estudio…].

Si te adjunto una imagen de referencia, manda sobre el estilo. Quiero que se sienta limpia, cuidada y diseñada a medida por una agencia cara: la calidad sale de la composición, la tipografía, los espacios y el ritmo de las animaciones, no de añadir efectos a una plantilla.

Alcance de esta primera versión:
- Portada completa y adaptada al móvil, con menú móvil accesible, navegación por anclas y un catálogo de demostración que se filtra por categorías.
- Un objeto protagonista en 3D con Three.js que represente al negocio ([la pieza: una tuerca, una barra de pan, una taza…]). Si no hay un modelo con licencia, créalo con geometría procedural.
- Sin pagos, cuentas ni pedidos. No inventes dirección, teléfono, horarios, precios ni reseñas: déjalos fuera hasta que te los dé.

Dirección visual:
- Fondo [color], texto [color] y un acento [color] solo en detalles pequeños.
- Retícula de 12 columnas, márgenes de 48–64 px en escritorio y de 20–24 px en móvil.
- Una tipografía grotesca con personalidad para los titulares, con interletrado ajustado.

Estructura: cabecera con el logotipo, hero con el titular «[TU TITULAR]», categorías con imágenes y flechas, una sección de proyectos o ideas y un cierre con el logotipo a gran escala.

Animaciones con GSAP y ScrollTrigger: el titular entra por líneas con máscara, el objeto 3D gira y se asienta al cargar, flota muy despacio en reposo y gira un poco al hacer scroll; las secciones entran escalonadas. Respeta el movimiento reducido.

Hazlo con React, TypeScript y Vite. Ejecútalo, ábrelo en una vista previa, revísalo a 390, 768 y 1440 px de ancho y corrige lo que veas antes de darlo por terminado. Incluye un README con los comandos.

Trabaja sobre la web que acabamos de hacer. Quiero que sus elementos visuales tengan un acabado fotorrealista de campaña de producto: materiales convincentes, iluminación de estudio y objetos creíbles. Conserva el diseño, la composición, la tipografía y todo lo que ya funciona.

Usa solo herramientas y recursos gratuitos:
- Blender con Cycles para modelar y renderizar (y extensiones gratuitas como Bolt Factory si encajan con tu pieza).
- Iluminación HDRI de estudio de Poly Haven (CC0).
- Texturas de materiales de ambientCG (CC0).
Comprueba la licencia de cada recurso, descárgalo dentro del proyecto y anota su procedencia en un archivo CREDITOS.md.

1. Audita cómo están hechos ahora el objeto protagonista y las imágenes: geometría, materiales, luz y resolución.
2. Rehaz el objeto protagonista para que aguante un primer plano: proporciones reales, biseles pequeños que cojan la luz, superficies bien suavizadas y materiales con variaciones sutiles. Producto nuevo bien fotografiado, sin suciedad exagerada.
3. Expórtalo en GLB para la web y comprueba que conserva los materiales. Prepara también una imagen fija como alternativa si WebGL falla.
4. Renderiza con Cycles las imágenes de las categorías con la misma dirección de luz en todas, sombras de contacto y encuadres limpios.
5. Revisa el resultado en el navegador en escritorio y en móvil, mira los objetos de cerca y corrige bordes facetados, reflejos quemados y objetos que flotan sin querer.

No afirmes haber conseguido fotorrealismo ni haber comprobado nada que no hayas mirado.

Construye el CRM de [NOMBRE DEL NEGOCIO] como una sola pantalla de inicio, en un archivo HTML con CSS y JavaScript, con el estilo de Linear o Attio: fondo casi negro, bordes de 1 px, letra pequeña y nítida, y un único color de acento ([color de tu marca]) reservado a los datos.

La pantalla responde primero a una pregunta: «¿A quién tengo que llamar hoy y qué está pendiente de cobrar?». Lo urgente va en la línea bajo el título.

Bloques:
- Barra lateral con el logotipo, el nombre del negocio y las secciones (Clientes, Presupuestos, Pedidos, Facturas…).
- Facturación del mes con un gráfico de barras por día. Las cifras de arriba (facturado, tickets, [lo que cuente tu negocio]) funcionan como pestañas que cambian el gráfico.
- «A quién llamar hoy»: una lista corta con el motivo de cada llamada y un botón de Llamar.
- «Encargos por fase»: un tablero con columnas (Nuevo, Presupuesto, Pedido, Listo para recoger) cuyas fichas se arrastran de verdad entre columnas y actualizan los contadores.
- Un aviso flotante para lo más urgente.

Usa datos de ejemplo creíbles para [tipo de negocio] y que sumen: los totales salen de las filas, sin cifras infladas. Formato español en euros y fechas. Ninguna tarjeta con icono en un círculo de color, ni degradados, ni sparklines.

Ábrelo en el navegador, prueba el arrastre, las pestañas y el aviso, revísalo también en móvil y corrige lo que veas.