Ribbons Screensaver_
A free ribbons screensaver for your browser
Eight looks
Make it your own
How to use as a screensaver
Keyboard shortcuts
Related searches
Guide — twisting silk ribbons, fullscreen
Eight looks, up to 16 ribbons, a kaleidoscope mirror and a ribbon you draw yourself. Drawn with WebGL on a canvas, nothing to install.Choose Silk, Aurora, Neon wire, Glass, Ember, Ocean, Candy or Ink, or press 1 to 8. The ribbons, colours and background morph smoothly into the new look.
Set Ribbons (1 to 16), Width, Twist (how far each ribbon rolls over to show its back), Speed, Trail length and Glow. Depth fog fades the ribbons that are far away.
Pick a palette or edit its three colours, choose a dark, black, light or gradient background, and fold the picture with a 2, 4 or 6-fold mirror for a kaleidoscope.
Set Pointer to attract, repel or draw a ribbon that follows your mouse or finger. Surprise me (X) makes a random but harmonious look from a six-character code, and Breathe morphs slowly between two looks.
Press Enter Fullscreen, click the animation or press F. Space pauses, T shows a clock, P saves a wallpaper PNG up to 3840 × 2160, Esc leaves.
Looks and shortcuts
- 1 Silk
- 6 pastel satin ribbons on navy
- 2 Aurora
- Tall curtains over stars
- 3 Neon wire
- 9 thin glowing tubes
- 4 Glass
- Clear bands, mirrored
- 5 Ember
- Flame gradient and sparks
- 6 Ocean
- Slow, foggy, deep teal
- 7 Candy
- Flat vector bands, light
- 8 Ink
- Brush strokes on paper
- F
- Fullscreen on/off
- Space
- Pause / resume
- X / N
- Random look / new ribbons
- B / M
- Breathe / mirror
- ↑ ↓
- Faster / slower
- ← →
- Less / more twist
- T / P
- Clock / save PNG
- R
- Reset to Silk
- Attract
- Ribbons bend toward your pointer or finger
- Repel
- Ribbons bulge away and leave a gap
- Draw
- A ribbon follows the pointer; with a mirror on, it draws a pattern
- Surprise me
- A random, balanced look with a shareable code
- TV / monitor
- Open the page, press F, leave it running
- screen sleep
- Fullscreen asks the browser to keep the display awake where supported; if yours does not, set the sleep timer to Never
- OS screensaver
- A web page can’t register as one; use fullscreen instead
The ribbons screensaver, explained
What is a ribbons screensaver?
A ribbons screensaver draws long, silky bands that drift, fold and cross each other on a dark screen. This page is an independent recreation inspired by the classic Windows screensavers, written from scratch for the browser: it uses no code, artwork or sound from any operating system and is not affiliated with Microsoft. Everything you see is generated live by the page.
How the ribbons are drawn
Each ribbon is a strip of roughly 60 to 280 short segments. Its centre line follows a smooth curve made of several sine waves with a different random set for every ribbon, so the paths never repeat exactly. Along the strip the page works out which way the surface faces. Where the ribbon shows its front, one palette colour is used; when it rolls over, the back is lit and coloured differently, and at the fold it turns edge-on and becomes a thin bright line. The shading is computed per pixel in WebGL, with a soft satin highlight, a rim light and depth fog that dims ribbons that are far from the camera. If WebGL is not available, or you add gl=0 to the address, a simpler Canvas 2D renderer draws the same ribbons.
Eight looks
Silk is six wide pastel ribbons in pink, periwinkle and cream on deep navy. Aurora hangs tall curtains with vertical rays in green, violet and cyan in front of a starry sky. Neon wire draws nine thin round tubes with a white-hot core. Glass overlaps clear bands with bright rims and caustic lines and mirrors them two ways. Ember shades each ribbon from a white-yellow head to a deep red tail, lets it curl upward and sheds sparks. Ocean is slow and foggy with light shafts and drifting particles. Candy uses opaque, flat-shaded bands in pure colours on a light background, drawn with a depth buffer so the nearer ribbon always hides the farther one. Ink keeps the width direction of a broad calligraphy nib fixed, so strokes thin out whenever they run along the nib, and adds dry-brush streaks on paper.
Twist, width and trail
Twist sets how far each ribbon rolls around its own length: at 0 the ribbons stay flat towards you, at 100 they turn over several times. Width and Trail set the thickness and how much of the path is visible behind the leading tip, and Speed scales time from 0.1× to 3×. Because the ribbon shape depends only on time, changing speed never makes the ribbons jump.
Mirror, pointer and drawing
The mirror repeats the picture 2, 4 or 6 times as reflections and rotations around the centre, like a kaleidoscope. With the pointer set to Attract the ribbons bend towards your cursor or finger; with Repel they bulge away from it; with mirror on, every copy reacts to the nearest image of your pointer. Draw adds an extra ribbon that trails your pointer and fades away a few seconds after you stop. With a mirror on, it draws a symmetrical pattern.
Surprise me and Breathe
Surprise me (key X) picks one of the looks and gives it a new three-colour palette built from a colour-wheel harmony (neighbouring, split-complementary, triad or complementary hues), plus a random count, width, twist, trail and mirror. The look comes from a six-character code, for example su=K7M2QX, so a link that contains it recreates the same colours and settings. Breathe (key B) blends your current look with a second look of your choice and back again over about 90 seconds, so the colours, shading and number of ribbons change slowly and without a jump.
Run it as a screensaver on a TV or monitor
Click the animation or press F for fullscreen, then move the mouse away; the cursor and the buttons hide after about two and a half seconds. Add the clock, set in a thin font, for something you can read across the room. In fullscreen the page asks the browser not to let the display sleep, where the Screen Wake Lock feature is supported. It works in any current browser on Windows, Mac, Linux, Android and iOS; on an iPhone the page fills the browser window instead of the whole display.
Performance on phones and TVs
The canvas is drawn at up to twice the pixel density and no more than about 5.5 million pixels. If the frame rate stays below about 38 per second for three seconds, Auto quality lowers the render resolution step by step and then the number of segments per ribbon. You can switch it off with the checkbox or by adding aq=0 to the address. The animation pauses while the tab is hidden, and with a reduced-motion setting on your device the page starts in the slow Ocean look.
Save a wallpaper or share your settings
Save wallpaper PNG renders one fresh frame off-screen at 3840 × 2160 (2160 × 3840 on a portrait screen), or at twice the preview size if you choose that in Options. Copy link writes the look and every setting into the address, for example ?m=aurora&n=7&mi=4, together with the seed (sd) of the random ribbon paths. Add fs=1 to open the page straight into fullscreen.
Privacy
The animation is drawn entirely in your browser: your settings stay in your browser’s local storage on your device, and the page never sends them anywhere. Apart from loading the page itself, its shared styles, a font and the privacy-friendly analytics script used across this site, the page makes no network requests, and none of them carry your settings.