Liftment – an i18n Astro & Directus websiteLiftment–ani18nAstro&Directuswebsite

A client came to us with a new product – Liftment, a delicious daily bioactive drink – and they wanted to launch it in eight territories simultaneously. Eight territories with very diverse alphabets!

One of blackspike’s most talented collaborators – the award-winning designer Docvek – had produced a beautiful, complex one page website design and asked us to make it live.

Key requirements

• Multi-language support
• User-friendly CMS
• 3D product art
• Rich animations
• Complex layout
• Fast to load

We advised using Astro for a fast front end framework. The page needed to be attractive and fun, with a lot of marketing images, a 3D box packshot, and animations for pop. All this leads to a heavy page, but with Astro you get fast load times and the most optimised possible base to work from.

Astro also comes with baked-in support for Internationalisation (i18n) folder-based routing, allowing us to use the same template and components, passing the localised text from the CMS, avoiding duplication and increasing ease of maintenance.

For the 3D packaging model we used Three.js on a 3D mesh we created with blender, and for all the animations – 3D, scroll triggers, staggered lists, transitions, and so on we used the powerful-but-lightweight anime.js library. We used a mix of tailwind and vanilla css to style the page.

We advised using self-hosted Directus as a headless CMS due to its out-the-box multi-language support and for the user friendliness for a non-technical marketing team. Also we’ve had flawless experiences combining Directus and Astro in a previous project, and couldn’t be more happy to use it again.

There was a bit of a learning curve to setting up the multi-language content collections – there’s a bunch of manual set up steps, but once you get your head around it it’s a doddle to add new languages.

This enables the end user to fill in the default language content, then from a dropdown, pick any of the pre-specified languages, and fill them in in place. We also set this for the images, to allow the graphic text to be localised. The translators doing the work found this to be delightful.

Directus allows you to use hooks (flows, they call them) it to automatically build the static front end pages via a hook any time content is updated, making the whole editing process a piece of cake for the user (and us).

A nice touch is that you can theme directus with the client logo and colours to make it feel like a bespoke solution.

A number of bits of the design proved to be fun challenges. Getting things like curved image masks, 3D models, and responsive diagonal borders to scale nicely on phones, tablets, and large screens can be tricky.

Our favourite task was the responsive animated text on a path – animating left or right depending on vertical scroll position.

We ended up using an svg with text (CMS-editable, localisable!) and anime scroll events to position it. It looks and works great, just as the designer envisioned.

The product area was also more of a print-design layout than a web design layout, especially when resizing to mobile, and especially with an expanding accordion, and especially especially catering for czech/hindi/chinese alphabets.

Still, we got there with css grid and html details/summary and it looks lovely.

A challenging, fun, and colourful design that was a delight to build and publish.

The product was launched in eight territories, and the client was delighted. In fact, they were so happy, they asked us to build them an additional shopify website.

Working with blackspike is at a very high professional level. I particularly value their flexibility, speed and independence, which are absolute must-haves in an international team.

Our project involves Asian languages and complex technical requirements across websites and e-commerce platforms. blackspike handles these challenges beyond our expectations, with a high level of responsibility and a strong focus on quality.

Adam Štěrba, CEO liftment

A great client and a great project.