Carbon graphite, in three languages.

We modeled and rendered Metcar's catalog in 3D: seals, bearings, vanes and rotors, brushes, thrust pads. The same light and the same white for every product line, so the catalog reads as one.

On the home page, a seal ring turns frame by frame as you scroll, while the properties of carbon graphite appear beside it.

Each language has its own URLs, and visitors land in theirs. Pages and products are translated in the CMS, the blog follows HubSpot's language, and the Chinese layouts were tuned so headlines and animations work with full-width characters.

Mainland China needed more than a translation. Prismic's images, HubSpot's scripts and Google's tags don't load there, so the Chinese site lives on its own mirror, metcar.com.cn, on Alibaba Cloud in Hong Kong.

In Prismic, Metcar's team builds pages from 29 sections and around 80 layouts, and edits 19 product families, 263 application pages and six industries. Publishing updates the site in seconds, with a live preview first.

The pre-engineered catalog filters by type, category and material. In the knowledge base, certifications, catalogs and data sheets can be picked and downloaded together, and gated files unlock with a signed link sent by email. The company's history, since 1945, reads as a timeline.

Every form on the site, from a quote request to a newsletter sign-up, lands in HubSpot as a contact. The blog is written in HubSpot and shown in the site's design, and it refreshes minutes after a post goes out.

The openings on the About page come straight from ADP Workforce Now, the system HR already uses, and each one links to its application.

The first time someone arrives, the Metcar mark draws itself and Carbon Graphite Solutions types out letter by letter while the page loads. From then on, pages change with a transition instead of a blank flash, and sections arrive as you scroll, like the two product lines that slide into place.