01Interactive web presentation
Saltmere
HTML · CSS · JavaScriptSVG animationVideo-readyMobile
A point-and-click walkthrough of a fictional seaside town. You pick a place on an illustrated map, read its story, then step inside a full-screen scene and click things to make them happen.
What I built
- An illustrated town map with five places; clicking one zooms the map smoothly and opens its description, with Previous / Next for a guided tour
- Full-screen scenes where clicks change what you see: a boat sails out, the lighthouse beam sweeps the bay, market stalls open, a whale surfaces, museum doors swing open
- A day / night switch for every scene, and a slot for a real video clip per place, with the illustration as a fallback so a missing clip never shows a broken player
- Links to any place or straight into its scene, so a main website can open a specific stop in its own window
Problems I solved
- On phones the wide scene is cropped, so clickable points drifted off their objects; the scene, video and points now share one frame, each scene opens on its main subject, and you drag sideways to look around
- Night mode had to dim the scene but keep windows, lanterns and the lighthouse beam bright, so the art is split into a base layer under a darkening veil and a glow layer above it
Saltmere is a fictional town. Plain HTML, CSS and JavaScript with no build step.