ClearBank
View LiveTechnologies used
- Craft CMS
- Alpine.js
- Tailwind
- Twig
- Blitz
Overview
Subism commissioned a full design and development build, working alongside their design team Studio Output to bring a fintech platform to market. I handled site architecture, content modelling, and the entire front-end build, translating design system decisions into a production-ready Craft CMS site.
Content modelling came first. I mapped out the full site structure and Craft CMS schema, working closely with the design team to make sure the content model could flex around the design system as it developed. That groundwork set the pace for everything that followed.
Alpha video across browsers
ClearBank wanted video assets with true transparency, layered over content rather than boxed in a player. That meant preparing two encodes for every asset: WebM with VP9 alpha for Chrome and Firefox, and a correctly encoded MOV with HEVC alpha for Safari, which still doesn't support alpha in WebM. Getting the MOV encoding right took some back and forth, wrong settings either strip the alpha channel silently or bloat file size past anything reasonable for web delivery.
Typography needed similarly close attention. I worked through font scaling across every breakpoint with the design team until we landed on a system that held its proportions properly from small mobile through to large desktop.
The interactions were where a lot of the craft went in. Reveal animations on scroll, a slide-out menu with a frosted glass backdrop filter that stayed consistent across browsers and devices (backdrop-filter support and performance varies more than you'd expect), and multi-layered button hover states that added depth without feeling gimmicky.
Micro-interactions as a discipline
The button hover effects in particular went through several iterations so the interaction felt like one smooth gesture rather than three separate transitions firing at once. Small detail, but it's the kind of thing that separates a site that works from one that feels crafted.
Built on Craft CMS with Twig templating, Blitz for full-page caching, and Tailwind and Alpine.js handling the front-end layer, the stack was chosen for editorial flexibility without sacrificing performance. Responsiveness was tested and refined across a wide spread of breakpoints, given the range of devices ClearBank's audience uses.
The site as originally delivered was tight: every animation, breakpoint, and content model decision considered and deliberate. It's had hands on it since launch, as most live products do, and time has a way of softening those edges.