Framer
Devtools
← Websites
StringTune
A CSS-first JavaScript library for elegant scroll animation
Visit site ↗
10.1MB · 900px tall · uses KHTeka, KHTekaMono
Industry
Devtools
Style
Minimal, Dark Mode, Editorial
Stage
Private
Built with
Unknown
About the site
StringTune is an open-source JavaScript animation library from studio Fiddle Digital, built on a 'CSS-First, JS-Light' philosophy that favors HTML attributes over code. The homepage is dark and unhurried, with generous negative space, copy that frames animation as a martial-arts-style discipline, and a masonry grid of example clips showing the scroll-driven effects. A useful reference for library landing pages that want an editorial, almost literary tone instead of the usual code-heavy template.
How this page sells
For creative developers choosing a scroll library: the page is a game, built with the library itself.
Primary navigation
- Dev Guides
- Skill Hub
'Master Your Skills' beside a detailed 3D katana with a Red Dot badge, a giant 'StringTune' wordmark, 'CSS-first. JS-light.', 'Built by Fiddle.Digital' and a live version number (v1.2.5).
Why it converts: An animation library proves itself by animating, so a showpiece hero is the most convincing demo, and the version number says it's actively maintained.
A pixel-art guide in the corner with a dialogue box ('Hey there, wanderer! Welcome to the realm of StringTune, where precision meets mastery') and a Next button.
Why it converts: A friendly guide turns documentation-style onboarding into a game, lowering the intimidation of learning a new tool.
As you scroll, the katana rotates and splits while words blur in and out ('Concentrate', 'Keep Scrolling', 'The Spirit Awakened'), with a live FPS and scroll-position readout on the left edge.
Why it converts: The FPS counter shows developers the effects run smoothly while they watch, which answers the performance worry with live proof.
A painted Japanese sky with the sword crossing it, then a wise-master portrait: 'Ah, you've finally awaked……' with a Skip button.
Why it converts: Framing animation skill as a martial-arts path gives the library a memorable identity, so developers remember it among dozens of similar tools.
Two pill buttons fixed in the top bar through the whole experience, Dev Guides and Skill Hub, plus a progress percentage in the corner.
Why it converts: Keeping the docs one click away means a developer can jump from 'that's cool' to learning it at any point in the scroll.
