How to make this illumination effect with CSS

I'd like to simulate a "scan" light that will reveal words in a box, this is my code by now:

const e = document.getElementsByClassName('scan')[0];
document.onmousemove = function(event){
  e.style.left = `${event.clientX}px`;
};

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    
    display: flex;
}

.banner{
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #031321;
}

.banner .scan{
    width: 7px;
    height: 80%;
    
    position: absolute;
    left: 30px;
    z-index: 3;

    transition: left 50ms ease-out 0s;
    
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    width: 100%;
    color: white;
    font-size: 3em;
    text-align: center;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="banner">
    <div class="scan"></div>
    <div class="description">
        Just trying something
    </div>
</div>

The idea is the show the words in the .description div according to the scan light position. If possible I'd like to use CSS only to make this effect, and use JavaScript only to move the scan (which will further become a CSS animation). I tried to use some pseudo elements, but it didn't work well. Here's an example of how this animation should work.

Solution 1:

You can use transparent text with gradient background. I used background-attachment: fixed and a CSS variable to control background position.

You can increase the background-size (500px in this example) to increase transition smoothing.

const e = document.getElementsByClassName('scan')[0];
const hidden = document.getElementsByClassName('hidden')[0];

document.onmousemove = function(event) {
  e.style.left = `${event.clientX}px`; //               ↓ background width (500px) / 2
  hidden.style.setProperty("--pos", `${event.clientX - 250}px`);
};

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
}

.banner {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  background-color: #031321;
}

.banner .scan {
  width: 7px;
  height: 80%;
  position: absolute;
  left: 30px;
  z-index: 3;
  transition: left 50ms ease-out 0s;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 15px 5px #fff, /* inner white */
  0 0 35px 15px #008cff, /* inner blue */
  0 0 350px 20px #0ff;
  /* outer cyan */
}

.banner .description {
  width: 100%;
  color: white;
  font-size: 3em;
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  background: radial-gradient(dodgerblue 10%, #031321 50%) var(--pos) 50% / 500px 500px no-repeat fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="banner">
  <div class="scan"></div>
  <div class="description">
    Just <span class="hidden">hidden</span> something
  </div>
</div>

Here is another example with very long paragraph and multiple hidden text. We control both X and Y axis in here.

const hiddens = document.querySelectorAll('.hidden');

document.addEventListener("mousemove", e => {
  hiddens.forEach(p => {
    //                                            ↓ background width (400px) / 2
    p.style.setProperty("--posX", `${e.clientX - 200}px`);
    p.style.setProperty("--posY", `${e.clientY - 200}px`);
  });
});

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background: #031321;
  color: #fff;
  font-size: 3rem;
  line-height: 1.5;
  padding: 20px;
  box-sizing: border-box;
}

.hidden {
  background: radial-gradient(dodgerblue 10%, #031321 50%) var(--posX) var(--posY) / 400px 400px no-repeat fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Lorem ipsum dolor sit amet, <span class="hidden">consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hidden">Excepteur sint</span> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="hidden">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Solution 2:

Here is an idea using transformation to have better performance

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};

body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #031321;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    color: white;
    font-size: 3em;
    text-align: center;
    width:100%;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow:hidden;
    position:relative;
}
.banner .description::before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   width:200%;
   background:linear-gradient(to right,#031321 40%,transparent,#031321 60%);
   transform:translateX(var(--p,0px));
}

<div class="banner">
    <div class="description">
        Just trying something
    </div>
</div>

To apply it to only few words, you play with z-index

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};

body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #031321;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    color: white;
    font-size: 3em;
    text-align: center;
    width:100%;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow:hidden;
    position:relative;
    z-index:0;
}
.banner .description::before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   right:0;
   bottom:0;
   width:200%;
   background:linear-gradient(to right,#031321 40%,transparent,#031321 60%);
   transform:translateX(var(--p,0px));
}
.banner .description > span {
  position:relative;
  z-index:-2;
  color:lightblue;
  font-weight:bold;
}

<div class="banner">
    <div class="description">
        Just <span>trying</span> something <span>cool</span>
    </div>
</div>

Another idea to make it working with any background in case you want transparency:

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};

