Texturas

Colección personal de texturas en línea

• Astro + Tailwind

  Ligero y eficiente

• GSAP

  Efecto de canvas infinito

• Vanilla JS

  Interactividad ligera

Texturas es mi colección personal en línea de fotografías de texturas urbanas. La idea detrás del proyecto es crear una forma sencilla y elegante de publicar texturas de diseño, disponibles de forma gratuita para proyectos personales y comerciales, con atribución.

Puedes descargarlas fácilmente en alta resolución y usarlas en tus propios diseños.

El proyecto es también un experimento para crear un efecto de canvas infinito usando GSAP y Vanilla JavaScript, que permite a los usuarios explorar las texturas de forma dinámica y envolvente. Todo el código fuente está disponible en GitHub para quienes tengan curiosidad por cómo está construido.

Como desarrollador interesado en sitios web animados, sé que a veces es difícil encontrar proyectos reales que usen GSAP, así que quería crear un proyecto que mostrara sus capacidades de forma práctica. ¡Siéntete libre de clonar el repositorio y explorar el código!

La mayoría de mis proyectos de diseño requieren texturas para fondos, superposiciones y otros elementos visuales. Me encontraba constantemente buscando texturas de alta calidad en línea, pero muchas de las opciones disponibles eran de baja resolución o requerían una suscripción. Para resolver este problema, decidí coger una cámara y a un buen amigo @Marcos Rayo para explorar Barcelona y fotografiar texturas interesantes que encontrábamos en entornos urbanos.

¿Cómo puedes descargar las texturas?

Cada textura del canvas puede clicarse para abrir un modal bellamente diseñado ;) con más información sobre la textura y un botón de descarga para obtener la versión en alta resolución. Además, todas las texturas tienen una prueba de mosaico junto a la vista previa para ver cómo quedan al repetirse. Obviamente no todas las texturas están pensadas para usarse en mosaico, pero intenté editar algunas para hacerlas sin costuras.

Detalles técnicos
Para desarrolladores y mentes curiosas

Stack tecnológico

• Astro para renderizado estático ultrarrápido y arquitectura SEO-first.
• TailwindCSS para estilos personalizados y diseño responsivo.
• GSAP para animaciones suaves y eficientes; casi todo el contenido se genera con él para crear el efecto de canvas infinito.
• Vanilla JavaScript para interactividad y animaciones sin librerías adicionales.
• Vercel para el despliegue con optimizaciones automáticas de compilación.

Rendimiento

El sitio de Texturas no está pensado para ser una landing page ultrarrápida: carga muchas imágenes y animaciones. Si fuera un proyecto comercial optimizaría aún más los recursos y animaciones, pero como proyecto personal me centré en la experiencia y la estética. Los resultados de buenas prácticas siguen siendo muy buenos: