Textures

Col·lecció personal de textures en línia

• Astro + Tailwind

  Lleuger i amb bon rendiment

• GSAP

  Efecte de canvas infinit

• Vanilla JS

  Interactivitat lleugera

Textures és la meva col·lecció personal en línia de fotografia de textures urbanes. La idea darrere del projecte és crear una manera senzilla i elegant de publicar textures de disseny; són gratuïtes per utilitzar en projectes personals i comercials, amb atribució.

Pots descarregar-les fàcilment en alta resolució i utilitzar-les en els teus propis dissenys.

El projecte és també un experiment per crear un efecte de canvas infinit utilitzant GSAP i Vanilla JavaScript, permetent als usuaris explorar les textures d’una manera dinàmica i atractiva. Tot el codi font està disponible a GitHub per a qualsevol persona interessada en com es va construir.

Com a programador interessat en llocs web animats, sé que de vegades pot ser difícil trobar projectes reals que utilitzin GSAP, així que vaig voler crear un projecte que mostrés les seves capacitats d’una manera pràctica. No dubtis a clonar el repositori i explorar el codi!

La majoria dels meus projectes de disseny requereixen textures per a fons, superposicions i altres elements de disseny. Em trobava constantment buscant textures d’alta qualitat en línia, però moltes de les opcions disponibles eren de baixa resolució o requerien una subscripció. Per resoldre aquest problema, vaig decidir agafar una càmera i un bon amic @Marcos Rayo per explorar Barcelona i fotografiar textures interessants que trobéssim en entorns urbans.

Com pots descarregar les textures?

Es pot fer clic a cada textura del canvas per obrir un modal bellament dissenyat ;) amb més informació sobre la textura i un botó de descàrrega per obtenir la versió d’alta resolució. A més, totes les textures tenen una prova de mosaic (tiling) al costat de la previsualització per veure com queden quan es repeteixen; òbviament no totes les textures estan fetes per ser repetides, però vaig intentar editar-ne algunes perquè fossin contínues (seamless).

Detalls tècnics
Per a desenvolupadors i ments curioses

Stack tecnològic

• Astro per a un renderitzat estàtic ultraràpid i una arquitectura pensada per al SEO.
• TailwindCSS per a estils personalitzats i disseny responsiu.
• GSAP per a animacions suaus i de bon rendiment; gairebé tot el contingut es genera amb ell per crear un efecte de canvas infinit.
• Vanilla JavaScript per a interactivitat i animacions sense llibreries extres.
• Vercel per al desplegament amb optimitzacions de build automàtiques.

Rendiment

El lloc de Textures no pretén ser una landing page ultraràpida, ja que carrega moltes imatges i animacions. Si aquest fos un projecte comercial, optimitzaria encara més els assets i les animacions, però per a un projecte personal em vaig centrar en l’experiència i l’estètica. Els resultats de l’auditoria de Bones Pràctiques segueixen sent molt bons: