Radheshyam Rollers

“મારે એવી વેબસાઈટ જોઈએ છે કે આખા રાજકોટમાં કોઈએ ના બનાવી હોય.”

“I want a website nobody in all of Rajkot has built.”

That was the brief from Radheshyam Rollers, a family factory in Rajkot that makes taper rollers1 for the bearing industry. It had to be unique, something he would enjoy showing people. Then he added the line every client saves for last:

“અને હા, ખાસ તો બજેટમાં હોવું જોઈએ.”

“And yes, above all, it has to fit the budget.”

every client, every time

Unique, on a small budget

Unique usually gets bought: 3D models, a photo shoot, an illustrator. The budget had room for none of that.

So I set one rule: use the free tools that already exist, and put the effort into the idea. The motion runs on GSAP, the smooth scrolling on Lenis and the globe on cobe.2 There isn't a single photo on the home page. The only image is the logo, and everything else is drawn in code.

That left the real question: what should a roller company look like?


A website that reads like a drawing

I started with the business, not with other websites. A buyer sends a drawing or a sample, and the factory works to it, down to the micron. In this industry, drawings are the common language.

So the website speaks it too. The first thing you see isn't a photo of a factory. It's a sheet from an engineering drawing, with a title block, a revision number and real dimensions.

One roller, drawn to size, then a whole bearing. Rebuilt from the home page.

The same idea runs through every page: thin lines, centre marks and small monospaced labels, like the notes on a drawing. On the products page, each type of roller draws itself on screen.

(01)Ø 5 – 25 mm · 58 – 62 HRC
The three rollers from the products page. Tap one to watch it drawn.

Two colours from the factory floor

The colours came from the same place. Deep navy is the ink of a drawing. Orange is steel in heat treatment, the one stage where the metal itself glows.

Orange is used sparingly: one word in a headline, a button, an arrow. On the home page, only the contact section goes fully orange, so the page warms up right when it asks you to get in touch.

For type, Bricolage Grotesque gives the headlines weight, and Onest keeps everything else easy to read. One tap switches the whole site to Gujarati, set in Anek Gujarati, because the people he'd show it to first are right there in Rajkot.

Here is the whole system on one sheet.

The site's real colours, typefaces and motion, and the factory ideas behind them.

The logo that wouldn't fit

There was one thing I couldn't redesign. The company already had a logo, a red and black seal with a serif name, and it came from a different world than a blueprint.

On navy, it disappeared. Next to the orange, the red fought back. So I left the logo alone and changed what sits behind it: a frosted bar that floats above the page and stays pale on every section.

move the page, not the logo

Worth showing off

The brief's real test was still waiting: would he enjoy showing it to people? That's where the animation comes in, and I wanted every piece of it to come from the factory.

It begins before the page does. The loading screen is a dial gauge, one of the instruments the factory measures with, counting up to 100%.

Further down, the quality section has a bearing that turns as you scroll, because the whole company exists to keep things turning.

Scroll the page, and the bearing turns with it.

The smallest detail is one you feel before you notice it. Move your cursor near a button and it leans toward you like a magnet, with its label moving a little further than the button itself.

Move your cursor over the buttons.

These rollers end up in bearings that travel far beyond Gujarat, so the export story is a globe, with lines running out from Rajkot. For a factory in Padvala, that picture says more than a paragraph could.

Built with cobe, as on the site. Drag to spin it. The routes are illustrative.

Maja aavi gai

His review was short:

“મજા આવી ગઈ. તમારું કામ બહુ જ ગમ્યું.”

“I loved it. I really liked your work.”

Maja was exactly what he had asked for on the first day. And none of it needed more money. The idea was already inside the factory, in its drawings, its furnace and its gauges.

The budget was small. The idea didn't have to be.

See it for yourself at radheshyamrollers.com.

Footnotes

  1. A taper roller is the small cone-shaped part that rolls inside a bearing. Car hubs, tractor axles and gearboxes all depend on them. ↩

  2. All three are free to use. GSAP handles animation, Lenis smooths the scrolling, and cobe draws a lightweight 3D globe. ↩