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(Hero): trying out a morphing shape with border-radius WIP
+22
-12
+6
-12
app/components/Hero.tsx
+6
-12
app/components/Hero.tsx
···
91
91
92
92
{/* Image (6 cols) — bleeds top + right, blob visible on left + bottom */}
93
93
<div className="relative lg:col-span-6 lg:overflow-visible">
94
-
{/* Blob clip path definition */}
95
-
<svg className="absolute h-0 w-0" aria-hidden="true">
96
-
<defs>
97
-
<clipPath id="hero-blob" clipPathUnits="objectBoundingBox">
98
-
<path d="M0.9502,0.5487 C1.0731,0.7445,0.9515,1.0075,0.7345,0.9473 C0.6670,0.9286,0.4922,0.9118,0.4336,0.9537 C0.2466,1.0875,0.0064,0.9066,0.0696,0.6794 C0.0894,0.6084,0.0786,0.5322,0.0403,0.4712 C-0.0826,0.2754,0.0950,0.0193,0.3119,0.0794 C0.3795,0.0982,0.4523,0.0850,0.5108,0.0431 C0.6977,-0.0907,0.9993,0.1093,0.9361,0.3364 C0.9163,0.4074,0.9119,0.4876,0.9502,0.5487Z" />
99
-
</clipPath>
100
-
</defs>
101
-
</svg>
102
-
{/* Full-size blob-masked photo */}
94
+
{/* Full-size blob-masked photo */}
103
95
<div
104
-
// className="relative w-[130%] -mr-[30%] lg:w-[170%] lg:-mr-[70%] lg:[transform:translate(2%,-20%)]"
105
-
className="relative w-[130%] -mr-[30%] lg:w-[170%] aspect-square lg:-mr-[70%] lg:[transform:translate(2%,-20%)]"
106
-
style={{ clipPath: "url(#hero-blob)" }}
96
+
className="relative w-[130%] -mr-[30%] lg:w-[170%] aspect-square lg:-mr-[70%] lg:[transform:translate(2%,-20%)] overflow-hidden"
97
+
style={{
98
+
borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%",
99
+
animation: "blob-breathe 12s ease-in-out infinite",
100
+
}}
107
101
>
108
102
{slides.map((slide, index) => (
109
103
<img
+16
app/globals.css
+16
app/globals.css
···
251
251
}
252
252
}
253
253
254
+
/* Organic blob breathing for hero image */
255
+
@keyframes blob-breathe {
256
+
0%, 100% {
257
+
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
258
+
}
259
+
25% {
260
+
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
261
+
}
262
+
50% {
263
+
border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%;
264
+
}
265
+
75% {
266
+
border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%;
267
+
}
268
+
}
269
+
254
270
/* Horizontal scroll for value cards */
255
271
.hide-scrollbar {
256
272
-ms-overflow-style: none;