HeraklionA connected idea.
A clear expression.
A brand and digital experience for the ecosystem behind LabyrinthOS and Ariadne. The website connects a complex product story through art direction, interaction, and motion.
01 / The design challenge
Make the idea clear
before explaining the system.
Heraklion connects products that operate at different scales. LabyrinthOS brings global signals into view. Ariadne goes deeper into spatial context and reconstruction.
The website needs to make that relationship understandable. The design moves from a broad view of the world toward the evidence behind a situation, using a single visual story to connect the products.
02 / The digital experience
Let people explore
the explanation.
The redesign uses a coastal scenario to introduce signals, connect them into a situation, and reveal their source context. Visitors can change chapters and inspect sample observations as they move through the page.
Large typography establishes the idea. Focused controls and layered imagery bring the explanation closer to the product. The demonstrations use illustrative data and are presented as concepts.
03 / A visual language in motion
Small movements.
Specific meaning.
Broadcast arcs, a scanning line, and a network cascade each describe a different action. Their motion is part of the explanation, giving the interface a recognizable rhythm.
The original SVG geometry and timing carry across the design. The portfolio presentation includes playback control, pauses when out of view, and respects reduced-motion preferences.
Broadcast
Signals travel outward.
Scan
Attention moves across a field.
Network
Connections appear in sequence.
Animated SVGs carried through from the Heraklion design.
04 / From design to implementation
One coherent
product story.
This case study focuses on the brand expression, website design, interaction, and motion work surrounding Heraklion. The related LabyrinthOS and Ariadne studies look more closely at the product interfaces.
A restrained palette, cinematic imagery, and a consistent animation vocabulary connect the family without flattening the differences between its products.
- Art direction
- Interaction design
- React
- TypeScript
- Motion
- Animated SVG
Captured from the local September 2026 website redesign. Scenario imagery and product demonstrations are illustrative. Original animated icon geometry and keyframes are reused from the project.
Connected projects
Have a complex product to bring into focus?