TWELVE: six letters who act, and shadows that don't always agree
The story behind TWELVE
Commission Identity site for TWELVE, a fictional international animation festival named for animation’s twelve principles. The identity is its cast: six 3D letters, T W E L V E, who act. Audience: animators, motion designers, art directors and festival-goers. Hard budget: an M1 Air stays silent
Rival casadisolare.com by Unseen (Awwwards Site of the Day, FWA of the Month), with messenger.abeto.co and haoqi.design as references for letters as solid objects
Inspired by Twelve basic principles of animation (Wikipedia)
Built with Three.js (WebGL2) · pmndrs postprocessing · Lenis
Techniques Vertex-shader character rig with analytic normals · acting posed on twos from a deterministic timeline · three gelled lamps with a separate shadow per lamp, baked in wall space · spring-driven E bars · render on demand
Direction Six glossy vinyl-toy letters in Unbounded 900 on a black lacquer riser against a graphite wall; amber, cyan and magenta gels; Instrument Sans for everything else; no sound
Result A work light, a peek, then the lamps snap on and the cast tumbles in one at a time. They settle into the logo and turn to look at your cursor. Scroll and they act out the principles in four acts, line up as the programme, and take a bow at the curtain call, where you can throw them a rose
The Story
In 1981 Ollie Johnston and Frank Thomas wrote down the twelve principles Disney animators used to make drawings feel alive: squash and stretch, anticipation, staging, arcs, timing and the rest. Every animation student still learns them. TWELVE is a festival that doesn’t exist, named after them, and its logo is not a mark. It’s a cast.
The six letters each have a temperament. T is the stiff, proud lead and moves on threes. W is the clown, with the biggest squash and a double-take. The two Es are twins who copy each other a couple of frames late. L is shy and hides behind V. V is the show-off and always overshoots. None of them has a face, so all of the character has to come from timing and body language, the way it does in Pixar’s Luxo Jr.
Three gelled theatre lamps light the wall behind them: amber, cyan and magenta. Each letter blocks each lamp separately, so every letter throws three offset shadows, and the wall shows where the colours were taken away. Block the amber and you see cyan plus magenta. Block all three and you get a cool graphite core. The shadows have temperaments too, and they don’t always copy their letters.
The Take
The page opens on a dark stage and a work light. T’s head peeks in from the wing and pulls back. Then the amber lamp catches with a stutter, the cyan and magenta follow a frame or two later, and the cast arrives in a strict order: T stalks on in three stiff steps, W leaps in from the right and lands squashed flat, the twins come along the back, L shuffles in and hops onto its mark, and V lands with an overshoot. At six seconds they lock into the word, and all six turn to look at your cursor, tops first and bases after. Move fast and they flinch, and L ducks behind V while its shadow stays where it was.
Scrolling moves one stage and one cast through four acts, each tied to principles:
- Act 1, W: squash and stretch, exaggeration and timing. W bounces across the stage under an amber follow spot, and how fast you scroll sets its timing. Scroll slowly and every fourth bounce hangs at the top while W looks round at you.
- Act 2, L and V: anticipation, staging and arcs. Under a moonlight spot, V crouches, then cartwheels a full turn along an arc, leaving a ghost on every frame. L peeks out, winds up, trembles, and leaps back behind V.
- Act 3, the twins: follow-through, overlapping action and secondary action. The Es dance two frames apart while the bars of each E flap a beat behind, and their shadows clap on the fourth and eighth beats.
- Act 4, all six: slow in and slow out, solid drawing and appeal. The cast eases into a group pose with heavy easing, T last, while the camera orbits slowly round them to show their volume.
After the acts the letters line up as the programme. Hover a strand and its letters step forward, and the strand’s name appears on the wall as part of the shadow. At the curtain call the house lights come up and they bow in turn, T last and stiffest. Click to throw a rose. Everyone reacts in character, and W’s shadow catches the rose’s shadow on the wall.
The Tech
One rig, in the vertex shader. Each letter is an extruded glyph with extra subdivisions along its height, and one vertex shader poses it: squash, twist, bend, lean, turn and hop, in that order. Squash keeps the volume roughly constant with a belly in the middle. Twist grows toward the top, so the top of a letter leads a turn and the base follows. Each step multiplies in its own analytic Jacobian, and the normal is transformed by the inverse transpose, so the lighting stays exact in any pose. There are no bones and no skinned meshes: six meshes and a handful of uniforms each.
Posing on twos. The acting runs on a fixed 240 Hz spring simulation that can seek to any time and reproduce it exactly. The letters only read a new pose every second frame at 24 fps, so they hold each pose for a twelfth of a second, like Spider-Verse, while the camera and lights move smoothly at the display rate. T updates on threes, which makes it look stubborn. V goes on ones during its cartwheel. The shadows read the same timeline a little late, which lets a shadow lag its letter, overshoot it or carry on when the letter has stopped.
Three coloured shadows per letter. The shadows aren’t cast by the visible letters. Each letter has a coarse, thin proxy that sits nearer the wall. Each active lamp renders the proxies into its own region of one shared atlas, and a wall-space pass turns that into a light map: for each lamp, a blocker search gives the distance from blocker to wall, the penumbra widens with that distance and toward the top of the caster, and a 16-tap disk filters it at a matching mip level. The stage then reads one texel per pixel. The colour you see on the wall is simply which lamps are blocked there. The lamps sit at different depths and heights, so the coloured fringes shift direction across the word instead of looking like a fixed RGB split.
The Es’ bars are springs. For the twins, the rig bends the three bars of each E up or down independently. Each bar is a damped spring driven by the vertical acceleration of its twin’s dance, with a different frequency and damping for the bottom, middle and top bar. So when a twin lands, the bars flap a beat late and settle, which is follow-through you can watch. The proxies get the same bars, so the shadows flap too.
Render on demand, sized for an M1 Air. The budget was that a fanless laptop stays quiet. On the M4 used for the build, the proxy for that is a frame cost of 2.5 ms or less at a device pixel ratio of 1.5, and every chapter measures about 2.4 to 2.5 ms. The shadows bake at most 12 times a second because the poses only change that often. After three seconds without input, a frame is drawn only when something has changed: a new pose, a shadow bake, a camera move or a fade. Most of the time that means drawing at the acting rate of around 12 frames a second instead of 60. When the tab is hidden, the loop stops.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.