Hilos

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

Client

The platform unifies 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 required more than a standard website. The goal was to create a dynamic digital platform that fuctions both as a marketing tool and a live demonstration of their 3D technology.

This came with 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 a platform like Hilos, where the website often serves as the first impression, every element needed to perform seamlessly to effectively showcase their technology.

To achieve this, we developed a fully custom WordPress theme rather than relying on pre-built templates. This approach eliminated unnecessary code and plugins that could otherwise impact the performance of interactive elements.

CONTENT MIGRATION & 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 preserves a consistent design structure while still allowing flexibility to add new sections or rearrange content as needed. This approach gives the Hilos team full control over content updates and allows them to manage case studies independently.

3D MODEL INTEGRATION

We integrated interactive 3D models directly into the browser using .glb files, allowing users to engage with the content in a more immersive way. Models can be previewed on hover or explored 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 – a subtle rotation that provides a quick preview
Click + Drag – Full 360° Control

Users can click and drag to interact with the 3D shoe models, rotating them freely in any direction and viewing them from every angle. This provides a clear sense of the shoe’s shape, design, and material composition.

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

ANIMATIONS & VISUAL EFFECTS

To enhance the visual experience, we introduced a set of simple yet expressive animations, including parallax scrolling, fade-in effects, accordion sections, and dynamic line animations.

Parallax Scrolling – applied to text and interface elements to create a sense of depth and motion.

Fade-In On Scroll

As users navigate the site, elements appear smoothly through subtle fade-in animations. This gentle motion guides attention, highlights key content, and adds a sense of depth to each page.
The result is a more refined and dynamic experience. By introducing movement in a controlled and visually balanced way, these animations reinforce Hilos’ modern brand while keeping the interface clean and performant.

Accordion Animations

Accordion sections on the homepage allow users to open and close content easily, keeping the layout organized and making information easy to navigate. This helps show a large amounts of content without overwhelming the page.
The animations are designed to be smooth and fast, enhancing the browsing experience while maintaining a clean and structured interface.

Dynamic Line and Dot Animations

The Interplay page features moving lines and dots in the background, adding a sense of motion and visual depth. These elements help guide users through the content while giving the page a polished look.
This approach balances aesthetics and functionality, creating an interactive feel while keeping the focus on the most important content.

THE RESULT

The new Hilos website enables seamless content management for blogs and case studies while delivering a fully interactive 3D experience directly in the browser. Despite the use of heavy media and 3D assets, the site maintains strong 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 effectively showcases the power of their technology.

GET IN TOUCH