ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(landing-page): slower animation (#307)

Browse source
This commit is contained in:
Ayo Ayco 2023-09-25 17:54:30 +02:00 committed by GitHub
parent 4f745b59b1
commit 591b4eafe6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/landing-page/src/components/starfield.astro
View file

@ -3,8 +3,8 @@
</div> </div>
<script> <script>
const COUNT = 800; const COUNT = 100;
const SPEED = 0.3; const SPEED = 0.07;
class Star { class Star {
x: number; x: number;
@ -53,10 +53,10 @@
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0)); const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
let rafId = 0; let rafId = 0;
const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas"); const canvas: HTMLCanvasElement = document.querySelector('#starfield-canvas');
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext('2d');
const container = document.querySelector("#starfield"); const container = document.querySelector('#starfield');
const resizeObserver = new ResizeObserver(setup); const resizeObserver = new ResizeObserver(setup);
resizeObserver.observe(container); resizeObserver.observe(container);
@ -78,8 +78,8 @@
} }
ctx.translate(width / 2, height / 2); ctx.translate(width / 2, height / 2);
ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.strokeStyle = "white"; ctx.strokeStyle = 'white';
rafId = requestAnimationFrame(frame); rafId = requestAnimationFrame(frame);
} }