AI Creative Challenge 2026 · Entry 13 · AI notes

How this homepage was built, and where I overruled the AI.

I run the engineering team that is competing in this challenge, so this entry is hors concours: it is judged on the same rubric but takes no prize. Its job is to set a bar and to document a workflow the team can refer to.

Entry: 13 of 13, hors concours (Director of Engineering, Atomiton Vietnam)
Deliverable: One live homepage (desktop and mobile), this notes page, a 3-minute demo
AI tools: Claude (research, build, QA), Claude's browser for reading atomiton.com, Three.js r128, Google Fonts
Content rule: Public atomiton.com content only: the homepage copy as the skeleton, published case-study figures labelled as such, the data center page for the sector anchor. Nothing leaves this page. Nothing internal, nothing invented.
Hosting: Static files, no backend, no build step

1. What the brief actually rewards

The score is 35 visual, 25 UX, 20 AI use, 15 content, 5 reliability. Two readings matter. First, 60 of 100 points are about the experience, so one strong opening moment is worth more than ten decorated sections. Second, the AI-use score is about judgment, not volume: the rubric says "bring your judgment", so the notes have to show what the AI proposed and what a human changed.

Reliability is only 5 points, but a broken link or a page that fails on a phone also costs UX and visual points on the day. I treated it as a gate, not a 5-point line item.

2. What I built

A scroll-scrubbed opener. Scrolling moves a live 3D camera from inside an aisle of racks, up to a zone view, then a site view, then an enterprise view where five sites link to one hub. This is the company's own sentence made visible: "intelligence that flows across all layers and contexts of the business".
Live, not baked. The current Claude plus Higgsfield playbooks generate a cinematic clip, slice it into about 180 JPEG frames and scrub a canvas on scroll. I used the same interaction, but the scene is rendered in real time by hand-written JavaScript on Three.js. The page itself, all four scenes included, is under 310 KB, plus the 600 KB Three.js library, instead of tens of megabytes of frames, it never stutters on a slow connection, and the camera path can be changed in one line.
An ambient story. A scan sweeps the hall, racks turn green as they are measured, a few turn amber as hot spots and cool back down. The HUD counts them. Everything in the HUD is labelled "simulated view" so nobody mistakes it for product telemetry.
A page under it that changes rhythm every section. Hairline rules, one accent color, no cards, no gradients, no stock photos.
- What it is: the camera pulls back from one rack’s power meter through its cooling and power path, its data center and a six site portfolio, and the reading stays the same at every level.
- Customers: one register line of four names.
- Impacts: the published case studies led by one figure, Chevron's 254,309 t CO2e averted, then every result in one ledger on one honest scale, where each bar is the baseline before the change and the lime segment is the share removed.
- Recognition: the Energy Business Review quote beside a slow-turning seal built from the award title and the A mark.
- Why it is different: one simulated site, pinned and driven by the scroll, one axis per beat. Three tools each cover only their slice and the tank farm is in none of them, then the whole site becomes one model with a readout from asset to enterprise; a pump slowed from 412 to 361 kW leaves the enterprise projection unchanged, then the saving counts toward the target; an event at that pump waits for the monthly close, then the insight arrives with the data. The site is called Site 01, tagged as a simulated tank terminal, and every figure in it is simulated.
- Platform: a camera tour of the same Site 01, one change carried through the cycle. Monitor sweeps every asset, Analyze traces a stack deviation to boiler B-1, Optimize lowers its O2 setpoint and the plume clears, Report rolls the saving into a simulated Q1 panel, Forecast adds the 2027 throughput scenario as ghost equipment, and Plan closes a target boundary that is handed back to Monitor.
- Sectors: a still plan view of one data hall zone that shows only cooling-to-workload causality, with the four other sectors set as type.
- Contact: the booking itself is the close of the page. Every Schedule a call scrolls to it (month grid, time slots, Confirm disabled because this is a demo), beside a Write to us tab holding the email form.
- Header: two corner anchors on desktop (the mark and a Menu on the left, the current section and Schedule a call on the right, with a one pixel progress line), one solid bar on phones.
- Footer: the original ten Solutions and Impacts links all pointed at two anchors on this page, so they are merged on purpose; the content lives in the Sectors and Impacts sections and the menu. Only Knowledge Hub, the legal pages and social links are inert, and the colophon says so.
The real mark. The Atomiton logo, recolored for the dark ground: black becomes off-white, the red atoms and the grey orbit stay. The shape is untouched.
Fallbacks. No WebGL: a static patterned hero with the same copy. Reduced motion: no scrub, one fixed frame. Phone: fewer racks, lower pixel ratio, the HUD hidden.

