The Red Reveal: Illusions on the Web Part 1

This is the first in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and improve them).

Growing up, my family played a lot of board games. Several games such as Outburst, Password, and Clue Jr. included something that amazed me at the time — a red lens and cards with some light blue text that was obscured by a myriad of red lines. When you put the red lens over the card, the text would magically appear.

See the Pen Drag to Make the Red Squiggles Disappear by Dan Wilson (@danwilson) on CodePen.

I spent twenty or so years without thinking about these again until I was watching an episode of Tumble Leaf where they discover hidden messages. This sent me on a whirlwind of finding related products and recreating the effect on the web, since most of my life is centered around recreating and extending things my kids like.

What is Happening with the Red Reveal 

This was harder to duckduckgo than I expected because I didn't know the concept's name. Some message boards on board game fan sites led me to the name "red reveal," and that is what I am using for this article.

The basic effect is that you have an image or text on the base that is a cyan (let's say hsl(180,100%,50%)). This will be the hidden content. We then add a mask that is red (180deg around the color wheel at hsl(0,100%,50%)) over it, either with other text, red squiggles, a mix of lines, or other images. Then look at the card through a red lens (or cellophane — anything that is close to a true red and not opaque). Just like magic the cyan is now highly visible and the red mask is effectively removed.

We can recreate this on the web with three layers and use of blend modes, opacity, and repeating linear gradients, and custom properties.

On our bottom layer, let's add text in cyan (or an image with cyan outlines). I also set an opacity between .25 and .5 so it's harder to see against the white background. We then add a second layer with multiple repeating linear gradients that create a stitched pattern that make it all the harder to see the cyan message.

.hide-the-message {
  --reveal: hsl(0, 100%, 50%);
  --start: 5px;
  --end: 7px;
  background:
    repeating-linear-gradient(155deg,
      transparent 0, transparent var(--start),
      var(--reveal) var(--start), var(--reveal) var(--end)),
    repeating-linear-gradient(115deg,
      transparent 0, transparent var(--start),
      var(--reveal) var(--start), var(--reveal) var(--end)),
    repeating-linear-gradient(45deg,
      transparent 0, transparent var(--start),
      var(--reveal) var(--start), var(--reveal) var(--end));
}

It's the third layer where we undo the obscuring lines and reveal the message. The lens is a circle with the same red as a background, with a multiply blend mode. The red lens now can effectively hide the red lines. The multiply blending makes the cyan combine with the red to create black (though, since an opacity was applied to the cyan it will not be fully black).

See the Pen Multiply Mix Blend Example by Dan Wilson (@danwilson) on CodePen.

Add JavaScript to make the element move as your mouse or finger moves with custom properties, and we have a complete interactive recreation.

var lens = document.getElementById('lens');
function move(e) {
  if (e.clientX || e.touches) {
    var x = (e.clientX || e.touches[0].clientX);
    var y = (e.clientY || e.touches[0].clientY);

    lens.style.setProperty('--x', x +'px');
    lens.style.setProperty('--y', y +'px');
  }
}

See the Pen Drag to Reveal the Image by Dan Wilson (@danwilson) on CodePen.

Focusing on the Lens Aspect 

As I learned more about this optical trick, I happened upon a Wide Eyed Editions book called Illuminature that takes it up a level by printing three images on top of each other in different colors. Then by using three different lenses (red, green, and blue) you are able to largely separate each out. The other two images become the mask for the image that matches the lens you choose.

It is a beautiful book without the lenses, but it’s especially fun to explore and separate with the lenses. The provided lenses are small, and for such a large book, I felt it would be better to have a larger lens to look through.

I also had been meaning to learn about streaming video. So taking what I learned with having a red circle with a mix-blend-mode: multiply to get those cyan markings to darken, I set up a red fullscreen element on top of a video element. When you allow access to the camera (which prefers the camera that is facing away from a user when on a phone) it will show underneath the blending element. Toggle to green or blue to see the other images in the book with ease.

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: { facingMode: 'environment' }
}).then(stream => {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
}).catch(err => console.log('error', err));

You can view the demo on CodePen (some platforms restrict camera access from iframes, like iOS, so you can also view the direct example to try it on those devices)

It works fairly well, at least on par with the provided lenses.