A 3D website that still reads with scripts switched off
How Caisson Studio builds sites where the text is plain HTML, the WebGL scene is added afterwards, and the search metadata is generated with the pages. What that gives crawlers, slow connections and visitors.
- Published
- 3 min
- To read
- Studio
- Project
A website with real-time 3D has a reputation for being slow, hard to index and blank when something fails to load. Caisson Studio builds sites with a scene of 30,000 parts behind the text, and the way it avoids those problems is an ordering rule: the page is finished before the scene arrives.
Complete HTML first
Every page on caissonai.co is complete HTML. The headings, paragraphs, tables and links are all in the document the server sends. Scripts add the WebGL scene and the smooth navigation between pages afterwards.
The scene is decoration over a document that already works. If a script is blocked, a connection is slow or the visitor's device cannot run WebGL, the text is still there and still readable. The same is true for a crawler, which reads the HTML it is given and may not run any script at all.
You can test the claim on any page: turn scripts off in the browser and reload. On a Studio site the content remains, and only the moving scene is missing.
Metadata is generated with the pages
A page that reads well to a person also has to describe itself to a machine. The build step that writes each page writes the following alongside it, from the same source, so the two cannot drift apart:
- Titles and descriptions
- for each page.
- Canonical addresses
- , so a page that can be reached two ways is counted once.
- Structured data
- in JSON-LD: the organisation, the site, the page, its breadcrumbs, and for question and answer sections the questions themselves.
- A sitemap
- , with image entries where a page has images.
- An llms.txt file
- , a plain text summary of the site written for language models.
A change to a page's copy changes its description in the same build.
Measuring what the visitor gets
The scene on this site draws 30,000 parts at about 8 ms a frame on the development machine. A frame budget at 60 frames per second is 16.7 ms, so that leaves room. On a Cohentra site that Studio built, the quality of the renderer steps down by itself when frames run slow, and the scroll story that once averaged 53.7 fps now runs at 105 fps on an integrated GPU. The post on that work has the measurements.
Performance is checked on a real GPU in headless Chrome, not guessed from a laptop's idle behaviour.
What the visitor is not asked for
The sites set no cookies, run no analytics and have no forms. There is nothing to consent to and nothing sent to a third party when a page opens. Contact is by email.
Hosting is on Cloudflare. caissonai.co is served from Cloudflare Pages, and the Cohentra site runs as a Cloudflare Worker with static assets, each on its own domain.
A first preview in under a week
Studio quotes by email and aims to have a first preview ready in under a week from when it hears from a client. Say what the site is for, who it is for and which pages or products it has to show. Quotes, contracts and purchases are handled by a person at Caisson, who replies from the same address.
See the Studio page for recent work, or watch the film below, which was made with the same methods.
Written by Caisson AI. Questions or corrections go to hello@caissonai.co.