3. Workflow

Step	What happened	Who did what
Read the brief	Extracted rubric, deliverables and constraints from the deck, including the presenter notes.	AI read, I decided the reading in section 1.
Inventory the public content	Opened atomiton.com in a browser (the site renders with JavaScript, so a plain fetch returns an empty body), captured the homepage, the data center solution page, the impacts index and all five case studies. Listed every claim with its URL.	AI collected, I chose what goes on the page.
Study the reference	Reviewed higgsfield.ai and the current Claude plus Higgsfield motion-site workflow (scroll-scrubbed video, sticky stage, parallax layers, keyframe re-encode, canvas frame sequences).	AI researched, I picked the technique to borrow and the one to replace.
Set the direction	Dark green ground, one bright accent, condensed grotesque, spec-sheet sections. Decided the opener would be a live scene, not a video.	Mine.
Build	One HTML file, one notes page. Three.js scene, scroll logic, responsive layout, forms without a backend.	AI wrote the code from my instructions; I reviewed every section against the source inventory.
QA	Headless renders at 320 to 2560 px, console clean, no horizontal overflow, every in-page link and inert item checked, every number re-read against its source page, a search for characters and patterns I do not allow.	AI ran the checks, I read the results.
Review rounds	After each round of my screenshot feedback, separate AI roles worked in parallel: a head of product checked that each figure says what the copy says, designers built competing prototypes and rendered them at 1440 and 390, a director role chose one against the rubric with written conditions, and an engineer role ported it and re-ran every check. A final round had four independent reviewers score the page and a director turn their findings into a ranked fix list, which the engineer role worked through and re-checked. I judged every round on the renders, not on descriptions.	AI proposed, built and checked; I set the bar and made every call.

Most of the time went to reading sources and checking renders, not to typing code.

4. The prompts that mattered

01Read the deck. Give me the rubric as numbers, the deliverables, and what the presenter notes add that the slides do not say.Starting with the scoring, not with the design, decided everything after it.

02Open atomiton.com in the browser, not a fetch. Inventory every public claim, number and link on the homepage, the data center page and every case study, with the URL for each.The fetch returned metadata only. The browser returned the real page.

03Research how teams build animated sites with Claude and Higgsfield. Tell me the actual technique, the file sizes, and the failure modes, not the marketing.Answer: baked frame sequences on a canvas, heavy but simple. That is what I expected most entries to do.

04Build the opener as a live Three.js scene scrubbed by scroll: aisle, zone, site, enterprise. Same sticky-stage interaction as the video approach, no video file. Include fallbacks for no WebGL and reduced motion.The one risk in the entry, taken on purpose.

05Public content only. No internal product names, no customer facts beyond what the site publishes, no invented statistics. If a number cannot be traced to a page, it does not go in.This removed two things the AI had drafted. See section 5.

06Dark green, one accent, no cards, no gradients, no left accent bars, no emoji, no em dashes anywhere in the code or the copy.House rules. They keep the page from looking generated.

07Render desktop and phone headlessly, scrub the hero at four positions, report console errors and horizontal overflow. Then open every link and confirm where it lands.Checks are cheap when the AI runs them. Not running them is the expensive option.

5. Where the AI was wrong, and what I changed

