Fiddle.Digital is a small company with Ukrainian roots, at the moment based mostly in Vilnius, Lithuania, on the time of writing this text. From the very starting, we’ve adopted one core precept — high quality over amount. We had a strong web site constructed with fashionable applied sciences, and it labored nicely. Nevertheless, as time handed, we saved including extra tasks to our portfolio, our expertise grew, and our views and approaches advanced.
The seek for id by no means really stops. In some unspecified time in the future, we realized that our design philosophy had shifted—our views had crystallized and brought on a clearer character.
It was time for a change. It was time for evolution.
Design and Growth (From the Company’s Perspective)
The largest problem we confronted was battling ourselves. We needed to enhance what we already had, however we understood that actual enchancment was unimaginable with out change—with out altering ourselves.
And it was a protracted journey. Not a lot a inventive path as a psychological one—onerous work on ourselves, shifting our beliefs and habits.
Then one thing occurred within the black field, and out of the blue, the correct supplies began to look on ‘paper’—colours, typography, 3D media, the primary drafts of copywriting, artwork route for animations, and extra. Naturally, the primary to bear innovation was our beloved mascot, Susuwatari. It realized to speak with us by means of a show exhibiting 4 symbols: FDDA — Fiddle.Digital Design Company.
And that’s when improvement started…
The Most Elusive Element
This small ornamental ingredient turned one of many largest triggers for rethinking our method to improvement. We stopped permitting ourselves to do no matter we needed, merely counting on fashionable {hardware}’s energy. Nevertheless, we couldn’t discard the thought both, as a result of it served a function—it was a part of the DNA of the brand new branding.
Technically:
- A WebGL context pool runs a number of canvases in parallel, optimizing assets for clean animations.
- We generate a picture the place every pixel turns into a small sq. in a mosaic.
- A noise-based algorithm assigns colours, and a WebGL shader maps them to icons.
- Colours fade at completely different charges, making a dynamic path impact.
- Grouping pixels (e.g., 2×2) kinds bigger icons, including construction.
Tech Challenges
Clean scrolling is undeniably cool. These days, a number of well-known options are tremendous simple to implement. We selected one of the crucial fashionable ones and built-in it into our present structure. After which—it occurred. The web page began glitching, lagging, and in power-saving mode, it misplaced all its sanctity.
After which we heard it:
“I did some analysis, and I feel I understand how to create clean scrolling utilizing fundamental browser scroll occasions whereas sustaining efficiency even in power-saving mode.”
These have been the phrases of Vlad Penev, Lead Engineer. Little did we all know, we have been moving into a brand new period in our workforce’s journey…
New Course
And that’s how our product, which we initially named String (now generally known as StringTune), was born. This journey began with clean scrolling and hooks for components coming into the viewport. Over time, it advanced into a whole suite of modules:
- StringTune
- StringLoading
- StringFPSTracker
- StringPositionTracker
- StringResponsive
- StringScrollbar
- StringLazy
- StringVideoAutoplay
- StringAnchor
- StringParallax
- StringProgress
- StringLerp
- StringLerpTracker
- StringDelayLerpTracker
- StringGlide
- StringCursor
- StringMagnetic
- StringSplit
I need to spotlight FPSTracker, which embodies our new imaginative and prescient, values, and route. This module helps monitor an internet site’s effectivity and efficiency throughout improvement:
- In case you see 60 FPS—nicely accomplished.
- If it drops to 50 or beneath—don’t rush so as to add extra heavy animations.
Our basis lastly gained a 3rd robust leg:
- We’re hooked on nice design.
- This design prospers solely with high-quality implementation in code.
- The perfect consumer expertise is achieved when the product runs silky clean—with out glitches or efficiency drops.
That was the revolution.
A Excessive-Velocity Chase at 60 FPS
It has at all times been there, however we took it with no consideration. Each design determination that involves life by means of code comes at a price—parallax, mix modes, 3D, sounds, ultra-high-resolution pictures.
We, as creators, crave the right image a lot that we hardly ever cease to consider the implications.
Our workforce didn’t need that anymore. We wanted steadiness. Our interfaces needs to be visually interesting, animated, and technologically superior, in fact. However on the identical time, interplay ought to really feel as satisfying as petting a cat.
How A lot is Sufficient?
We acquired what we needed. The digital product’s efficiency skyrocketed. And in our new steadiness system, a free area emerged.
By utilizing a single method and managing all calculations from one logistical heart, we took the primary steps towards constructing new design options.
Mouse Tail
The primary was further content material that adopted the mouse and reacted to DOM components. The impact itself isn’t groundbreaking, however the actual achievement was how effortlessly it was created—due to StringTune.
We’re Designers—We Use Grids
We beloved the thought of controlling the cursor coordinates a lot that we began exploring extra methods to use it. We’re designers. We added a grid to some pages, bringing it to life with cursor interplay. On cellular, the grid animates as you scroll.
Overcoming Adversaries
We devoted ourselves to combating glitches. And having achieved vital success, we arrived at an sudden answer: making managed glitches a part of the branding.
It’s a singular mixture of zero-transition animations and clean actions, which we now boldly use in web page transitions.
DJ-Coded
On the About web page, we didn’t simply share our values by means of textual content and visuals—we created an audio recording that tells a quick story about FDDA’s creation. The principle function? An improvised vinyl that may scratch the audio.
(The New) Tech Stack
And that’s it.
Conclusion
We set ourselves a difficult objective: to alter. And regardless of all the things, we succeeded simply the way in which we needed. We trusted our instincts, surrendered to an journey, and embraced transformation.
This journey introduced us to a brand new stage—the brand new Fiddle.Digital—and a brand new product, StringTune. Initially, we created it for ourselves, however we quickly realized it might be helpful for anybody.
Credit
Fiddle.Digital Design Company
- Operations: Olga Skrypka
- Censorship & Proofreading: Olga Skrypka
- Copywriting: Olga Skrypka, Dmytro Troshchylo
- Design: Dmytro Troshchylo
- Lead Engineer: Vlad Penev
- Inventive Director & Technical Contributor: Dmytro Troshchylo
