Our high standards led us to the beginning of a long and enchanting journey of embracing a new philosophy in our approach to development.
The StringTune website is a presentation of the capabilities of a product we created for internal use (for internal use at first, and later – released for everyone).
StringTune is a cutting-edge JavaScript library designed to deliver high-performance, modular web effects.
Therefore, the main idea was to load the promo website with demanding design solutions that, when executed and brought to life, would continue to perform smoothly and flawlessly.
Why StringTune
Some time ago, when we started working on updating the Fiddle.Digital website, we began using a generally accepted stack to implement the animations defined in the new brand development strategy. At a certain point, we found ourselves in a situation where our optimisation capabilities were not sufficient, and we couldn’t influence the tools as deeply as we wanted. So we decided to take a gamble and risk creating our own lightweight and transparent tool, whose core value would be performance and optimisation, and later – a new paradigm of interaction with development as its foundation.
Art Direction and Brand Language
The main object of StringTune becomes a stylised katana – a symbol of balance, precision, and concise. The website’s story tells of an encounter between the main hero (the user) and a new tool (the String katana), which he acquires and learns to master. The guides of the story are two characters who deliver their monologues – Sensei Oji and the assistant girl Aika.
The main hero finds himself in a storm that symbolises the complexity of development approaches, especially when it comes to simple yet effective animation solutions. Gaining control over the String gives us the power to create complex things through simple methods – and most often, purely with CSS.
Challenge? Opportunity
Throughout the entire development process, the product itself went through numerous stress tests, received many updates, and crossed the threshold from “ready for us” to “ready for everyone.”
SkillHub
This section is our dojo. A sacred place of learning and knowledge. A place where StringTune becomes accessible and transparent. It is a library of knowledge and examples, each ready for download and in-depth study, or for direct reuse. Most of them, especially in the Basics section, rely solely on attribute usage and CSS-based control – JavaScript is used only to attach the core and the relevant modules.
Navigation and non-trivial UI
This website has two main goals:
- To demonstrate performance under high load
- To show how simple it is to achieve
Regarding the first point, it’s worth noting that each subsequent section has its own unique feature, whether it’s scroll-based progress or mouse-movement-driven animation. In any case, we put in every effort to maintain consistency despite the variety.
A separate story is the use of glassmorphism, which we intentionally synchronised with an upcoming trend. Each interface button has liquid-glass characteristics and interacts with the user – scroll, hover, cursor movement.
All of this was achieved using StringTune modules and works in harmony with its ecosystem, while leaving room for performance.
Technologies
StringTune became our main hub through which we manage all motion processes. It freed us from thousands of lines of JavaScript and helped keep the structure simple and clean, while the site continues to look complex and UI-heavy (while adhering to best UX practices).
NuxtJS, TypeScript
Three.js acts as the engine for 3D and the katana – fully controlled through integration with StringTune.
WebGL – custom solutions to achieve the highest level of performance and optimisation.
Strapi (Headless CMS) – content control.
Company Info
Fiddle.Digital is a design-driven digital agency building websites as carefully engineered products.
We work at the intersection of design and engineering, creating websites that are structurally sound, visually precise, and technically robust.
Each project is treated as a system – built to perform, scale, and age well over time.
Lead Engineer: Vlad Penev
Art Direction: Dmytro Troshchylo
More About Us: Fiddle.Digital.