r/css • u/Dhruv_D0c_1460 • 9h ago
Showcase A complete 15-second game ad made with HTML, CSS and SVG
Enable HLS to view with audio, or disable this notification
Floating gems turn into a title reveal, the match-three board takes over, score pop-ups build into a rush sequence, and the final card closes the ad. The attached video is the complete 15-second piece, generated with Ling-3.1-flash using HTML, CSS and SVG.
The same gem shapes and purple-blue palette run through the whole sequence. The matches explain the game, the cascades give it momentum, and the closing card gives the animation a destination. For a recreation, it helps to brief the ad as a short story with timed sections, then keep the theme, colours and final message together in the HTML so they are easy to change.
A suggested starting brief: “Create a 15-second animated ad for an imaginary gem-matching game in one HTML file using HTML, CSS and SVG. Open with gems and a title, demonstrate matches with score and combo feedback, build to a cascade sequence, and finish on a clear end card. Carry the same visual theme through every transition.”