I built a hot sauce page that changes its whole personality in one tap

on

Most product pages have one mood. This one has three, and you pick with your thumb.

Tap Mild and the page turns lime green and polite. Tap Hot and it goes mango yellow. Tap Fire and everything turns crimson, the bottle goes dark, and the copy tells you to start with two drops.

No page reload. No framework. No 400 MB of node_modules. One HTML file. Here is how it works, and why it was more fun to build than it had any right to be.

Meet Tez, a hot sauce that does not exist

A template needs something to sell, and "Product Name Here" makes nobody hungry. So I invented Tez. It is Hindi for sharp, fast and fiery, and all three apply.

The page is a one-product store: one bottle, three heat levels, one sticky Add to cart bar. That is the whole shop. If you sell a single thing, whether it is a sauce, a candle, an ebook or a keyboard, this is the layout you want.

The bottle is not a photo. It is about a dozen lines of SVG, which means it can change colour on command. Remember that. It matters in a minute.

The trick: one attribute does all the work

This is the part people expect to be complicated. When you tap a heat level, JavaScript changes exactly one thing about the styling:

<html data-heat="fire">

That is it. CSS handles the rest, because every colour on the page comes from six variables. Here are three of them:

:root              { --ground:#FFC53D; --ink:#3A1500; --sauce:#E8451E; }
[data-heat="mild"] { --ground:#D9EF9F; --ink:#16301B; --sauce:#5A9E2F; }
[data-heat="fire"] { --ground:#B3122F; --ink:#FFF1E0; --sauce:#4A0717; }

The background reads --ground. Text and borders read --ink. The bottle reads --sauce. Change the attribute and the variables change, so the whole page repaints with a half-second fade.

The buttons never got their own colour rules. The selected one is "ink background, ground text", whatever those happen to be today. That is why the sticky bar is dark brown on Hot and cream on Fire without me lifting a finger.

Want a fourth flavour? One more line of CSS and one more entry in the content object. Call it Regret.

The button that takes the makeup off

At the top of the page sits a small pill that says CSS on. Tap it and the design stylesheet switches off.

What is left is the honest HTML: radio buttons, a bullet list, a heading in the browser's default serif. It looks like a website from 2003 that sells exactly one hot sauce. The bottle keeps its colour, because even in 2003 it had standards.

And everything still works. You can pick a heat, change the quantity and add to cart.

It is my favourite part for two reasons. It makes a great before-and-after shot. And it proves the markup is real: the heat picker is actual radio inputs, the questions are native details elements, and the buttons are buttons. Keyboards and screen readers get the same page as everyone else.

Three small things that make it feel expensive

The giant word. The heat name is set huge behind the bottle, so the bottle cuts straight through the letters. It is the cheapest depth effect there is. No shadows, no 3D, just one thing standing in front of another.

The wobble. Switch heat or add to cart and the bottle rocks side to side, like someone nudged it on the shelf. It is half a second of CSS keyframes, and it is the difference between a picture of a bottle and a bottle.

The button that answers back. The buy button says "Add to cart, $24", so you always know what you are agreeing to. Tap it and it says "Added to cart", the cart count does a little jump, and then the button goes back to work.

If your phone is set to reduce motion, all of this stands politely still.

Steal it

The whole thing is one file, and making it yours takes about ten minutes.

  1. Find the VARIANTS object near the bottom. Change the names, the one-line descriptions, the "Good on" list and the ingredients.
  2. Set PRICE and CURRENCY just above it.
  3. Pick your three colour sets in the tokens style block. One line per variant.
  4. Swap the bottle SVG for your own product, or drop in an image.
  5. Delete the CSS on button before you launch, unless your customers miss 2003.

Watch it in action on YouTube: https://youtu.be/Lss2QSUTE2w

Then go put it on something. I recommend eggs.

Comments

Post a Comment