Light through the blinds

The light of a window with blinds falls over the whole page: as you scroll it turns and lengthens like an afternoon sun, and at the bottom the page turns to evening while the stripes of light stay on the dark.

Scroll, TransitionsGSAP, CSS onlyEasyLifetime

Scroll inside the preview

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* La luce delle persiane
   Sopra tutta la pagina cade la luce di una finestra con le persiane chiuse a metà: righe di luce e d’ombra,
   sfumate, col montante in mezzo, disegnate con due gradienti. Scorrendo il pomeriggio passa: la finestra
   proiettata gira, si allunga e scivola sulla pagina come il sole che scende. In fondo, ai contatti, viene
   sera: i colori della pagina passano al verde notte e le righe di luce restano sul buio. */

gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const POMERIGGIO = { rotation: -26, skewX: -8, scaleY: 1, xPercent: 0, yPercent: 0 };      /* la luce in cima alla pagina */
const TRAMONTO = { rotation: -46, skewX: -22, scaleY: 1.45, xPercent: 34, yPercent: 10 };  /* la luce in fondo */
const SCIVOLA_TELEFONO = 10;   /* sul telefono la finestra copre già lo schermo: verso destra scivola meno */
const SERA = {
  '--fondo': '#17211B',
  '--testo': '#EFE9DC',
  '--tenue': '#AEB6A4',
  '--luce': 'rgba(255, 222, 160, 0.2)',
  '--ombra': 'rgba(0, 0, 0, 0.2)',
};

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const finestra = document.querySelector('[data-finestra]');
const contatti = document.querySelector('[data-contatti]');

/* ---------------------------------------------------------------- il pomeriggio che passa */
gsap.set(finestra, POMERIGGIO);

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

An interior design studio’s page: a title, three drawn houses, a sentence, the contacts. Over everything, text and drawings included, falls the light of a window with half-closed blinds: warm stripes of light alternating with stripes of shadow, the darker mullion in the middle and soft edges. As you scroll the afternoon goes by: the projected window turns from −26° to −46°, leans, stretches by 45% and slides to the right, like a lowering sun; meanwhile it breathes slightly, like a curtain moved by the air. Reaching the contacts, evening falls: the background turns night green, the text cream, and the stripes of light stay on the dark, warmer.

How it works

Two gradients make a window

The light is a single fixed div over the page, with pointer-events: none. Its background has two layers: a vertical repeating-linear-gradient, 26 pixels of light and 18 of shadow, for the slats, and a horizontal linear-gradient with a dark band in the middle for the mullion. A 6-pixel blur and two intersected masks, fading the four edges, make it look projected.

Light and shadow without blending

The stripes do not use mix-blend-mode, which is unreliable on a fixed element in Safari: the light is a cream at 24% opacity and the shadow a brown at 11%. On paper you see the shadows, on the dark you see the lights: the same layer works by day and by night.

An afternoon as long as the page

A single tween, tied to scrolling from the top to the bottom of the page (start 0, end max, scrub 0.8), takes the window from rotation −26°, skewX −8° to −46°, −22°, scaleY 1.45 and xPercent 34. Only transforms are animated: the blurred layer stays as it is and the browser moves it rather than redrawing it. A second, always-running tween makes it breathe by a few pixels.

Evening with five variables

The page and stripe colours are CSS variables on the root. As the contacts rise from 80% to 25% of the screen, GSAP animates the five variables towards evening: background, text, muted text, light and shadow. No element is touched one by one.

Values to change

Name	File	Default	What it changes
`POMERIGGIO, TRAMONTO`	script.js	`−26° → −46°`	How the projected window sits at the top and bottom of the page: rotation, lean, stretch, shift.
`SCIVOLA_TELEFONO`	script.js	`10`	How far the window slides right on a phone, as a percentage of its width.
`SERA`	script.js	`#17211B, #EFE9DC`	The evening colours: background, text, muted text, light and shadow.
`repeating-linear-gradient`	style.css	`26px e 18px`	The blind slats: light and shadow. Wider stripes, more open blinds.

When to use it

For the pages of people who work with light and space: architects, interior designers, holiday homes, photographers. It adds atmosphere without touching the content.

On phones

The projected window is larger and centred, to cover a tall screen, and slides less to the right; the houses stack.

With reduced motion

The light stays still as it is at the top of the page, with no turning or breathing; evening still comes, because only the colour changes.

Pitfalls

Animating the stripes’ size (background-size) forces the layer to be redrawn and blurred every frame: to lengthen the shadows use scaleY, which the browser applies to the ready layer.
To change the colours at evening do not animate every element with querySelectorAll('*'): animate the CSS variables they use.
A fixed layer over the page must have pointer-events: none, or no link underneath can be clicked.
mix-blend-mode on a fixed element misbehaves in iPhone Safari: better hand-picked transparent colours for paper and for the dark.

Libraries

GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.

Weight: 12 KB of our own files.

Testing

Tested on 27 September 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.

From the same family

Keep scrolling

Transitions, Scroll

NewLifetime

The falling letter

Scroll, Text, Transitions

NewFree

The ring of spheres

Scroll, Transitions