Style Gallery.

Codrops 원본

Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL

텍스트 · MIT

텍스트 더 보기
ORIGINAL PREVIEW
Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기 새 탭

SOURCE FILES

원본 코드 읽기

5개 파일

수집한 원본 소스와 실행 안내를 함께 제공합니다.

css/base.css
파일 저장 

*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 12px;
  --color-text: #313131;
  --color-bg: #fff;
  --color-link: #313131;
  --color-link-hover: #313131;
  --page-padding: 1.5rem;
}

body {
  margin: 0;
  max-height: 100svh;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: underline;
  color: var(--color-link);
  outline: none;
  cursor: pointer;

  &:hover {
    text-decoration: none;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid red;
      background: transparent;
    }
  }
}

.frame {
  padding: var(--page-padding);
  display: grid;
  z-index: 1000;
  position: relative;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  grid-template-columns: auto auto;
  grid-template-areas:
    'title'
    'back'
    'archive'
    'github'
    'demos'
    'tags'
    'sponsor';

  #cdawrap {
    justify-self: start;
    grid-area: sponsor;
  }

  a,
  button {
    pointer-events: auto;
  }

  .frame__title {
    grid-area: title;
    font-size: inherit;
    margin: 0;
  }

  .frame__back {
    grid-area: back;
    justify-self: start;
  }

  .frame__archive {
    grid-area: archive;
    justify-self: start;
  }

  .frame__github {
    grid-area: github;
  }

  .frame__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__demos {
    grid-area: demos;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  @media screen and (min-width: 53em) {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    grid-template-columns: auto auto auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas:
      'title back github archive demos'
      'tags tags tags sponsor sponsor';

    .frame__tags {
      align-self: end;
    }

    .frame__demos,
    #cdawrap {
      justify-self: end;
      text-align: right;
      max-width: 300px;
    }
  }
}
index.html
파일 저장 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Interactive Text Effect with Three.js & GLSL | Codrops</title>
  <meta name="author" content="Paola Demichelis for Codrops" />
  <link rel="shortcut icon" href="https://tympanus.net/favicon/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/base.css" />
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js"
      }
    }
  </script>
  <script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>

