3D & WebGL - Design by HL

.loader, #gl, #p-cover, .cursor, [data-js~="global-mute-btn"], [data-js~="menu-toggle"], .about-model__loader { display: none !important; } [data-router-view], [dom2webgl] { visibility: visible !important; opacity: 1 !important; } [data-reveal] { opacity: 1 !important; translate: none !important; } body:not(.is-touch) { overflow-y: visible !important; } body { user-select: text !important; -webkit-user-select: text !important; } .project-case { background: var(--project-bg); color: var(--project-fg); } .header { position: relative !important; top: auto !important; flex-wrap: wrap; gap: 1rem; } .header__logo { position: static !important; height: auto !important; } .header [data-js~="nav-inner"] { display: flex !important; flex-wrap: wrap; justify-content: center; gap: .5rem; } .header .language-switcher { display: flex !important; } .header [data-js~="nav-inner"] > div { display: flex !important; flex-wrap: wrap; justify-content: center; } .logo.is-awaiting :is(.logo__pixel, .logo__word path) { opacity: 1 !important; } .logo.is-awaiting .logo__square { stroke-dashoffset: 0 !important; } body:is(.route-about, .route-services, .route-projects) .header__logo svg { color: #fff; } :root body:is(.route-about, .route-services, .route-projects) :is(.nav-item.ui-button, .header .language-switcher.ui-control-group) { color: var(--color-paper); } [data-router-view="homeContact"] { display: flex; min-height: 80svh; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 4rem 1rem; } .home-scene__fallback { display: block !important; } .home-scene__heading.sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; } .home-scene__heading h1 { max-width: 14ch; margin: 0; color: #1c211f; font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 400; line-height: 1; text-align: center; } body.route-projects { background: #06080e; } .project-grid { position: static; padding-top: 3rem; opacity: 1; visibility: visible; pointer-events: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .project-grid .project-grid__card { opacity: 1; translate: none; } .project-grid .project-grid__scroll { overflow: visible; overscroll-behavior: auto; } :root .project-grid .project-grid__close, [data-router-view="projects"] .ui-button[data-js~="manager-ignore"], .project-grid-toggle, .project-nav, .works-index { display: none; } body.route-services { background: #070b13; } .services-space.services-space { grid-template-columns: 1fr; padding-top: 3rem; row-gap: 2.5rem; } .services-space__selection { display: none; } .services-space .services-space__panels { display: grid; grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 1.2rem; max-width: none; border: 0; background: none; box-shadow: none; backdrop-filter: none; } .services-space .service-panel, .services-space .service-panel.is-active { grid-area: auto; position: relative; min-height: 0; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); opacity: 1; visibility: visible; transform: none; border: 1px solid color-mix(in srgb, var(--service-color) 25%, transparent); border-radius: var(--radius-md); background: rgba(7, 11, 19, .94); }

Henry Lõiv

Web design & development

How much does a custom 3D website cost?

October 7, 2026

By Henry Lõiv

Plan a 3D project around what the visitor needs to do. Three illustrative budgets explain the scope of an interactive element, product viewer and complete website.

When does an interactive 3D product viewer make sense?

October 7, 2026

By Henry Lõiv

A useful 3D product experience answers a specific customer question. Here is how to define the interaction, prepare the assets and plan the next step.

Category: 3D & WebGL

How much does a custom 3D website cost?

When does an interactive 3D product viewer make sense?

Let’s talk about
your project.

Tell me about your project

Thank you!

Category: 3D & WebGL

Let’s talk aboutyour project.

Let’s talk about
your project.