Hilos

Hilos is an innovative no-CAD 3D platform that changes how the world makes shoes

Client

Hilos is an innovative no-CAD 3D platform that changes how the world makes shoes, unifying deep tech with sustainable craft to deliver exceptional, on-demand footwear.

The Hilos technology removes common design limitations by offering a digital space where ideas and concepts can become tangible 3D models before physical production. As industry innovators, Hilos needed a web presence that would not only explain their technology but also demonstrate its capabilities through interactive examples.

This project was a close collaboration with Sarah and Beca at Blueprint Studio, whose design vision and meticulously crafted mock-ups set the creative direction from the ground up. Their eye for detail and deep understanding of the Hilos brand translated into a design system that was both visually striking and technically thoughtful — making our development work a true pleasure to build on.

Goal

Hilos needed more than a standard website. The goal was to create a dynamic digital platform that works both as a marketing tool and a live demonstration of their 3D technology.

We faced four key challenges:

Integrating interactive 3D models directly in the browser;
Adding advanced animations and visuals to improve user experience;
Building a flexible CMS for independent content updates;
Keeping their SEO while fully rebuilding the website

For platforms like Hilos, the website is often the first impression, so everything on the site had to work perfectly to show off their tech.

We built a fully custom WordPress theme instead of using pre-made templates, eliminating unnecessary code and plugins that could slow down interactive elements.

Content Migration and Adaptation: we migrated posts from the Hilos Journal while preserving structure and SEO settings. All images and videos were optimized to ensure fast loading and a smooth transition for users.

Flexible CMS for Case Studies

To support frequent content updates, we built a custom CMS using Advanced Custom Fields (ACF). Instead of a standard editor, Hilos received a drag-and-drop page builder that allows non-technical users to create, duplicate, and edit case studies while keeping brand consistency.

The builder keeps the design consistent, but still lets Hilos add sections or move things around.This approach gives the Hilos team full control over content updates and enables them to manage case studies independently.

3D Model Integration

We integrated interactive 3D models directly into the browser using .glb files. Users can preview models on hover or explore them in full using click-and-drag 360° controls, making the technology more tangible and engaging. The website features 3D shoe models with two interaction modes:

Hover – Slight rotation for preview

Click + Drag – Full 360° control

Users can click and drag to move 3D shoe models and spin them in any direction. This lets you check them out from every angle. This way, you get a good feel for the shoe’s shape, design, and what it’s made of.

Combined with hover-based previews, this interaction creates a hands-on and immersive experience that clearly showcases Hilos’ technology. It allows users to intuitively explore the designs and fully appreciate the platform’s capabilities.

Animations & Visual Effects

To improve the visual experience, we added some simple, but expressive animations: parallax scrolling, fade-in effects, accordion sections, and dynamic line animations.

Parallax scrolling for text and elements

Fade-in effects triggered on scroll

As users browse the site, things appear smoothly with fade-in animations. This gentle motion draws your eye, points out what’s important, and gives the pages a sense of depth.

The fade-in effects make everything feel more alive and refined, which makes the whole experience better. Adding movement in a controlled and nice-looking way, the animations back up Hilos’ fresh brand while keeping the interface clean and quick.

Accordion animations on the homepage

Accordion sections on the homepage let users open and close content easily, which keeps things neat and makes info simple to find. This helps show a lot of info without making the page look too crowded.

The animations are made to be smooth and quick, which makes browsing better while keeping the design clean.

Dynamic line and dot animations on the Interplay page

The Interplay page features moving lines and dots in the background, adding a dynamic feel. These visuals help guide you through the content and give the page a polished look.

This design choice looks good and works well, making the site feel interactive while keeping the focus on the important stuff.

Results

The new Hilos website allows easy content management for blogs and case studies, while delivering a fully interactive 3D experience directly in the browser. Despite heavy media and 3D assets, the site maintains high performance and engages users through motion and interactive elements.

This project demonstrates how advanced web technologies can support innovative platforms, combining Hilos’ vision with Digital Octane’s expertise to create a dynamic digital experience that clearly showcases the power of their technology.

GET IN TOUCH