Comicverse - Devlog
Well, I wanted to do this for a while, but didn't have enough progress to show up here. But not that I don't have a full-time job anymore, things are turning out very quickly.
This year, I'm working on a project codenamed "Comicverse". It is a platform for writers and artists (like me) to post and share their work, similar to platforms such as Webtoons and Wattpad, but [hopefully] better. Works on this platform can be more than just images or text, they can be fully customized and immersive, taking full advantage and capabilities of the web to improve the reading experience.
As in the GIF above, one of the features is the ability to change backgrounds as you scroll/read the work. It is a small detail, but that could be used for things such as showing the current scenario, theme, accent color, etc. of the work.
Another feature that I recently created is the ability to add soundtracks. Yes, web comics and books can now have full soundtracks playing as the reader sees the work (enable the audio):
Also, more than just one soundtrack can be playing at once, so this can also be used for ambient sound effects: things such as the sounds of trees as the protagonist enter a forest; or fire as a village is burned down to ashes.
There are still a lot of things that I want to add and develop:
Being able to click on text on parts of the webcomic image, triggering sounds, pop-ups, or jumping to another page (choose-your-own-adventure books and comics!);
Multi-lingual works, aka. being able to publish your work under different languages;
Screen-reader support for web comics, so visually impaired people can still read them;
Easter eggs in works, things such as hidden click or hover events that the reader should find (ARGs support);
This is still in very early development, since I want to make it right both in user-facing and technical parts of the application (which I will be going into details in my codeblr blog @guzscode on another post). I don't want to rush and develop something mediocre.
Also, the images drawings by me and the songs are just placeholders for testing. The musics in the video are in respective order: Coasting, by Darren Korb; Now I Am Become Death, by Chris Christodoulou; and Balatro's Main Theme (they are just songs that I were vibing to while programming)
Some things that I like about the project and engineering decisions that I'm having in it:
All the front-end code for the interactions is pure JavaScript using Web Components, no framework, library, bundling or transpiling. The reasoning for it is to have full control over how the interactions play and call the browser APIs;
Because of the use of pure JavaScript and the control because of it, I'm designing the interactions to be fully usable and working even when JS is disabled. Of course, they are better with JS enabled, since things such as the transition in backgrounds and autoplaying soundtracks simply won't work, but the reader will still be able to play the soundtracks manually and see the different backgrounds on scroll;
Most of the interactions logic is actually in CSS. The changing backgrounds and soundtrack positions are based on their HTML element positions between images, and they stick to the page using CSS's position: sticky;
The use of Web Components lets me enhance native HTML tags, instead of replacing them. So things such as custom audio players, when JS isn't enabled, will fall back to the browser's native player;
Also, readers will be able to download the books and comics as ePUB files, so the interactions are designed to (hopefully) work on any ePUB/eBook reader.
The back-end is written in Go, and the editing of webcomics/books will be done fully server-side and interacted with (JavaScript-enhanced) HTML forms. Again, I like the idea of this project being usable for people without JS enabled.
Hopefully, the editor will be also downloadable as a computer software, so you can read and create comics and books without even an internet connection (but a browser or webview will still be necessary since it won't be a native software).