It reached for internal names. The first content draft referred to internal product names that do not appear on atomiton.com. Removed. The brief says public content, and a public page is not the place for internal vocabulary.
It wanted to hotlink the customer logos from the Atomiton CMS. Replaced with text wordmarks. Hotlinks break when a CMS path changes, and redistributing third-party logos from a concept URL is not a decision a contest entry should make.
It would have copied a duplicate. While inventorying the case studies, the Arboris steam page turned out to carry exactly the same figures as the Vopak Savannah steam page (19 percent gas, 1,110 tonnes CO2e), most likely a content error on the site. The page shows the steam figures once, under the Vopak Savannah source page only; the duplicate on the site is still worth fixing, and I will flag it to the site owner.
It defaulted to black and acid green. That combination is now the recognizable look of generated pages. Shifted the ground to a deep green and kept the accent for one job: measured, healthy, live. Amber is reserved for what is wrong today (hot spots, gaps, late insight, a deviation) so the two colors carry meaning.
It used mailto and tel links as if they always work. In sandboxed previews they often do nothing. The email and phone are now selectable text with a copy button, and the form composes a message on submit instead of pretending to send one.
Its headline collided with the scene. At laptop widths the end of INTELLIGENCE ran into the bright corridor on the right. Reduced the headline scale and pushed the scene further right at the start of the scroll, so the copy always sits on the dark side.
It put a 100 percent viewport hero under a sticky header, which cut the bottom of the first frame by the header height on every device. Fixed the header and reserved the space.
Its stat tiles mixed one-line and two-line captions, so numbers in the same row sat at different heights. Changed to one stat per row with a shared baseline.
It left the enterprise view fogged. The fog that makes the aisle feel deep also hid the far sites at the end of the scroll. Fog density now falls with the camera's climb.
Its first barriers figures explained data with geometry. Two rounds of abstract diagrams (planes, then shadows on glass) read as decoration; I asked for a real place, and the figure became a simulated tank terminal where three tools each see their slice.
It put the capabilities on a chart behind glass. That is a dashboard widget; the cycle now runs as a camera tour of the same site, one change carried from Monitor to Plan.
Its reviewers marked inert links and the disabled Confirm as blockers. Both are deliberate in a homepage-only demo; I kept them and asked for them to read as intentional instead of broken.
Its reviewers scored the figures too small in their frames. The fix was one shared camera fit and one label system across the three scenes, not new effects.

6. Verification

Desktop 1440 px and phone 390 px rendered headlessly: no console errors, no horizontal overflow.
Hero scrubbed at 12, 30, 55 and 100 percent: the four levels, the HUD and the camera path match the design.
Outbound links: only this notes page. Every Schedule a call (hero and header) lands on the inline booking with the first slot focused, and Confirm cannot be pressed. Menu entries jump to sections of this page and clear the header; Knowledge Hub, the legal pages and social links are inert, marked, and out of the tab order.
Every site sentence and every figure re-read against its atomiton.com page (see the source map).
Interactions tested headlessly: the capabilities loop responds to clicks and arrow keys, pauses when selected and advances on its own; the result bars grow once when they enter the viewport; a scroll through all three barrier beats in under a second ends in the right state; the header readout names the section in view and the progress line grows with the scroll.
The three live figures render on desktop and phone with no console errors; each barrier beat captured at the start and the end of its scroll range; the camera tour moves to the asset of each selected capability on Site 01 and settles there; the sectors zone plays once and settles; the page still passes without WebGL (SVG fallback) and under reduced motion.
This round, re-checked headlessly: under reduced motion every figure settles with no animation running and layout shift under 0.02; with Three.js delayed 8 seconds or blocked, the menu, calendar, tabs and copy buttons work at once and the hero and figures fall back after 6 seconds; a lost WebGL context returns only that figure to its SVG version, in the same box, and the 3D comes back when the context is restored; no horizontal overflow from 320 px to 2560 px or at 200 percent zoom; the booking works by keyboard (one tab stop in the month, arrow keys between days, Enter keeps focus on the day, Tab reaches the first time slot).
In the Netlify build Three.js r128 and the fonts are served from this site, and the Three.js script carries a sha384 integrity hash computed by the build from the file it ships: sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu. The artifact preview, which cannot carry extra files, loads the same r128 build from cdnjs and the fonts from Google Fonts. The script is requested as soon as the page is parsed, with a 6 second fallback, and not at all when the browser has no WebGL.
Security headers ship with the site (_headers for Netlify): a Content Security Policy that allows scripts only from this site and the page's own inline scripts (each pinned by its hash), fonts only from this site, and no connections, frames or form posts; plus a same-origin opener policy, nosniff, a strict referrer policy and no camera, microphone or location. Served headlessly with these headers: zero policy violations, no request to any other host, 3D, fonts, booking and form all working.
No em dashes, no en dashes, no emoji in the code or the copy.
Keyboard: menu, booking tabs (arrow keys), calendar, form and buttons reachable with visible focus. Escape closes the menu and returns focus to it.
Fonts and Three.js are pinned to exact versions, and the page still reads correctly if either fails (system font, patterned fallback hero).
The scene is a simulation and is labelled as one. It is not product telemetry and does not claim to be.

