Antares/com.gregkilmer.www
1
0
Fork 0
mirror of https://github.com/Patiun/com.gregkilmer.www.git synced 2026-11-08 04:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Animation Updates

Browse Source
This commit is contained in:
Greg Kilmer
2026-07-04 11:28:13 -04:00
parent 33fa312645
commit 29b4a13345
6 changed files with 124 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/hero/AnimatedBackground.tsx
+13 -10
View File
@@ -127,17 +127,19 @@ export default function AnimatedBackground({
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// Dense field tuned for ~40% constellation coverage on any slice. Stars
// live in a sky disk larger than the viewport so rotation never reveals
// an empty edge. Radius = distance to the far viewport corner.
const cx = width / 2;
const cy = height / 2;
const maxR = Math.sqrt(cx * cx + cy * cy) + 40;
// live in a sky disk large enough that rotation never reveals an empty
// edge. The disk is centered on the PIVOT (the top-right corner) so the
// whole field rotates around that corner like a star chart turning about
// its corner mount; maxR reaches the far (bottom-left) corner.
const cx = width;
const cy = 0;
const maxR = Math.sqrt(cx * cx + height * height) + 40;
// One star per ~4000 px^2 of the disk, capped for perf (~12% anchors).
// One star per ~3200 px^2 of the disk, capped for perf (~14% anchors).
const diskArea = Math.PI * maxR * maxR;
const count = Math.min(420, Math.floor(diskArea / 4000));
const count = Math.min(520, Math.floor(diskArea / 3200));
stars = Array.from({ length: count }, (_, i) => {
const anchor = i % 8 === 0; // ~12% anchors -> denser constellation backbone
const anchor = i % 7 === 0; // ~14% anchors -> dense constellation backbone
// Uniform-ish distribution across the disk via sqrt on radius.
const rr = maxR * Math.sqrt(Math.random());
const a = Math.random() * Math.PI * 2;
@@ -178,8 +180,9 @@ export default function AnimatedBackground({
angle += ROT_SPEED * dt; // whole sky rotates together
ctx.clearRect(0, 0, width, height);
const cx = width / 2;
const cy = height / 2;
// Pivot = top-right corner (matches the disk center used in resize()).
const cx = width;
const cy = 0;
const cosA = Math.cos(angle);
const sinA = Math.sin(angle);