Skip to content

Commit 3306054

Browse files
ymekuriaymekuria
authored
Optimize NextJS scaffold landing page (#757)
1 parent 5b6f7bb commit 3306054

File tree

3 files changed

+145
-189
lines changed

3 files changed

+145
-189
lines changed

‎src/lib/ui/next/components/GradientBG.js‎

Lines changed: 8 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,16 @@
1-
// @ts-nocheck
2-
import styles from '../styles/Home.module.css';
3-
import { useEffect, useState, useRef } from 'react';
1+
import styles from './GradientBG.module.css';
42

53
export default function GradientBG({ children }) {
6-
const canvasRef = useRef(null);
7-
const [context, setContext] = useState(null);
8-
const [pixels, setPixels] = useState([]);
9-
10-
function Color(h, s, l, a) {
11-
this.h = h;
12-
this.s = s;
13-
this.l = l;
14-
this.a = a;
15-
16-
this.dir = Math.random() > 0.5 ? -1 : 1;
17-
18-
this.toString = function () {
19-
return (
20-
'hsla(' + this.h + ', ' + this.s + '%, ' + this.l + '%, ' + this.a + ')'
21-
);
22-
};
23-
}
24-
25-
function Pixel(x, y, w, h, color) {
26-
this.x = {
27-
c: x,
28-
min: 0,
29-
max: canvasRef.current.width,
30-
dir: Math.random() > 0.5 ? -1 : 1,
31-
};
32-
33-
this.y = {
34-
c: y,
35-
min: 0,
36-
max: canvasRef.current.height,
37-
dir: Math.random() > 0.5 ? -1 : 1,
38-
};
39-
40-
this.w = {
41-
c: w,
42-
min: 2,
43-
max: canvasRef.current.width,
44-
dir: Math.random() > 0.5 ? -1 : 1,
45-
};
46-
47-
this.h = {
48-
c: h,
49-
min: 2,
50-
max: canvasRef.current.height,
51-
dir: Math.random() > 0.5 ? -1 : 1,
52-
};
53-
54-
this.color = color;
55-
56-
this.direction = Math.random() > 0.1 ? -1 : 1;
57-
58-
this.velocity = (Math.random() * 100 + 100) * 0.01 * this.direction;
59-
}
60-
61-
function updatePixel(pixel) {
62-
if (pixel.x.c <= pixel.x.min || pixel.x.c >= pixel.x.max) {
63-
pixel.x.dir *= -1;
64-
}
65-
66-
if (pixel.y.c <= pixel.y.min || pixel.y.c >= pixel.y.max) {
67-
pixel.y.dir *= -1;
68-
}
69-
70-
if (pixel.w.c <= pixel.w.min || pixel.w.c >= pixel.w.max) {
71-
pixel.w.dir *= -1;
72-
}
73-
74-
if (pixel.h.c <= pixel.h.min || pixel.h.c >= pixel.h.max) {
75-
pixel.h.dir *= -1;
76-
}
77-
78-
if (pixel.color.a <= 0 || pixel.color.a >= 0.75) {
79-
pixel.color.dir *= -1;
80-
}
81-
82-
pixel.x.c += 0.005 * pixel.x.dir;
83-
pixel.y.c += 0.005 * pixel.y.dir;
84-
85-
pixel.w.c += 0.005 * pixel.w.dir;
86-
pixel.h.c += 0.005 * pixel.h.dir;
87-
}
88-
89-
function renderPixel(pixel) {
90-
context.restore();
91-
92-
context.fillStyle = pixel.color.toString();
93-
context.fillRect(pixel.x.c, pixel.y.c, pixel.w.c, pixel.h.c);
94-
}
95-
96-
function paint() {
97-
if (canvasRef.current) {
98-
context.clearRect(
99-
0,
100-
0,
101-
canvasRef.current.width,
102-
canvasRef.current.height
103-
);
104-
for (let i = 0; i < pixels.length; i++) {
105-
updatePixel(pixels[i]);
106-
107-
renderPixel(pixels[i]);
108-
}
109-
}
110-
}
111-
112-
useEffect(() => {
113-
if (canvasRef.current) {
114-
const canvas = canvasRef.current;
115-
const ctx = canvas.getContext('2d');
116-
setContext(ctx);
117-
118-
const currentPixels = [
119-
new Pixel(1, 1, 3, 4, new Color(252, 70, 67, 0.8)),
120-
new Pixel(0, 0, 1, 1, new Color(0, 0, 98, 1)),
121-
new Pixel(0, 3, 2, 2, new Color(11, 100, 62, 0.8)),
122-
new Pixel(4, 0, 4, 3, new Color(190, 94, 75, 0.8)),
123-
new Pixel(3, 1, 1, 2, new Color(324, 98, 50, 0.1)),
124-
];
125-
setPixels(currentPixels);
126-
}
127-
}, []);
128-
129-
useEffect(() => {
130-
let animationFrameId;
131-
132-
if (context) {
133-
const animate = () => {
134-
paint();
135-
animationFrameId = window.requestAnimationFrame(animate);
136-
};
137-
138-
animate();
139-
}
140-
141-
return () => {
142-
window.cancelAnimationFrame(animationFrameId);
143-
};
144-
}, [paint, pixels, context]);
145-
1464
return (
1475
<>
1486
<div className={styles.background}>
149-
<canvas
150-
className={styles.backgroundGradients}
151-
width="6"
152-
height="6"
153-
ref={canvasRef}
154-
/>
7+
<div className={styles.backgroundGradients}>
8+
<div className={styles.gradientBlob} data-blob="1"></div>
9+
<div className={styles.gradientBlob} data-blob="2"></div>
10+
<div className={styles.gradientBlob} data-blob="3"></div>
11+
<div className={styles.gradientBlob} data-blob="4"></div>
12+
<div className={styles.gradientBlob} data-blob="5"></div>
13+
</div>
15514
</div>
15615
<div className={styles.container}>{children}</div>
15716
</>

‎src/lib/ui/next/components/GradientBG.module.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
.background {
2+
pointer-events: none;
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
overflow: hidden;
9+
z-index: 0;
10+
}
11+
12+
.background::before {
13+
background: url('/assets/hash-pattern.png');
14+
z-index: 1;
15+
-webkit-mask-image: linear-gradient(20deg, #000 25%, transparent);
16+
mask-image: linear-gradient(20deg, #000 25%, transparent);
17+
content: '';
18+
position: absolute;
19+
top: 0;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
}
24+
25+
.backgroundGradients {
26+
display: block;
27+
position: absolute;
28+
top: -5%;
29+
left: -5%;
30+
width: 110%;
31+
height: 110%;
32+
filter: blur(150px);
33+
}
34+
35+
.container {
36+
position: relative;
37+
min-height: 100vh;
38+
}
39+
40+
.gradientBlob {
41+
position: absolute;
42+
border-radius: 20px;
43+
}
44+
45+
.gradientBlob[data-blob="1"] {
46+
left: 0;
47+
top: 0;
48+
width: 40%;
49+
height: 50%;
50+
background: hsla(252, 70%, 67%, 0.8);
51+
animation: crossScreen1 20s infinite linear;
52+
}
53+
54+
.gradientBlob[data-blob="2"] {
55+
left: 0;
56+
top: 0;
57+
width: 30%;
58+
height: 35%;
59+
background: hsla(162, 94%, 70%, 0.6);
60+
animation: crossScreen2 25s infinite linear;
61+
animation-delay: -3s;
62+
}
63+
64+
.gradientBlob[data-blob="3"] {
65+
left: 0;
66+
top: 0;
67+
width: 35%;
68+
height: 40%;
69+
background: hsla(11, 100%, 62%, 0.8);
70+
animation: crossScreen3 18s infinite linear;
71+
animation-delay: -6s;
72+
}
73+
74+
.gradientBlob[data-blob="4"] {
75+
left: 0;
76+
top: 0;
77+
width: 45%;
78+
height: 55%;
79+
background: hsla(190, 94%, 75%, 0.8);
80+
animation: crossScreen4 30s infinite linear;
81+
animation-delay: -9s;
82+
}
83+
84+
.gradientBlob[data-blob="5"] {
85+
left: 0;
86+
top: 0;
87+
width: 25%;
88+
height: 30%;
89+
background: hsla(324, 98%, 50%, 0.7);
90+
animation: crossScreen5 15s infinite linear;
91+
animation-delay: -2s;
92+
}
93+
94+
@keyframes crossScreen1 {
95+
0% { transform: translate(-40%, -50%) scale(0.8); }
96+
25% { transform: translate(50vw, 20vh) scale(1.2); }
97+
50% { transform: translate(80vw, 70vh) scale(0.9); }
98+
75% { transform: translate(20vw, 90vh) scale(1.4); }
99+
100% { transform: translate(-40%, -50%) scale(0.8); }
100+
}
101+
102+
@keyframes crossScreen2 {
103+
0% { transform: translate(100vw, -35%) scale(1.1); }
104+
20% { transform: translate(30vw, 30vh) scale(0.7); }
105+
40% { transform: translate(-30%, 60vh) scale(1.3); }
106+
60% { transform: translate(70vw, 10vh) scale(0.9); }
107+
80% { transform: translate(10vw, 80vh) scale(1.5); }
108+
100% { transform: translate(100vw, -35%) scale(1.1); }
109+
}
110+
111+
@keyframes crossScreen3 {
112+
0% { transform: translate(50vw, 100vh) scale(1.0); }
113+
33% { transform: translate(-35%, 40vh) scale(1.3); }
114+
66% { transform: translate(90vw, 20vh) scale(0.6); }
115+
100% { transform: translate(50vw, 100vh) scale(1.0); }
116+
}
117+
118+
@keyframes crossScreen4 {
119+
0% { transform: translate(-45%, 50vh) scale(0.7); }
120+
15% { transform: translate(25vw, -55%) scale(1.4); }
121+
35% { transform: translate(85vw, 25vh) scale(0.8); }
122+
55% { transform: translate(60vw, 95vh) scale(1.2); }
123+
75% { transform: translate(10vw, 65vh) scale(0.9); }
124+
100% { transform: translate(-45%, 50vh) scale(0.7); }
125+
}
126+
127+
@keyframes crossScreen5 {
128+
0% { transform: translate(90vw, 80vh) scale(1.2); }
129+
50% { transform: translate(-25%, 10vh) scale(0.8); }
130+
100% { transform: translate(90vw, 80vh) scale(1.2); }
131+
}
132+
133+
@media (prefers-reduced-motion: reduce) {
134+
.gradientBlob {
135+
animation: none;
136+
}
137+
}

‎src/lib/ui/next/styles/Home.module.css‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,6 @@
77
min-height: 100vh;
88
}
99

10-
.background {
11-
pointer-events: none;
12-
position: absolute;
13-
top: 0;
14-
left: 0;
15-
width: 100%;
16-
height: 100%;
17-
overflow: hidden;
18-
pointer-events: none;
19-
z-index: 0;
20-
}
21-
22-
.background::before {
23-
background: url('/assets/hash-pattern.png');
24-
z-index: 1;
25-
-webkit-mask-image: linear-gradient(20deg, #000 25%, transparent);
26-
mask-image: linear-gradient(20deg, #000 25%, transparent);
27-
content: '';
28-
position: absolute;
29-
top: 0;
30-
left: 0;
31-
right: 0;
32-
bottom: 0;
33-
}
34-
35-
.backgroundGradients {
36-
display: block;
37-
position: absolute;
38-
top: -5%;
39-
left: -5%;
40-
width: 110%;
41-
height: 110%;
42-
filter: blur(150px);
43-
}
44-
45-
.container {
46-
position: relative;
47-
height: 100vh;
48-
}
49-
5010
.tagline {
5111
font-family: var(--font-monument-light);
5212
font-size: 0.875rem;

0 commit comments

Comments
 (0)