#canvas-wrapper.canvas(aria-label='neumorphism')

* {
  user-select: none;
}

body {
  height: 100vh;
  background-color: hotpink;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 
 * NEUMORPHISM TYPO
 * Made with ThreeJS - Enjoy!
 *
 * Experimenting with neumorphism in typography.
 * Use cursor to move around the shiny effect. 
 * On mobile touch + drag screen.
 *
 * #034 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_rocks
 */

const colorBg = 'hotpink'; // #ff69b4
const colorTypo = '#ff49a4'; // dark pink

const nearDist = 0.1;
const farDist = 10000;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  nearDist,
  farDist
);
camera.position.z = Math.round(farDist/20);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(colorBg);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#canvas-wrapper").appendChild(renderer.domElement);

const light = new THREE.DirectionalLight(0xffdffd, 1);
light.position.set(-15, 0, 70);
scene.add(light);

// CREATE TYPOGRAPHY
const group = new THREE.Group();
const typoLoader = new THREE.FontLoader();
const createTypo = font => {
  const word = `neu
morph
ism`;
  const typoSize = 120;
  const typoHeight =  Math.round(typoSize / 4);
  const typoProperties = {
    font: font,
    size: typoSize,
    height: 0,
    curveSegments: 20,
    bevelEnabled: false,
    bevelThickness: 0.1,
    bevelSize: 0.5,
    bevelOffset: 0,
    bevelSegments: 10
  };
  const textMesh = new THREE.Mesh();
  textMesh.geometry = new THREE.TextBufferGeometry(word, typoProperties);
  textMesh.material = new THREE.MeshStandardMaterial({
    color: colorBg,
    emissive: colorTypo,
    roughness: 0,
    metalness: 1,
    // side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.7,
  });
  
    textMesh.geometry.computeBoundingBox();
  textMesh.geometry
    .boundingBox
    .getCenter(textMesh.position)
    .multiplyScalar(-1);
  
  textMesh.matrixAutoUpdate = false;
  textMesh.updateMatrix();

  group.add(textMesh);
};
typoLoader.load(
  'https://threejs.org/examples/fonts/helvetiker_bold.typeface.json',
  createTypo
);
scene.add(group);

// CREATE PART OF THE MOUSE/TOUCH OVER EFFECT
let mouseX = 0;
let mouseY = 0;
const mouseFX = {
  windowX: Math.round(window.innerWidth / 2),
  windowY: Math.round(window.innerHeight / 2),
  coordinates: function(cX, cY) {
    mouseX = cX - this.windowX; 
    mouseY = cY - this.windowY; 
  },
  onMouseMove: function(e) {
    mouseFX.coordinates(e.clientX, e.clientY);
  },
  onTouchMove: function(e) {
    const touchX = e.changedTouches[0].clientX;
    const touchY = e.changedTouches[0].clientY;
    mouseFX.coordinates(touchX, touchY);
  }
};
document.addEventListener('mousemove', mouseFX.onMouseMove);
document.addEventListener('touchmove', mouseFX.onTouchMove);

// RENDERING
const render = () => {
  const ct = 0.05;
  camera.position.x += (mouseX - camera.position.x) * ct;
  camera.position.y += (mouseY - camera.position.y) * ct;
  camera.lookAt(scene.position);

  const r = Date.now() * 0.0018;
  const rot = Math.sin(r) * 0.12;
  group.rotation.x = rot*1.4;
  group.rotation.y = rot;

  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
};
render();