A consultancy that eliminates friction needed a site without any, and a hero that communicated the full breadth of what they do.
Second project from Luke. Kinetic cycling headline, six CMS case study pages, and 97/100/100/100 Lighthouse.
Bearing's proposition includes "Engineered for Reliability." A site with poor performance scores contradicts that claim: particularly when the visitors are technically literate CTOs and operations leads who know how to run a Lighthouse audit.
The kinetic hero is the specific accessibility challenge: cycling content needs to be accessible to screen readers without reading out every phrase as it cycles. The implementation uses proper ARIA live region attributes so assistive technology handles the rotation gracefully: 100 accessibility score with the animation fully active.
Explore the main parts of the build.
The cycling headline is the centrepiece. Five outcome phrases rotating through a single position, each cross-fading with a subtle upward shift. Timing calibrated precisely: the animation that makes Bearing's full value proposition readable without making the visitor wait.
Six case studies each with their own page, their own URL, their own SEO structure. Adding a new case study is a CMS entry: the page, the navigation reference, and the homepage listing all update automatically.
Two core service offerings with a tab system that switches cleanly. Each tab reveals different pain point descriptions, relevant case study links, and a CTA.
Three client testimonials with anonymised attribution, each managed from the CMS. The section fades in on scroll with a slight upward translate.
97 Performance with the cycling hero, scroll animations, and tab transitions all active. 100 across accessibility, best practices, and SEO.
The details that shaped the finished build.
Timed phrase rotation: cross-fade and subtle upward shift. Each of the five outcome phrases switches with a cross-fade. Timing calibrated so each phrase holds long enough to read comfortably.
ARIA live region: cycling content handled correctly. The kinetic hero uses ARIA live region attributes so screen readers announce each new phrase gracefully. 100 accessibility score with the full cycling animation active.
Six pages: each with its own canonical URL and indexed by Google. Not a lightbox, not a modal. Six dedicated case study pages, each independently indexed and shareable.
Attribution by role and type, not company name. Bearing's testimonials are attributed by role rather than named companies. A deliberate confidentiality position built into the CMS structure.
Visibility / Efficiency: clean cross-fade transition. Fast enough to feel responsive, smooth enough to feel designed. No jump, no pop, no janky layout shift.
Case studies linked to services via reference fields. Each case study linked to the relevant service area. A service page can surface its related case studies automatically.
Bearing's cycling headline does what a static headline can't: it gives each of the five outcome propositions its own moment, in sequence, without making the visitor choose which one to read. Every visitor reads all five.
The six case study pages compound in SEO value as content grows. Each new case study is a CMS entry: the page publishes, Google indexes it, and it starts driving qualified traffic to the Bearing site.
Waleed executes exactly what we design: no shortcuts, no approximations. The animations land the way we spec them, the Lighthouse scores hold, and the CMS does what we need it to do.
Tell us about your business, what needs to change and what you liked about Bearing. We will help you agree a scope and estimate before work starts.
You will speak directly with Muhammad Waleed Jamshed, who leads Al Kasib.
View the contact page for project enquiries.
A few details are enough to start.
Thanks. We will be in touch.
That did not send. Please try again.
See the scope and story behind another project.
Project scope: Design to Webflow · Scalable CMS · Micro-interactions · CMS Filters
Project scope: Design to Webflow · Motion Animations · Lighthouse · White-label Dev