Birthday Cake

@frontiend

13.1K followers · usually 6.2K views a post

Views

523.9K

Likes

36.1K

Comments

31

Shares

3.2K

SoundTikTok sound · original sound - urathlete_andrew

Why it worked

The video combines satisfying, clean code-based animation with an interactive element that invites user participation, making it highly engaging for a coding-focused audience.

Summary

An animated birthday cake is built using HTML and CSS code, with an interactive feature that allows the user to blow out the candles.

Structure

1Displaying the cake title
2Rendering the cake layers via code
3Adding candles to the cake
4Prompting the user to blow out the candles
5Blowing out the candles with confetti animation

On-screen text

Birthday Cake Happy Birthday! Love #cake display: block; position: relative; margin: -10px auto 0 auto; height: 100%; } .fuego { border-radius: 100%; position: absolute; top: -20px; left: 50%; margin-left: -2.0px; width: 6.66666667px; height: 10px; opacity: 1; transition: opacity 0.5s; transform: translate(0); backface-visibility: hidden; } Touch to blow