Crizma — Medical & Dental Equipment Distributor Website

A visitor arrives to a moving field of brand-coloured dots that follows their cursor, parting around the navigation and content cards, revealed only inside a soft travelling halo. As they scroll, the hero holds its position while the company’s proposition assembles itself in three timed beats, closing with an endlessly scrolling band of manufacturer partner logos.

Further down, services expand from animated accordions and a second marquee presents institutional customers. Team members appear as glass cards that lift and take an accent stripe on hover. From there visitors enter a dedicated gallery of installation photography in a responsive masonry grid — clicking any image opens a full-screen lightbox navigable by arrow keys or on-screen controls, with a running counter and wrap-around paging.

A restrained, clinical palette — white and near-white surfaces, near-black type — that concentrates all visual energy in a single crimson accent applied to section eyebrows, headings, hover states, button fills and the particle field itself. The result reads as clean and medical without feeling sterile.

The detail that makes it cohere is a single shared easing curve governing essentially every transition on the site, in a tight 0.3–0.8 second band. Across a dozen distinct animated behaviours everything decelerates the same way, which is why a page with this much motion still reads as calm rather than restless.

The cursor field’s difficulty is not drawing dots but compositing them. All dots are batched into a single path and filled once per frame with one shared gradient — one fill call per frame instead of thousands. Exclusion rectangles for the navbar, cards and map are cached and recomputed only on scroll and resize, never per frame, avoiding thousands of layout-thrashing measurements per second. Device pixel ratio is capped at two, bounding the pixel budget on high-density displays.

The particle field is disabled on touch devices twice over: once by a pointer-capability media query, and again by a JavaScript guard that prevents the canvas from ever being inserted into the document. That belt-and-braces approach saves the entire animation frame budget on mobile rather than merely hiding the result.

Six of the gallery photographs are Apple HEIC files, which most browsers cannot decode. Those items ship hidden with an error handler, and a load listener reveals them and rebuilds the lightbox source array if the browser turns out to support the format — which is why the lightbox indexes by resolved source rather than DOM position.

Three breakpoints reshape the site. At 1200px the gallery steps from four columns to three. At 768px the transformation is comprehensive: the inline navigation gives way to a morphing hamburger and a blurred full-screen panel, the hero scroll container shortens and its phase sequencing is bypassed so nothing can strand off-screen, buttons stack full-width, every card grid becomes a single column, and hover-lift is disabled because it has no meaning on touch.