- 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
Creative Dev
React
Prismic
GSAP
WebGL
Awwwards
The FWA
CSSDA
Creative Dev
React
Prismic
GSAP
WebGL
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.
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