Who
I found it on the Prismic blog, but the code comes from a Codepen made by Jhey.
Where
When
October 19th, 2023
What
This technique allows you to blur out text that you can reveal by hovering your cursor. Only the character directly under the cursor is completely revealed, but it also partially reveals adjacent characters to provide a smoother and more visible flow between characters. In addition, if you're not hovering, all of the characters become smaller. Theoretically, it would be possible to distinguish large enough characters even if they are blurred, so shrinking them prevents this. The demo code uses hardcoded characters because you need HTML around each of them, but you would be able to use JavaScript to dynamically add HTML to a parsed string.
Why
I find this interesting because it seems like an optimal way to hide sensitive text, but I don't see it used anywhere. The original reason I picked this demo is that it reminded me of a custom one-time-view text app we have at work, and it could be used to secure that text. However, I think that a more important application would be for viewing passwords. The whole point of hiding passwords is so that people can't see what you're typing unless you choose to reveal it. However, there's a chance someone could see it while you're revealing it. Using the blur technique would also mitigate this. You'd know what you're looking for in your own password, so you'd be able to read through without seeing the entire thing at once, but other people wouldn't.
Steps
- For the HTML, the entire string goes inside of a ul, and each character goes inside of a span in an li.
- Use the list to format the characters to look like a complete string. The characters need to be separated for the blurring to work properly, but you still want what's displayed to be readable. The main property you need to make this work is display flex.
- Use the spans to apply the blurring. Scale, filter, and transition are used for the effects, and you determine the intensity of the effects by checking how far away various characters are from where you're hovering.