DEV Community: Kuga

Five small free apps: your voice, your birthday, your song, your photo, and a bedtime story

Kuga — Tue, 13 Oct 2026 11:18:59 +0000

August was for websites. September was for music videos. October finally belonged to the small apps: ideas that had been spinning around in my head for a while, waiting for their turn. This month they got built.

The first four share one rule: everything you see and hear comes from what you give them. Your voice, your name and birth date, your song, your photo. Nothing is random and nothing is picked from a library, so the same input always gives the same result. The fifth is a small gift for anyone with little kids.

All five are free and run entirely in the browser. No account, no server, and nothing you record, type or upload ever leaves your device. Videos are rendered frame by frame and encoded straight to MP4, not recorded from the screen, so they don't stutter and open on any phone.

They all live on one small site: My Little Apps | Kuga Lab, https://mylittleapps.pages.dev

1. Rosonata: say your name, get a rosette that plays music

Say your name into the microphone. Two seconds later you have a glowing rosette with petals, rings and little gold spikes. Press Play, and a needle starts reading it like a music box, while a real piano (or a harp, a cello and a French horn) plays what it finds.

Where it came from

Before Rosonata there was a simpler app: say a name, get a mandala-like rosette, with one strict rule that everything must come from the voice. Looking at one of those rosettes, it suddenly looked like the disc from an old music box: rings, bumps, a steady rhythm around the circle. It looked like a score. So the question became: what if the rosette could sing?

Listening to the voice

The recording is cut into short overlapping frames, and for each one the app measures loudness, pitch, brightness, 12 frequency bands, and how often the wave crosses zero, which is how it finds hissing sounds like s, sh and ch. Silence is trimmed, and the loudness peaks split the name into syllables.

Drawing the rosette

Every measurement has one job:

the median pitch of the voice sets the number of arms (10 to 18) and the base colour
every syllable becomes a ring
the pitch and loudness of that syllable shape the petals in its ring
hissing sounds become spikes, loud moments become dots
a medallion in the centre sums up the whole name

The number of arms is one line. pc is where the voice falls inside an octave (0 to 11):

const N = Math.round(14 - 4 * Math.cos(2 * Math.PI * pc / 12)); // 10..18 arms

It goes around the octave like a circle instead of up a ladder, so low voices don't always get fewer arms. A deep voice and a high voice can both land on 18.

Reading it like a music box

As the disc turns, wherever a petal line crosses the needle, a note sounds. Further from the centre means higher. To keep it from sounding like a cat on a keyboard, every note snaps to a pentatonic scale in the key of the voice that said the name:

const PENT = [0, 2, 4, 7, 9];
const deg2semi = d => 12 * Math.floor(d / 5) + PENT[((d % 5) + 5) % 5];
let key = 57 + Math.round(pc); // the key comes from your voice

There are two ways to read. Classic: the needle stands still, the medallion gives the bass, and on the last arm the disc slows down like a music box running out of spring. Complex: the needle travels from the centre to the edge like a gramophone, the dots and spikes set the rhythm, and every phrase reads a different line.

The sound comes from real recorded instruments (tonejs-instruments). There are three sounds: Piano, Salon (piano, harp, cello) and Film (French horn, harp, piano, cello), all through a concert-hall reverb. You can keep the rosette as a PNG, a 1080×1080 MP4 or a WAV.

The detours

The first version had no instruments at all. You recorded your name, then sang "laaa", and your own voice became a choir. It crackled, for three reasons. The click or breath at the start of the recording was replayed on every note. A deep voice pushed two octaves up sounded like broken glass. And the phone simply couldn't mix dozens of voices live: the exported WAV was clean, but live playback crackled. The fix for that last one stayed in the app. The whole piece is rendered offline first, and only one finished buffer is played:

const oc = new OfflineAudioContext(2, Math.ceil(seconds * 44100), 44100);
// ...schedule every note into oc...
const buffer = await oc.startRendering(); // then play just this

It hasn't crackled since, even on a mid-range Android phone.