body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:center;
    color: white;
    font-size: 3em;
    background: url(https://picsum.photos/id/1018/800/800) center/cover;
    position:relative;
    z-index:0;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner::after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background:inherit;
   -webkit-mask:
      linear-gradient(to right,#fff 45%,transparent,#fff 55%)
      right calc(-1*var(--p,0px)) top 0/200% 100% no-repeat;
}
.banner  > span {
  position:relative;
  z-index:-2;
  color:red;
  font-weight:bold;
}

<div class="banner">
      Just <span>trying</span> something <span>cool</span>
</div>

Solution 3:

Cool glow stick!

I'm assuming that this is for a logo, and that the text should continue to be shown when the glow stick has passed the text.

I would use a pseudo-element on the description element, place it on top and use a gradient-background going from transparent to the darkblue background color. By using a gradient, you can achieve a nice fade in of the text.

I would then set the starting point of the dark background color with a CSS variable that I update through your onmousemove method.

The code doesn't take different screen sizes into account, so you probably need to convert pixels to percentage, if you want your animation to be responsive.

I also changed your classes to id. I think it's more appropriate to show, by using ids, that the element is somehow used by javascript. It's easier to bind the elements to variables too.

const scanEl = document.getElementById('scan');
const descEl = document.getElementById("description")

document.onmousemove = function(event){
  let descriptionDisplacement = 100;
  scanEl.style.left = `${event.clientX}px`;
  descEl.style.setProperty("--background-shift", `${event.clientX + descriptionDisplacement}px`);
};

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    
    display: flex;
}

.banner{
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #031321;
}

.banner > #scan{
    width: 7px;
    height: 80%;
    
    position: absolute;
    left: 30px;
    z-index: 3;

    transition: left 50ms ease-out 0s;
    
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner > #description{
    width: 100%;
    color: white;
    font-size: 3em;
    text-align: center;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* ADDED */
    --background-shift: 0px;
    --background-shift-transparent: calc(var(--background-shift) - 150px);
    
    position: relative;
}

.banner > #description::before {
  content: '';
  background: linear-gradient(to right, transparent var(--background-shift-transparent), #031321 var(--background-shift));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="banner">
    <div id="scan"></div>
    <div id="description">
        Just trying something
    </div>
</div>

Solution 4:

I just tried clipPath. Technically it does what you need but the performance of the animated clipPath is quite poor when combined with the glow effect (but much better without!). Possibly building the glow from something like an image instead of a box-shadow would improve this. (as could reducing the size of the outer most box shadow)

const e = document.getElementsByClassName('scan')[0];
const description = document.getElementsByClassName('description')[0];
document.onmousemove = function(event){
    // comment out to compare performance
    e.style.left = `${event.clientX}px`;
    description.style.clipPath = `polygon(0 0, ${event.clientX}px 0, ${event.clientX}px 100%, 0 100%)`;
};

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    
    display: flex;
}

.banner{
    width: 100vw;
    height: 100vh;


    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #031321;
}

.banner .scan{
    width: 7px;
    height: 80%;

    
    position: absolute;
    left: 30px;
    z-index: 3;

    transition: left 50ms ease-out 0s;
    
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    width: 100%;
    color: white;
    font-size: 3em;
    text-align: center;


    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="banner">
    <div class="scan"></div>
    <div class="description">
        Just trying something
    </div>
</div>

Solution 5:

Try like this:

const e = document.getElementsByClassName('cover')[0];

e.addEventListener('click', animate);

function animate() {
    e.classList.add('scanning');
}

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    
    display: flex;
}

.banner{
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #031321;
}

.banner .cover{
    
    position: absolute;
    left: 30px;
    z-index: 3;
    height: 80%;
  width:100vw;
    background-color: #031321;
    transition: left 700ms ease-out 0s;
}

.banner .cover.scanning {
  left: calc(100% - 30px);
}

.banner .scan{
    width: 7px;
    height:100%;

    transition: left 50ms ease-out 0s;
    
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    width: 100%;
    color: white;
    font-size: 3em;
    text-align: center;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="banner">
  <div class="cover">
    <div class="scan">
    </div>
  </div>
    <div class="description">
        Just trying something
    </div>
</div>

This solution uses a cover to the right of the scan with the same background colour as the banner. The cover moves with the scan, so when the scan moves to the right, it reveals the text on the left. It works by clicking on it in this demo, but you can initiate it in JavaScript however is best for you.