ELPRO

A concept site for a transformer maker: a drawing that assembles itself, a coil that winds as you scroll and a tool that builds the enquiry.

ELPRO is not my client and did not commission this website. I made the concept on my own initiative from the text and photos on their public website, so every fact on it is theirs.

ELPRO has been building single-phase, three-phase and special transformers and reactors to order since 1998, in Gornji Desinec near Jastrebarsko. They also make test stations for transformers and motors, and do electrical installations for industrial plants. Customers arrive with numbers (input and output voltage, power in VA, quantity) and one question: how soon?

What I found

I went through the site on 14 November 2026, on desktop and phone.

On desktop, the first screen is a menu, a collage of transformer photos and an "About us" paragraph. There is no main heading (H1); the first thing you read is the founding year.
Their two-working-day lead time, probably the strongest reason to call them, appears only on the Products and Services page. The home page doesn't mention it.
Enquiries go by phone or email only. There is no form, and on the desktop site neither the phone number nor the email address is a link, so both have to be retyped.
A phone is sent to a separate mobile site with a greeting and a menu. The table of approximate sizes by power, from 20 to 2,500 VA, exists only in that mobile site's price list; the desktop site doesn't have it.

First screen of the current ELPRO site on desktop: logo and menu, a collage of transformer photos with yellow insulation tape and an "About us" paragraph below it

Decisions

The first screen says what they do and how long it takes

The headline reads, in Croatian, "Transformers and reactors made to order, wound for your voltage." The intro mentions their own workshop and the two working days straight away, then a button to the tool and the phone number. Every figure along the bottom comes from their site.

The transformer as a drawing

The main visual is the product. An isometric drawing of a single-phase transformer on an EI core assembles: laminations, a coil with yellow tape, terminals, and above them two sine waves, 230 V in and 24 V out. An aluminium rating plate beside it links four callouts to the drawing on hover. The blue comes from their logo, the copper from the winding itself. Every drawing is labelled as an illustration; the photographs on the page are theirs.

A coil that winds as you scroll

Six steps from enquiry to delivery run alongside a pinned drawing. The core stacks up from the bottom, and in step three wire from a spool winds the coil layer by layer, exactly as far as you have scrolled. Then insulation, the IP 45 enclosure and a lead-time stamp. The copy comes from their product descriptions.

Step three of the story, "Primary and secondary winding": a front view of the transformer with the copper coil half wound and wire running from a spool, with dimensions of about 100 mm

A tool that speaks the language of an enquiry

"Build your transformer" asks what their technician would: phases, voltages (common pairs such as 230/24 V, or your own, with extra secondary outputs), power from their size table, core, insulation, enclosure and fittings, quantity. The drawing and rating plate follow every choice. The plate also shows secondary current, as an approximation (I₂ ≈ S / U₂, or S / (√3 · U₂) for three-phase), and says so. With the voltages filled in, the tool confirms the enquiry is ready, and one click moves the specification into the form, which opens a finished email to elpro@elpro.hr. Price and exact dimensions come with the quote.

The enquiry tool: a three-phase transformer, 400 V to 230 and 24 V, 1,000 VA, in an enclosure with a voltmeter, socket and lifting hooks, next to the enclosure drawing and the rating plate with the specification

Special builds get their own section

Special transformers and reactors get a dark section, where an air-core reactor draws itself as you scroll in, beside their workshop photos.

Dark section on special transformers and reactors: air-core reactors, foil windings and parallel wires, a drawing of a coreless copper coil and two workshop photos

One site for the phone too

One page instead of two versions: the drawing under the headline, the story pinned at the top, and in the tool the drawing stays in view while you fill in the fields.

Three screens of the concept on a phone: the headline with the transformer drawing, step three of the story with the coil winding, and the rating plate marked ready for enquiry

First screen on desktop: the current ELPRO site on the left, the concept on the right

How it's built

Static HTML, CSS and JavaScript, no framework. One script draws the transformer as SVG, both the static drawings in the HTML and the live one in the tool. Scroll-linked motion is my own code (requestAnimationFrame and IntersectionObserver), no GSAP, with Lenis smoothing the scroll. Without JavaScript everything is visible; with reduced motion there is no animation. The tool and form need no server. The page is noindex, and the JSON-LD carries only the address, contact details and questions from their site. Photos have fixed dimensions and load only when needed.

What I would do next

With ELPRO I would first check whether the two-working-day lead time still holds and for which ratings, which of the two mobile numbers on the site is current, and whether they still build control cabinets and 230/110 V isolation transformers. A real project would add a form that sends on its own and redirects for the old addresses, mobile site included.