Magic Xtal — Nikita Levitskiy

Magic Xtal — MXO37 point cloud — assembly choreographed by the page scroll — MXO37 point cloud — assembly choreographed by the page scroll

Overview

The company has built oven-controlled crystal oscillators since 2001, and the old Bitrix site hid that fact behind a wall of grey tables. The redesign keeps the engineering tone — dark navy, zero border-radius, no soft shadows — and puts the product itself in the middle of the screen.

The catalog is parametric: 30 models come out of YAML/JSON and not a single specification number is written into the markup. Four layers carry an engineer from category to filters (frequency, stability in ppb, consumption, footprint) to a product card with a sticky 3D viewer, phase-noise curves and Product JSON-LD — and a selection wizard for people who know the requirement but not the part number.

On top of that: 22 interactive viewers, an animated company chronicle of 14 milestones from 1997 to 2025, EN/RU that keeps you on the same page when you switch, and an SEO rebuild against everything the old site did wrong.

Explore the real thing/demos/magic-xtal/en/

The catalog with 30 models and 22 interactive 3D viewers runs inside the demo — open it and spin one.

Signature animation

How it works.

The hero is not a render of the product — it is the product, sampled into points. Scrolling the landing page assembles it, takes it apart and brings it back; dragging spins it.

01
Procedural cloud
The MXO37 body is sampled into points and drawn with additive blending. No imported mesh — the geometry is generated in the browser.
02
Scroll choreography
Assemble → disassemble → return is tied to the scroll of the whole page, so the product builds itself while you read about it.
03
Drag to rotate
Pointer drag spins the cloud independently of scroll. On inner pages the same scene drops to a background rotate, dimmed layer by layer.
04
22 real viewers
Every catalog model has its own: rotate it, wheel to take the assembly apart, PBR metals on the housing.

Magic Xtal — Product viewer — rotate it, wheel to take it apart — Product viewer — rotate it, wheel to take it apart

Magic Xtal — mobile — Product viewer — rotate it, wheel to take it apart

Explore the real thing/demos/magic-xtal/en/

Features06

01
Parametric catalog
30 models from YAML/JSON. Not one specification number lives in the markup, so a spec change is a data change.
02
Four-layer navigation
Categories → filters (frequency, ppb stability, consumption, footprint) → product card → a selection wizard for people who know the requirement, not the part number.
03
Product card
A sticky 3D viewer next to the specs, phase-noise curves and Product JSON-LD on every model.
04
Company chronicle
14 milestones from 1997 to 2025, animated as a scroll timeline instead of a PDF nobody opens.
05
EN / RU
Switching language keeps you on the page you were reading — not on the home page.
06
Design discipline
border-radius: 0 globally, no dark text on dark, one accent blue. Engineering, not decoration.