Aurora — a single-file example

Scroll the page. The background reacts to window.scrollY through pure CSS — no canvas, no framework, no animation library. The entire effect lives in two pieces of this file:

The <style> block in <head> — parameterized CSS variables and a body::before background driven by sin() / cos().
A ~15-line <script> at the bottom — feeds --scroll-px from scrollY with a low-pass filter for smoothing.

Save this file with Save Page As, open it in any editor. Every knob lives as a CSS variable near the top of the <style> — change a number, reload, see the result.

Tweak the look

To adjust the aurora, edit one of these CSS variables in the <style> block:

--aurora-size-max — peak blob size. Try 500% for a single huge wash, 120% for distinct pools.
--aurora-amount — colour intensity (0–100 numeric). Higher = more saturated.
--aurora-opacity — overall opacity of the layer.
--aurora-freq — global frequency multiplier. 0.5 = slower drift, 2 = quicker reaction.
--aurora-hue-rate — how fast the palette rotates as you scroll. 0 to disable colour drift.
--aurora-color-1..4 — the four blob colours in oklch(). Try other hues: oklch(85% 0.08 60) (warm), oklch(80% 0.10 180) (cyan).
--w-size-1/2 and --w-pos-1/2 — sin/cos weights. Set --w-size-2: 0; --w-pos-2: 0; --w-size-1: 0.5; --w-pos-1: 1 for a single-sin (orbital) look.

Switching the driver

The <script> below feeds scrollY into --scroll-px. You can swap that for any other source of a changing number — there are commented-out alternatives at the top of the script for time (always-on ambient) and mouse (cursor-driven). Uncomment one block, comment out the others, reload.

Lorem ipsum, dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar urna nec dolor sodales, sit amet pretium augue tristique. Vivamus blandit nulla nec felis vestibulum, vel pellentesque urna luctus. Sed in lacus eget velit posuere convallis. Mauris feugiat nibh ut velit pellentesque, vitae rutrum nisi viverra. Phasellus eget convallis odio, in lobortis odio. Maecenas at mauris in nibh fermentum ultricies in eget enim.

Curabitur vitae ipsum ut ligula gravida ultricies. Duis non augue id tellus efficitur tristique. Aliquam erat volutpat. Nullam vitae nibh suscipit, sodales tortor at, ultrices ipsum. Phasellus convallis purus quis lectus interdum, eget convallis turpis cursus. Praesent placerat felis et nisl placerat, vel posuere tellus tempor. Cras suscipit, tellus eget hendrerit aliquam, dolor nulla scelerisque mi, ac auctor leo eros ut velit.

Aenean tincidunt elit sit amet ligula vehicula, in volutpat justo iaculis. Donec et finibus nibh. In ut sem quis purus lacinia luctus. Etiam ullamcorper felis et risus consequat, a fermentum nibh laoreet. Sed at sem at libero suscipit feugiat. Nullam vel risus a magna scelerisque convallis ut a felis. Suspendisse potenti.

Sed do eiusmod tempor

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse non tortor a nulla rutrum hendrerit. Quisque vel arcu vehicula, semper sapien id, dignissim tellus. In gravida porta nibh, nec aliquam justo finibus eu. Aliquam erat volutpat. Etiam tincidunt accumsan nibh, eu tincidunt mauris fringilla et.

Integer at libero ut leo vehicula consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tempus, ipsum vitae fringilla rutrum, lectus arcu ullamcorper risus, in scelerisque tortor lorem id orci. Praesent eu nibh quis ipsum maximus fermentum. Donec convallis quam vitae mauris consequat efficitur. Curabitur tincidunt suscipit lectus.

Ut labore et dolore magna

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum hendrerit, sapien quis fringilla efficitur, eros nibh interdum est, ut consequat metus felis at est. Sed in ipsum non lacus tincidunt vulputate. In hac habitasse platea dictumst.

Praesent commodo eros vel sapien faucibus, nec fringilla nibh eleifend. Cras ut leo non risus auctor varius. Sed in ligula in arcu tincidunt elementum. Donec hendrerit, magna sit amet rutrum efficitur, leo turpis blandit nunc, ac dapibus mi nibh ac mauris.

Morbi sed scelerisque magna. Suspendisse fermentum bibendum nibh, at scelerisque purus consectetur sit amet. Aenean rhoncus malesuada quam, vel fermentum elit feugiat sit amet. In vulputate luctus diam, eu finibus nibh tincidunt sit amet. Mauris finibus pretium dolor, vel suscipit nibh consectetur in.

Sit amet, consectetur

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula.

Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Vestibulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Adipisicing elit, sed do

Mauris quis nibh blandit, suscipit lectus eu, hendrerit nisl. Curabitur in tellus quis purus ultricies aliquet eget id elit. Suspendisse potenti. Nam aliquam ultricies nulla, ut bibendum lectus consectetur eget. Donec sit amet nibh ac magna iaculis ultricies.

Vivamus pharetra lacus quis libero hendrerit, vel finibus purus pharetra. Maecenas auctor turpis at urna pulvinar, vitae sodales lectus rutrum. Cras vitae luctus ipsum. Praesent at sodales nibh. Suspendisse potenti. Vivamus venenatis tellus et ligula scelerisque, ut tristique sapien tempus.

Aliquam erat volutpat. Donec malesuada, nibh non rhoncus consectetur, mauris nulla porttitor metus, eget consectetur risus enim et nibh. Praesent ac massa sed magna lacinia lobortis. Curabitur a mi sit amet tortor pharetra commodo.

Eiusmod tempor incididunt

Suspendisse a ligula ut leo dapibus consectetur. Aliquam erat volutpat. Curabitur condimentum erat at tortor commodo, sit amet rhoncus nisl tincidunt. Mauris vehicula, leo non vehicula consectetur, magna tortor varius mauris, nec rutrum nibh lectus a turpis.

Aenean accumsan, leo at faucibus consectetur, lectus tortor scelerisque sem, vel pharetra mauris orci eget elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac tellus ut justo ullamcorper feugiat.

Sed posuere libero in lacus interdum, sit amet rutrum risus aliquet. Vestibulum eu sapien sed nulla ultricies condimentum. Praesent dignissim sodales velit, vel cursus elit dapibus a. Nulla facilisi.

Ut labore et dolore

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

Mauris vel mauris non purus posuere posuere. Curabitur tincidunt magna at urna malesuada, eu condimentum nulla lacinia. Phasellus consequat lectus a sem mollis, sit amet finibus magna pharetra. Donec eu dignissim mauris.

Vivamus auctor tortor in turpis fermentum, eu auctor mauris tincidunt. Aliquam erat volutpat. Maecenas ut nisl nec arcu posuere convallis. Sed eu ipsum at mauris ultricies pharetra. Vestibulum ante ipsum primis in faucibus orci luctus.

— Aurora demo. Save and remix freely. Article: shvedov.io/writing/aurora-from-math