Study 06
Grasset
Grasset puts live, generative content where web pages have used pre-made motion graphics, and uses it to bring back the ornate, panelled forms that modern web design left behind. It rebuilds one of Eugène Grasset’s calendar plates as an instrument: every panel plays, and three 3D plants turn through the four seasons.
The idea
The study’s claim is that the web no longer has to choose between motion and ornament. Where a page would once have carried a pre-made motion graphic, Grasset carries generative content instead.
Generative content in place of motion graphics. Web motion has mostly been made in advance: a loop, a video, a scripted transition that plays the same way every time. Here every moving surface is computed live in the browser. It answers to touch, to the season, to sound if you allow it, and it never plays the same way twice.
Older forms, made live. There is a running debate about where web design goes next, and most answers rehash the same modern style: flat colour, a strict grid, white space, a clean sans serif. That style won partly because it was what early browsers could carry. Ordinary laptops and phones can now draw live graphics and 3D in the page. So the denser, more decorative forms the modern style replaced are practical again: the ornamented frame, the illustrated border, the panelled page. They can also be alive rather than static.
Grasset as the test case. His calendar plates are the opposite of modern web taste. Every surface is decorated, the content sits inside an ornamental frame, and the frame matters as much as what it holds. This study rebuilds that frame as the interface itself.
The aim is to break the hold the modern sensibility has had on the web, rather than refine it once more: to show that ornament and generative motion can make a page people want to play with.
What sets it apart
What makes the piece unusual is that the ornament does the work: it is the content, the motion and the controls at once.
- The ornament is the interface. You play the piece by tapping its decoration: a border, a tile, a rosette, the capital. The controls sit inside the frame too, the controller in the centre panel and the season buttons in a column.
- Generated, not pre-made. There are no video files or canned animations. The synths, borders, tiles and rosettes are drawn live, and the leaves that fall in autumn are the tree’s own leaves letting go.
- Time as content. The seasons change the state of the whole page: what grows, what falls, the light, the colour. They aren’t a scripted sequence that plays and ends.
- Print and 3D in one picture. The plants are real 3D models painted and inked to sit in the plate like lithograph illustrations, beside a printed illustration and vector ornament, so you can’t see where one medium stops.
- Restraint inside density. A frame this ornate could easily be loud. Its colour is held to three harmonised inks, laid as tints on a white page and turning with the season, so it stays calm and readable.
- Alive when left alone. Untouched, the synths drift on their own, so the page keeps changing without you, as a living picture rather than a page waiting for input.
- Open and ordinary. It runs in any modern browser, on a laptop or a phone, as one page with no app or plugin.
What plays
Every part of the frame is live, and every part changes when you tap it. The four the controller drives are marked as its targets.
| Part | What it does | How you play it |
|---|---|---|
| Synth I top band, left column | A square synth after cross-stitch, lattice and quilt blocks, three blocks across the top and three stacked down the column, with diamonds laid over the column. 9 modes: Stitch, Fret, Compartiment, Lattice, Nested, Arc & Check, Star Block, Circles, Chaos Engine. | Tap it; controller target I |
| Synth II side panels | A visual synth after the EYESY video synthesiser, running behind the branch as one panel seen either side of the window. 12 modes, from Bubble Wrap to Chaos Engine. | Tap it; controller target II |
| Borders the bands between panels | Animated band patterns: Comb, Stripes, Sawtooth, Drops, Checker, Crown, Pickets, Flames. Rave gives each band a different pattern and swaps them on every beat. | Tap a band; controller target Borders |
| Tiles 2×2 block, single tile, diamonds | Square tiles after Garneri’s L’Ornato. The block and the single tile always show different variants of the same family. | Tap a tile; the slider at the foot of the left column morphs the square |
| Rosettes on the vase | Four flower plates after Cusack’s Freehand Ornament: Hearts, Ribbons, Quatrefoil, Lily cross. They open and close with the season. | Tap a rosette; controller target Flowers |
| Beads on the vase | A row of beads that steps along with the beat. | Tap them to send a beat |
| Capital top of the left column | An Ionic capital whose volutes are logarithmic spirals. | Tap it to step the spiral’s ratio |
| Plants aspen, branch, grass | Three 3D models that turn through the seasons. | The season buttons |
The seasons
Four buttons in the right column (blossom, sun, leaf, snowflake) turn the whole frame through the year. The study opens in summer, and each change goes the short way round, about a season every 1.4 seconds.
| Plants | The frame | |
|---|---|---|
| Spring | The aspen hangs catkins and comes into young leaf; the branch puts out fresh leaves and pink plumes; the grass is short and new. | Sage, with violet and plum; highlight is rose |
| Summer | Full leaf on the aspen and branch; the grass at full height. | Ochre, with teal and lavender; highlight is lime |
| Autumn | The aspen goes gold and drops its own leaves, which fall fast and are gone in about a second, then regrow so the tree never goes bare too early; the branch turns vermilion and rust; the wind picks up. | Rust, with teal-green and blue; highlight is rust |
| Winter | The aspen is bare, with snow settling only on surfaces that face up; the branch keeps its dead leaves, as oak and beech do, and its plumes dry where they stand. | Slate, with brick red and olive; highlight is cobalt |
The rosettes on the vase open and close with the season too, and every change crossfades rather than cuts.
Colour
The frame is printed in three inks on a white page, as a split-complementary harmony: the season’s own colour and the two hues either side of its opposite. The season’s colour takes the frame and its line, the second hue the synths’ main figures and the vase’s flowers, and the third the tiles, borders and lighter figures.
Stronger colour comes in three places:
- The plants, in deep painted ramps for each season.
- The bison in the arched window, a full-colour illustration in the place where Grasset puts his panel picture.
- One highlight colour for whatever you can touch: the chosen tab and pressed effects, slider knobs and fills, the chosen season button. It changes with the season, from rose to lime to rust to cobalt, and text on it switches dark or light to stay readable.
The frame is outlined in one ink: the pediment and the ledge at the foot each carry a single unbroken contour, and the capital is drawn in the same line. The Tone button in the controller offers other palettes: one-colour seasons, analogous and triad harmonies, grey, sepia, indigo, verdigris, and a full folk palette of vermilion, gold, ivory and cobalt.
Playing it
There are two ways in: tap the frame itself, or use the controller at the foot of the blank centre panel.
- Tap the frame. Every part changes when tapped; the synths step to their next mode.
- The controller. Pick what you’re playing (I, II, Flowers, Borders), then one of four tabs. Mode steps through the modes. Shape has five sliders: for Synth I these are Grid, Motif, Rings, Colour and Speed; for Flowers, Petals, Width, Heart, Spin and Centre; for Borders, Speed, Height, Spacing, Colour and Wobble. Colour steps the foreground and background colours, or switches the palette or the Tone. Effect has Flash, Shuffle, Trails, Pulse, Still and Listen.
- Now Playing. The dark box under the bison shows the season and both synths’ modes. Pressing it outlines the parts the controller is playing.
- Left alone. After 15 seconds untouched, the synths start to drift on their own: their sliders sway and their mode changes every 14 seconds or so. Their names are marked with a ~ while they drift.
- Keys. ← → change mode, Space flashes, R shuffles.
- Listen. Lets the beat follow sound from your microphone. It only starts when you press it, and nothing is recorded or sent.
Settings are remembered in your browser. With reduced motion turned on, changes apply instantly instead of animating.
How it is made
The study is one page plus three models, 2.9 MB in all. It is built from an SVG export of the Illustrator artwork, so every live part sits on the drawing’s own 800-unit grid and the frame scales as one piece on any screen.
- The frame and its live parts: SVG and canvas, drawn in the page’s own JavaScript. No framework.
- The plants: three Blender models (aspen, branch, grass), exported as compressed glTF and drawn with three.js. A painted shader reproduces the Blender material’s colour ramp, the ink outlines are drawn as inverted shells, and each camera matches its Blender camera, so every plant sits exactly where its painting sat.
- Fallbacks: the original paintings of the three plants show while the models load, and stay if the browser can’t draw 3D. A model that fails to load is retried, and the paintings return if the graphics card drops out.
- Outside the page: three.js and its Draco decoder come from jsDelivr, pinned at version 0.169.0, and the type is IBM Plex Mono from Google Fonts.
Credits
- Frame: after Eugène Grasset’s calendar plates.
- Tiles: after Garneri, L’Ornato.
- Rosettes: after Cusack’s Freehand Ornament.
- Synth II: after the EYESY video synthesiser by Critter & Guitari.
- Capital’s spiral: after Paynter (1921), Fig. 152.
- Controller: after the one on tristan.design.