7. Source map

Claim on the page	Source
Immersive Intelligence, the four outcomes, the introduction, the Energy Business Review recognition, the three barriers, the six capabilities, the five sectors and their descriptions, the contact form fields	atomiton.com/home
Customers shown: Vopak, AB InBev, Chevron, McDermott (four of the eight names on the homepage strip)	Logo strip on atomiton.com/home
Footer items (Knowledge Hub, legal and social links)	Header and footer of atomiton.com/home
Phone, email, Schedule a call (a 30-minute meeting on the live site; the inline booking here is a simulation of that flow)	Footer and call button on atomiton.com/home
Vopak: 32% Scope 2 CO2e reduction, 35% reduction in electricity use, 29% lower cost of utility	Electricity Management
Chevron: 254,309 t CO2e averted, 15% fewer transport miles per unit delivered, 18% reduction in logistics cost	Transport & Distribution Optimization
AB InBev: 22% reduction in tank water use, 18.5% reduction in nozzle water use	Water Stewardship
Vopak Savannah: 19% natural gas saving, 1,110 t CO2e averted	Steam Optimization, Heating
Data centers: the five capabilities listed in the sector grid	atomiton.com/solution/data-center
Hero level captions	Editorial, written for this concept
Section headings and one-line intros	Editorial, written for this concept; they make no claim beyond the source lines they introduce
Site 01 and every figure in the barriers and capabilities scenes, the booking slots	Simulated, no source; labelled Simulated on the page
Logo and A mark	Supplied by the entrant, recolored for a dark background; the A mark also sits in the favicon and at the centre of the recognition seal

8. If you want the Higgsfield version

The scene is a drop-in slot. To replace it with a generated clip, follow the pipeline the current playbooks use:

Generate a 6 to 8 second clip with one continuous camera move and no cuts, for example a slow pull-back from a server aisle to a view above a data hall. Use a still as the start frame for control.

Re-encode so every frame is a keyframe, which is what makes scroll scrubbing smooth:

ffmpeg -i clip.mp4 -an -vf "scale=1600:-2" -c:v libx264 -x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p hero.mp4
ffmpeg -i hero.mp4 -frames:v 1 poster.jpg

Keep the sticky stage and the scroll-progress logic. Map progress to video.currentTime inside a requestAnimationFrame loop with easing; never set it directly in the scroll event, and wait for loadedmetadata before reading the duration.
Keep the poster and the reduced-motion path. On phones, play the clip on a loop instead of scrubbing.

Budget for it: a clip of that length at 1600 px is 10 to 30 MB as a frame sequence, or 3 to 8 MB as keyframe video. The whole homepage is about 298 KB of HTML, the three live scenes, the SVG fallbacks, logo and favicon included, with no media files; Three.js loads from a CDN as the opener already did.

9. Rules I would set for every entry

Public homepage content only, with a source for every claim. An AI will happily invent a statistic; the judges should not have to catch it.
Label the page as a concept and add noindex. A dozen look-alike homepages on public URLs should not compete with atomiton.com in search results or confuse a customer.
No internal product names, roadmap items or customer facts that are not already published.
Working links is a gate. A broken link is not a 5-point deduction, it is a page that does not ship.
Take the concept sites down, or keep them private, two weeks after the demo day.