The graph paper background

Backgrounds, ScrollGSAP, Canvas, CSS onlyAdvancedCompressed weight: Demo 6.4 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

An animated background for a scrolling page: a sheet of graph paper in its brick orange, pinned at the edges behind the page. When you scroll, the middle of the sheet lags behind and the lines curve like paper being pulled, the more the faster you scroll; when you stop they spring back straight. Now and then a soft swell runs across it. Minimal style.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quire</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the background: a sheet of graph paper on a canvas behind the page, pinned at its edges; when the page scrolls the
       sheet lags behind and sags like paper, then springs back, and now and then a soft swell runs down it -->
  <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

  <main class="pagina" data-pagina>
    <header class="testa">
      <p class="marchio">Quire</p>
      <p class="testa__nota">Paper goods</p>
    </header>

    <section class="eroe" data-calma>
      <div class="blocco">
        <p class="occhiello" data-entra>Notebooks for people who draw</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Paper that keeps</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>its measure.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Shop notebooks">Shop notebooks</span>
            <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
          </a>
        </div>
      </div>
    </section>

    <section class="seconda" data-calma>
      <div class="blocco">
        <p class="occhiello" data-dopo>Ruled in one millimetre</p>
        <h2 class="sotto">
          <span class="riga"><span class="riga__dentro" data-dopo-riga>Ninety grams,</span></span>
          <span class="riga"><span class="riga__dentro" data-dopo-riga>sewn by hand.</span></span>
        </h2>
      </div>
    </section>
  </main>

  <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="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.

24 values to change

Open the Playground

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 graph paper background” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A page that scrolls for two screens, the background of an invented stationery shop, Quire. Behind everything, on a fixed canvas, a sheet of warm white graph paper: very thin one-millimetre lines, stronger every five and stronger still every ten, all in their brick orange, the only colour besides the ink. On the first screen the heading: Notebooks for people who draw, then two lines in narrow Martian Mono (Paper that keeps its measure.) and a black pill (Shop notebooks) with its arrow; at the top the brand and Paper goods. On the second, smaller: Ruled in one millimetre and Ninety grams, sewn by hand., rising as they come on screen. The lines scroll with the page as if printed on it; but the sheet is pinned at its edges, and when you scroll the middle lags a little behind: the horizontal lines curve into a dip and the vertical ones draw in towards the middle, like paper being pulled, the more the faster you scroll. When you stop the sheet springs back straight, goes a hair too far and settles. Every seven seconds a soft swell runs down from top to bottom and ripples the lines as it passes. Behind the texts the grid lightens in soft ovals. When the page opens the lines are ruled one after another, as with a ruling pen: first the horizontal ones from the top, then the vertical ones from the left; the heading lines rise, narrowing and gaining weight.

How it works

The fixed sheet, the scrolling lines

The canvas is fixed, 100lvh tall (so on Safari for iPhone it does not change size when the bar appears). Each frame the horizontal lines are redrawn at n·MILLIMETRO − scrollY, so they scroll with the page; every fifth and every tenth line goes into a separate, stronger Path2D. The vertical lines stay still and centred. If scrolling, spring and swell have not changed, the frame is not redrawn.

The dip of a sheet pinned at the edges

A point moves by S · sin(πx/W) · sin(πy/H) vertically and by a sixth of S · sin(2πx/W) · sin(πy/H) horizontally: zero at the edges, most in the middle. The lines are drawn as polylines with a point every 14 px, moved that way.

The spring pushed by scrolling

On GSAP's ticker the scroll speed is measured (new scrollY minus old, divided by time) and softened a little. S wants to be speed · PIEGA, at most PIEGA_MAX px, and reaches it on a spring (MOLLA): when scrolling stops, S goes back to zero a hair too far and back.

The swell and the calm areas

A timeline repeating every ONDA seconds takes a front from top to bottom; the swell's displacement is a sine times a bell round the front, ALTEZZA_ONDA px. The texts (the blocks of both sections and the header) are measured in page coordinates and, each frame, an oval eraser (destination-out with a radial gradient) lightens the grid behind them by CALMA.

The ruling pen and the texts

When the page opens each horizontal line grows from the left with a delay increasing from top to bottom, then the vertical ones from the top with a delay from left to right. The heading lines rise with back.out while font-stretch goes from 112% to 75%; those of the second section start with ScrollTrigger.create when the section reaches 70% of the screen.

Values to change

Name	File	Default	What it changes
`MILLIMETRO`	script.js	`7`	The distance between two thin lines, in px (the strong ones every five and every ten).
`PIEGA`	script.js	`0.07`	How much the sheet curves for every px per second of scrolling.
`PIEGA_MAX`	script.js	`46`	The most it curves, in px.
`MOLLA`	script.js	`[90, 9]`	The sheet's spring: how stiff and how damped (less damped, more wobble).
`ONDA`	script.js	`7`	How many seconds between swells.
`ALTEZZA_ONDA`	script.js	`12`	How tall the swell is, in px.
`CALMA`	script.js	`0.88`	How much the grid lightens behind the texts (0 not at all, 1 it vanishes).

Try them in the Playground

When to use it

As the background of a long page for a stationery shop or a notebook brand, an architecture or engineering practice, a technical drawing course, a note-taking app or a product for designers; in general behind short headings when you want the page to feel like a real sheet reacting to scroll. The three oranges are set in the CSS (with a light blue it becomes engineering paper).

On phones

The same animations with the sizes adapted: the lines are a little closer, the headings smaller. The finger scrolling curves the sheet like the wheel does, and scroll momentum keeps it curved until the page stops.

With reduced motion

The sheet is straight and still: the lines only scroll with the page, with no dip, no spring, no swell and no ruling pen. The texts fade in, those of the second section as they come on screen.

Pitfalls

With the strong lines almost solid the grid covered the heading and the page looked orange: lighter lines, and oval erasers behind the texts.
A white background behind the header texts made them look like labels stuck on the sheet: now the header has its own soft eraser too.
Redrawing twenty thousand segments every frame even with the page still cost for nothing: a signature made of scroll, spring, swell and opening says when there is really something to redraw.

Libraries

GSAP 3.15.0, ScrollTrigger 3.15.0, Martian Mono (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.4 KB; the libraries: GSAP + ScrollTrigger 45 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.