Imagine you had an invisible pen, those with ink that is only visible when shined with a particular light. Similarly, the project provides user an input where they can submit a secret message that would be revealed when user cursor-highlights the prepared paragraph. It is about the intimacy, the playfulness of sending your loved ones a secret message.

Invisible Ink started as an exploration of how code can create a sense of intimacy and hidden communication in digital space. Inspired by invisible ink pens from my childhood, I wanted to recreate that experience — a message that only reveals itself when you interact with the text in a specific way.

The project was built using Vue.js, focusing on DOM manipulation and text rendering. The main challenge was designing a function that could embed a secret message within a block of visible text without breaking its structure.

The approach was algorithmic:

1. Iterate through each character of the secret message

2. Find a matching character in the visible text.

3. Apply a white background to that letter using inline styling (background-color: white).

How to use "Invisible Ink"?

Because of this overlay, the hidden characters don’t visually appear when the paragraph is rendered — but when the user highlights the text, those specific letters remain invisible against the highlight background. The result is a secret message that is “written” into the text but only perceptible through interaction.

This method reminds me of the invisible ink that I used to use with my friends back in middle school to pass on some jokes and drawings.

Check the letter that is not highlighted, that's your message

From a technical perspective, this project deliberately subverts the DOM’s conventional purpose. Normally, the DOM is used to expose information — structured, semantic, and legible to both users and machines. Here, it becomes a site of concealment. The manipulation of inline styles, normally used for emphasis or clarity, is instead weaponized to obscure meaning. The highlight interaction — a behavior meant to reveal — paradoxically becomes the trigger for partial revelation.

This inversion of visibility highlights how the front-end layer can hold emotional and conceptual weight. By rethinking how users interact with seemingly ordinary elements — text, selection, and color — the project turns a basic web operation into a quiet, intimate exchange.

Special thanks to Melanie Hoff & SFPC