Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Paper-Cut Hills

A diorama of layered paper hills in soft colours sliding past each other, a paper sun behind and birds crossing the sky. Loops perfectly.

Background, V1 Effects2DSeamless loop, verified106 lines of codev1.0.0

In Craft & heritage, Art & illustration styles

Next: Stop-Motion Feel (Claymation)Surprise me

Paper-Cut Hills preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

6
1

Repeats of the nearest layer's hills per loop.

4

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 525 KB)
Info

What it is

A diorama of layered paper: rows of rolling hills cut from card, each layer a different colour and a little darker the nearer it sits, every layer casting a soft shadow on the one behind, a pale sun or moon behind the farthest ridge and a few paper birds crossing the sky. The layers slide sideways at different speeds, so the scene has real parallax, and each moves a whole number of its own repeats per loop so the loop is exact. Choose the number of layers, the colours (dawn, forest, dusk or snow), how many repeats the nearest layer moves per loop, whether birds fly and the seed.

Reuse it in your own idea

  • Story title: Dawn, six layers.
  • Nature video: Forest, fast.
  • Bedtime: Dusk, no birds.

Which part is reusable

src/paper-cut-hills.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The look is flat paper with soft shadows; there is no 3D or real lighting.
  • Hills repeat exactly with the loop, so a very long clip can look cyclic.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/paper-cut-hills.js
Exports
  • createPaperCutHills({ layers?, palette?, speed?, birds?, seed? }) => { draw(ctx, info, width, height) }
  • PALETTES: { dawn, forest, dusk, snow }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. The reusable source has no dependencies.
How it fits a scene

Coordinates: Layers are drawn farthest first; each layer's ridge is a sum of three sine harmonics of its own repeat length, longer for nearer layers.

Lighting: Each layer casts a soft shadow upwards onto the one behind; the sun has a pale halo.

Timing: Pure function of info.progress.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Each layer moves exactly a whole number of its own repeats per loop and the birds make whole laps with whole wing-beats, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Each layer is one path of about 300 points plus a shadow; a few milliseconds a frame. Software canvas shadows are the slowest part; fewer layers draw faster.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- paper-cut-hills/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:db56a4aabea20946…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen

Lava Lamp

3D object3DSeamless loop15 seconds

Disco Ball

Background3DSeamless loop12 seconds