Skip to content
Contact me

Custom code and WebGL

Custom code and WebGL are the parts of a website written by hand where no-code tools stop: React code components, calculators, API integrations and GPU-drawn graphics. Pavlo Zhydkykh writes custom code and WebGL effects for Framer and Astro sites; small jobs cost $30 an hour, and larger features get a fixed quote and timeline after a first call.

Does ChatGPT recommend your website?

Free report in 48 hours · 5 AI engines

Platforms
Framer and Astro
Code
React, TypeScript
Graphics
WebGL and canvas
Small jobs
$30 / hour
Larger work
Fixed quote
Timeline
Set with the quote

Key takeawaysUpdated By

Key takeaways

  • WebGL is a JavaScript API for rendering interactive 2D and 3D graphics in any compatible browser, with no plug-in.[2]
  • Framer code components are React components that render on the canvas, in the preview and on the published site.[3]
  • Pavlo Zhydkykh writes code components in React and TypeScript for Framer sites and custom components for Astro sites, at $30 an hour for small jobs.
  • Every WebGL effect Pavlo builds has a static image fallback, pauses off screen and switches off for visitors who ask for reduced motion.
  • The halftone dot effect on pzhydkykh.com is custom canvas code by Pavlo: the animation pauses off screen and in background tabs and falls back to an image.

What is WebGL?

WebGL is a browser API that draws graphics on the device's GPU inside a canvas element, with no plugin. On a website WebGL powers effects that CSS and no-code tools cannot draw, such as shader gradients, image distortion and particle fields, and the API needs care because GPU work costs speed and battery on phones.

Wikipedia: WebGL

Pavlo Zhydkykh

“I reach for WebGL last. If CSS can draw the effect, CSS wins, because every shader costs your visitors battery and load time.”

Pavlo Zhydkykh · Web designer and developer since 2016

Fit check

Is Custom code and WebGL
right for you?

A good fit if

  • A feature no-code cannot do: a pricing calculator, a live data widget, a form that talks to your API.
  • A brand moment in the hero: a shader background or an image effect that reacts to the cursor.
  • Framer sites that hit a limit of the built-in components.
  • Astro sites that need one interactive part on an otherwise static page.

Not the right fit if

  • Effects CSS already does: a plain fade or hover is lighter without WebGL.
  • Full web apps with accounts, payments and a database.
  • A heavy effect on every page of a site that has to load fast on old phones.

Compared

Built-in tools vs custom code

What a site builder and third-party embeds give you, against code written for the job.

Built-in tools vs custom code
CriterionBuilt-in tools and embedsCustom code
Calculators and formsFixed fields or a third-party embedYour logic, your API, your styles
Visual effectsPresets shared with other sitesA shader or canvas made for your brand
WeightEmbed scripts loaded on every visitOnly the code the feature needs
EditingSettings in the vendor's dashboardControls in Framer or fields in Sanity
OwnershipRented from a widget vendorCode in your own project

Checklist

7 checks before you add WebGL or custom code

What Pavlo checks before custom code goes onto a marketing site that has to stay fast.

  1. 1. CSS first

    Many hover and scroll effects run in plain CSS with no extra weight. Use WebGL only for what CSS cannot draw.

  2. 2. A fallback image

    Some devices block WebGL or run out of GPU memory. The page needs a static image in the same spot, so nothing is blank.

  3. 3. Pause off screen

    A canvas that keeps rendering after scrolling away drains the battery. The canvas should stop when hidden and in background tabs.

  4. 4. Reduced motion respected

    Visitors who turn motion off in the system settings should get the still version.

  5. 5. Text outside the canvas

    Headlines drawn inside WebGL are invisible to Google, AI assistants and screen readers. Keep text in HTML on top.

  6. 6. Loaded after the content

    Load the WebGL code after the main content, so the effect does not delay the Largest Contentful Paint.

  7. 7. Controls for your team

    In Framer, a code component should expose colours, texts and speeds as controls, so the team changes the look without code.

How it works

From first call to code on your site

