Art foundry — 3D concept site
A one-day concept site for an imaginary bronze foundry, built to show premium craft clients.
- Three.js
- GLSL
- GLTFLoader
- HTML
- CSS
- GitHub Pages
- 1 dayfrom brief to published site
- 13content sections, from manifesto to contacts
- 0build steps: one HTML file with libraries from a CDN
A bronze horse, orbited by the scroll
Tap a block to see what it does.
- Infrastructure
- Input
- Logic
- Output
- Data
The heart of the system
The bronze in its 3D scene
One HTML file and no build: a rearing bronze horse that the camera circles as you scroll, over a molten-light shader, published straight from GitHub Pages.
Infrastructure
GitHub Pages
Static hosting straight from the project branch: no build, no server.
- GitHub Pages
Hands to Single HTML file
Input
Single HTML file
About 1,000 lines: 13 sections, frosted-glass header, an import map that pulls Three.js from a CDN. No bundler.
- HTML
- CSS
- import map
Gets from GitHub PagesHands to Smoothed scroll, Reduced motion
Logic
Smoothed scroll
Scroll progress eased a little each frame drives everything: the progress bar, the slides that switch on scroll ranges, the shader and the camera.
- JavaScript
Gets from Single HTML fileHands to Background shader, Orbiting bronze
Output
Background shader
Full-screen fragment shader whose UVs warp with time, scroll and mouse uniforms, giving the molten-bronze light behind the model.
- GLSL
- ShaderMaterial
Gets from Smoothed scrollHands to The bronze in its 3D scene
Output
Orbiting bronze
GLTFLoader brings in the horse; the camera circles it as you scroll, and spark particles speed up with scroll velocity.
- Three.js
- GLTFLoader
Gets from Smoothed scroll, External assetsHands to The bronze in its 3D scene
Data
External assets
The glTF bronze horse and the images load from an external host, not from the repo: a known dependency of the demo.
- glTF
Hands to Orbiting bronze
Output
Reduced motion
prefers-reduced-motion is respected twice: CSS stops animations and smooth scroll, JavaScript skips the heavy motion.
- CSS
- JavaScript
Gets from Single HTML fileHands to The bronze in its 3D scene
The problem
I needed a showcase piece for sales talks with craft and high-end businesses: a site with real visual impact for an imaginary art foundry. No real client is behind it.
What I built
- I briefed Claude Code for a complete site and steered it through a refinement pass: six commits in one day.
- I kept everything in one HTML file with an import map from a CDN: no bundler, no build, published at once on GitHub Pages.
- I directed a Three.js hero: a bronze horse in glTF that the camera orbits as you scroll, over a background shader that warps with scroll and mouse.
- I asked for visual fixes after each pass: blurred decorative orbs removed, heading wraps fixed, empty areas filled, a symmetric editorial image.
The hard part
The price of shipping in one day with no build. The 3D model and the images load from an external host, so the demo depends on it, and the contact details are still placeholders. I list both as known limits instead of hiding them.
Result
Online as a static concept demo with 13 sections, with reduced motion handled in both CSS and JavaScript. No real client is attached to it.
My role
I gave the direction and the feedback on each pass; Claude Code wrote all of the code. It is an exercise in visual direction, not client work.