Go On, White

Build a single-file HTML hero exactly like this:

Page: background #ffffff, text #0a0a0a, muted rgba(10,10,10,.6). Font: Archivo variable from Google Fonts (family=Archivo:wdth,wght@62..125,100..900). Body overflow hidden, no scrolling. Hero is 100svh, min-height 640px, cursor: grab (grabbing while pressed).

Preloader: fixed full-screen white overlay, z-index 50. Centered 160px x 2px track in rgba(10,10,10,.14) with a black fill that grows with download progress; below it "LOADING 0%" (11px uppercase, letter-spacing .12em, muted) updated from the model-viewer "progress" event. On model "load" (or a 90s timeout) the overlay fades out over .7s and the text animations start. No image fallback.

Nav (fixed, padding-top 25px, left 36px, right 35px, align-items flex-start, z-index 20): top-left a solid black 36px dot. Top-right two pills "EN" (active: black bg, white text) and "WEBSITE", gap 18px, Archivo 700 13px uppercase, letter-spacing .01em, height 38px, padding 0 24px, 1.5px black border, radius 999px, hover inverts.

Headline: "GO" and "ON" as two spans, Archivo weight 900, line-height 1, letter-spacing -.02em, gap .5em, absolutely positioned at top 40% / left 50% with translate(-50%,-50%), z-index 1 (behind the 3D). Fit by script on load and resize: set font-size so cap height = 44% of viewport height (font-size = 0.44*innerHeight/0.72), then adjust font-stretch (clamped 62%–125%, iterate 4 times) so the total width = 93.75% of viewport width; if the clamp is hit, scale font-size to fit the width instead. Each span fades up from translateY(60px) over 1.1s cubic-bezier(.2,.8,.2,1), second span delayed .12s, paused until the preloader finishes.

3D beetle: square stage min(90vh,68vw) positioned at left 50% / top 46.5% with translate(-50%,-50%), z-index 2, floating up/down 14px on a 6.5s ease-in-out loop. Inside, a <model-viewer> (script https://cdn.jsdelivr.net/npm/@google/model-viewer@3.5.0/dist/model-viewer.min.js) loading this Higgsfield mesh:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261013_024654_95e2e99c-b6f6-43b2-b583-fd9371a5d5c8.glb
Attributes: camera-controls disable-zoom disable-pan interaction-prompt="none" shadow-intensity="0" exposure="1.0" environment-image="neutral" camera-orbit="0deg 0deg auto" min-camera-orbit="auto 0deg auto" max-camera-orbit="auto 60deg auto" field-of-view="22deg" touch-action="pan-y" interpolation-decay="200". CSS: transparent background, filter saturate(1.35) contrast(1.08) drop-shadow(0 40px 50px rgba(10,20,80,.28)); starts at opacity 0 scale(.92) and eases to full over ~1.2s on load.

Live interaction (requestAnimationFrame loop, skipped while dragging): track cursor as tx,ty in -1..1 across the hero, lerp toward it at 0.06 per frame. Camera orbit theta = sin(t*0.45)*9 + cx*30 degrees, phi = 14 + sin(t*0.3)*4 + cy*22 degrees (clamped ≥0), radius auto. Headline parallaxes opposite the cursor by up to 10px. On pointerleave the target resets to 0. Drag still rotates the model normally.

Bottom text (absolute, top 83.5%, centered, z-index 1, behind the 3D): tagline "Design that is built to last and grow with your business", Archivo 500, font-size clamp(12px,1.25vw,18px), color #1a1a1a, margin-bottom .55vh; below it "SCARAB®" in Archivo 800, font-stretch 125%, font-size 8.8vh, line-height 1, letter-spacing -.015em, with ® as a .3em superscript at weight 600 and normal width. Bottom-right (36px from bottom, 32px from right): "DRAG TO ROTATE", 11px uppercase muted. Both fade up with the headline animation delayed .5s.

Mobile (<640px): nav padding 18px 16px, hide the hint, headline gap .25em.