🎨 Showcase — “Lenticular Cards”

Initial Context

Showcase Goals

The goal wasn’t to create something complex, but rather to turn a simple idea into a digital art piece. I wanted to explore:

this.material = new THREE.ShaderMaterial({
  uniforms: {
    u_mix: { value: 0 },
    u_texture1: { value: tex1 },
    u_texture2: { value: tex2 },
    u_time: { value: 0 },
    u_dust: { value: 0 },
  },
  fragmentShader: `
    uniform sampler2D u_texture1;
    uniform sampler2D u_texture2;
    uniform float u_mix;
    varying vec2 vUv;

    void main() {
      vec4 t1 = texture2D(u_texture1, vUv);
      vec4 t2 = texture2D(u_texture2, vUv);
      gl_FragColor = mix(t2, t1, u_mix);
    }
  `
});

this.container.addEventListener("mousemove", (e) => {
  const rect = this.container.getBoundingClientRect();
  const x = (e.clientX - rect.left) / rect.width;
  const y = (e.clientY - rect.top) / rect.height;

  this.targetRotationY = (x * 2 - 1) * 0.3;
  this.targetRotationX = -(y * 2 - 1) * 0.15;
  this.targetMix = (x + 1.0) / 2.0;
});

✨ Adding Magic — Dust & Vintage Look

float dustNoise(vec2 uv, float time) {
  float n = random(uv * 20.0 + time * 0.5);
  n += random(uv * 40.0 - time * 0.8) * 0.5;
  return smoothstep(0.4, 0.8, n);
}

void main() {
  vec4 color = mix(texture2D(u_texture1, vUv), texture2D(u_texture2, vUv), u_mix);
  float dust = dustNoise(vUv, u_time);
  vec3 dustColor = vec3(1.0, 0.972, 0.78);
  color.rgb = mix(color.rgb, dustColor, u_dust * dust);
  gl_FragColor = color;
}

tl.to(card.material.uniforms.u_dust, { value: 1, duration: 0.4 })
  .to(card.material.uniforms.u_mix, { value: 0, duration: 0.3 }, "<")
  .add(() => card.updateTextures(img1, img2))
  .to(card.material.uniforms.u_dust, { value: 0, duration: 1.2 });

💭 Reflection