← All effects

Name Constellation

BackgroundVanilla JS · zero dependenciestype a name · the sky spells it
-- fps
prefers-reduced-motion detected — stars shown already settled

X-ray · layers

stars pull into the letters — off and they drift free
lines joining neighbouring stars
the ambient sky behind the name
the sky lets go and gathers again, on its own

Parameters

Your name
Density520
Pull0.06
Twinkle0.55
Link distance26 px
Reform every7.0 s
your version · updates as you tinker

How this effect works

The letters are never drawn. What happens instead is that your name is painted once, invisibly, onto an off-screen canvas, and then we read that canvas back pixel by pixel. Every pixel the text actually covered becomes a coordinate in a list — a stencil of your name expressed as a few thousand points. We shuffle that list and hand out as many of them as the density slider asks for, one per star. From that moment the text is gone; only the coordinates remain.

Each star then behaves like a weight on a spring: every frame it moves a fraction of the way toward its assigned point, and that fraction is the pull slider. A low pull means the sky takes its time gathering; a high pull snaps it into focus. Turn the Shape layer off and the springs are simply released — the stars keep their velocity and wander away, which is why the name dissolves rather than vanishes. The Links pass sorts the stars by x and only compares each one with the handful that follow it, so the constellation lines cost almost nothing no matter how dense the sky gets — and two stars are only allowed to join if the letter points they belong to are neighbours, which is what keeps the lines inside the strokes instead of hopping the gaps between letters.

The Reform layer is the effect showing its own trick: every few seconds it lets go, pushes every star outward from the centre of the word, and then hands control back to the springs, which gather the name again. Nothing is re-created — the targets never changed, so the same sky always returns to the same letters.

Production notes: respects prefers-reduced-motion (stars start already settled, one static frame) · the stencil is re-read only when the name, the size or the density changes, never per frame · the name is drawn with fillText and never inserted as HTML · Share my tune puts your name in the link, so whoever opens it sees their own copy of the sky spelling it · the copied snippet is self-contained HTML + JS.