Snowball and "freeze" logo, how to make (faster, more efficient, easier)?

Question

css

The authorities thought about redesigning the logo. And on a voluntary-compulsory basis (you programmer) obliged me to do this.
Logo - 4 orange translucent letters on a white background with a moving gradient. Flash, of course.
They decided to abandon the moving gradient, and instead they want a snowball to fall on the page, a snowdrift grows near the letters , and the letters themselves freeze (more precisely, covered with hoarfrost), but not entirely, but gradually, from the bottom up. Animation, sort of. And then they cracked, the ice was thrown off and everything was repeated.
How to make a snowball, I know.
But what to do with freezing - for the fifth day I think and google and something is nothing intelligible :( Of course, the source of the flash was not preserved, decompilation did not give anything (however, I'm not very good at that ..).
Lately I've been fooling around a little with canvas, but my Google-fu refuses.
I also googled about CSS transformations and didn’t come up with anything either.
Hiring Flasher wasn't an option, and no one I knew was that competent.
The only thing I thought of was to draw about three dozen pictures with different stages of the process, glue them into a sprite and shift the frames with Javascript.
Any advice on how to make this amazing effect?
It seems to me that someone has already stepped on such a rake ...
Thank you!
PS No, of course they won't fire you. But the bonus can be cut ...

Answer 1

Flash in the furnace. SVG or GIF. Maybe even a video...
That's what I would do. Just do not shift, but impose one on top of the other.
PS:

var to=0;
$('.ice-layer').each(function(){
    setTimeOut("$(this).animation({opacity:1},100)",to);
    to=to+100;
});

Answer 2

I would look towards SVG.