Reactive/negative text – text reacting to the background

[K_Rim]

Hey Everyone,

I saw some websites using text that reacts to what is behind.
Additional to that, i once also saw cursors doing that.

Do you have any clue on how to achieve that effect?

I'd like to implement it to my menu and some text.

https://visual-space-agency.com/overview/

https://leandrodisler.com/

Thank you in advance :)

[piotr]

Hi there

I implemented it in my menu, have a look here:

http://laythemeforum.com:4567/topic/10673/menu-text-color-change-when-overlapping-with-images

Don't know how to do it to the cursor though

[arminunruh]

Hey there, so what happens here is people use CSS called mixed blend mode difference, and the text has to be white for it to work.

https://www.instagram.com/p/Cjm8eHkjiXA/

I once did a reel about this that you can see here.

[arminunruh]

If people use cursors with this effect, then they are using an HTML element as a cursor. This HTML element is white and needs to use the mix-blend-mode effect too. It uses JavaScript to update its position.

For example, if you go to ChatGPT and use this prompt:
"Can you tell me the HTML code, the CSS code and the JavaScript code I need to have a cursor that uses Mix Blend Mode Difference? The cursor should be an HTML element that updates its position using JavaScript. "

You will get a pretty good answer

This is from that answer, and I'm just changing the answer a little to make it more applicable to Lay Theme. Go to Lay Theme Custom CSS and HTML. And then in HTML at the top insert:

<div class="custom-cursor" id="customCursor"></div>

In Custom CSS insert:

body {
  cursor: none; /* Hide the default cursor */
}
/* Custom cursor styling */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: transform 0.05s ease-out;
  z-index: 9999;
}

In Custom HTML at Bottom, Insert:

<script>
const cursor = document.getElementById('customCursor');

document.addEventListener('mousemove', (e) => {
  cursor.style.transform = `translate(${e.clientX - 10}px, ${e.clientY - 10}px)`;
});
</script>

How it works:
The default cursor is hidden (cursor: none).

A white circular div follows the mouse.

mix-blend-mode: difference causes the white cursor to invert the background color underneath it — this creates a dynamic effect against light or dark backgrounds.

[arminunruh]

Here you can see the result.

[arminunruh]

http://laythemeforum.com:4567/topic/6161/cursor-invert-color-black-white-text/19

Actually, I already wrote a tutorial for this in the link above.

[K_Rim]

@arminunruh Hey man,

Thank you so much! It was a big help and everything works as intended :)

Also thanks to @piotr for telling me about your topic :)

Enjoy your weeks