The masking tape nav
Navigation, SVG, 3D, Hover
NewFree
All components
The room card that stands up
The card of a room in a small hotel, with the room drawn as an architect’s plan: black walls, bed, desk, armchair, bathroom, the swing of the door and the patch of sun from the window. With the pointer over it (or the focus, or a tap) the plan tips back and turns, the walls rise on a spring and the furniture after them, and the room stands up in axonometric with the two near walls cut low like a model. Across the drawing the pointer moves the sun and the hour; choosing another room every wall and every piece of furniture slides to its place in the new one, at the same scale.
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 room card that stands up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a room in a small hotel, with the room drawn as an architect's plan: black walls, the bed, the
desk, the bathroom, the swing of the door and the patch of sun from the window. With the pointer over it (or
the focus, or a tap) the plan tips back and turns, the walls rise out of it and the furniture after them,
and the room stands up in axonometric, the two near walls cut low so you can see in. Moving across the
drawing moves the sun. Choosing another room, every wall and every piece of furniture slides to its new
place. The drawing is projected and drawn by the script at every frame -->
<article class="room" aria-labelledby="room-name" data-room>
<button class="plan" type="button" aria-pressed="false" data-plan data-autoclic>
<svg class="plan__svg" aria-hidden="true" data-svg></svg>
<span class="plan__view" aria-hidden="true" data-view>Plan</span>
<span class="plan__sun" aria-hidden="true" data-sun-label>Sun at 10:30</span>
<span class="sr" data-plan-label>Show the room in 3D</span>
</button>
<div class="info">
<div class="info__head">
<h2 class="info__name" id="room-name" data-name>Garden double</h2>
<p class="info__price"><span data-price>€180</span><span class="info__night"> / night</span></p>
</div>
<p class="info__facts"><span data-area>22</span> m² · <span data-guests>Sleeps 2</span> · <span data-outlook>Window on the garden</span></p>
<div class="kinds" role="radiogroup" aria-label="Room" data-kinds></div>
<a class="book" href="#room-name" data-book>
<span class="book__word">Check dates</span>
<svg viewBox="0 0 18 12" aria-hidden="true"><path d="M1 6h15M11.5 1.5 16 6l-4.5 4.5" /></svg>
</a>
</div>
<p class="sr" aria-live="polite" data-live></p>
</article>
</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.
47 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 room card that stands up” from Animorio and fit it into my siteWhat it does
On a white background a white card 340 pixels wide, with a grey hairline around it. At the top, on a warm grey ground, the room drawn as an architect’s plan: the cut walls filled black, the window in the back wall as a white opening, the bed with its two pillows and the fold of the duvet, the desk, the armchair, the bathroom in the front left corner with its shower tray and basin, and the dashed swing of the door; on the floor the amber patch of sun coming in from the window. Above, small, PLAN on the left and SUN AT 13:10 on the right. With the pointer over the drawing the plan tips back and turns, the walls come out of the floor with a small bounce and after them the bed, pillows, desk, armchair and basin, until the room stands in axonometric: the faces of the walls in two greys, the cut tops of the walls in black, the window with its sill and lintel, the two near walls and the bathroom walls cut low to look in. The label becomes AXONOMETRIC. Moving the pointer from left to right the sun goes from eight in the morning to five in the afternoon and the patch on the floor slants with it. Under the drawing the room’s name in a narrow Archivo, the price a night, the square metres, the guests and the view, and three choices, Double, Junior suite and Loft, with a short black bar under the chosen one that slides with a bounce; choosing another one walls, door, window, bathroom and furniture slide into the new plan, at the same scale, while the price and the square metres count. At the bottom Check dates with an arrow.
How it works
The room made of boxes
Each room is a plan in metres with the same pieces (the room, the bathroom, the bed, the desk, the seat, the window, the door). At every frame the plan becomes a list of boxes: the 18 centimetre walls split around the window (sill and lintel) and the door, the two thin bathroom walls, the furniture at its real height. So one room turns into another by interpolating the numbers.
The projection, by hand
A point (x, y, z) turns about the vertical by TURN degrees and then the plan tips back by TILT: X = x·cos a − y·sin a, Y = (x·sin a + y·cos a)·cos e − z·sin e. With e = 0 it is the plan, and the side faces have no area. The scale in pixels per metre comes from the biggest room standing up and is the same for all of them.
Only the faces turned towards you
For each box only the faces whose normal points to the eye are drawn (the vector sin e·sin a, sin e·cos a, cos e in the room’s axes): the tops of the walls in black like a cut, the sides in two greys. The order: the far walls, then the furniture from back to front, then the near walls, which stay CUT metres high like a model.
Four springs in a row
The tilt, the walls, the furniture and the change of room are four springs on the GSAP ticker, in four sub-steps with the step capped at 1/30 of a second. Standing up the plan tips, the walls start when the tilt has passed 42% and the furniture when the walls are halfway; lying down the furniture and walls go first and the plan goes flat last. The walls have the SPRING spring, which goes past the mark.
The sun
The patch of sun is a parallelogram on the floor starting 55 centimetres from the window wall and reaching two metres, slanted by the hour: the pointer’s horizontal position on the drawing goes from 8:00 to 17:00, written at the top right in steps of ten minutes.
Keyboard and touch
The drawing is a button with aria-pressed: keyboard focus stands the room up like the mouse, Enter pins it or lays it back down, the left and right arrows move the sun. The rooms are a radiogroup with the arrows, Home and End. On a phone a tap stands the room up and leaves it standing while you pick rooms; where you tap sets the hour.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
ROOMS | script.js | [{ name: 'Garden double', short: 'Double', area: 22, guests: 2, view: 'Window on the garden', price: 180 }, …] | The rooms on offer: the name, the short name for the choice, the square metres, the guests, the view and the price a night. Three at most (there are three plans). |
TILT | script.js | 52 | How far the plan tips back when the room stands up, in degrees. |
TURN | script.js | -32 | How far the plan turns, in degrees (with the opposite sign it turns the other way). |
WALL | script.js | 2.6 | How high the walls are, in metres. |
CUT | script.js | 0.6 | How high the two near walls stay, in metres, to look in. |
SPRING | script.js | [140, 0.5] | The walls’ spring: how stiff it is and how much it is held back (1 = no bounce). |
CURRENCY | script.js | '€' | The sign before the price. |
When to use it
For the card of a hotel room, a flat to rent, a holiday home or an office to let; also for a property for sale or an architecture studio showing its interiors. It works wherever people want to understand how a space is really laid out before booking it.
On phones
The card is 340 pixels wide, or the screen minus 32, and the drawing’s scale is worked out on its size. There is no hover: a tap on the drawing stands the room up and leaves it standing, another lays it back down, and where you tap sets the hour of the sun. The springs and the choreography are the same as on a computer.
With reduced motion
No springs and no turning in motion: the plan becomes the axonometric (and back) at once, behind a short fade, and changing room does the same. The sun moves at once, price and square metres change without counting.
Pitfalls
- In the axonometric the door, two metres tall, stood in front of the near walls cut low and looked like a post: the door is cut to the height of the near walls too when the plan tips back.
- With the scale taken from each room, the double and the loft came out the same size and the change said nothing: the scale comes from the biggest room standing up and is the same for all, so the loft really looks bigger.
- The preview’s click (detail 0) would only have pinned the room upright: now it plays a demonstration round (up, the sun from morning to evening, the three rooms, down), while Enter, which also comes without a detail, is marked by a key press and pins the room.
- With the walls at zero centimetres the plan lost its walls: the tops of the low boxes stay drawn in black even at zero height, and that is exactly the black of the cut walls in an architect’s plan.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 11 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
