personal website (jaspermayone.com)
jaspermayone.com
1/* DotsBackground.module.css */
2.container {
3 position: absolute; /* Use absolute positioning to cover the viewport */
4 top: 0;
5 left: 0;
6 width: 100vw; /* Full viewport width */
7 height: 100vh; /* Full viewport height */
8 overflow: hidden;
9 z-index: -10;
10}
11
12.dot {
13 position: absolute;
14 border-radius: 50%;
15 opacity: 0.7;
16 animation: move 5s ease-in-out infinite;
17}
18
19/* Adjust the keyframes to ensure dots stay within the container */
20@keyframes move {
21 0% {
22 transform: translateY(0); /* Adjust if needed */
23 }
24 100% {
25 transform: translateY(
26 calc(100% - 100px)
27 ); /* Ensure dots don’t exceed container height */
28 }
29}