Passer is a single-file HTML template for an e-bike maker, dressed as a fictional factory on the south bank of the Maas in Rotterdam that builds a city bike and a cargo bike. The page is set on cool drafting paper with black ink and one hi-vis yellow-green, and the whole story runs on one line between the drawing and the finished bike. The header weighs only what is built: the figure rises and falls as parts turn solid on screen. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Hubot Sans and Azeret Mono typefaces are embedded in the file.
The bike is geometry built in code, every tube, spoke, sprocket tooth and battery cell, rendered in WebGL with its edges found on screen, so each part can appear as a hatched engineering drawing or as the painted, metal and rubber machine. When the loader lifts, a scan line sweeps across the bike and turns it and the headline from drawing to built. Afterwards the line follows the cursor, the bike sways on its turntable, scroll speed turns the wheels, and every nine seconds the line runs back across the page and builds everything again.
Scrolling takes the bike to a side elevation and draws in its wheelbase, head angle and wheel size, then explodes it into parts with a callout for each (name, material and weight), brings the battery forward and opens it to show its forty cells, and builds the bike again part by part. Below the story, the city and the cargo bike turn on their own turntables, and picking a frame colour repaints the frame behind a scan line. The test ride section draws a loop from the factory gate as a plan with a kilometre scale and an elevation profile next to a booking form, followed by the factory line as a strip of stations, an FAQ that keeps one answer open at a time and a newsletter form. The forms validate and confirm in the browser only, so connect them to your own booking system before launch.
Dark mode follows the visitor's system setting, and adding ?tune to the address opens sliders for the drawing's hatching, line width and spin. 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 brand, specifications, prices 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
– 3D bike built from code geometry, drawn in WebGL as a hatched drawing or as a finished machine
– Cursor-driven scan line that splits the bike and the headline into drawing and built
– Scroll story with a dimensioned side elevation, an exploded view with part callouts and an opened battery
– Header weight that adds up only the parts shown built on screen
– Two bikes on turntables with a frame colour picker, and a test-ride route plan with an elevation profile
– Dark mode, reduced-motion stills, side-elevation drawings where WebGL is unavailable and a native dialog menu
Ideal For
E-bike, bicycle and cargo bike makers.
Hardware and product brands that want to show how their product is engineered.
Studios pitching a technical product launch with no photography to license.
