The vase in the sun
Cards, 3D, Physics, Hover, Transitions
NewFree
All components
The cake slice rating
A pastry shop is rated with the slices of a fraisier: the cake stands on a porcelain cake stand, seen a little from above, cut into five. Pointing at a slice raises it and the ones before it, drawing them out a touch, and the cuts show the layers: sponge, cream with strawberries, pink glaze. Once the rating is picked, a cake server slides under those slices one at a time, lifts them and serves them on the plate next to the stand, each in its place, with crumbs falling and a streak of cream left on the china. The rating is how much cake ends up on your plate; a lower one takes a few slices back.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The cake slice rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a rating given with the slices of a strawberry fraisier on a cake stand, seen from a little above. Pointing at
a slice raises it and the ones before it, a little out of the cake, and the cut sides show the layers: sponge,
cream, strawberries. Picked, a cake server slides under those slices one by one and serves them on the plate
next to the stand, with crumbs and a streak of cream; a lower rating takes some back. Under the cake there are
five real radio buttons; cake, stand, plate and server are drawn by the script, in 3D, on a canvas -->
<form class="cake" data-cake onsubmit="return false">
<p class="cake__ask" id="cake-ask">How was your slice of fraisier?</p>
<fieldset class="cake__row" aria-labelledby="cake-ask" data-row data-autoclic>
<canvas class="cake__art" aria-hidden="true" data-art></canvas>
<div class="cake__choices" data-choices></div>
</fieldset>
<p class="cake__word" aria-hidden="true"><span data-word>Choose a slice</span></p>
<p class="cake__thanks" role="status" aria-live="polite" data-thanks></p>
</form>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
37 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The cake slice rating” from Animorio and fit it into my siteWhat it does
On a white background the question How was your slice of fraisier?, in a soft serif type; below it, on the left, a fraisier on a white porcelain cake stand with a gold line, seen a little from above: sides banded with golden sponge and cream, strawberry halves standing all round with their cut face out, the circle of pink glaze cut into five wedges, each with a swirl of cream and a whole strawberry. On the right an empty plate with a gold rim, in front on the table a steel cake server with a walnut handle. Lower down, in grey italics, Choose a slice. Moving over the cake, the slice pointed at and the ones before it rise one after the other and slide out a little, on a spring that settles them with a small bounce; in the cuts that open up the layers show: the sponge with its holes, cream with cut strawberries, the second layer, the glaze. Below reads the word for the rating, Not my taste, Pleasant, Lovely, Delicious or Heavenly, in italics, fuller and softer the higher the rating. On a pick the slices settle and the server rises from the table: it goes round the cake, slides under the first slice of the rating (a few crumbs fall on the stand), lifts it, carries it over the plate and sets it down in the same place it had in the cake; then it slides out and leaves on the china a streak of cream that curls. So for every slice, brisker the more slices there are to serve, then the server goes back to lie on the table. On the plate the cake comes together bit by bit: the rating reads as the share of cake served, and with Heavenly the stand is left empty. Below appears Thank you. We’ll tell the pastry chef., and at every change of mind Changed to followed by the new rating: a higher rating serves the missing slices, a lower one takes some back to the stand, from the last. A finger goes round the cake and the rating falls where it lifts; with the keyboard the arrows raise the slices at once and pick after a short pause, Enter picks straight away.
How it works
A small 3D painter on a canvas
The world has x to the right, y up and z towards whoever looks; the camera looks down at an angle whose sine is 0.42, without perspective: a point goes on the page at (x, −y·cos + z·sin) and its nearness is y·sin + z·cos. Every slice is a solid wedge: a round side in pieces, the two cuts and the top. A wedge is convex, so drawing it right only takes keeping the faces turned to the camera (normal dot camera direction above zero); between objects it is painted from the farthest to the nearest, by the middle of each slice. Every face is lit by its normal (Lambert, never black) and stroked with its own colour too, so the page’s white never shows between two faces.
Layers and strawberries where the cake is cut
Side and cuts are split into the same layers (BANDS): sponge, cream, sponge, cream, glaze; the sponge is darker outside, where it is baked, and lighter in the cut. The strawberries and the holes in the sponge are made once for every cut line, by a repeatable chance, and the two slices that share it draw them the same, each on its own side. On the side the strawberry halves are drawn on the real cylinder (the angle grows by u/R), so they narrow as they turn away. A cut is not drawn while the slice next to it sits against it: the two slices are checked for where they put the same point of the cut.
Slices on springs
Every slice has four damped springs: how far it is raised (LIFT), how far it is drawn out, how far it tips and how much it rocks, with the stiffness and damping of SPRING. The slices pointed at start one after the other (STAGGER) from the first, and settle back from the last. While the server carries a slice, its middle’s acceleration is measured on GSAP’s ticker and given as a push to its tip and rock: the slice swings because the server starts and stops, not because the timeline says so. The step is 1/240 of a second, with the frame capped at 1/30, and once all is still the ticker is removed.
The server at work
For every slice the way in is worked out: through the round side, turned up to 30 degrees towards the front or the back (so the handle never leaves the drawing), with the blade under the middle of the slice and its heel at the edge, and the point where the tip is just outside. A GSAP timeline brings it there on an arc, slides it under (crumbs), lifts the slice, carries it to the plate on an arc, sets it down (a small bounce, more crumbs) and slides it out with a slight curve: behind it stays a streak of cream, a ribbon drawn on the plate that grows with it and thins at both ends. The blade is painted just before the slice on it, the handle by its own nearness.
The rating as the share of cake served
The slices below the rating are on the plate, the others on the stand, each in the place it has in the cake. Every time a slice is done, the server looks at what is missing: first the slices to serve, from the first; then the ones to take back, from the last; then it goes back to the table. So changing your mind halfway breaks nothing: the new rating counts from the next slice. The more slices to move, the brisker the server (SERVE), and taking them back is quicker than serving them. The crumbs are particles with gravity that bounce on the floor under them (stand, plate or table), then fade.
Fingers, keys, the preview
Over the drawing lie five real radio buttons, see-through, in a fieldset tied to the question: the arrows raise the slices and pick after 0.6 seconds (a gsap.delayedCall), Enter and Space pick at once, and keyboard focus draws a ring round the whole drawing. The slice under the pointer comes from the angle round the nearer centre, stand or plate, on the plane halfway up the cake; a finger goes round the cake (touch-action: pan-y) and the rating falls where it lifts. A click from a script (detail 0, the library’s preview) is a whole round: it runs over all the slices, serves Delicious, takes back down to Pleasant and puts the whole cake back on the stand.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABELS | script.js | ['Not my taste', 'Pleasant', 'Lovely', 'Delicious', 'Heavenly'] | The word for each rating, from the lowest to the highest (and how many slices the cake is cut into: 3 to 6). |
START | script.js | 0 | The slices already on the plate when the page opens (0 = the whole cake on the stand). |
LIFT | script.js | 7 | How high the slices pointed at are raised, in pixels (they slide out one and a half times as far). |
SPRING | script.js | [240, 0.46] | The slices’ spring: how stiff it is and how much it is held back (lower bounces more). |
SERVE | script.js | 1 | The pace of the cake server: 1 is the normal one, 2 twice as fast. |
CRUMBS | script.js | 8 | How many crumbs fall when the server sets a slice down (a few less when it slides under one). |
STAGGER | script.js | 0.035 | The time between one slice and the next as they are raised, in seconds. |
When to use it
To ask how a cake was on a pastry shop’s or a café’s website, for reviewing a dessert ordered for delivery, for rating a recipe on a food blog, for the verdict on a restaurant’s dessert menu: wherever the rating is about something to eat and stars would feel anonymous.
On phones
The drawing narrows with the screen, 358 pixels at 390, with the same cake, the same server and the same crumbs. A finger goes round the cake and the slices rise under it; the rating falls where it lifts. Up and down the page still scrolls (touch-action: pan-y). A tap on a slice picks straight away and the server starts serving.
With reduced motion
No springs, no crumbs and no server in flight: the slices pointed at stay still, and once the rating is picked each slice fades from the stand and fades in already on the plate, with its streak of cream; the server stays on the table. The word and the thanks change in a fade.
Pitfalls
- With the server coming straight in towards the middle, for the left and right slices the handle left the drawing by almost thirty pixels. Now the server comes in turned up to 30 degrees towards the front or the back, and its starting point is worked out so the tip is just outside the slice.
- On a low stand the platter hid the whole stem: seen from above, the platter’s front edge drops further than the stem is tall. The stand is now 34 high and 52 wide, like a real cake stand, and the stem shows.
- Raised slices slid out by little more than three pixels and the cuts did not show the layers: now they slide out one and a half times as far as they rise.
- The streak of cream under a slice served from the front ran straight towards the viewer and shrank into a speck: now the server slides out with a slight curve and the streak follows it.
- The round side made of eight pieces per slice showed vertical stripes of light: now there are thirteen.
- The first preview round lasted 15 seconds: taking slices back is now brisker than serving them, and the whole round takes about 13.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 19 KB; the libraries: GSAP 28 KB.
Testing
Tested on 17 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
