VERTAX Industries
An industrial website with a scroll-driven
manufacturing film and a digital assistant

Project overview

VERTAX Industries is a precision machining business — milling, turning, prototyping, series production and engineering for customers in automotive, aerospace, medical technology and machinery. The business does not exist: the brand, the figures and the machine park were designed from scratch.

That decision is the heart of the project. A reference project disguised as a real one could, at best, prove that a website can be built. A declared one proves that a whole company can be designed — positioning, language, figures and imagery included.

This is why the site carries a concept page of its own, where every brand-facing statement sits in one of three classes: verifiable, designed, or invented. What a prospect takes away from it is not the classification but the way of working behind it.

• 20 pages per language, German and English as equals
• Services, sectors, machine park, quality and contact as distinct layers
• A concept page that separates what was designed from what is verifiable
• No contact form in this build — the contact page names routes, it accepts nothing
• Legal texts and provider identification published under BTECH SOLUTIONS

The scroll-driven manufacturing film

The centrepiece of the home page is a film that is not played but scrolled. It follows a single part through eight chapters: from the shop floor before the shift starts, through clamping the raw billet and the cut itself, to measurement and dispatch. The scroll wheel is the transport — stop scrolling and the image stops with you.

Technically this is not a video but a frame sequence, drawn onto a canvas one image at a time. That is the only way to tie motion exactly to scroll position without it stuttering on the way back up. The frames are stored as WebP in several resolution tiers, and only the tier a device actually needs is fetched.

Because a frame sequence is not text to a search engine and nothing at all to a screen reader, the same story sits directly beneath it as prose: the same eight steps to read rather than scroll, each linking into the matching service page. The film is the staging, not the carrier of the information.

For visitors who have asked their operating system for reduced motion, the frame sequence does not engage — they get calm still images instead of a scroll-driven animation.

• Eight chapters from raw billet to pallet, tied to scroll position
• A canvas frame sequence rather than video — as smooth backwards as forwards
• WebP sequences in resolution tiers, fetched to suit the device
• A full text version of the same eight steps below the film
• A poster frame, so the first paint never waits on the sequence
• Respects the operating system's reduced-motion setting

The digital assistant

A figure stands in the bottom corner and guides visitors through the site. It does not speak up uninvited, it blocks nothing and it never gets in the way — it responds when a visitor addresses it, and offers a guided tour of the site.

The figure is the digital likeness of Benjamin Tietz, publisher of the study, used with permission. That is a deliberate choice: the alternative was an invented person fronting an invented company, which is one invention more than the work needs. The attribution is therefore shown on the figure itself, not buried in the small print.

The assistant is built as an enhancement, not a prerequisite. Without JavaScript, an ordinary link to the contact page stays in its place — labelled, operable and pointing somewhere useful. Only once the page comes alive in the browser does that link grow into the figure with its video states.

Those states are short, silent video loops that switch to suit the situation, rather than one endless loop running throughout. Nothing is preloaded: for as long as nobody addresses the figure, it costs a single still image.

• Responds when addressed — no window that pops open by itself
• Without JavaScript, a labelled link to the contact page rather than a dead button
• Short, silent video states instead of one continuous loop
• Nothing is fetched before the figure is actually wanted
• The person depicted is credited visibly, on the figure itself
• Keyboard operable, with its open state announced

Architecture, speed & data thrift

All 40 pages are prerendered to finished HTML at build time and then sit on the server as static files. Anyone opening the site gets the text before a single script has run — the same advantage for a search engine as for a visitor on a slow connection.

The site loads nothing from third parties: no analytics, no maps, no external fonts, no embeds. That is not a statement of intent but a measurement — opening the home page produced 32 requests to exactly one host, its own domain. A test fails the build the moment a request leaves that domain.

That nothing moves while the page loads, despite a frame-sequence film and a video figure, is the more demanding part: every space that gets filled later is reserved beforehand. The measured CLS is 0, and the largest paint arrives in 0.8 seconds.

The design system works with layered CSS and colour tokens in the OKLCH space — which lets colours be derived in even steps of lightness rather than being picked one by one. It is documented as a built page of its own, not merely as an agreement.

• 40 prerendered pages, delivered as static HTML
• 0 third-party hosts — enforced by a test in the build, not merely promised
• Lighthouse desktop 98 / 100 / 100 / 100, measured against the live demo
• CLS 0 and 0.8 s to the largest paint
• Self-hosted fonts, loaded as a reduced character set
• Colour system in OKLCH, documented as a built design-system page

What a real project takes from it

The value of this study is that only the content is invented — not the structure holding it. Figures live as data, sentences as copy, brand and colour world as one configuration. The same codebase carries a real business as soon as brand, figures and copy are swapped.

That is exactly why the list of invented things on the concept page is so thorough: it doubles as the handover list for a real engagement. What stands there is what a business contributes from its own records — everything else already exists.

Several rules are anchored as checks in the build rather than as good intentions: a certification name must not reach the machine-readable data, because a machine reader does not carry the qualifier with it. A depiction of a person is not shipped without a recorded approval. And the geometry of the brand mark is solved from numbers and pinned by tests, so a changed logo cannot leave a stale icon in a browser tab.

For a manufacturer whose current web presence is a datasheet and a contact form, that is the real difference: a site that shows the process instead of asserting it — and that states where every figure on it came from.

• Figures as data, sentences as copy, brand as configuration
• Language versions built as equals, not translated as an afterthought
• Checks in the build rather than agreements: certificate names, personal approval, third-party hosts
• A brand mark solved from numbers and secured by tests
• Brand, figures and copy swappable without touching the architecture