[ SERVICE ] · Interactive WebGL & 3D
An interactive WebGL agency: 3D web experiences that run at 60fps in the browser
Architype is a studio that designs and codes WebGL and 3D web experiences for brands: shader surfaces that react to cursor and scroll, Three.js scenes and canvas frame sequences running at 60fps in the browser, with a CSS fallback for devices that can't. No templates, small team, since 2022.
- Three.js · GLSL shaders
- Canvas frame-scrub
- DPR ≤ 1.5
- Lazy-loaded
- Reduced-motion
- Mobile fallback
A WebGL / 3D web experience uses the GPU inside the browser to run liquid shader surfaces, 3D objects and scroll-synced frame sequences. Architype builds it with Three.js and custom GLSL shaders in an architecture that lazy-loads only once the hero is visible, pauses when off-screen, and falls back to CSS gradients when WebGL isn't available.
[ SHORT ANSWER ] · Quotable
Our own home page hero is a live example: a liquid wave that follows the cursor, chromatic aberration tied to scroll speed; Three.js loads only when the hero is visible and rendering stops when it leaves the viewport.
Not every scene needs 3D. In Architype Roofs we replaced video with a 381-frame WebP canvas sequence: frame-accurate to scroll, no seek lag, one static file.
WHAT'S
INCLUDED
[ SCOPE ] · What's included
Shader-based hero
GLSL surfaces reacting to cursor and scroll: liquid waves, digital smoke, RGB split. No image needed; the texture is generated procedurally.
3D scenes & products
Model-based 3D scenes, product visualisation, camera moves bound to scroll. Light and material set per brand.
Canvas frame sequences
Rendered or filmed frames drawn on canvas in sync with scroll. No video seek lag; every frame lands on the next paint.
Performance safety
DPR ≤ 1.5, off-screen render pause, single rAF, lower resolution and no particles on mobile. No WebGL or reduced-motion? CSS fallback, and Three.js is never downloaded.
WHY
ARCHITYPE
[ DIFFERENCE ] · Why not a template
Meaning, not spectacle
3D and shaders amplify what the brand says; they aren't noise. We decide together where WebGL, where canvas and where plain CSS is the right tool.
Measured technology: every effect comes with a performance budget. The target is smooth 60fps on every device, low-memory phones included.
From scratch, no plugins
No ready-made 3D site template or no-code WebGL tool. Shaders and scene code are written for the project; the site can ship as a single static file.
Web design, brand identity and WebGL live in the same team; technical surprises are solved at the start of design, not at the end.
THREE
STEPS
[ PROCESS ] · How we work
Discovery
& strategy
We listen to your brand, audience and goal. Competitor analysis, positioning, a clear roadmap.
Design
& concept
Concept, visual language, prototype. Transparent feedback at every step; shared calls, no surprises.
Build
& launch
Build, test, launch. 60fps performance, SEO and post-launch support included. Typical project: 3-7 days.
SEE THE
WORK
[ PROOF ] · Selected work
Architype Roofs
A cinematic, scroll-driven brand experience for a roofing contractor: 381-frame canvas sequence, brutalist system, GSAP ScrollTrigger.
(02)Architype Architecture
An editorial, cream, type-driven concept site for an architecture studio. The opposite of Roofs; proof we don't run a house template.
(03)All work & case studies
Case studies in Problem → Solution → Result format, with live site links.
Q
& A
[ FAQ ] · Frequently asked
What is WebGL and why use it on a website?
WebGL is a standard that lets the browser use the GPU without plugins. On a website it powers liquid shader surfaces, 3D objects and real-time effects; it's one of the strongest ways to tell a brand as an experience.
Do WebGL sites work on mobile?
Yes, when built right. Architype lowers shader resolution on mobile, disables particles, caps DPR and subsamples frame sequences. If WebGL isn't supported or the user prefers reduced motion, a CSS fallback takes over and Three.js is never downloaded.
Does a 3D web experience hurt SEO?
Not if the content stays in HTML. Text, headings, JSON-LD and meta data live outside the canvas as HTML that browsers and search engines can read; WebGL is only the visual layer.
Why a canvas frame sequence instead of video?
In scroll-bound scenes, video seeking creates a swimming lag. Drawing pre-decoded frames on canvas puts every frame on the next paint. That's how 381 frames run in Roofs.
Timeline and budget?
Flexible by scope. A shader hero takes a few days; a full 3D scene takes longer. The first call and the quote are free.
Are you related to other companies named Architype?
No. Architype (architype.works) is an independent web & brand design studio founded in 2022, working in Turkish and English. It is not the UK architecture practice or any property-marketing agency with a similar name.
[ CONTACT ] · First call and quote are free
GETARCHITYPED
Email: [email protected] · WhatsApp: +90 546 403 26 58 · Instagram/X: @getarchityped. Remote, worldwide, Turkish and English.