The send button
Buttons, Transitions, SVG
NewFree
All components
The day and night switch
A switch drawn as a little landscape: turned on, the sun slides across and becomes the moon, the day clouds drift away, the hills turn blue, and the night spreads over the whole page in a circle that starts from the switch.
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 day and night switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the day and the night of the page: a white layer, and over it a black circle that grows out of the switch and
shrinks back into it -->
<span class="day" aria-hidden="true"></span>
<span class="night" aria-hidden="true" data-night></span>
<main class="stage">
<!-- the switch: a little landscape. Turned on, the sun slides across and turns into the moon, the day clouds drift
off and the night ones come in, the hills darken, and the whole page goes black -->
<div class="theme" data-theme>
<button class="sky" type="button" role="switch" aria-checked="false" aria-labelledby="sky-label" data-sky data-autoclic>
<span class="sky__day" aria-hidden="true"></span>
<span class="sky__dark" aria-hidden="true" data-dark></span>
<svg class="sky__land" viewBox="0 0 132 56" preserveAspectRatio="none" aria-hidden="true">
<g data-day-clouds>
<path class="cloud" transform="translate(76 9)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
<path class="cloud" transform="translate(98 20) scale(0.75)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
</g>
<g data-night-clouds>
<path class="cloud cloud--night" transform="translate(10 8) scale(0.8)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
<path class="cloud cloud--night" transform="translate(30 20) scale(0.6)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
</g>
<path class="hill hill--back" d="M0 56V44c18-7 36-8 58-2s46-6 74-1v15z"/>
<path class="hill hill--front" d="M0 56v-7c24-4 48 4 74 0s40-5 58-1v8z"/>
<path class="hill hill--back-night" data-night-hill d="M0 56V44c18-7 36-8 58-2s46-6 74-1v15z"/>
<path class="hill hill--front-night" data-night-hill d="M0 56v-7c24-4 48 4 74 0s40-5 58-1v8z"/>
</svg>
<span class="sky__thumb" data-thumb>
<span class="sky__knob" data-knob>
<svg viewBox="-24 -24 48 48" aria-hidden="true">
<g class="sun-rays" data-rays></g>
<circle class="disc" r="13.5" data-disc/>
<g class="craters" data-craters>
<circle cx="-4.5" cy="-3.5" r="3.2"/>
<circle cx="4.8" cy="3.6" r="2.2"/>
<circle cx="-2" cy="6.4" r="1.5"/>
</g>
</svg>
</span>
</span>
</button>
<span class="theme__label" id="sky-label" data-label>Dark mode</span>
</div>
</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.
10 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 day and night switch” from Animorio and fit it into my siteWhat it does
On a white background a pill switch that is a little sky: light blue, with a yellow sun and its rays, two white clouds and two green hills, and next to it the words Dark mode. Turned on, the sun slides across stretching a little, draws its rays in turning and becomes the moon, where three craters appear one after the other; the sky turns night blue, the white clouds leave to the right while two dark ones come in from the left, and the hills turn blue. Meanwhile a black circle grows out of the switch until it covers the whole page; the words are black on white and white on black, and change exactly where the edge of the circle passes. Turned off, everything goes back and the night shrinks back into the switch. Under the mouse the sun, or the moon, peeks towards the other side; pressed, it squashes a little. A click on the words turns it on and off too.
How it works
The landscape
The button (role switch) holds two gradient backgrounds, day and night one over the other, an SVG with the clouds and two pairs of hills, and the knob: an SVG with the disc, the rays made by the script and three craters. The knob sits inside a second element that takes the press and the peek towards the other side, so they never clash with the slide.
One timeline
The whole change from day to night is one paused timeline: turning on plays it forwards, turning off backwards, and a click halfway turns it round from where it is. The knob slides in three quarters of TIME, stretching up to STRETCH halfway; the rays shrink and turn by 90 degrees, the disc changes colour and the craters appear with back.out.
The night over the page
Behind everything there are two fixed layers: the white of the day and the black night, cut by a clip-path circle centred on the switch. The radius goes from zero to the distance of the window’s farthest corner; in the timeline a number from 0 to 1 draws it on every frame.
The words
The words are white with mix-blend-mode difference: on white they turn black, on black they stay white, and while the night passes they split right on the edge of the circle. That is why the day’s white is a real layer and not just the page background, and why no box around the words has a transform.
Keyboard
It is a button with role switch and aria-checked: Enter and Space turn it on and off, and its name is the words next to it (aria-labelledby).
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TIME | script.js | 0.85 | The seconds of the change, day to night and back. |
STRETCH | script.js | 1.18 | How much the sun stretches as it slides. |
RAYS | script.js | 8 | The sun’s rays. |
PEEK | script.js | 4 | How far the sun peeks under the mouse, in pixels. |
When to use it
To choose between the light and the dark theme of a site or an app, when the change can be a little show too. On a real site the choice should be saved, and the first time it can start from the system’s (prefers-color-scheme).
On phones
The switch gets a little smaller below 420 pixels and taps work like clicks; the circle of the night always starts from the switch and covers the whole screen.
With reduced motion
No slide and no circle: the switch changes at once and the night covers the page, or leaves it, in a fade of a quarter of a second.
Pitfalls
- mix-blend-mode does not blend with the page background (the body’s): the day’s white has to be a real element, behind everything.
- A transform left on a box around the words, even one from an entrance long finished, makes it a group of its own and the blend no longer sees the night: the entrance animates the switch and the words separately and then removes the transform.
- The circle cannot be worked out once and for all: its centre and radius depend on the window. That is why the timeline moves a number from 0 to 1 and the circle is redrawn on every frame and when the window changes.
- The night is a fixed layer with z-index −1: above the page background and below everything else, so the switch is never covered.
- Safari on iPhone colours its bars from the page background or from a full-screen fixed layer, here the white of the day: once the circle is complete the page really turns black and the day goes (the is-night class on the html), or at night the bars would stay white.
Libraries
GSAP 3.15.0, Nunito (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 12 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