<body>
  <main>
    <header class="frame">
      <h1 class="frame__title">Interactive Text Effect with Three.js & GLSL by <a
          href="https://www.instagram.com/pde.me/">Paola Demichelis</a></h1>
      <a class="frame__back" href="https://tympanus.net/codrops/?p=87934">Read the tutorial</a>
      <a class="frame__github" href="https://codepen.io/Paola-Demichelis-the-lessful/pen/ByaNGod">Code</a>
      <a class="frame__archive" href="https://tympanus.net/codrops/demos/">All demos</a>
      <nav class="frame__tags">
        <a href="https://tympanus.net/codrops/demos/?tag=typography">#typography</a>
        <a href="https://tympanus.net/codrops/demos/?tag=three-js">#three.js</a>
      </nav>
    </header>
  </main>
  <script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>

  <script type="module">
    import * as THREE from 'three';

    let texture = 'assets/happydays.png';
    let shadow_texture = 'assets/happydays_shadow.png';

    var scene = new THREE.Scene();

    let aspect = window.innerWidth / window.innerHeight;
    let camera_distance = 8;
    const camera = new THREE.OrthographicCamera(
      -camera_distance * aspect,
      camera_distance * aspect,
      camera_distance,
      -camera_distance,
      0.01,
      1000
    );

    camera.position.set(-0, -10, 5);
    camera.lookAt(0, 0, 0);

    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    scene.background = null;

    /////////////////////////////////////////////
    const geometry_sphere = new THREE.SphereGeometry(0.25, 32, 16);
    const material_sphere = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      transparent: true,
      opacity: 0,
      depthWrite: false
    });
    const sphere = new THREE.Mesh(geometry_sphere, material_sphere);
    scene.add(sphere);

    /////////////////////////////////////////////
    var geometry_hit = new THREE.PlaneGeometry(500, 500, 10, 10);
    const material_hit = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 0,
      depthWrite: false
    });
    var hit = new THREE.Mesh(geometry_hit, material_hit);
    hit.name = "hit";
    scene.add(hit);

    //////////////////////////////////////////////
    var geometry = new THREE.PlaneGeometry(15, 15, 100, 100);
    let shader_material = new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { type: "t", value: new THREE.TextureLoader().load(texture) },
        uDisplacement: { value: new THREE.Vector3(0, 0, 0) }
      },

      vertexShader: `
  varying vec2 vUv;
  uniform vec3 uDisplacement;
  
float easeInOutCubic(float x) {
  return x < 0.5 ? 4. * x * x * x : 1. - pow(-2. * x + 2., 3.) / 2.;
}

float map(float value, float min1, float max1, float min2, float max2) {
  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}  

  void main() {
   vUv = uv;
   vec3 new_position = position; 
 
    vec4 localPosition = vec4( position, 1.);
    vec4 worldPosition = modelMatrix * localPosition;

    float dist = (length(uDisplacement - worldPosition.rgb));
    float min_distance = 3.;

    if (dist < min_distance){
      float distance_mapped = map(dist, 0., min_distance, 1., 0.);
      float val = easeInOutCubic(distance_mapped) * 1.; 
      new_position.z +=  val;
    }
    
   
   gl_Position = projectionMatrix * modelViewMatrix * vec4(new_position,1.0);
  }
`,
      fragmentShader: ` 
    varying vec2 vUv;
    uniform sampler2D uTexture;
    void main()
    {
       vec4 color =  texture2D(uTexture, vUv); 
       gl_FragColor = vec4(color) ;    
    }`,
      transparent: true,
      depthWrite: false,
      side: THREE.DoubleSide
    });

    var plane = new THREE.Mesh(geometry, shader_material);
    plane.rotation.z = Math.PI / 4;
    scene.add(plane);

    //////////////////////////////////////////////////////
    let shader_material_shadow = new THREE.ShaderMaterial({
      uniforms: {
        uTexture: {
          type: "t",
          value: new THREE.TextureLoader().load(shadow_texture)
        },
        uDisplacement: { value: new THREE.Vector3(0, 0, 0) }
      },

      vertexShader: `
  varying vec2 vUv;
  varying float dist;
  uniform vec3 uDisplacement;

  void main() {
   vUv = uv;
   
   vec4 localPosition = vec4( position, 1.);
   vec4 worldPosition = modelMatrix * localPosition;
   dist = (length(uDisplacement - worldPosition.rgb));
   
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
  }
`,
      fragmentShader: ` 
    varying vec2 vUv;
    varying float dist;
    uniform sampler2D uTexture;
    
    float map(float value, float min1, float max1, float min2, float max2) {
  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}  

    void main()
    {
       vec4 color =  texture2D(uTexture, vUv); 
       float min_distance = 3.;

       if (dist < min_distance){
        float alpha = map(dist, min_distance, 0., color.a , 0.);
        color.a  = alpha;
        }
       
       gl_FragColor = vec4(color) ;    
    }`,
      transparent: true,
      depthWrite: false,
      side: THREE.DoubleSide
    });

    var plane_shadow = new THREE.Mesh(geometry, shader_material_shadow);
    plane_shadow.rotation.z = Math.PI / 4;
    scene.add(plane_shadow);

    //////////////////////////////////////////////////

    window.addEventListener("resize", onWindowResize);

    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    window.addEventListener("pointermove", onPointerMove);

    function onPointerMove(event) {
      pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
      pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

      raycaster.setFromCamera(pointer, camera);
      const intersects = raycaster.intersectObject(hit);

      if (intersects.length > 0) {
        sphere.position.set(
          intersects[0].point.x,
          intersects[0].point.y,
          intersects[0].point.z
        );

        shader_material.uniforms.uDisplacement.value = sphere.position;
        shader_material_shadow.uniforms.uDisplacement.value = sphere.position;
      }
    }

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

    render();

    function onWindowResize() {
      aspect = window.innerWidth / window.innerHeight;

      camera.left = -camera_distance * aspect;
      camera.right = camera_distance * aspect;
      camera.top = camera_distance;
      camera.bottom = -camera_distance;

      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

  </script>
</body>

</html>
함께 쓰는 파일 3개 보기
Original author attribution실행 안내·자료
파일 저장 

Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL
Original author: Paola Demichelis
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.
Media credits and license evidence실행 안내·자료
파일 저장 

undefined
Bundled dependency licenses실행 안내·자료
파일 저장 

https://cdn.jsdelivr.net/npm/three@0.174.0/LICENSE
The MIT License

Copyright © 2010-2025 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

BEHIND THE EXAMPLE

이 장면을 만드는 원리