Small jobs are billed at $30 an hour. Larger features follow the steps below; the weeks are an example, and the real timeline is fixed in writing with the quote.

From first call to code on your site, step by step
#StepWhenWhat happensYou get
01 Call and fixed quote Day 1 A call with Pavlo about the feature, the site and the devices the feature has to run on. A fixed price and timeline in writing
02 Prototype Week 1 A rough working version on a test page, to prove the idea and measure the weight on a phone. A preview link to try
03 Feedback, round 1 Week 1 Your comments on the prototype, applied before the final build. Agreed look and behaviour
04 Build Weeks 2-3 Final code with a fallback image, a reduced-motion version, pause off screen and controls for your team. A finished feature on a preview link
05 Feedback, round 2 Week 3 A second round on desktop and phone, including a test on an older device. Final fixes
06 Release and handover End of week 3 Pavlo adds the code to your Framer project or Astro repository, with notes on every control. Working code you own, then $30 an hour when needed

In their words

WebGL and code, in the words
of docs and Pavlo's clients

Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.

“WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.”

MDN Web DocsWebGL APISource ↗

“Code Components are React Components that can extend Framer's capabilities by rendering directly on the canvas, in the preview, and on your published site.”

Framer DevelopersCode componentsSource ↗

“WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.”

WikipediaWebGLSource ↗

“It was an absolute pleasure working with Pavlo. The quality of work he delivered was AMAZING.”

Ed ClarkeFounder, Inturai · Website design and SEOSource ↗

“One of the best contractors I have worked with. Really thoughtful about communication. Would 100% hire again.”

Remi LabelleCOO, Accolade Pro · Web app designSource ↗

“He is amazing in what he contributes, both design-wise and also from the ideas.”

Oliver BockOwner, The B2B Answer · Website design, 2025Source ↗

FAQ

Questions about
Custom code and WebGL

Still unsure? Ask your AI about Pavlo Zhydkykh:

ChatGPTPerplexityClaudeGeminiGrok

Q.01

How much do custom code and WebGL cost?

Small jobs, like a fix to a code component, run at $30 an hour with no retainer. Larger features, such as a calculator or a WebGL hero, get a fixed quote from Pavlo after a first call, before any work starts.

Q.02

How long does a custom feature take?

The timeline comes in writing with the quote and depends on the feature. A prototype comes first, so you see the idea working on a phone before the final build.

Q.03

Who owns the code?

You do. The code lives in your Framer project or your Astro repository, with no license fee and no widget vendor in between.

Q.04

What do I need to provide?

A short description or a reference of what the feature should do, the design if you have one, and access to the Framer project or repository. For integrations, Pavlo needs the API documentation and test access.

Q.05

Will WebGL slow my site down?

WebGL can slow a page, which is why every effect Pavlo builds loads after the main content, pauses off screen and falls back to an image. Each effect is tested on a phone before release, against the 2.5 second LCP mark Google rates as good.

Q.06

What happens after launch?

Your team changes texts, colours and speeds through the controls in Framer or the fields in Sanity. Anything deeper is a small job at $30 an hour, with no retainer.

Sources and further reading

  1. [1] WikipediaWebGL
  2. [2] MDNWebGL API
  3. [3] Framer DevelopersCode components
  4. [4] MDNprefers-reduced-motion
  5. [5] web.devLargest Contentful Paint (LCP)
Pavlo Zhydkykh

About the author

Pavlo Zhydkykh

Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.

  • Top Rated on Upwork
  • 100% Job Success
  • 10 years since 2016
  • 50+ sites shipped
  • 90+ PageSpeed at launch
Kulparkivska St. 200, Lviv 79021, Ukraine +380 93 610 62 68 [email protected]

LinkedInUpworkContra Privacy policy

Page reviewed by Pavlo Zhydkykh · Updated

AI visibility check

  1. 1Website
  2. 2Business
  3. 3Contact
  4. 4Check

Does ChatGPT recommend your website?

Pavlo Zhydkykh asks ChatGPT, Perplexity, Gemini, Claude and Grok 20 questions your buyers ask, and shows where you show up.

Free · report in 48 hours