UAStart a project
Turbine Horizons logo
Case study · Energy11 / 39

Turbine Horizons

Turbine Horizons takes a wind project from the first site assessment to installation and years of maintenance. The page had to feel calm and technical, like the industry itself: a big sky, plain numbers and one quiet blue-grey palette.

Project
Turbine Horizons
Industry
Renewable energy · Wind
Scope
Web design · Build · Motion
Built with
HTML, CSS, GSAP, ScrollTrigger, Canvas
Year
2026
Turbine Horizons — A website for a wind energy company that designs, installs and maintains turbines for businesses and communities.
Overview

A sky, a live panel and turbines that actually turn

The brief

A wind energy company needs one page that explains six services, shows a real project and leads a business owner to a consultation. The design keeps the photography large and the interface small, so the turbines carry the mood and the panels carry the facts.

What we did

The first screen is a wide sky with turbines and a glass panel on the right, built like a phone widget: live San Francisco time, the weather and the company's projects, which slides open on load and folds away with a tap. Below, the about text darkens word by word while the turbine line drawing rotates behind it, the case card grows into place with layered photos moving at different speeds, and the six service icons draw themselves line by line. A blue band is a field of hundreds of small turbines that spin faster and brighten under the cursor. The technologies scroll sideways while the page is pinned, the news cards open from the bottom and the menu unfolds from the burger as a blue circle.

The live site

Scroll the site right inside the frame, or open it full screen.
webraw.studio/sites/turbine-horizons/Open the site

The first screen

Homepage · Desktop 1440
Turbine Horizons: first screen of the homepage

The full page

One long scroll, split into three columns — top to bottom, left to right.

Turbine Horizons: full page, part 1 of 3
Turbine Horizons: full page, part 2 of 3
Turbine Horizons: full page, part 3 of 3

Details

Turbine Horizons: A case card with layered, moving photos
A case card with layered, moving photosCases
Turbine Horizons: Service icons that draw themselves
Service icons that draw themselvesServices
Turbine Horizons: A field of turbines that reacts to the cursor
A field of turbines that reacts to the cursorInteraction
Turbine Horizons: News cards that open from the bottom
News cards that open from the bottomNews

Colour & type

Palette — from the project file

  • Black#212529
  • Dark Grey#363D43
  • Blue#647F94
  • Light Grey#F5F5F6
  • Yellow#F2CE1B

Typefaces

AaPoppinsHeadings, numbers and the live panel, SemiBold with tight tracking.
AaInterBody text, buttons and labels.
Next case

Astergrid

Astergrid — Landing page for a solar, wind and storage engineering firm
Start a project

Let’s launch.

Send a short brief or a link to your current site. You’ll get a clear plan, timeline and quote — no sales call required.

  • Reply within one business day
  • Design, build and launch by one team
  • One week of post-launch support included

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw