3D / WebGL Brand Experience · $12,000 · flat, an add-on to a landing page or product sprint
A hero people can touch
A real-time 3D or WebGL hero for the page that matters: the launch, the product viewer, the moment above the fold. Hand-written shaders tuned for sixty frames a second, a designed fallback for weak devices, and one senior who designs the look and writes the code. Added to a Landing Page Sprint or a Product Sprint, or dropped into the React site you already have.
Or book a 20-minute call first. No pitch, just fit.
01
Look and shader, one decision
Most agencies subcontract the 3D and bolt it on. Here the frame is designed and the shader written by the same person, so the motion and the art direction agree.
02
Dependency-free where it counts
Hand-written GLSL, no game engine, no forty megabytes of textures. The effect runs on the GPU at a capped pixel ratio with a single render loop.
03
A fallback that is designed, not generated
Reduced-motion users and weak GPUs get a static frame that still looks like the brand, never a blank canvas or a spinner.
Receipts
3D that shipped on the open web.
Each opens the case study.
What ships
One hero, tuned and integrated.
The add-on covers one signature moment. A product viewer, a launch microsite, or a second scene is scoped on the fit call.
Art direction
- A concept, not a template. Palette, motion language, and a rough shader prototype you can see moving in the browser.
- The frame. The page around the hero designed so the effect has something to be a hero of.
- The fallback. A designed static frame for reduced motion and low-GPU devices.
- The knobs. Documented parameters so your team can re-skin it later.
Engineering
- Hand-written GLSL. Dependency-free where it counts, tuned to a capped pixel ratio.
- Performance budget. Measured against Core Web Vitals on real devices before handoff.
- Integration. Production code dropped into your Next.js or React site, or into the sprint that carries it.
- Accessibility. prefers-reduced-motion honored; the page reads without the effect.
Pricing
The add-on, and the base.
A hero needs a page under it. Most people buy this on top of a Landing Page Sprint; if you already have the page, the price is the same for integrating into it.
3D / WebGL hero
$12,000
Flat, as an add-on to a Landing Page Sprint or Product Sprint. About two weeks on top of the base build.
- An art-directed concept and a moving prototype
- Hand-written shaders tuned to a performance budget
- A designed reduced-motion and low-GPU fallback
- Integrated into your React or Next.js page
- Parameters documented for later re-skins
The usual base
$3,500
The Landing Page Sprint: the page designed and built in about three business days, then the hero on top.
- Copy structure and custom design
- Production code, deployed
- Source and Figma yours
- About two more weeks with the hero added
How it runs
About two weeks on top of the base.
01
Day 0
Fit call
Thirty minutes to confirm the idea is right for real-time WebGL and not better served by video or a static treatment.
02
Week 1
Concept
Palette, motion language, and a rough shader prototype moving in the browser. Direction agreed.
03
Week 2
Build and tune
The shader and the surrounding page, tuned to the performance budget, with the fallback designed alongside.
04
Handoff
Integrated
Production code in your stack, Core Web Vitals measured, knobs documented.
Fit check
Built for some, not everyone.
This is for you if
- A funded brand or product launch that needs a signature moment
- Teams already on React / Next who want it native, not an embedded iframe
- A founder who wants one senior owning look and code, not a committee
Not built for
- A full game or an immersive multi-scene experience (that's a studio, not me)
- Anything that needs to run inside a native mobile app shell
The shader is the receipt
Artyom Sklyarov
Every hero on this site is a live, parameterized WebGL shader I wrote, with a different palette per page. That is the technique on offer, not a showreel. I design the frame and write the shader, so the motion and the art direction are the same decision.
If your idea is better served by video or a still, I say so on the fit call and you keep your money.
3D / WebGL Brand Experience · $12,000
Tell me about the moment.
Name, email, and a few lines: the page, the launch, and what the hero has to make people feel. Include the site it goes on if it exists. I reply within 24 hours.
The fine print
Questions, answered.
No, that's the whole point of writing the shaders by hand. The effect runs on the GPU at a capped pixel ratio with a single render loop, and weak devices get a designed static frame instead. Performance is measured against Core Web Vitals before handoff.
Yes. You get the production source, integrated into your stack, with the tunable parameters documented.
About two weeks on top of the base build: one for the concept and a moving prototype, one to build and tune against the performance budget. Integrating into a site you already have takes the same two weeks.
It is a senior designer and a shader engineer in one person, on a fixed scope of one hero. It sits on top of a Landing Page Sprint or a Product Sprint because a hero needs a page under it; if you already have the page, I integrate into your existing React or Next.js site at the same price.
01 / 04
Will it slow my site down?
No, that's the whole point of writing the shaders by hand. The effect runs on the GPU at a capped pixel ratio with a single render loop, and weak devices get a designed static frame instead. Performance is measured against Core Web Vitals before handoff.
Ready? Request a fit call. The fit call decides whether WebGL is the right tool. If it is not, you hear that first.