Two animated bats emerge from my name.

I wanted two tiny bats to appear when someone hovered over my name. They needed to feel as if they came from the lettering, not as icons placed beside it. At roughly 15 pixels, the silhouette and movement had to carry the idea without taking over the page.

I traced the first bat from a PNG into SVG in Figma. Matching ready-made poses would have changed its shape, so I worked through raised, spread, and recovery frames and then adjusted the exported SVGs myself.

The early loop was too smooth. I switched to clear frame changes, then kept revising the raised wing tips, how the lower wing folded toward the body, the visible tail, and the balance between the two wings. The body also had to move with the stroke rather than sit still.

I tried particles, removed them, and focused on a few motion lines. Their distance and length changed with each wing pose so the streaks described one continuous flap instead of appearing in unrelated places.

I positioned two bats behind the italic letters of Santi and used soft masks to reveal them as they moved out. A plain fade looked detached from the name. The left and right bats took different angles and paths so the movement felt less mechanical.

The prototype needed another pass when the hover did not trigger, and again when the bats appeared but stopped flapping. The final site uses the animated GIF for the flap and masked movement for the reveal. On touch screens the bats appear automatically; reduced motion keeps them still.