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
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(layout): more blobby clip path animations

Sam Sauer 60047f23 762f5553

+21 -4
+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
··· 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>