Textures

Personal online texture collection

• Astro + Tailwind

  Lightweight and performant

• GSAP

  Infinity canvas effect

• Vanilla JS

  Lightweight interactivity

Textures is my own personal online collection of urban textures photography.
The idea behind the project is to create a simple and elegant way to publish design textures, they are free to use for personal and commercial projects, with attribution.

You can easily download them in high resolution and use them in your own designs.

The project is also an experiment in creating an infinite canvas effect using GSAP and Vanilla JavaScript, allowing users to explore the textures in a dynamic and engaging way, all source code is available in GitHub for anyone interested in how it was built.

As a coder interested in animated websites, I know that sometimes finding real projects using GSAP can be hard, so I wanted to create a project that showcases its capabilities in a practical way, feel free to clone the repo and explore the code!

Most of my design projects require textures for backgrounds, overlays, and other design elements. I found myself constantly searching for high-quality textures online, but many of the available options were either low-resolution or required a subscription.
To solve this problem, I decided to grab a camera and a good friend @Marcos Rayo to explore Barcelona and photograph interesting textures we found in urban environments.

How can you download the textures?

Each texture in the canvas can be clicked to open a beautifully designed ;) modal with more information about the texture and a download button to get the high-resolution version. In addition, all textures have a tiling test next to the preview to see how they look when repeated, obviously not all textures are made to be tiled but I tried to edit some of them to make them seamless.

Technical Details
For developers & curious minds

Tech Stack

• Astro for lightning-fast static rendering and SEO-first architecture.
• TailwindCSS for custom styling and responsive design.
• GSAP for smooth, performant animations, almost all content is generated with it to create an infinite canvas effect.
• Vanilla JavaScript for interactivity and animations without extra libraries.
• Vercel for deployment with automatic build optimizations.

Performance

Textures site is not meant to be an ultra-fast landing page, loads a lot of images and animations. It this was a comercial project I would optimize even more the assets and animations, but for a personal project I focused on the experience and aesthetics. The Best practices results are still very good: