Hallo Leute! Today we will do some interesting stuff with ThreeJS and typography — we will make Kinetic Typography.

There are plenty of cool shots over the internet tagged as #kinetictypography. Here are some of them ↘

To be more specific and make this article shorter we will use only one method — **a text texture on a mesh. **A simple, but wide in its functionality method.

Also, before we start I recommend this article. It’s about the same topic but with a different approach ↘

Kinetic Typography with Three.js | Codrops

Kinetic Typography may sound complicated but it’s just the elegant way to say “moving text” and, more specifically, to…

tympanus.net

Set up Environment

React

We will use ThreeJS + React. So, first, create your app using create-react-app. Open a folder where you want to have your new project, then ↘

npx create-react-app my-app

Then drop the project folder into your IDE app. I’m using VS Code.

facebook/create-react-app

Create React apps with no build configuration. Create React App works on macOS, Windows, and Linux. If something…

github.com

Three JS

Then install Three JS ↘

npm i three

Now we are ready to go.

#typography #3d #react #threejs #kinetic