The source code for our eny.social landing page, which is mirrored in a different repository as part of the CI setup.
eny.social
social-network
eny
local-first
feat(layout): more blobby clip path animations
+21
-4
+13
-1
app/components/GrainedBlob.tsx
+13
-1
app/components/GrainedBlob.tsx
···
14
14
<path
15
15
d="M994.079 254.763C1273.76 285.396 1370.84 647.705 1143.95 814.073C1074.74 864.815 1030.37 943.802 1023.8 1029.36C1002.5 1306.34 644.568 1402.24 487.638 1173.02C439.161 1102.22 361.242 1056 275.94 1046.65C-3.73878 1016.02 -100.819 653.713 126.073 487.345C195.276 436.603 239.646 357.615 246.224 272.056C267.52 -4.91779 625.452 -100.825 782.381 128.393C830.858 199.2 908.777 245.42 994.079 254.763Z"
16
16
fill="var(--cotton-candy)"
17
-
/>
17
+
>
18
+
<animate
19
+
attributeName="d"
20
+
dur="14s"
21
+
repeatCount="indefinite"
22
+
values="
23
+
M994.079 254.763C1273.76 285.396 1370.84 647.705 1143.95 814.073C1074.74 864.815 1030.37 943.802 1023.8 1029.36C1002.5 1306.34 644.568 1402.24 487.638 1173.02C439.161 1102.22 361.242 1056 275.94 1046.65C-3.73878 1016.02 -100.819 653.713 126.073 487.345C195.276 436.603 239.646 357.615 246.224 272.056C267.52 -4.91779 625.452 -100.825 782.381 128.393C830.858 199.2 908.777 245.42 994.079 254.763Z;
24
+
M1014.08 244.76C1293.76 275.39 1360.84 657.71 1133.95 824.07C1064.74 874.82 1040.37 933.80 1033.80 1019.36C1012.50 1296.34 654.57 1412.24 497.64 1183.02C449.16 1112.22 351.24 1066.00 265.94 1056.65C-13.74 1026.02 -90.82 643.71 136.07 477.35C205.28 426.60 249.65 347.62 256.22 262.06C277.52 -14.92 635.45 -110.83 792.38 118.39C840.86 189.20 918.78 235.42 1014.08 244.76Z;
25
+
M984.08 264.76C1263.76 295.40 1380.84 637.71 1153.95 804.07C1084.74 854.82 1020.37 953.80 1013.80 1039.36C992.50 1316.34 634.57 1392.24 477.64 1163.02C429.16 1092.22 371.24 1046.00 285.94 1036.65C6.26 1006.02 -110.82 663.71 116.07 497.35C185.28 446.60 229.65 367.62 236.22 282.06C257.52 5.08 615.45 -90.83 772.38 138.39C820.86 209.20 898.78 255.42 984.08 264.76Z;
26
+
M994.079 254.763C1273.76 285.396 1370.84 647.705 1143.95 814.073C1074.74 864.815 1030.37 943.802 1023.8 1029.36C1002.5 1306.34 644.568 1402.24 487.638 1173.02C439.161 1102.22 361.242 1056 275.94 1046.65C-3.73878 1016.02 -100.819 653.713 126.073 487.345C195.276 436.603 239.646 357.615 246.224 272.056C267.52 -4.91779 625.452 -100.825 782.381 128.393C830.858 199.2 908.777 245.42 994.079 254.763Z
27
+
"
28
+
/>
29
+
</path>
18
30
</g>
19
31
<defs>
20
32
<filter
+8
-3
app/components/Hero.tsx
+8
-3
app/components/Hero.tsx
···
114
114
115
115
{/* Full-size blob-masked photo */}
116
116
<div
117
-
className="relative w-[130%] -mr-[30%] lg:w-[170%] aspect-square lg:-mr-[70%] lg:[transform:translate(2%,-20%)]"
117
+
className="relative w-[130%] -mr-[30%] lg:w-[170%] aspect-square lg:-mr-[70%] lg:[transform:translate(2%,-20%)] overflow-hidden"
118
118
style={{ clipPath: "url(#hero-blob)" }}
119
119
>
120
120
{slides.map((slide, index) => (
···
122
122
key={slide.word}
123
123
src={slide.image}
124
124
alt={`People ${slide.word}`}
125
-
className="absolute inset-0 h-full w-full object-cover transition-opacity duration-500"
126
-
style={{ opacity: currentIndex === index ? 1 : 0 }}
125
+
className="absolute inset-[-12%] h-[124%] w-[124%] object-cover"
126
+
style={{
127
+
transition: "opacity 500ms ease-out, transform 3000ms ease-out",
128
+
opacity: currentIndex === index ? 1 : 0,
129
+
transform:
130
+
currentIndex === index ? "scale(1)" : "scale(1.06)",
131
+
}}
127
132
/>
128
133
))}
129
134
</div>