Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The view from above, through the clouds
Scroll inside the preview
The site plan of a residence seen from above, in the minimal style: two curtains open, the title comes out of a blur, then the scroll holds the scene still and moves the plan, drawn in thin lines, sideways from one wing to the other, while three layers of cloud drift past at three speeds.
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 view from above, through the clouds</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/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the site plan of a made-up residence, Linden Court, seen from above and drawn in thin lines. Two curtains open,
a title comes out of a blur; then the scroll holds the screen still and moves the plan sideways, from one wing
to the other, while three layers of cloud drift past at three speeds and the title goes back into the blur -->
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<div class="pianta" data-pianta>
<svg class="disegno" data-disegno aria-hidden="true"></svg>
</div>
<canvas class="nuvole" data-nuvole="0" aria-hidden="true"></canvas>
<canvas class="nuvole" data-nuvole="1" aria-hidden="true"></canvas>
<canvas class="nuvole" data-nuvole="2" aria-hidden="true"></canvas>
<h2 class="titolo" data-titolo>View from above</h2>
<p class="nota" data-nota>Linden Court, the site plan</p>
<span class="tenda tenda--sx" data-tenda aria-hidden="true"></span>
<span class="tenda tenda--dx" data-tenda aria-hidden="true"></span>
</div>
</section>
<footer class="fine">
<p>Two wings, one garden between them.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
17 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 view from above, through the clouds” from Animorio and fit it into my siteWhat it does
The site plan of Linden Court, a made-up residence, seen from above as if from a plane. On arrival two paper-coloured curtains open from the centre and the title, View from above, comes out of a blur letter by letter. Then, as you scroll, the scene stays still and the plan slides sideways: the road at the bottom, wing A with its ribbed roofs and panels, the garden with paths and round trees, wing B, the car park at the end. The letters of the two wings are gold. Over it pass three layers of soft white cloud, thicker at the top and bottom: the nearest layer runs faster, the far one slower. From a third of the way the title shrinks and goes back into the blur.
How it works
The plan
The plan is an SVG 2600 wide and 1000 tall, drawn by the script in a single path: rectangles for the wings and roofs, lines for the roof ribs and the car park, two circles for each tree, curves for the paths and the dashes of the road. On screen it is as tall as the window and RATIO times as wide.
The run
The part of the plan that does not fit the screen is what must slide past. The section is one screen tall plus that part times SLOW, as on the site, with a sticky scene inside. A timeline tied to the scroll moves the plan from left to right with power1.inOut, as on the site, so it starts and ends slowly; on narrower screens only the middle passes by, from 15 to 85 per cent, and on a phone from 22 to 78, as on the site.
The clouds
Each layer is a canvas twice as wide as the plan, painted once with dozens of white radial gradient circles grouped into puffs, more at the top and bottom than in the middle. The three layers cover different distances in the same time, set by CLOUD_SPEED: the nearest goes furthest, and seems fastest.
The curtains and the title
On arrival the two curtains go from half the screen to nothing in CURTAIN_TIME seconds with power3.inOut. The title is split into letters with SplitText: they come out of a TITLE_BLUR pixel blur, rising 15 per cent, one every TITLE_STAGGER seconds. With the scroll, from a third of the run, the whole title shrinks to 0.7 and blurs again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
RATIO | script.js | 2.6 | How many times wider than tall the plan is. |
SLOW | script.js | 2 | How much scroll for each pixel of plan that slides past. |
CLOUD_SPEED | script.js | [0.9, 1.15, 1.4] | How fast each layer of cloud runs against the plan. |
CLOUDS | script.js | 26 | How many puffs of cloud per layer, for each width of plan. |
TITLE_BLUR | script.js | 10 | How blurred the title is at the start and at the end, in pixels. |
TITLE_STAGGER | script.js | 0.04 | The gap between one letter of the title and the next. |
CURTAIN_TIME | script.js | 1 | How long the curtains take to open, in seconds. |
When to use it
To show from above a residence, a hotel, a holiday village, a campus or the grounds of an event: everything that does not fit in one screen, told with the scroll. An aerial photo can take the place of the drawing.
On phones
The same: the plan is as tall as the screen and its middle part slides past, as on the site; the title is smaller and higher.
With reduced motion
The plan does not slide and stays centred; the curtains and the title arrive with a fade, and as you scroll the clouds and the title only fade away.
Pitfalls
- The section’s length must be worked out from the part of the plan that does not fit the screen and redone at every resize, with invalidateOnRefresh: with a fixed length the plan ends too early or too late.
- Each layer of cloud must be wider than the distance it travels: the fastest layer, if it is as wide as the plan, runs out first and leaves a hard edge.
- The clouds must be painted once on a low-resolution canvas and then only moved: repainting them every frame costs a lot, and they are blurred anyway.
- The title’s letters come in with time and the whole title leaves with the scroll: animating with the scroll the same letters that come in with time would make them fight.
Libraries
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.2 KB; the libraries: GSAP + ScrollTrigger + SplitText 49 KB, Lenis 5.3 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.
