Savi is a single-file HTML template for a wheel-throwing studio, dressed as a fictional six-wheel ceramics studio in Helsinki that makes stoneware to order for restaurants and teaches evening classes. The page follows one bowl from a lump of wet clay to the finished piece on a slate board, and the header measures it the whole way: its diameter and height while it is made, the kiln temperature while it fires, and its size once it has shrunk. It is set in pale porcelain tones with slate type and one celadon green. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Geologica typeface is embedded in the file.
The bowl is drawn in WebGL as a surface of revolution whose profile is data, so the clay changes shape point by point instead of crossfading. The shader paints the materials a potter would recognise: wet clay with slip streaks and throwing lines that turn with the wheel, leather-hard and bone-dry clay, bisque, raw glaze, and a celadon that pools in the grooves and breaks brown on the lip. When the loader lifts, a lump is thrown into a bowl in three seconds; then the wheel keeps turning, your cursor presses a ring into the wet wall at its height, leaf shadows sway across the studio wall, and scroll speed spins the wheel faster.
Scrolling rewinds the bowl to a lump and makes it again: centred and opened, pulled into a cylinder, trimmed upside down with a foot ring, glazed, then fired in the one dark act of the page, where it glows at the colour of the kiln's temperature and three pyrometric cones bend as it passes their points. Below the story, a tableware section lets you pick one of four glazes and re-glazes a plate, the bowl and a cup live, each with a half-section drawing and sizes measured from its profile. The glaze you chose carries into the order form, whose quote line recounts as the number of covers changes, and a class booking form sits beside a first cylinder wobbling on its wheel. The forms validate and confirm in the browser only, so connect them to your own system before launch.
Dark mode follows the visitor's system setting, with moonlight in place of daylight on the studio wall, and adding ?tune to the address opens sliders for the bowl's exposure, spin and press. The download is a ZIP with the page as index.html and RECREATE.md, a build prompt for an AI coding agent. It sets out the concept, palette, type and copy rules, explains how the motion system works and what the accessibility pass covers, and ends with the full page source; that source links its fonts from Google Fonts, where index.html has them built in. The studio name, people, prices, lead times, class dates and contact details are placeholders for your own.
Key Features
– Plain HTML, CSS and JavaScript in one file, with no framework, no build step and no image files
– WebGL bowl whose profile morphs from lump to finished piece, with clay, glaze and kiln-glow materials
– Hero wheel that keeps spinning, with the cursor pressing rings into the wet clay
– Scroll story through six stages of making, with live size and kiln temperature in the header
– Glaze picker that re-glazes three pieces live, with SVG half-section drawings and measured sizes
– Order form with a live quote line, a class booking form and an FAQ accordion
– Dark mode, reduced-motion stills, half-section drawings where WebGL is unavailable and a native dialog menu
Ideal For
Ceramic studios and potters who make tableware to order.
Craft workshops and makers who also teach classes.
Studios pitching a light, craft-led site with no photography to license.
