WebGL and Canvas, built to ship
Fast shaders and canvases for real product pages.
- Frame budget
- agreed per project and checked on a real mid-range Android phone
- < 200 KB
- typical JS + shader budget, gzipped, before assets
- Static fallback
- image or HTML version when WebGL is off or motion is reduced
Scope
- GLSL shaders and post-processing (WebGL 1/2), Canvas 2D drawing and animation
- Interactive hero sections, product visualisers, generative backgrounds, data visuals
- Plain JS, React, Next.js or Astro integration; Three.js or no-library builds
- Handover: source, short README, and notes on how to tune parameters
Performance targets
- Frame-time budget agreed up front and checked on a real mid-range Android phone
- Device-pixel-ratio capping and adaptive quality when frame time slips
- Rendering pauses when the canvas is off-screen or the tab is hidden
- No layout shift: the canvas reserves its space before it loads
Static fallback
- Content stays in HTML so search engines and screen readers get the text
- prefers-reduced-motion respected: a still frame instead of animation
- If WebGL is unavailable, a poster image or CSS version is shown
How to start
Email a link or sketch of what you want, the pages it will live on, and your deadline. You get a short written scope and a quote back. Or hire through Upwork if you prefer its contracts and payments.
Questions
Can you match the Molten demo for my brand?
Yes. Molten is a sample of the shader and canvas work; colours, motion and copy can be adapted to your product.
Will it hurt my page speed?
The work is scoped against a size and frame-time budget, loads after the main content, and has a static fallback.
What do I need to provide?
Brand assets, the target page or framework, and examples you like. Source files are handed over at the end.
Pricing is quoted per project after a short scoping email; there is no fixed price list. See the live example: Molten showcase.