Light rays background

A loose bundle of very thin glowing threads that comes in from the top right, pinches into one tight bright knot beside the hero, fans back out, then winds from side to side down the whole page behind the content. It runs on the web-skills home page. assets/rays.ts is that exact code with its settings turned into options, so copy it rather than rewriting it: the smooth bends, the text mask and the performance work took several rounds to get right.

What it does

1. Entrance: 150 threads (80 on phones) draw in from the top-right corner over about 2 s, with a bright dot at each tip, and meet in the knot beside the hero.
2. Shape: one continuous ribbon in page space. It enters from the top right, pinches into the hero’s knot, fans out to the bottom right, bends back inside the window, then sways from side to side down the page. Every bend sits inside the viewport, so the turn is always visible. The bundle widens and softens the further down it goes.
3. Density: threads crowd together and glow almost solid at the bends, and spread apart with dark gaps on the straights. Most threads sit near the middle, so the edges are sparse and wispy, and about one in twelve strays. Dust floats around the bright bends, and specks near the cursor swell, brighten and drift away from it.
4. Motion: the whole bundle sways slowly and breathes wider and narrower. Each thread runs its own wave, with its own speed and offset, so the bundle shimmers instead of moving as one block. Streaks of light run down about a third of the threads.
5. Scroll: the bundle scrolls slightly slower than the content (parallax 0.85), so it reads as a layer behind it.
6. Text stays readable: the light fades out under every line of text in the clear selectors, with a soft halo. It uses the text’s line boxes, so a wide heading only clears its words.
7. Theme: additive glow on dark backgrounds, and faint see-through ink lines on light ones, where glow would wash out. Colors can be CSS variables, read again whenever the color scheme changes.
8. Reduced motion: the same bundle, still, redrawn only when the page scrolls or resizes.