← awwwards.skill

Demo 05 · real-time · Three.js

Iaijutsu · one motion

One cut,
at your speed.

Iai is the art of drawing and cutting as a single action. It is not measured in how fast it looks — it is measured in whether anything was wasted. This page performs one, and it only moves while you do.

Scroll to draw

一 · Kamae

The stance costs nothing and decides everything

Before anything moves, the weight settles and the left hand finds the mouth of the scabbard. Nothing here is fast. The whole technique is built so that the fast part can be short.

二 · Nukitsuke

The draw is the cut

There is no separate moment where the blade comes out and then a second one where it is used. The blade leaves the saya already travelling along the line it will finish on. That is the whole idea, and it is why the motion has no corner in it.

三 · Zanshin

The stillness afterwards is part of it

Zanshin is the held awareness after the technique is finished — not a pose for the audience but the part where you are still paying attention. In this page it is the last stretch of scroll, where almost nothing changes and the petals keep falling.

How it is built

A rig, not a model file

There is no .glb here. The figure is a hierarchy of empty transforms — hips, spine, neck, two shoulders, two elbows, two hips, two knees — with tapered boxes hung off them, exactly the way a real rig works, minus the file. Five poses are authored as joint angles and the scroll interpolates between them with a smootherstep, so the draw has no corner where a keyframe sits.

The silhouette does the rest. Ukiyo-e carries a figure on its outline, and an outline needs a fraction of the geometry that a lit character does: what has to be right is the proportion — the topknot, the sleeve, the flare of the hakama, the length of the blade.

The grove is a recursion. One function grows a branch, splits it two or three ways, and stops after five levels; the blossom is a point at every tip. Depth is not lighting, it is air: near trees are drawn in ink, far ones in a wash, and fog fades the furthest into the paper.

Everything on this page is a line, a point or a flat-coloured box. No lights, no shadow maps, no post-processing, no texture files — which is why it starts the moment the script does and holds its frame rate on a phone.

Measured, live

What the frame costs

Read off the renderer while you look at it.

Draw calls
Line segments
Points
Triangles
Textures
Frame

The triangle count is low because almost nothing here is a surface. A grove of cherry trees drawn as lines is cheaper than one lit sphere, and it looks more like a print, which is the point rather than the excuse.

Colophon

Credits, and what this is not

Figure
Bone hierarchy built in code; 5 authored poses
Grove
Recursive branching, seeded so it is the same for everyone
Assets
None. No models, no textures, no images
Renderer
Three.js r185, flat colour, fog for depth
Type
System stacks only — no webfont

This is a drawing of a technique, not a record of one. The poses were authored by eye against the shape iai is described as having, by someone who does not practise it — so treat the sequence as an illustration and not as instruction.

Read the method →