Making a hand-drawn page
dance in sync with its music.
Yael Kempf’s interactive illustration was meant to come alive when the speaker is clicked. A code conflict stopped that. We fixed it, added new items and synced everything to the music.
- Client
- Yael Kempf
- Industry
- Illustration and art
- Services
- Debugging, interaction, audio sync
- Stack
- HTML, CSS, JavaScript
A playful idea,
undone by conflicting code.
The page is a hand-drawn scene where objects react to the visitor. Originally, items only moved when hovered. The client wanted more: click the speaker and the whole scene dances to the music.
Motion on hover
Single items moved when hovered, but the full-scene animation never started.
A broken speaker
Clicking the speaker should start the music and move every item. It didn’t.
Conflicting scripts
Overlapping code fought itself, so the music and the movement never lined up.
New items needed
The client also wanted more objects, each moving with the music.
Five states,
one smooth rhythm.
Hover any item
It moves, with or without music.
Click the speaker
The music starts and every item moves in time.
Click again
The music changes and the scene stays in sync.
Music stops
All items stop the moment the music does.
Play or hover
Items move again when music restarts, or when you hover.
We untangled the code,
then built on it.
See it fail
Recreated the issue to learn exactly when and why the click animation broke.
Find the conflict
Traced the competing code that was blocking the music-driven movement.
Make it cooperate
Reworked the conflicting parts so hover and music work together.
Tie it to the music
Linked every item’s movement to the music, so all of them start and stop together.
Add new items
Added the objects the client asked for and synced them to the music too.
Check every state
Tested hover, first click, repeat clicks, stopping and restarting.
A scene that feels
alive.
Every object is hand drawn. Our job was to make them move, in time, exactly when they should.
One click, the whole scene dances
Click the speaker and the objects around the page begin to move with the music. The effect is playful, and it finally works as the artist imagined it.
A speaker that changes the track
Click the speaker again and the music changes, with the scene staying in step. When the music stops, every item stops with it.
More items, all in rhythm
At the client’s request we added more objects, from the cars and palm tree to the painter on the scaffold. Each one moves in sync with the music.
Hover still works
Visitors can still play with any object just by hovering over it, even when the music is off. Several objects also link through to the artist’s projects.
It works, it’s in sync,
and it’s fun.
Click to dance now works
The conflicting code is fixed, so clicking the speaker sets the whole scene moving.
Everything in time
Every item moves with the music and stops when it stops.
More items
New objects added and synced at the client’s request.
Music that changes
Each click on the speaker switches the track.
Clean start and stop
Items rest when the music stops and wake on play or hover.
More from
our work.
Inner Space Magazine
Inner Space Magazine was paying premium plugin fees for a site that looked old and loaded slowly. We rebuilt it page by page and built the galleries ourselves.
Gierre Mobili
Gierre Mobili’s old website was slow and wasn’t built around how customers browse. We rebuilt it from scratch in HTML, CSS, Bootstrap and PHP, with no plugins to slow it down.
Have a project in mind?
Tell us what you are building and we will come back with a clear plan. No obligation.