Case study

ALMA Energia

An electricity and gas supplier that pairs its service with plastic recycling and a community of people and businesses.

Industry
Energy
Based in
Vasto (CH)
What we built
Website and 3D scenes
The ALMA Energia website on desktop
The ALMA Energia website on a smartphone

The goal

Explaining a different kind of energy.

A new website for an electricity and gas supplier that pairs its service with recycling through the ioWIN app, Italian bamboo groves and the Menti Esplosive community: ideas that had to click at first glance.

  1. 01

    A new website

    Built from scratch, from the home page to the contact page.

  2. 02

    3D that explains

    Bamboo groves, recycling, community and app: each has its own scene.

  3. 03

    A form that draws you in

    On the contact page, the 3D scene follows you as you fill in the form, all the way to sending it.

What we built

A scene for every idea.

From filaments to a leaf.

On the home page, 3D energy filaments gather into a bamboo leaf as you scroll. It's the link with nature: for every contract activated, ALMA dedicates a bamboo plant to the customer in an Italian bamboo grove.

ALMA's home page: green 3D filaments behind “La tariffa più bassa del mercato.”, then, as you scroll, the bamboo leaf next to “Più che energia. Connessione.”

Inside the grove.

On the Bamboo Groves page, scrolling takes you into a 3D bamboo forest, past canes and leaves. The groves are real and open to visits, so you can find your own plant.

The 3D bamboo forest on the Bamboo Groves page: “Un polmone verde a tuo nome”, then the camera moves between the canes to “Un contratto, una vita.”

From bottle to coin.

On the Recycling page, a plastic bottle breaks into particles as you scroll and turns into an ALMA coin: recycling gets rewarded. The tariff is still for everyone, and with the ioWIN app you can recycle at any available reverse vending machine.

The Recycling page: the 3D bottle behind “Ricicla la plastica. ALMA ti premia.” breaks into particles, then the ALMA coin appears with “Una tariffa semplice.”

Network and app.

On the Community page, scrolling takes you inside a world of connected dots: the Menti Esplosive network. On the ioWIN page, a 3D iPhone rotates and changes screen, previewing the app before you download it.

  • The network of dots
  • ioWIN, recycling
  • ioWIN, invites

The form with a lever.

On the contact page, 3D has a job to do: with every field you fill in, a lever rises, and when you send the message it snaps and lights up the buildings behind it. It's designed to encourage people to complete the form.

The Contact page: as the form is filled in, the 3D lever rises; when it's sent, the lever snaps and the buildings behind it light up (name and email are blurred)

Built with

  • Three.js
  • React Three Fiber
  • GSAP
  • Next.js
  • Tailwind CSS

The website

Open an image to see it full size.

  • Home page, tangible value
  • Home page, the steps
  • Home page, the first ALMA Point
  • Bamboo groves, why bamboo
  • Bamboo groves, real nature
  • Recycling, rewarding recyclers
  • Community, the levels
  • ioWIN, get the app
  • Contact, ALMA in your area

Next project

Back to projects

Case study

IMG Rettifica

Precision engineering, Website

Precision grinding since 1978, machining critical components to thousandths of a millimeter.

See the project: IMG Rettifica
The IMG Rettifica website on desktop
The IMG Rettifica website on a smartphone

Your project could be next.

Tell us how your website works today and what isn't working. We'll start from there, with no commitment.

Let's talk