UAStart a project
Relay logo
Case study · SaaS11 / 40

Relay

Relay collects customer conversations from Slack and email into one place where support and engineering answer together, with AI drafting the routine replies. The page had to feel light and trustworthy, like a clear sky, and show the product working from the first screen.

Project
Relay
Industry
SaaS · Customer support
Scope
Web design · Build · Motion
Built with
HTML, CSS, GSAP, ScrollTrigger
Year
2026
Relay — A landing page for a SaaS support hub that turns Slack chats into one calm, shared inbox with AI built in.
Overview

A sky-blue page where the product does the talking

The brief

A support tool for B2B teams is bought by product and engineering leads, so the page skips the hype and shows the dashboard, the integrations and the price. One sky palette runs through every block, with white glass cards on top, so a long page still reads as one calm surface.

What we did

The first screen opens with the sky settling into place, the headline rising line by line and the browser window tilting up into view; as you scroll, the tasks board inside it scrolls like a real page. The feature carousel loops endlessly, moves on its own, follows a drag and is driven by the arrows, and its last card is built in code so the charts draw themselves and the numbers count. Integration icons fly out from the centre, float and lean away from the cursor. The four feature tabs switch on their own with a progress line, the lightning bolt hovers above the clouds and the Charts tab reuses the live dashboard cards. The Pro price counts up, the testimonials drift sideways as you scroll, the questions open smoothly and the sign-up form answers when you submit it.

The live site

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

The first screen

Homepage · Desktop 1440
Relay: first screen of the homepage

The full page

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

Relay: full page, part 1 of 3
Relay: full page, part 2 of 3
Relay: full page, part 3 of 3

Details

Relay: An endless carousel with charts that draw themselves
An endless carousel with charts that draw themselvesFeatures
Relay: Integration icons flying out of the centre
Integration icons flying out of the centreIntegrations
Relay: Feature tabs that switch on their own
Feature tabs that switch on their ownProduct
Relay: Glass and white plans over the sky
Glass and white plans over the skyPricing

Colour & type

Palette — from the project file

  • Ink#111111
  • Deep Sky#0C3750
  • Action Blue#0095EB
  • Sky#B3E3FF
  • Cloud#F9FBFC

Typefaces

AaInstrument SansHeadings, prices and the questions, Medium with tight tracking.
AaInterBody text, navigation, buttons and the dashboard cards.
Next case

Turbine Horizons

Turbine Horizons — A website for a wind energy company that designs, installs and maintains turbines for businesses and communities.
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