Learning shader effect with Three.js TSL

Gen — Sun, 07 Dec 2025 20:43:21 +0000

After years of building web applications I’d drifted away from artistically driven code; as a former Flash engineer I missed making visuals that move. This project was a quick, focused way to relearn shader math while exploring modern WebGPU tooling.

taotajima.jp

The first time I stumbled onto taotajima.jp I remember sitting there, utterly awestruck — the transition effect felt like a magical, tactile trick on the web. That moment stuck with me, and I knew I wanted to rebuild it with TSL as a learning exercise.

taotajima.jp hover animation

The Anatomy of the Effect

After doing some research I found this excellent write-up, Taotajima.jp WebGL deconstruction. Huge thanks to the author — the breakdown gave me the roadmap I needed to recreate this effect.

Diagonal delay

// enterUniform tweens from 0 1 (vice versa)
const delayValue = clamp(
    enterUniform.mul(6.5).sub(uv().y.mul(2.3)).add(uv().x.mul(1.2)).sub(1.8),
    0.0,
    1.0
  );

This produces a diagonal sweep across the image (bottom-right → top-left). It's used in both texture translation and wavy distortion below.

Texture Translation with Acceleration

const translateValue = enterUniform.add(delayValue.mul(accelUniform));
const imageTranslate = vec2(-0.4, 1.2).mul(translateValue);
const videoTranslate = vec2(-0.4, 1.2).mul(
  translateValue.sub(1.0).sub(accelUniform)
);

Both textures slide in opposite directions with acceleration, which gives the fold a satisfying 'lift and slide' feel.

Wavy Distortion

const waveTimeSpeed = uniform(config.wave.timeSpeed);
const waveAmplitude = uniform(
  new THREE.Vector2(config.wave.amplitude.x, config.wave.amplitude.y)
);
const waveUvScale = uniform(
  new THREE.Vector2(config.wave.uvScale.x, config.wave.uvScale.y)
);
const waveStrength = uniform(
  new THREE.Vector2(config.wave.strength.x, config.wave.strength.y)
);
const distortion = sin(
  sin(time.mul(waveTimeSpeed))
    .mul(waveAmplitude)
    .add(uv().yx.mul(waveUvScale))
).mul(waveStrength);
const xy = distortion.mul(
  pingpong(enterUniform).mul(0.6).add(pingpong(delayValue).mul(0.4))
);

The distortion blends a wobble effect with a position-scaled wave so the fold looks soft instead of a flat translation.

Ripple Effect

// Circle SDF
const Circle = Fn(
  ([position, radius]: [THREE.ConstNode<THREE.Vector2>, number]) => {
    return length(position).sub(radius);
  }
);

const dist = Circle(
  vec2(posFromMouse.x.mul(aspectRatioUniform), posFromMouse.y),
  circleRadius
);
const wave = sin(dist.mul(rippleFreq).sub(time.mul(rippleSpeed)));
const ripple = wave.mul(boundary).mul(fade).mul(rippleAmp).mul(enterUniform);

material.positionNode = positionLocal.add(vec3(0, 0, ripple));

This applies z-axis displacement ripples centered on the hover point.

When you combine all of the above, it actually works! That said, the original still looks so much better — huge respect to the original author.

It works!

The Scroll Sync

The second challenge was syncing smooth scroll with the canvas. Since the canvas needs to scroll in sync with DOM content, using native scroll creates a janky experience, especially on mobile devices.

Janky scroll on mobile

Lenis to the rescue

Lenis gives a reliable, eased scroll value that’s easy to pipe straight into Three.js camera transforms. Using lenis.scroll avoids jankiness and lets the canvas follow the page precisely while keeping smooth motion.

const lenis = new Lenis({
  wrapper: scrollWrapper,  // Scrollable container
  content: scrollContent,  // Content element
  lerp: 0.1,              // Smoothing factor
  syncTouch: true         // Mobile support
});

const animate = (time: number) => {
  lenis.raf(time);
  // Sync camera position with scroll
  camera.position.y = -lenis.scroll;
  renderer.render(scene, camera);
};

renderer.setAnimationLoop(animate);

Smooth(ish) scroll

Closing Thoughts

All in all, this was exactly the kind of satisfying project I needed. A weekend of tinkering with shaders, recreating something that genuinely impressed me, and getting my hands dirty with TSL.

The result isn't perfect, and I'm sure there are plenty of subtle techniques in the original that I haven't uncovered yet, but the learning process was worth every minute.

Thanks for reading through! Happy coding! ✨

Live Demo: taotajima-tsl.pages.dev
Source Code: github.com/zenoplex/taotajima-tsl
Images: pexels
Videos: grok imagine

🎄 Instant Local Translation with Chrome 🌐

Gen — Sat, 14 Dec 2024 14:58:29 +0000

The Translation Challenge

Let's face it, translation services are everywhere. Google Translate, DeepL, Microsoft Translator - you name it.

The cloud is swimming with translation solutions that can handle everything from casual conversations to complex technical documents. But what if we could bring translation directly into your browser, without sending text to a cloud solution? These often rely on sending your text to external servers, introducing delays or privacy concerns.

Now, imagine a solution that works natively within your browser, processing translations faster and more securely without the need to leave your page or rely on the cloud.

Getting started

Enable Language Detector and Translator API on Chrome

You need to enable chrome://flags/#language-detection-api and chrome://flags/#translation-api flags.

I've tested on Chrome Version: 132.0.6834.46.

Code sample

// Small sample without any error handling.
// Currently, it works best when translating from English to other languages, but not other way around.

document.addEventListener('mouseup', async () => {
  const selection = document.getSelection();
  if (!selection || selection.isCollapsed || selection.toString().trim() === '') {
    return;
  }

  const detector = await window.translation.createDetector();
  const results = await detector.detect(selection.toString());
  if (results.length < 1) return;

  // Output detected languages
  console.log(results);

  const targetLanguage = 'ja';
  const sourceLanguage = results[0].detectedLanguage;
  if (sourceLanguage === targetLanguage) return;

  const translator = await window.translation.createTranslator({ sourceLanguage, targetLanguage });
  const result = await translator.translate(selection.toString());
  // Output translated text if available
  console.log(result);
});

Example Implementation with Chrome Extension

I've crafted a simple Chrome extension that utilizing both the detection and the translation API.

Here's how it works: Users can select any text on a webpage, and the extension first uses language detection API to identify the source language. Once detected, the text is passed to the translation API, with the target language predetermined through a popup settings window.

https://github.com/zenoplex/ai-translate-chrome-extension

🛠 Disclaimer

🤔 Not 100% Offline capable

While I said, "Instant local translation", it isn't completely local... yet.

When you first use translation api, it downloads the required language model behind the hood. It's (probably) one-time download, but it means you're not 100% offline from the get-go.

The good news? Once downloaded, it's pretty-fast and (hopefully) totally private. Plus, it works on dynamic content which browser's built-in page translation fails to work.

Conclusion

Although this is currently a Chrome-only feature, we're glimpsing a future where manual internationalization might become obsolete 😁.

Today, the translation api has limited language support. Yet, I hope these technologies will make language become a transparent layer rather than a barrier.

Keep experimenting. Keep pushing boundaries. 🌍🚀

Cheers!

DEV Community: Gen