• 100
  • 99
  • 98
  • 97
  • 96
  • 95
  • 94
  • 93
  • 92
  • 91
  • 90
  • 89
  • 88
  • 87
  • 86
  • 85
  • 84
  • 83
  • 82
  • 81
  • 80
  • 79
  • 78
  • 77
  • 76
  • 75
  • 74
  • 73
  • 72
  • 71
  • 70
  • 69
  • 68
  • 67
  • 66
  • 65
  • 64
  • 63
  • 62
  • 61
  • 60
  • 59
  • 58
  • 57
  • 56
  • 55
  • 54
  • 53
  • 52
  • 51
  • 50
  • 49
  • 48
  • 47
  • 46
  • 45
  • 44
  • 43
  • 42
  • 41
  • 40
  • 39
  • 38
  • 37
  • 36
  • 35
  • 34
  • 33
  • 32
  • 31
  • 30
  • 29
  • 28
  • 27
  • 26
  • 25
  • 24
  • 23
  • 22
  • 21
  • 20
  • 19
  • 18
  • 17
  • 16
  • 15
  • 14
  • 13
  • 12
  • 11
  • 10
  • 09
  • 08
  • 07
  • 06
  • 05
  • 04
  • 03
  • 02
  • 01
  • 00
...
Services

Creative Dev

Selected Projects
Technology

React

Prismic

GSAP

WebGL

Awards / Features

Awwwards

The FWA

CSSDA

Creative Dev

React

Prismic

GSAP

WebGL

20
CUSP Site

Site for a digital design studio from Canada

Design: CUSP
View live: heycusp.com

CUSP is a global team of specialists, focused on crafting world-class digital solutions for today’s modern companies. And like every good shoemaker it needed a pair of fancy shoes.

The
shoemaker’s
child
has
no
shoes:
a
website
for
the
digital
design
studio

CUSP is a digital design studio. Their target audience is pretty wide: from large global brands to startups and small businesses. They wanted to create something fun and experimental that gave some insight into who they are as a team, and would be explorative for users.

The site was warmly welcomed by the community and received numerous prestigious awards. Moreover, it is being featured in various compilations as an inspiration and example on such platforms like Mindsparkle Mag, Greensock, Commarts, and Codrops.

To unbind our creativity we needed something more than CSS and JS. On the front end, we used React with the PixiJS and three.js libraries. The back end and CMS are based on Prismic. That allowed us to develop animations that cannot be created with conventional technologies. Shaders written with GLSL relocate calculations from CPU to GPU. That helps maintain high performance when it comes to rendering multiple complex animations simultaneously.

The
overall
aesthetic
is
minimal
and
bold,
which
pairs
really
well
with
the
interactivity
of
the
elements.

We worked through many combinations of animations and interactions to find a balance that worked for us. When brainstorming we have realized that none of the references were a perfect fit for an authentic look of the site. So we wrote custom solutions for a vast majority of animations and interactions ourselves.

Running this amount of complex animations smoothly on any device, be it an old laptop or a smartphone, was a challenging task. The usage of shaders improved performance significantly. Combining optimization’s best practices with revising chunks of the project until there is no excess code resulted in further performance improvements. This way we made the site work at 60 FPS on most devices without compromising the visual aesthetics.

The website is relatively small in comparison to others, so we focused our attention on the feeling of using the navigation throughout the site. The pacing is something we worked on a lot. We wanted everything to feel responsive but a bit more relaxed.

We’ve always loved infinite scroll so we worked that into our main navigation. Also, our cases page has two different view modes, allowing visitors to cycle between a more interactive project-by-project layout or a speedier scrolling index.

Awards

AWWWARDS

  • Site of the Day
  • Developer Award
  • Mobile excellence

The FWA

  • FWA of the Day

CSS DESIGN AWARDS

  • Website of the Day
  • Studio Site of the Year 2020
t
o
:
s
a
l
t
a
n
d
p
e
p
p
e
r
H
i
m
y
n
a
m
e
i
s