--- title: "How to Build a Premium 3D Website with Hermes Agent (Interactive Globe Portfolio) | Komputer Mechanic" url: https://komputermechanic.com/tutorials/how-to-build-a-premium-3d-website-with-hermes-agent description: "How to build a premium 3D website with Hermes Agent: a portfolio globe of 41 glass portrait tiles you steer with your mouse or your hands, a hold-to-focus camera interface, smoke trail and glass sounds. Copy-paste prompts, and the finished website as a template." lang: en --- Home (https://komputermechanic.com/)Tutorials (https://komputermechanic.com/tutorials)Premium 3D Website with Hermes Agent AI Websites // 3D # How to Build a Premium 3D Website with Hermes Agent A photographer's portfolio where 41 portraits float on a real 3D globe of glass tiles. Turn it with your mouse, or with your hands through the webcam, hold to focus like a camera to step into the portfolio, with smoke behind the pointer, glass sounds and a layout redesigned for phones. Prompts for Hermes Agent and for Claude Code or Codex, and the finished website to download. 27 prompts · 2 parts · copy-paste ready 332 builders viewed Preview live website (https://komputermechanic.com/demos/elara/) — Watch the Full Tutorial ## // Contents ### Part 01 / 02 — Hermes Agent edition - 0 The briefing - 1 Set up the Higgsfield API - 2 The upload point and the preview server - 3 The reference image - 4 The rebuild: the page with a real 3D globe - 5 The pointer feel: fluid tiles, focus brackets, lens background - 6 The camera language: meter, hold to focus, flash, portfolio - 7 The portraits: generate them with Higgsfield and load them - 8 The portfolio: a Pinterest-style contact sheet - 9 Hand control: two hands, four gestures - 10 Mobile: redesign the whole experience for phones - 11 The smoke cursor: grey fluid behind the pointer - 12 The glass sounds: a tick for every tile, a scatter for the burst - 13 Finish, package and push ### Part 02 / 02 — Claude Code, Codex or any coding agent - 0 The briefing - 1 Set up the Higgsfield API - 2 The reference image - 3 The rebuild: the page with a real 3D globe - 4 The pointer feel: fluid tiles, focus brackets, lens background - 5 The camera language: meter, hold to focus, flash, portfolio - 6 The portraits: generate them with Higgsfield and load them - 7 The portfolio: a Pinterest-style contact sheet - 8 Hand control: two hands, four gestures - 9 Mobile: redesign the whole experience for phones - 10 The smoke cursor: grey fluid behind the pointer - 11 The glass sounds: a tick for every tile, a scatter for the burst - 12 Finish, package and push WHAT YOU'LL NEED ## Prerequisites - ▸ Hermes Agent on a Linux server you reach over SSH (Hermes edition), or Claude Code, Codex or another coding agent on your computer - ▸ A Higgsfield account with API access and generation balance, for the test image and the portraits - ▸ Node.js for the small Higgsfield tool, and Python 3 to run the site locally - ▸ A screenshot of the finished website to use as the reference, taken from the live preview - ▸ A modern browser with WebGL, and a webcam if you want hand control (optional) Pick one edition and follow it from the first prompt to the last. Both build the same website. Part 01 / 02 ## Hermes Agent edition Build it with Hermes Agent on your own Linux server. Includes a small upload page and a private preview so you can hand over the reference screenshot and watch the site being built from your own computer. PROMPT 0 ### The briefing paste into your Hermes Agent chat on the server Paste this first. It tells the agent the whole plan and the house rules: one step at a time, a backup before every change, and check real screenshots before saying anything is done. The agent repeats it back and waits. ``` We are about to build a complete interactive website together, and I will guide you through it in numbered prompts, one at a time. Here is the arc so you know where we are going: first you will set up the Higgsfield API and prove it with one small test image; then I will place one screenshot of the finished website inside the project's reference folder and you will treat it as our single source of truth; then you will rebuild it as a page with a real 3D globe of photo tiles; then you will add the pointer feel, the camera-style interface that opens a portfolio, the generated portraits, the portfolio grid and webcam hand control; then you will redesign the whole experience for phones; then you will add a faint smoke trail behind the pointer and the glass sounds; and finally you will polish, package and push the site. Standing rules for the whole project: work step by step and never run ahead of the prompt we are on; once the website exists, take a backup BEFORE every change, meaning at the start of each numbered prompt and before any edit you might want to undo: create a dedicated backups folder in the project and copy the current site files into a time-stamped subfolder there (unchanged photos may be hard-linked instead of copied, so backups stay small), so we can always go back if something screws up; verify your own work by looking at real screenshots before telling me anything is done; and when you finish a step, tell me clearly what you did and what you are waiting for. If I want the site pushed to a repository, I will give you its address before the last prompt; without one, you skip the push. Repeat this mission back to me in your own words, list the standing rules as you understand them, and then wait for my first numbered prompt. Do not build or generate anything yet. ``` PROMPT 1 ### Set up the Higgsfield API Sets up the Higgsfield API: a small Node tool beside the website with the official SDK, and a set-key command you run in an SSH session on your server to paste your API key with the input hidden (it never goes through the chat and is never committed). Then one test image with Soul 2 proves it works. Show full prompt ``` Set up this project to generate images through the Higgsfield API with the Soul 2 model. Read the official SDK documentation at https://docs.higgsfield.ai/docs/how-to/sdk and the model reference at https://open.higgsfield.ai/models/higgsfield-ai/soul/v2/standard/api-reference before implementing. 1. The website itself stays plain HTML, CSS and JavaScript with no build step. Put the generation tooling in its own folder, tools/higgsfield/, as a small Node project with ES modules: install @higgsfield/client and dotenv there, and nothing in the website folder. 2. Give me a safe way to add my key without it ever passing through this chat. Create tools/higgsfield/set-key.mjs and an npm script "set-key" that, run in my own terminal, asks "Paste your Higgsfield API key (KEY_ID:KEY_SECRET):" with the typed input hidden, ignores control characters that pasting can add, checks it has the KEY_ID:KEY_SECRET shape (exactly one colon, no spaces, text on both sides), writes it as HF_CREDENTIALS=... to tools/higgsfield/.env.local with file permissions 600 (readable only by me), and replies only "Key saved" without echoing any part of it. Add .env.local and node_modules to .gitignore, and add a .env.example with an empty HF_CREDENTIALS= line. Then stop and tell me, in plain steps: get an API key at https://open.higgsfield.ai (sign in, open API keys, create one, copy the key id and secret), open a terminal in the project, run "cd tools/higgsfield && npm run set-key", wait until the question appears (anything pasted before it shows on screen), paste the key, press Enter, and tell you when it says "Key saved". Do not run set-key yourself, because anything typed into a command you run passes through this chat. Never ask me to paste the key into chat, and never read, print, log or commit it or the .env.local file; to check it exists, only test for the file and the HF_CREDENTIALS name. The key is used only by the Node tool, never by the website or the browser. 3. Create tools/higgsfield/generate.mjs. First load .env.local with dotenv using { quiet: true } (dotenv never overrides a variable that is already set). Then import { config, higgsfield } from "@higgsfield/client/v2" and call config({ credentials: process.env.HF_CREDENTIALS, maxPollTime: 600000, maxRetries: 0 }): the SDK's default of 5 minutes gives up on slow jobs that are already paid for, and its default retries silently resubmit a failed request up to 3 times, which can pay for the same image twice. Use higgsfield.subscribe("higgsfield-ai/soul/v2/standard", { input: { ... }, withPolling: true }). With this v2 client, subscribe returns the raw API response: check its status ("completed", "failed" or "nsfw", which means moderated and refunded) and read the image from images[0].url; the isCompleted and jobs[0] shape shown in the SDK README does not apply. Download the image to a file. Take the prompt, aspect ratio and output path as arguments so the next prompts can reuse the script. Treat failed, moderated or errored requests as failures and never claim success for them. Never print or log a caught error object, because SDK errors carry the request including the Authorization header with the key; print only the error's name, status and message. If submitting a request answers with a 5xx error, wait a minute and try again. If a 5xx comes while you wait for a request that was already accepted, keep its request id and check that request's status again instead of submitting a new one, which would be paid again. 4. Run one test image: the prompt "a red apple on a white table, plain photograph", aspect_ratio "1:1", resolution "720p", batch_size 1 and enhance_prompt false. This is a billable request of a fraction of a cent; save it in tools/higgsfield/test-output/. Verify it completes, the file exists, and show me the image. "720p" comes back at about 1536 pixels on a side; that is expected. Do not claim the setup works unless you ran it successfully; if execution is blocked, report the blocker. ``` PROMPT 2 ### The upload point and the preview server Your agent lives on a Linux server, so this card builds the door: a small upload page and a preview server on one port, locked to localhost. You get the exact SSH tunnel command, then drag the reference screenshot into your browser at http://localhost:8901/upload and watch the site being built at http://localhost:8901/ for the rest of the project. Show full prompt ``` You are working on my Linux server and I am sitting at a different computer, so before anything else we need a door: one place where I hand you files and one address where I watch what you build. Build both now, in the project, with Python's standard library only, no framework, no extra packages. Write tools/preview/server.py and run it on port 8901. It does two jobs: - It serves the website folder at / , so the site we are about to build is live at that port from the first prompt to the last. Until the site exists, / answers with a plain "nothing built yet" page rather than a stack trace. - GET /upload serves a small self-contained upload page, inline CSS and JavaScript, no CDN and no libraries, but make it pleasant rather than a bare form: a large drag-and-drop area that highlights on hover and also opens a file picker when clicked, the name and size of each file as it goes up, a clear tick when it lands, and a short line saying where the file was saved. - POST /api/upload takes the file from that page as JSON {name, data}, where data is the data URL a FileReader produces, and saves it into the project's reference folder keeping the original filename. SECURITY, NON-NEGOTIABLE: bind to 127.0.0.1 only, never 0.0.0.0. Do not open a port in the firewall, do not put nginx or any other reverse proxy in front of it, and do not expose it to the internet. This page writes files into the project and has no login, so the SSH tunnel is the only door and my key is the lock. Accept only image files (.png, .jpg, .jpeg, .webp), reject anything over 25 megabytes, and reject any filename containing a slash or two dots, so nothing can be written outside the reference folder. One trap that makes the upload look broken while it is working: a screenshot is a few megabytes, so read the whole request body up to its Content-Length before you answer, and set Content-Length on your own response. A handler that saves the file and closes the socket early reports failure in the browser although the file landed, which is the worst kind of bug, because both halves are half right. Start it so it survives a reboot and restarts if it dies: a user systemd service if this machine has one, otherwise nohup with a line in crontab @reboot. If the port is already taken, say so loudly and stop rather than picking another one silently, because every later prompt refers to this port. Check it yourself with curl on the server before you tell me anything. Then teach me the door. Print the exact tunnel command for THIS machine with my real username and this server's real address filled in, the actual values, which you look up yourself, never a placeholder: the shape is ssh -N -L 8901:127.0.0.1:8901 @ and tell me to run it in a terminal on my own computer and leave it open. Then give me the two addresses I will use for the rest of the project: http://localhost:8901/upload to hand you files, and http://localhost:8901/ to watch the site. Then STOP and wait. I will open the upload page and drop in one screenshot of the finished website, which is the reference image for the next prompt. When it lands, tell me the filename you received and where you saved it, and wait for my next prompt. Do not build anything else yet. ``` All 27 prompts are. Or skip the setup: Membership #### Build beyond this tutorial - 3 paid tutorials of your choice today - Every new tutorial, the day it drops - One-line auto-installers for what you unlock - Private members Telegram - Priority inbox, reply within 24h $10/month. $20 covers your first 2 months. Become a member (https://komputermechanic.com/membership) ### Get all 27 prompts by email No card needed. Want them as a single Markdown file plus the complete ELARA KANE website (zip) and both prompt library pages? We'll email you a 6 digit code to confirm. ## // What you're building toward A finished portfolio website you can host anywhere as static files: a real 3D globe of glass portrait tiles, pointer and hand gesture control, a hold-to-focus camera interface that opens a Pinterest-style portfolio, smoke behind the pointer, glass sounds and a phone layout of its own. Swap in your own photos and the same prompts build your own portfolio. Stuck on a step? Drop a comment on the video, or book a session and we'll walk through it together. ### Usage & License Use the prompts and downloadable templates on this page in your own personal and commercial projects. What's not allowed: reselling, repackaging, redistributing, or republishing this material — on YouTube, Gumroad, paid courses, newsletters, or anywhere else. Send people to https://komputermechanic.com/ instead. Violations get reported and taken down. Tutorial Sponsor Higgsfield (https://higgsfield.ai/s/higgsfield-general-campaign-komputermechanic-SbUxXm) Proudly supporting this tutorial. ## Structured data ```json [ { "@context": "https://schema.org", "@type": "Article", "headline": "How to Build a Premium 3D Website with Hermes Agent (Interactive Globe Portfolio)", "description": "How to build a premium 3D website with Hermes Agent: a portfolio globe of 41 glass portrait tiles you steer with your mouse or your hands, a hold-to-focus camera interface, smoke trail and glass sounds. Copy-paste prompts, and the finished website as a template.", "image": "https://img.youtube.com/vi/VHrpHmZ3AhE/maxresdefault.jpg", "url": "https://komputermechanic.com/tutorials/how-to-build-a-premium-3d-website-with-hermes-agent", "datePublished": "2026-09-24T00:00:00Z", "author": { "@type": "Organization", "name": "Komputer Mechanic", "url": "https://komputermechanic.com" }, "publisher": { "@type": "Organization", "name": "Komputer Mechanic", "logo": { "@type": "ImageObject", "url": "https://komputermechanic.com/favicon.png" } }, "mainEntityOfPage": "https://komputermechanic.com/tutorials/how-to-build-a-premium-3d-website-with-hermes-agent", "keywords": [ "Hermes Agent", "3D Website", "3D Portfolio Website", "Build a 3D Website with AI", "Hand Gesture Control", "Three.js", "Higgsfield", "Claude Code", "AI Website Builder" ] }, { "@context": "https://schema.org", "@type": "VideoObject", "name": "How to Build a Premium 3D Website with Hermes Agent (Interactive Globe Portfolio)", "description": "How to build a premium 3D website with Hermes Agent: a portfolio globe of 41 glass portrait tiles you steer with your mouse or your hands, a hold-to-focus camera interface, smoke trail and glass sounds. Copy-paste prompts, and the finished website as a template.", "thumbnailUrl": "https://img.youtube.com/vi/VHrpHmZ3AhE/maxresdefault.jpg", "uploadDate": "2026-09-24T00:00:00Z", "contentUrl": "https://www.youtube.com/watch?v=VHrpHmZ3AhE", "embedUrl": "https://www.youtube.com/embed/VHrpHmZ3AhE" }, { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://komputermechanic.com/" }, { "@type": "ListItem", "position": 2, "name": "Tutorials", "item": "https://komputermechanic.com/tutorials" }, { "@type": "ListItem", "position": 3, "name": "Premium 3D Website with Hermes Agent" } ] } ] ```