# Andres Clua > Creative Technologist from Uruguay based in Bilbao, Spain. Director of Technology with over a decade of experience building digital experiences across engineering, creative technology, and performance. --- ## About Andrés Clúa is a Creative Technologist from Uruguay based in Bilbao. He has spent the last decade building digital experiences that feel fast, intentional, and well-crafted. He works across engineering, creative technology, and performance — always looking for the overlap between what's technically sound and what feels right when you interact with it. Over the years he has worked at places like TEF (The Electric Factory) and ProXPN, and worked in startups like Squalus, Anchor ID, and M3. That mix of agency work, product development, and startup life taught him how to move fast without losing sight of the bigger picture. Today he is Director of Technology, leading a distributed engineering team across Europe. He oversees architectural decisions and aligns technical execution with business strategy, but stays hands-on — still prototyping ideas, refining internal tooling, contributing to complex builds, and pushing code when it matters. He has also built and maintained several open-source libraries and tools that started as solutions to recurring problems across projects, and over time became tools that other developers rely on too. --- ## Pages - [Home](https://andresclua.com/) - [About](https://andresclua.com/about): Background, experience, and open-source work - [Work](https://andresclua.com/work): Selected projects and case studies - [Ideas](https://andresclua.com/ideas): Articles on web development --- ## Work ### Clock Inspired by 'A Million Times' by Humans Since 1982, an art installation where hundreds of analog clocks form digits together. I saw one at Hotel Domine in Bilbao and couldn't stop thinking about building a web version. Two years and one abandoned repo later, I finally shipped it. Each digit is a 3×6 grid of mini analog clocks. The hands rotate to specific angles that 'draw' each number: vertical lines, corners, terminators. GSAP staggers the entrance so each clock scales and rotates in from a random position. Behind it all, Three.js particles float and react to mouse movement. I deliberately chose React and Vite for this one, stepping outside my usual Vue and Astro comfort zone. The trick that makes it work is surprisingly elegant: each clock hand is just a CSS rotation. A pattern map defines every digit as angle pairs. [90, 180] draws a corner, [0, 180] draws a vertical line. When the time changes, all 36 clocks per digit smoothly transition to their new angles simultaneously, and the number just appears. Technologies: React, Three.js, GSAP, Vite - Link: https://clock.andresclua.com ### Uruguay is Guay I'm Uruguayan, and at some point I realized most people outside South America barely know Uruguay exists or they confuse it with Paraguay. So I built an interactive fact slideshow to change that. Each slide reveals something about the country, from having four cows per person to hosting the world's largest barbecue, with WebGL transitions and a form where anyone can submit new facts. The slideshow runs on a custom animation engine. Each slide transition clips the outgoing image while the incoming one scales up underneath, with staggered character animations on the titles. Behind everything, a Three.js custom shader blends displacement noise between slide images with a chromatic color split that reacts to mouse movement, creating a living backdrop that shifts as you browse. One detail I'm proud of: the transition between slides uses Uruguay's coat of arms as a displacement map, so the image dissolves through the shape of the escudo before the next fact appears. > Building something personal about where you come from hits different. Every detail matters more when it's your own story you're telling. Technologies: Three.js, GSAP, SCSS, Astro ### ASCII Project I always wanted to build something with camera detection on the web. P5.js is a creative coding library that often flies under the radar next to Three.js, and it gave me the perfect excuse. This project captures your webcam feed and renders it entirely in ASCII characters, in real time. The core is surprisingly simple: P5's createCapture grabs the webcam feed, loadPixels exposes every pixel's RGBA values, and a loop maps each pixel's brightness to a character from a density string like ' .:-=+*#%@'. Brighter pixels get lighter characters, darker ones get denser glyphs. That's the entire illusion. The rest is polish: theme switching, color palettes, and a save-to-image feature. > Sometimes the most rewarding projects are the ones nobody asked for. Just an excuse to explore a technology and see how far you can push a simple idea. Technologies: P5, JavaScript, SCSS, Astro - Link: https://asciiproject.com/ ### Netwrix At Terra, I led the technical strategy behind Netwrix.com, rebuilding the platform of a global cybersecurity company with 15+ product lines. > The platform serves millions of users across 15+ product lines. It required a scalable architecture that balances performance with content flexibility. Every component was built for reuse across the entire ecosystem. Technologies: Astro, Sanity CMS, JavaScript, SCSS, WebGL, Node.js - Link: https://netwrix.com ### Don't Choose Extinction At Terra, I led the digital asset production for UNDP's global climate campaign featuring Frankie the dinosaur, voiced by Jack Black, urging world leaders to end fossil fuel subsidies. > A CGI dinosaur crashed the UN General Assembly to tell humans they're heading for extinction. And somehow it worked. Technologies: Campaign Assets, Motion Design, Digital Production, UNDP - Link: https://www.undp.org/barbados/dont-choose-extinction ### UNDP Year Ahead I led the development of UNDP's interactive annual report within the Terra team. Scroll-driven storytelling that brings global impact data to life. > Translating the complexity of global development into a narrative that anyone can scroll through and understand. Technologies: Nuxt, GSAP, JavaScript, SCSS, Scroll Animations - Link: https://annualreport.undp.org --- ## Open Source Libraries ### Boostify A lightweight JavaScript library that improves website performance by deferring third-party scripts like Google Analytics, Facebook Pixel, and Hotjar until the page is interactive. Loads resources on demand via Web Workers, unblocking the main thread and keeping your site fast. Simply change script types to text/boostify and let it handle the rest — supports inline scripts, external sources, and custom load callbacks with zero configuration overhead. - URL: https://boostifyjs.com/ - Category: Product ### Perlin DOM A JavaScript library that applies Perlin noise to DOM elements, creating organic and natural-feeling motion effects. Ideal for adding subtle, generative animations to text, images, or UI components without relying on predefined keyframes. - URL: https://www.npmjs.com/package/@andresclua/perlindom - Category: UI ### Validate A lightweight form validation library with support for custom rules, real-time feedback, and accessible error handling. Designed to work with any markup structure, making it easy to validate complex forms without heavy dependencies. - URL: https://www.npmjs.com/package/@andresclua/validate - Category: Forms ### Custom Cursor A custom cursor library with smooth lerp-based interpolation and configurable interactive states. It replaces the default cursor with a fully stylable element that reacts to hover targets, clicks, and other DOM events. - URL: https://cursor.andresclua.com/ - Category: UI ### Compressor Assets Figma plugin for compressing and optimizing exported assets. - URL: https://www.figma.com/community/plugin/1603721295409652572/compressor-assets - Category: Figma Plugin ### JS Util A lightweight utility library born in 2021 to help UI developers transition from jQuery to vanilla JavaScript. Offers single-function ES6 modules for DOM manipulation, debounce, throttle, event handling, and common everyday web development tasks. Built with Vite, ships both ES6 and UMD formats, and is inspired by practical challenges gathered from dozens of real-world projects. - URL: https://utils.andresclua.com/ - Category: Utilities ### Collapsify A vanilla JavaScript module for building accordions, collapsible panels, and tabs. Features smooth animated height transitions, ARIA attributes for accessibility, configurable namespaces, close-others behavior, and lifecycle callbacks like onSlideStart and onSlideEnd. Supports multiple control buttons per content panel and works with dynamic content without extra dependencies. - URL: https://www.npmjs.com/package/@terrahq/collapsify - Category: UI ### Terra Helpers A collection of lightweight JavaScript helper functions for common tasks like viewport detection, DOM traversal, debounce, and event handling. Built to reduce boilerplate across projects without adding heavy dependencies. - URL: https://www.npmjs.com/package/@terrahq/helpers - Category: Utilities ### Creative A zero-dependency toolkit of 30+ utility functions for creative coding. Includes math helpers like lerp and damp, easing functions, mouse tracking, animation loops, color interpolation and DOM utilities — all in ~1.8 kB gzipped. - URL: https://www.npmjs.com/package/@andresclua/creative - Category: Utilities --- ## Blog Posts ### Speculation Rules API: Make Your Pages Load Before the User Clicks Imagine your website could predict where the user is going and have that page ready before they click. - Date: 2026-02-10 - Tags: api, frontend, performance, webdev - URL: https://dev.to/andresclua/speculation-rules-api-make-your-pages-load-before-the-user-clicks-3498 ### That Side Project You Abandoned? I Finally Finished Mine. We all have one. That side project you started super excited, thinking it would be the one. - Date: 2026-01-26 - Tags: react, ui, webgl - URL: https://dev.to/andresclua/that-side-project-you-abandoned-i-finally-finished-mine-87i ### The AI Coding Shortcut: Balance Speed with Learning AI code assistants can write functions, fix simple bugs, and save us time. - Date: 2025-07-14 - Tags: ai, learning, programming - URL: https://dev.to/andresclua/the-ai-coding-shortcut-balance-speed-with-learning-3mfc ### Let It Flow - Effortless Noise Animation for the DOM As someone who works across creative code, noise-based animations bring organic, natural motion to the DOM. - Date: 2025-06-24 - Tags: javascript, animation, perlin, webdev - URL: https://dev.to/andresclua/let-it-flow-effortless-noise-animation-for-the-dom-4aca ### Navigating Asynchronous JavaScript: From Promises to Async/Await and Beyond In the dynamic world of JavaScript development, understanding asynchronous operations is essential. - Date: 2024-03-15 - Tags: beginners, javascript - URL: https://dev.to/andresclua/navigating-asynchronous-javascript-from-promises-to-asyncawait-and-beyond-13li ### Crafting My NPM Package: Beyond jQuery The journey of developing my own NPM package, moving beyond jQuery dependencies. - Date: 2024-03-11 - Tags: javascript, npm, beginners, opensource - URL: https://dev.to/andresclua/my-journey-developing-my-own-npm-package-56ff