Katal

Overview

Katal is built for a company that makes the chemistry other people build with — amine, metal, and trimerization catalysts, additives, curing agents and specialty polyols. Instead of a glossy corporate brochure, the whole site is organized around the real catalog: choose an application and it narrows to the grades that fit, each linking to a full technical datasheet with CAS number, physical form, catalytic role, compliance and packaging.

The design is a bright, editorial white — modelled on the clean, confident register of a real chemical-group site — with a photo carousel hero built from genuine plant and lab photography: jacketed reactor vessels going up, a laboratory glassware flat-lay, a researcher at the bench. The signature technique sits further down the page: a real-time Three.js catalyst molecule, procedurally built as a ball-and-stick model and free to drag and rotate, set against a restrained ambient GPU reaction–diffusion field (raw WebGL2 Gray-Scott) rendered as faint brand-blue reaction fronts on white, never a filled or saturated wash. A second technique is the filterable catalyst catalog with an animated FLIP reflow and application colour-coding. A third is a reaction-kinetics diagram: a tall uncatalysed energy barrier and a low catalysed one, with molecules streaming across the low path and stalling on the high one — the clearest possible picture of what a catalyst does. Set in Bricolage Grotesque over Inter with JetBrains Mono for CAS numbers and spec readouts. Degrades gracefully to a static, no-canvas layout on reduced-motion or a weak GPU.