Screenshot of the hero header of the Kalderos 2023 Annual Report

Kalderos 2023 Annual Report

What I did

A fun, 8-bit inspired take on a traditional annual report. This is a single-scroll, multi-chapter experience that features custom illustrations throughout, supported by subtle animations, and a whole lot of custom JavaScript to create interesting interactions that feel effortless. And of course, a fun easter egg if you know what to look for.

My role: Webflow developer

View Site
Section of the Kalderos annual report, titled "The Game Plan For Success"

About

I'd worked with Kalderos before on some updates, site architecture changes, and new pages. I was more than excited to do the development of their annual report, which is always a standalone piece with its own identity and visual language. This year's was the most ambitious to date.

Pixel Art Theme

Stemming from the concept of "Mission Critical", the experience takes an old school video game form. The art is fun, smart, and inspired the animation techniques.

Micro-Interactions

What's the point of bringing an annual report into the digital world, if you're not taking advantage of what the digital world can do? This report finds little bits of interactivity everywhere.

Custom Responsive Elements

To go along with the 8-bit theme, many containers had custom pixel borders. That poses a problem for responsive layouts, where containers need to resize, but stretching would break the visual effect of a "pixel". To solve for that, I created multiple versions of each container elements to fit different screen sizes while keeping border dimensions exact.

Custom Javascript

It's always a good sign when your code exceed's Webflow's character limit. That includes flipping cards, custom tabs, a "life meter" progress bar, a custom draggable scrollbar, and a fun easter egg, to name a few.

8-bit character on top of a podium, celebrating

In Their Words

"Jon was a fantastic partner throughout the entirety of the project. He is clearly an expert in Webflow and master of his craft, but what set him apart was his communication, attention to detail and follow through. I'd recommend him for anyone looking a Webflow expert and beyond!"

Mark Nizinski
Senior Director, Brand Design

More Work

Beefree SDK website

Beefree SDK

Developing a website for SaaS developers whose audience is other SaaS developers.
View Case Study
Harness website

Harness

A fintech site featuring three sliders within one slider.
View Site
Seeds Investor website

Seeds Investor

A clean design and a clean build for the next generation of the Seeds Investor business.
View Site

Get In Touch

If you're looking to start a project, I'd love to get to know you, your needs, and how we can best work together.

Just looking to say hey? Shoot me a note here or on Twitter!

Thanks, friend! I've got your note, I'll get back with you soon.
Oops! Something went wrong while submitting the form.