Introduction 00:00

As you might already know, I get a lot of inspiration from games. And I recently played one of the best games of 2025, Clair Obscur. Among the many effects in the game, some of the most memorable ones involve petals, and it starts right from the title screen.

The initial lesson was targeted toward rebuilding the exact same title screen, but it felt boring and was lacking interaction. Fortunately, I remembered one of Unseen’s beautiful experiments, and it was just perfect for the theme.

I don’t know how their version works, but in this lesson we’re going to learn how I would do it with TSL.

Setup 01:40

The starter already contains the following:

• OrbitControls to rotate around
• The WebGPURenderer with the RenderPipeline to add a bloom pass
• An instance of the Inspector
• Some lighting with shadows
• A custom title inspired by the actual Clair Obscur title.
• In src/utils.js, the same randomSphericalPosition we wrote in the Galaxy TSL lesson

Petal instances 03:15

For the petals, we’ll use instances so that we can have thousands of petals with good performance. We can’t use sprites because we want them to rotate in the wind, but also because they’ll be slightly curved.

Create a Petals section after the Post Processing section:

/**
 * Petals
 */

Create count variable:

// Setup
const count = 100

We start at 100 so that it’s easy to distinguish them, but we will add a lot more later.

Create the geometry, and start with a simple PlaneGeometry for now:

// Geometry
const geometry = new THREE.PlaneGeometry(1, 1)

Now for the material, since we don’t need something too realistic, we can use the cheapest material that supports light shading, MeshLambertNodeMaterial, and set its side to THREE.DoubleSide, right away:

// Material
const material = new THREE.MeshLambertNodeMaterial({
    side: THREE.DoubleSide,
})

For the mesh, we’ll use the Three.js Mesh class, set its count property to count, and add it to the scene:

// Mesh
const mesh = new THREE.Mesh(geometry, material)
mesh.count = count
scene.add(mesh)

Right now, we have 100 planes on top of each other.

We’ll move, rotate, and scale the petals in positionNode.