The next discovery: every melody went up, down, up. Of course, because petals go out and come back. So came other paths through the rosette: a golden spiral, a nautilus (which, by the way, is not a golden spiral, that's a popular myth), sunflower seeds at 137.5°, Archimedes' spiral, a rose curve, Lissajous figures. At one point there were about twelve reading modes and six instruments.

A scoring function then measured which option was the most "melodic". On paper, the spirals won. To the ear, plain piano going up and down sounded best, and the violin was shrieking. And a visitor who sees fifteen buttons just leaves. So the extra code was removed, not hidden, and the best ideas from the experiments were folded into Complex.

Try it: https://mylittleapps.pages.dev/rosonata/app

2. Melodentity: your name and birthday as a melody nobody else has

It started with a claim seen online: if you match name and birth time down to the minute, only 1 to 5 people in the world share yours, even for the most common names.

It's wrong. About 250 babies are born every minute worldwide. The most common full name on Earth, Wang Wei, belongs to roughly 290,000 people. Spread over about 70 years of birthdays, that's around 10 per calendar date, and divided by the 1,440 minutes in a day, 0.007 Wang Weis per minute. The "1 to 5" only appears if you forget the birth year.

So for almost everyone alive, name + date + time of birth is already unique. Which means it could become something that belongs to only one person: a melody.

You type your full name, in any alphabet, your date and your time of birth. You get a short tune with a synth or a real grand piano, the same tune as real piano sheet music, and a PNG of the score and an MP3 of the melody. Change one letter or one minute and you get a completely different tune.

Version 1, and how it broke

The first version mapped things directly: each digit of the date became a melody note, each letter of the name an accompaniment note, the time of birth set the tempo. It sounded nice and felt unique. Then came the question: can two people get the same tune? The math said yes, in several ways:

Only the first 5 letters were heard, so Marko Petrović and Marko Jovanović sounded identical.
The note was charCode % 10, so A, K and U shared a note. Nina = Dina, Hana = Rana.
Tempo depended on the distance from noon, so 10:00 and 14:00 sounded the same.
Cyrillic letters were silently deleted, so every name written in Cyrillic got no accompaniment.

Patching each hole would only patch the holes found so far.

Version 2: a fingerprint

Name, date and time are joined into one string and run through SHA-256. The result is a 256-bit fingerprint, and changing a single character changes the whole thing. Every musical decision is then read from that number, one after another:

// each choice "uses up" part of the fingerprint
function hashReader(hex){
  let big = BigInt('0x' + hex);
  return n => {
    const N = BigInt(n);
    const r = Number(big % N);
    big /= N;
    return r;
  };
}

const R = hashReader(sha256(`${name} | ${date} | ${time}`));
const tempo = BPMS[R(8)];         // one of 8 tempos
const pitch = PENT8[R(8)];        // one of 8 notes
const length = DURATIONS[R(3)];   // short, long, or short + rest

Every letter counts, every alphabet works, and there are no symmetries. Before hashing, the name is normalized: upper and lower case are the same, extra spaces don't count, and Ана Петровић = Ana Petrović, because it's the same person in two scripts. But č is not c: Petrović and Petrovic are spelled differently.

Two modes

In Date + fingerprint mode, the melody is your birth date, one note per digit, so you can actually hear your birthday. The accompaniment comes from the fingerprint and tells apart the roughly 360,000 people born that day. It has 16 notes, because that's where the chance of two people sharing a tune drops below one in a million, and 8 digits × 2 eighth notes fill the bar exactly. In Pure fingerprint mode, 24 melody notes come from the fingerprint of everything, over 4 slow bass notes. An honest caveat: a hash makes uniqueness overwhelmingly likely, not mathematically guaranteed.

Sheet music a pianist can play

The score is drawn with VexFlow as a grand staff. A phrase can be 9, 10, 11 or 12 eighth notes long, so instead of forcing it into 4/4, each bar gets its true time signature: 11/8, 9/8. Long bass notes are written with ties, short notes get staccato dots, accented notes get accent marks. 120 combinations were checked in both modes: every note on paper starts and ends exactly where the sound does.

The piano uses 12 recordings from the Salamander Grand Piano. The MP3 uses the same offline rendering as Rosonata, encoded in the browser with lamejs.

The rule that caught the Nina = Dina problem: agree first, code second. The first version felt unique. Only "prove that two people can't get the same tune" showed the holes.

Try it: https://mylittleapps.pages.dev/melodentity/app

3. Songlyph: 25 visualizer experiments, one app

After a month of making music videos in code, the phone was full of experiments with names like tacke-v11-2.html and linija-v4-1.html. About 25 files, many of them slightly different versions of the same idea. Four ideas survived:

Line: a line that wanders, spirals or writes rows across the canvas, steered by the song.
Dots: discs that fall on every beat and fill the canvas as the song goes.
Circle of fifths: the harmony of the song drawn as a path around the circle of fifths, with rings and chord lines on each beat.
Signature: a line whose whole behaviour comes from a few numbers measured from the entire song.

Instead of four apps, there's one, with a Layers switch that stacks several modes on the same canvas. That's Songlyph: song + glyph.

You upload any song, and the app first listens to all of it: tempo and beats, chords, loudness, bass and treble, stereo width, and the points where the song changes parts. Then it draws while the song plays, and every trait leaves its own trace. Beats drop shapes, chords pick the colour and the direction, loudness sets size and brightness, stereo width splits the line in two, and new parts of the song leave rings. You can save a full-resolution PNG, or a video with the song in 1:1, 9:16 or 16:9.

There are a lot of switches: four modes with their own options, layers, six palettes, a dark or light canvas, bokeh lights, "breathing", a seed and a manual tempo fix. If you like visualizers, drop in a song you love and play. If you write code, open the source: one HTML file, a hand-written FFT and beat detection, no frameworks. Change a number and you get a different drawing. Take it apart.

Try it: https://mylittleapps.pages.dev/songlyph/app

4. Kaleidosong: the kaleidoscope, back where it belongs

Almost everyone had one as a kid. A cardboard tube, a few pieces of coloured glass, three little mirrors. You held it up to the light, turned it slowly, and a new pattern bloomed every second. Nobody had to explain it, and nobody owned it. It was the cheapest toy in the shop, and every child in the world got to hold one.

So it was strange to find kaleidoscope apps that charge for HD, for a longer video, or to remove a watermark.

Kaleidosong is free. Give it one picture and one song, and it turns them into a living kaleidoscope that moves with the music: squares like mirrored tiles, or hexagons, exactly like three mirrors in a tube. No account, no watermark, no limit. Take a photo of your street, your cat, your grandmother's tablecloth, put your favourite song under it, and turn the tube.

Try it: https://mylittleapps.pages.dev/kaleidosong/app

5. Storyglobe: four picture books, free for every child

This one is a small present for everyone with little kids at home.

Four picture books, each with a gentle lesson, illustrations and a little song at the end:

Lioner Learns to Stay Safe
Greenosaur Learns to Brush His Teeth
Foxin Learns to Share
Owlo, a little owl who doesn't want to go to bed

Read them together on the screen, in your own language, or download them and keep them. No account, no ads, no price. Good stories for kids should be free, just like the kaleidoscope.

Read them: https://mylittleapps.pages.dev/storyglobe/

If you try any of them, show what you got in the comments: your rosette, your tune, your drawing, your kaleidoscope. And if you read a book with your kid, tell me if I made some mistakes in your mother's language 🙂

Credits: piano samples from the Salamander Grand Piano by Alexander Holm (CC BY 3.0). Instrument samples from tonejs-instruments, VSCO 2 Community Orchestra and Freesound (CC BY 3.0). Sheet music by VexFlow (MIT). MP3 encoding by lamejs (LGPL-3.0). Video export with mp4-muxer (MIT).

All five apps were built on a phone, in conversation with Claude. This post was written with help from AI.

Cheers 🥂
Kuga

I made 45 music videos in a month. 21 of them are pure code, and here's how

Kuga — Sat, 03 Oct 2026 12:23:17 +0000

After the kind response to my first post, where I wrote about building three websites in August, here's what came next. In September I started making music videos for the songs I create with AI and publish on my YouTube channel.

Let me be honest right away: all of this is play and experimenting. I'm still a beginner. I'm not a graphics programmer or a video editor. I just want to see how far I can go, because AI tools today have almost no limits.

In one month I made 45 music videos. 24 are the classic kind: scenes generated with AI video tools, then put together in a video editor. 21 are made entirely in code, with no video footage and no AI video.

I don't write the code myself. AI does. I come up with the story and the look, watch every version and say what's wrong. The AI writes and fixes the code.

Why code, when AI video exists?

It's more fun for me. I get to watch something being built from zero, piece by piece.
It looks different. It's not yet another "wow AI animation" like the thousands already online.
I have full control. Code is something tangible: I can change any detail exactly the way I want. With pure AI video, the result always drifts off in its own direction, no matter if the prompt is short, long, detailed or vague.

How the work goes

The process was the same for all three videos:

I write a script for the song. Line by line, with timestamps: at 0:41 this happens, at 1:24 that. This turned out to be the most important step.
The AI writes the code and tests it on its own server. It doesn't render the whole video, just 20–30 still frames from different parts of the song, like a contact sheet.
I look at those stills and say what's wrong. Most mistakes are visible in a picture, not in the code.
When the stills look right, I render the real video on my own device, usually my phone, and report what still looks wrong in motion.
Repeat until it's right.

I picked three videos. The first two use the same tool, Three.js in the browser, but each one solved a different problem: a city that follows the song and its lyrics, and a character that walks and acts. The third one is made in a completely different way, with Python.

1. Veins of the City (Three.js, in the browser)

A walk through a rainy neon city at night, where the lyrics light up as neon signs. Both the song and the video were inspired by Wong Kar-wai's film Fallen Angels.

How it was built, step by step:

First, the song gets measured. When you pick the mp3, the browser (Web Audio) isolates the bass and finds the beats, about 250 in 5 minutes. That's a list of timestamps, and from then on the picture "knows" where the rhythm is.
The lyrics become a table. Each line has three values: the text, when it lights up and when it goes dark. The auto-generated subtitles were a mess, so the timing was put together from my lyrics and the parts of the subtitles that were actually right.
The song decides the shape of the city. The camera walks faster in the chorus and slower in the quiet part. From that speed, the length of each street is calculated, so the camera turns a corner exactly when the song changes sections. Song first, city second.
Everything is drawn by one function: "show me moment t". You give it a time in the song, and it places the camera, lights the right signs and windows, and draws the frame. There's no real randomness: even the "random" flickering is calculated from the time, so it's identical every time.
The frame goes through filters: glow, motion trails, blur toward the edges, then color grading and film grain.
Export: the same function is called for moment 0, then 1/30 of a second, then 2/30… Each frame goes into an encoder (WebCodecs), which packs them together with the audio into an MP4.

Why step 4 matters most: when I say "something's wrong at 2:36", the AI can render exactly that frame and look at it. The same function also makes the vertical version for Shorts, just with a different frame shape.

Here's the idea in a few simplified lines:

// Everything on screen comes from one number: the time in the song.
function renderAt(t) {
  moveCamera(t);       // where we are on the street at this second
  lightSigns(t);       // which lyrics are glowing right now
  flickerWindows(t);   // windows react to the bass
  drawFrame();         // draw the picture
}

// Export: ask for every moment, 30 times per second, and save each picture.
for (let frame = 0; frame < totalFrames; frame++) {
  renderAt(frame / 30);
  saveFrame();
}

What went wrong:

The server had no graphics card, so one frame took 3 seconds and the whole video about 4 hours. So the server only makes test stills, and I render the real video myself. On a desktop it took a few minutes.

The camera jerked after the second minute. The AI wrote a small program that "walks" the camera through the whole video and flags every spot where it jumps too much. It found the causes in seconds.

The camera walked into a building, and lyrics ended up in the wrong street. Both only showed up on the contact sheet.

2. Memories I Was Given (Three.js, in the browser)

A lonely robot walks through a burned-out world at sunset, with someone else's memories on its chest screen.

How do you get a 3D world without 3D software? There's no modeling program where you shape objects with a mouse. The robot is written as a list of parts: the head is a sphere, the visor is a ring, the chest is a rounded box. The parts are connected like joints: the hand hangs from the elbow, the elbow from the shoulder, the shoulder from the chest. When the shoulder turns, the whole arm follows. The ruins are made the same way: the ground is a grid of points whose heights are calculated, and a wall is a box with its top edge "bitten off". Three.js turns all of that into 3D shapes, and the graphics card draws them. The world is still 3D, it's just written instead of built by hand.

How it was built, step by step:

A script, line by line. Before any code, the whole song was planned out: which shot, what the robot does, on which lyric. In the end this was the most useful part of the whole project.
The song gets measured once, in advance. The finished video is a single HTML file, but during preparation Python was used once: it split the song into 10 frequency bands, 30 times per second, and the resulting numbers (about 50 KB) were written straight into the HTML. Python isn't needed to make the video, and the equalizer and the heart on the robot's chest always move the same way.
The robot is built from parts, as described above, and the metal gets rust painted on a canvas.
Walking is calculated backwards. I don't move the knee and hip by hand. I say where the foot should be, and the code calculates the angles (this is called IK). Each step lasts exactly one beat of the song.
The whole path is calculated once, at load time: where the robot is and which foot is on the ground, for every moment of the song. That's why you can jump to any second and the feet still stay planted.
Same idea as the city: "show me moment t". That function moves the sun, poses the robot, draws the chest screen and places the camera.
A camera with no hard cuts. Within one location the camera glides from shot to shot. When the location changes, both shots are drawn and dissolve into each other.
Export works like the city: frame by frame into an MP4.

What went wrong:

It worked on the AI's server, but on my computer (Windows) the screen was completely black. One broken pixel, which the glow effect smeared across the entire frame. The first fix turned the screen white, because Windows had quietly removed the part of the code meant to catch the problem. Lesson: test on another computer as soon as you have your first frame.

Screen recording didn't work: the video stuttered, and my video editor wouldn't even show the file. That's where the rule came from: always render frame by frame.

Vertical video for Shorts: a simple crop loses half the shot, so the vertical mode widens the field of view on its own.

Surprise: my mid-range phone exported the whole video in 1080p in about 7 minutes, right in the browser.

3. The Galaxy Devourer (Python, no browser)

A black hole devours a galaxy, styled as a Japanese arcade game from the 80s.

How it was built, step by step:

Rhythm first. librosa finds the beats in the song. Since they "wobble" a little, the code lines them up into a perfectly even grid. From that come two small functions: "which beat are we on" and "how far into it are we". Everything else asks them.
Then the rules of the look: a small image (384×216), only 16 colors, letters without smoothing. Those rules apply to every single frame.
Every scene is a function of time. The black hole, the galaxy, the bonus stage, the captions: each one gets the time, asks "which beat is it", and draws its part (Pillow). Movement happens in steps on the beat, like in old games.
One function for swallowing. Planets, dust, the galaxy and the player's ship all use the same function: "pull this point into the hole along a spiral". Written once, used everywhere.
Captions and lyrics come last, on top of everything: the dialog box, the score counter, the stage name.
Upscaling: the small image is enlarged five times (NumPy), then old-TV scanlines are added.
No images on disk: each finished frame goes straight into ffmpeg, which joins it with the song. 6,100 frames in about 5 minutes on the server.

What I learned:

When everything hangs on the rhythm, the video feels in sync even when the animation is simple.

Limits help: low resolution and 16 colors created the style by themselves.

First a 30-second test, agree on the look, and only then the full video.

What applies to all three

Almost everything on screen is calculated from the time in the song. If something's wrong at 2:36, you can render exactly that frame and look at it.
Render frame by frame, don't record the screen. Recording stutters. This way it's identical every time, with no glitches.
Look at frames, not code, but don't be afraid of the code. As a beginner I can't read 1,300 lines of code, but I can see that the camera is inside a wall. Sometimes I still ask to see the code and have the AI explain what each part does and how I can change it myself. That way I can tweak small things like a color or a speed on my own, and I learn something new every time.
Test on a real device, and don't underestimate your phone. What works on one computer doesn't have to work on another. I only used my computer when I was impatient and wanted to render faster and see the result. Along the way I figured out that everything works on a phone too, so I did about 98% of the work on my phone.

Every video taught me something new, and every time I'm surprised how far you can get with AI, without any background in graphics or animation.

All the videos are on my YouTube channel: https://www.youtube.com/@kuga-i7o

Thanks for reading. U zdravlje! 😄

This post was written with help from AI, based on my own work.

I'm an ER doctor. After decades without touching code, I built 3 websites with AI in one month — on my phone.

Kuga — Mon, 28 Sep 2026 20:43:37 +0000

I've been an emergency doctor in Serbia for 12 years, Emergency medicine is intense, and burnout is real. This summer I started building websites out of pure curiosity, and as a way to switch off after shifts.

My coding background: a little BASIC and Pascal, a very long time ago,lol. Since then, nothing. Not a single line of code.

In one month I built three websites. Along the way I finally understood things that used to be just words to me: what PHP is and how it differs from WordPress, what SQL and a database actually do, what a website is made of and how all the pieces talk to each other. All three sites are live, and I built every one of them on my phone, in conversation with AI.

The three sites

leaveittotheworld.com
-an infinite wall where anyone can leave a short message to the world. You move around it like a map, zoom in and out, and new messages start near the center.
globalwallofgratitude.com
-a place to publicly thank someone: your mother, a teacher, a neighbour, a stranger.
sendtothestars.com
-pick a real star, exoplanet or galaxy on an interactive sky and send it a message. You get a card with a live counter showing how far your message has travelled at the speed of light, save the card and it works even offline. Everything on the sky is meant to be scientifically accurate. Positions, distances and descriptions come from real astronomical catalogues: the HYG star database, the IAU lists of official star and exoplanet names, exoplanet.eu, OpenNGC for galaxies and nebulae, and published research catalogues for star clusters and black holes.

How it actually works

I don't write the code. I explain what I want, we discuss it until the idea is clear, and only then does the AI write the code. I upload the files to my hosting, test on my phone and report back what's broken.

One rule I learned fast: first agree, then code. If you let AI write code while the idea is still vague, you end up rebuilding everything three times.

Problems I didn't expect

Touch screens are hard. On the message wall, tapping a card sometimes counted as dragging the wall. The fix was a bigger "drag threshold" for fingers than for a mouse. Pinch-to-zoom on the star map also jumped around until the touch handling was rewritten.
Big files and phones don't mix. One page grew to 200 KB and my phone struggled to download and edit it. We split the data (thousands of stars) away from the code, and the file dropped to 22 KB.
WordPress plugins can bite. One site runs on WordPress with code snippets. Importing a snippet silently created a duplicate, and the duplicate crashed the whole site. Now I always check for duplicates after an import.Not to mention the leftover plugins I tried at the beginning and then forgot about.

-$ About money

At first I thought: nice, maybe I can make a little money from this. I set up PayPal and got the whole payment flow working automatically: payment, server-side verification, the card appearing on the wall, the confirmation email. It worked with real payments.

Then I realised these are my first three "school" projects. They should be open to everyone, with no payment at all. So I switched payments off. All three sites are now completely free.

What surprised me

A few weeks after launch, a message appeared on the wall from a complete stranger. Nobody I know, it just came from the internet. That felt better than any payment would have.

What I'd tell another beginner

With AI, a complete beginner can get something real online, but you still have to understand what you're building. Ask "why" a lot.
Test everything on a real phone.
Security and privacy aren't optional. Ask the AI to review them, then ask again.
Launch before it's perfect, but not before it works.

How I got here

The websites weren't the beginning. It all started last year, when I discovered AI.

First came posters. I had images in my head that I could never draw myself, and suddenly I could see them on the screen, looking exactly the way I imagined them.

Then I made three children's picture books.

Then I moved on to fashion. I designed a collection of dresses, and not just pretty pictures: complete designs, detailed enough to actually be sewn in real life.

Then came AI music, and that one still amazes me. You can make songs exactly the way you like them.

And finally, the websites.

Right now I'm making music videos for the songs I created. Some use AI animation, some are built in code, so that everything on screen follows the music: the beat, the mood, the moment.

Every step taught me something for the next one. A year ago I couldn't have imagined any of this. Now I can't imagine stopping.

I'm still an ER doctor. This is what I do between shifts, and it has been the best kind of therapy.

To be honest, none of my friends would really understand what I'm talking about. When I say "I moved the config file above public_html" or "the canvas was drawing the sky from the outside," I get polite nods. So I needed to share this story with people who actually get it. That's you.

Does any of this have a point? I don't know. But it made me happy, and maybe it will make someone else curious enough to try.

If you visit any of the sites, I'd love to hear what you think, especially what's confusing.

U zdravlje, everyone. That's Serbian for "to your health." Coming from a doctor, I mean it literally.

This post was written with help from AI, of course , based on my own story.

Kuga