Playable: build the order Animated HTML website template

The sample page

Bunline. Neighborhood burger joint, Saint-Henri, Montreal.

The idea

The pulley clothesline strung between Saint-Henri balconies is the kitchen line: ingredients hang from clothespins and you drop them, in ticket order, onto the burger on the plate.

What to try

Hit “Play a round,” then for 30 seconds tap the scene or press Space whenever what the ticket asks for is over the plate; at the end it tells you which burger on the menu to order.

Made for

Restaurants, burger joints, food trucks, bakeries and fast food

Palette

• #F4E6CC
• #2B1710
• #A8432A
• #F2A21B
• #4F6E1F
• #D98A3D

Typefaces

Chango + Gabarito

Cultural notes

• Saint-Henri with no exact address, a fictional 514-555-01XX phone number, and CAD prices on Montreal time.
• No prizes or score-based discounts: your best score stays on your screen, with no names.
• The menu, hours and order button show up without playing, without JavaScript, and with reduced motion.

The HTML

What you download

• A single index.html file with nothing to install: open it, swap in your brand and copy, and upload it to your hosting.
• In English and Spanish, tested on desktop and mobile.
• Instructions for changing copy, colors, language and prices, plus its license.