Work · 05 of 05
A one-page brand site for a web design studio
The brand site for Social Caddie, a web design, development and SEO studio: one page, designed and built by hand, with a moving orb that becomes the logo.
1
page: the whole brand on one scroll
4
colours, all taken from the logo
Oct 2026
live
- Client
- Social Caddie
- Sector
- Design studio
- Status
- Live since October 2026socialcaddie.co.uk (opens in a new tab)
- What we did
- Brand site design, Front-end build, Motion and 3D
Social Caddie needed a home on the web, so we designed and built it.
The design process
The site went through several rounds before it settled, each one built and checked in the browser rather than left as a static mock-up.
- The first round was a print-style "yardage book", like the notes a caddie carries. It was too literal, and it was dropped.
- The second round set the direction that stuck: a warm off-white page, large dark panels and giant, tight headlines.
- The next rounds added arrow buttons, hairline-ruled figures and a closing call to action, then a floating navigation bar carrying the real logo.
- Then the brief changed. The studio began working beyond golf, so the site had to as well. The rule became "keep the caddie, drop the course": the golf ball became an orb and the flags became dots, while the name, the logo and the look stayed.
- Finally, we cut it back. Eight sections, because the studio's message is simple and the page should be too.
The colours are cream, ink, olive and sage, all taken from the logo.


What we built
- The orb. The hero is a sphere of points drawn with custom shaders. It forms out of dust when the page opens, scatters as you scroll, and every few seconds re-forms into the Social Caddie logo, using points sampled from the logo itself.
- The details. Each headline's full stop drops into place, sections reveal as they arrive, figures count up, and the scroll is smoothed.
- Restraint. Phones draw fewer points so the page stays smooth, and every effect switches off for visitors who prefer reduced motion.
Need a site that looks like the work you do?
Built with Three.js, Vite, Lenis, Vercel.