Riczu Works↗︎

Two product lines, one point of contact

The biggest content decision was the split: what's own manufacture, and what's the Italian import. The own work — gates, canopies, fences, custom structures — made to measure, installed locally, under warranty. The RGM side presents the three Italian families all the way down to the material: from the aluminum profile to the powder coating, from the motorized louvers to the hidden drainage. The two threads run separately, but they end at the same place: one survey, one point of contact, from survey to handover.

The tool that works instead of a brochure

Two interactive pieces make the site more than an introduction. In the price calculator, the customer picks a product family and model, sets the dimensions with sliders, and immediately sees an estimated price range — itemized into what's included and what isn't. This is the differentiating part: most outdoor-system sites are a gallery and a phone number. Here the customer gets a price and a plan on the very first visit — so the request for a quote isn't the start of the dialogue, it's the middle.

The project's biggest undertaking, though, is the other tool: the 3D designer.

The 3D designer: a pergola you can spin around

The designer isn't a staged visualization — it's a configurator built on the rules of the real RGM catalog. Four structure types — louvered bioclimatic pergola, canvas pergola, folding-arm awning and zip screen — each with true proportions and true structural logic: past a 5.2-meter span a middle post appears, the CLIMAX BIG gets twin louver fields with a dividing beam, the ALBORI WING stretches between two walls with no posts at all. The colors are the factory powder-coat palette — matte and gloss catch the light differently, and the corten wears a mottled patina.

The scene is alive. One control walks the sun from morning to evening — the light travels, the shadows turn, and at dusk the perimeter LED switches on. There's a rain mode too, because a bioclimatic pergola proves itself exactly then. The louvers tilt by dragging the roof itself, furnishing scenarios go under the roof — lounge, dining, sunbeds, a bar — and every piece can be rearranged, so the dimensions aren't numbers but scale. Glass walls, terrace heating: the "four-season terrace" isn't a claim here, it's a setting.

And the plan doesn't die on the screen. The designer computes from the same price model as the calculator, so the live price range stays in view while the model spins, and the finished configuration goes into the quote request with one click — shareable as a link, downloadable as an image. Technically this is the largest piece of the project: some fourteen thousand lines of three.js scene and controls, loaded only on this page, only on the client, and running smoothly on a phone.

A design that shows the finished product

The visual language is cool and premium: a dark olive-charcoal base, a strong neon-lime accent on the buttons and numbers, alternating with lighter sections. The hero headline builds letter by letter, and from the roof down to the material macros, every photo shows the finished product — completed terraces, poolside pergolas, close-ups of louvers. For a premium structure, the photo is the main argument, so it got full-bleed space.

The nav holds the Console here too (Ctrl K), with search and an AI mode — the same recurring element I build into my own sites and other client sites. The framework is Next.js, bilingual (HU/EN), running on Vercel.