Robot Head — 3D Robotics Landing Page
Robotics landing page in one HTML file: a white humanoid robot head that tracks the cursor, blinks, and opens its panels as you scroll.
A complete, scrollable robotics landing page with the 3D built into it: a white humanoid robot head that tracks the cursor, blinks, and opens its panels as you scroll. It is one self-contained HTML file, built entirely in code, with no image files, no 3D models and no build step. Under the hood: Three.js, head assembled from sliced spheres, rings and a segmented neck, clear-coat shell under generated studio light, eye rings that blink and dilate, panel separation on scroll. What a visitor can do: move and the head follows you, click to make it blink and nod, scroll to turn it and open the panels, 4 presets (Ceramic, Graphite, Signal, Mint). Best for: Robotics and automation, AI hardware and wearables, industrial design studios, tech conferences. Three.js loads from a CDN through an import map and the type (Archivo, IBM Plex Mono, Inter) from Google Fonts, so there is still nothing to install. The page is real HTML — a navigation bar, a full-height hero, content sections, a call to action and a footer — so the brand name, headlines and cards are edited as plain text. Colours, counts and speeds sit in a CONFIG block and a PRESETS array, colour themes restyle the page and the 3D together from a small swatch pill, ?embed hides the pill and ?tour scrolls the page by itself.
How to run this
Nothing to install and nothing to configure. Works in any modern browser on Windows, macOS and Linux.
- Built with
- Single HTML file
- Requires
- A modern browser
- 1. Unzip the download.
- 2. Double-click index.html. It opens in your browser and runs. To serve it instead (the microphone and some browsers want a server), run
npx serve .in the folder and openhttp://localhost:3000.
Note — Three.js loads from the jsDelivr CDN through an import map, so the first load needs an internet connection. Its typefaces load from Google Fonts, with system fallbacks if they cannot. It is a full landing page: upload index.html to any static host and it is live. Add ?embed to hide the theme pill, ?preset=N to start on a colour theme, and ?tour to scroll the page automatically.
More like this
Browse 3D designs →
PremiumTerra Nav — 3D Travel Landing Page
Travel landing page in one HTML file: a glass mega-menu that reshapes a live 3D landscape.
PremiumSilver Serpent — 3D Studio Landing Page
Studio landing page in one HTML file: a chrome dragon weaving through giant serif type on watercolour.
PremiumToon Portfolio — 3D Personal Portfolio
Personal portfolio in one HTML file: a code-built cartoon head that watches the cursor in front of a giant headline.
