Takoyaki
Front-end Engineer

2026年
SVG, GSAP, Web Audio API
10月25日は、わが家の愛猫サクラ(三毛)とヒナタ(キジ白)の誕生日です🐈
2匹はちょうど3歳ちがいの同じ日生まれで、今年でサクラが6さい、ヒナタが3さいになりました。
お祝いに、2匹のイラストを主役にした小さなパーティー会場を作りました。
ケーキのろうそく「6」と「3」は、「マイクを つかう」を押してマイクに ふーっと吹きかけると消えます(長押しでもOK)。
吹いている間は炎が風になびき、消えると紙吹雪とともに2匹がぴょんと跳ねてお祝いします。
風船を割ると2匹がびっくりしたり、猫をなでるとそれぞれおしゃべりしたり。
ろうそくを消したあとにケーキにさわると……ヒナタがちょっとしたいたずらをするので、ぜひ見てみてください。
猫はイラストをもとに SVG で描き起こし、頭・耳・目・しっぽなどのパーツに分けて GSAP で動かしています。
跳ぶ前に一度しゃがむ、着地でむにっとつぶれる、といったマンガっぽい動きでコミカルさを出したのがこだわりです。
効果音は音声ファイルを使わず、Web Audio API でその場で合成しています(右上の「おと」を ON にすると鳴ります)。
マイクは音の大きさを測るだけで、録音や送信はしていません。
ご依頼・ご相談はメールにて承っております。
お気軽にお問い合わせください。
k-takaishi[At mark]sakulabo1025.com
※[At mark]を@に変えて送信してください。