cursor effect

Hi,

Please add this part of code into the Site Settings >> HTML >> Additional Head HTML:

<script type="module">
import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'

neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16,
  curvePoints: 80,
  curveLerp: 0.5,
  radius1: 5,
  radius2: 30,
  velocityTreshold: 10,
  sleepRadiusX: 100,
  sleepRadiusY: 100,
  sleepTimeCoefX: 0.0025,
  sleepTimeCoefY: 0.0025
})
</script>

Then add this one in the Se=ite Settings >> CSS tab:

#app {
  overflow: hidden;
  touch-action: pan-up;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}

#app h1 {
  --fontSize: 60px;
  --lineHeight: 80px;
  width: auto;
  height: calc(2 * var(--lineHeight));
  line-height: var(--lineHeight);
  margin: calc(50vh - var(--lineHeight)) auto 0;
  font-size: var(--fontSize);
  text-transform: uppercase;
}

#app a {
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

#app canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
}

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi,

I tried but after that, I can't see the cursor effect...there are other things to do?

Hi,

Please note that it will work in a preview or after the publish. It works on my end.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

I tried but only if I add the code of html I'm able to see it (but only in a part, not in total). How can I use this in only one section? because without the original html, it doesn't work (tried with preview, saved and checked in html but nothing)

Hi,

Oh, sorry, forgot to mention the part that assigns the code to the block. Please click on the desired block and add the app into the Block Anchor input. As all the code and script is triggered by the app id that needs to be in the code of the desired block.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Ok now works...but how can I do to use this effect only on one section? because now the section is blocked and don't scroll

Hello Valerio,

Here is a solution, I changed the code a little bit, to correct it.

Please see the screenshots.
Please do not change the code, just copy and paste it.

<script type="module">
import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'


document.addEventListener("DOMContentLoaded", function() {
  neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16,
  curvePoints: 80,
  curveLerp: 0.5,
  radius1: 5,
  radius2: 30,
  velocityTreshold: 10,
  sleepRadiusX: 100,
  sleepRadiusY: 100,
  sleepTimeCoefX: 0.0025,
  sleepTimeCoefY: 0.0025
})
});

</script>

<style> 

#app {
  overflow: hidden;
  touch-action: pan-up;
  color: #ffffff;
  position: relative;

}

#app canvas {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
}

</style> 

Please let us know the result.
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp