How does this connect with other services?
The scope can cover one activity or several stages. Also explore: UI / UX Design, Front-end Dev, WordPress & E-commerce.
Diego Pavanello
Creative development, animation and WebGL
I develop web animations and interactions with GSAP, Three.js and WebGL. The aim is to give an interface a distinctive behaviour while keeping content readable and providing an alternative when an effect is unavailable.
Creative development combines design and programming to build custom browser interactions. This website’s Italian homepage is a working example: a photograph uploaded in WordPress becomes a monochrome particle image that deforms locally as the mouse moves over it.
Who I work with
Businesses, independent professionals and digital projects looking for a specific interaction for a presentation page, portfolio or product experience. Content, devices and ongoing maintenance should determine the effect.
What’s included
- A prototype of the agreed interaction and its integration into the interface.
- Custom animations or WebGL scenes for the effect defined in the brief.
- Mouse, touch and reduced-motion behaviours.
- Static alternatives and resource-loading and rendering checks in the agreed browsers.
How I work
Purpose of the effect
We start with the content to highlight and the user’s gesture, deciding where interaction helps and where a simpler page is preferable.
Prototype and tuning
I prototype the effect and adjust density, influence area, speed and return. Reviewing the visible behaviour helps determine the right intensity.
Integration and alternatives
I connect the effect to the page and its assets. I also check the static photograph, reduced motion and cases where WebGL fails to render.
Frequently asked questions
What can WebGL do on a website?+
WebGL lets a browser draw graphics using the GPU. It can support 3D scenes, image effects and particle systems. Three.js helps build those scenes, but the result still needs verification in the intended browsers and on the intended devices.
Can I see a real example?+
Yes. The Italian homepage of designerdimontagna.it turns the mountain photograph into monochrome points. The mouse displaces a small area of particles, leaving a wake that gradually settles.
What happens on phones or with reduced motion?+
That behaviour needs explicit design. On this website, touch does not activate mouse deformation; reduced motion displays the static photograph. A phone does not need to reproduce every desktop effect.
Can a WebGL effect slow a website down?+
Yes. Point density, resolution, shaders and rendering duration affect the workload. This website caps particle count and stops the loop when it is unnecessary. Other effects need measurement in their own context.
What happens if an image or shader fails to load?+
An alternative is needed. For this website’s homepage, I keep the static photograph when WebGL is unavailable or the shader fails. If the photograph is also unavailable, the text and page background remain.