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
refactor(GrainFilter): reduce grain filter for improved performance
+149
-125
+62
-58
app/components/GrainedBlob.tsx
+62
-58
app/components/GrainedBlob.tsx
···
1
+
import { GRAIN_ENABLED } from "./ui/GrainFilter";
2
+
1
3
interface GrainedBlobProps {
2
4
className?: string;
3
5
}
···
10
12
fill="none"
11
13
xmlns="http://www.w3.org/2000/svg"
12
14
>
13
-
<g filter="url(#grain-filter)">
15
+
<g filter={GRAIN_ENABLED ? "url(#grain-filter)" : undefined}>
14
16
<path
15
17
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
18
fill="var(--cotton-candy)"
···
28
30
/>
29
31
</path>
30
32
</g>
31
-
<defs>
32
-
<filter
33
-
id="grain-filter"
34
-
x="0"
35
-
y="0"
36
-
width="1270.02"
37
-
height="1301.42"
38
-
filterUnits="userSpaceOnUse"
39
-
colorInterpolationFilters="sRGB"
40
-
>
41
-
<feFlood floodOpacity="0" result="BackgroundImageFix" />
42
-
<feBlend
43
-
mode="normal"
44
-
in="SourceGraphic"
45
-
in2="BackgroundImageFix"
46
-
result="shape"
47
-
/>
48
-
<feTurbulence
49
-
type="fractalNoise"
50
-
baseFrequency="0.75 0.75"
51
-
stitchTiles="stitch"
52
-
numOctaves={1}
53
-
result="noise"
54
-
seed={939}
55
-
/>
56
-
<feColorMatrix
57
-
in="noise"
58
-
type="luminanceToAlpha"
59
-
result="alphaNoise"
60
-
/>
61
-
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
62
-
<feFuncA
63
-
type="discrete"
64
-
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
33
+
{GRAIN_ENABLED && (
34
+
<defs>
35
+
<filter
36
+
id="grain-filter"
37
+
x="0"
38
+
y="0"
39
+
width="1270.02"
40
+
height="1301.42"
41
+
filterUnits="userSpaceOnUse"
42
+
colorInterpolationFilters="sRGB"
43
+
>
44
+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
45
+
<feBlend
46
+
mode="normal"
47
+
in="SourceGraphic"
48
+
in2="BackgroundImageFix"
49
+
result="shape"
65
50
/>
66
-
</feComponentTransfer>
67
-
<feComposite
68
-
operator="in"
69
-
in2="shape"
70
-
in="coloredNoise1"
71
-
result="noise1Clipped"
72
-
/>
73
-
<feFlood
74
-
floodColor="color-mix(in srgb, var(--cotton-candy) 75%, #DF6666)"
75
-
result="color1Flood"
76
-
/>
77
-
<feComposite
78
-
operator="in"
79
-
in2="noise1Clipped"
80
-
in="color1Flood"
81
-
result="color1"
82
-
/>
83
-
<feMerge result="effect1_noise">
84
-
<feMergeNode in="shape" />
85
-
<feMergeNode in="color1" />
86
-
</feMerge>
87
-
</filter>
88
-
</defs>
51
+
<feTurbulence
52
+
type="fractalNoise"
53
+
baseFrequency="0.75 0.75"
54
+
stitchTiles="stitch"
55
+
numOctaves={1}
56
+
result="noise"
57
+
seed={939}
58
+
/>
59
+
<feColorMatrix
60
+
in="noise"
61
+
type="luminanceToAlpha"
62
+
result="alphaNoise"
63
+
/>
64
+
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
65
+
<feFuncA
66
+
type="discrete"
67
+
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
68
+
/>
69
+
</feComponentTransfer>
70
+
<feComposite
71
+
operator="in"
72
+
in2="shape"
73
+
in="coloredNoise1"
74
+
result="noise1Clipped"
75
+
/>
76
+
<feFlood
77
+
floodColor="color-mix(in srgb, var(--cotton-candy) 75%, #DF6666)"
78
+
result="color1Flood"
79
+
/>
80
+
<feComposite
81
+
operator="in"
82
+
in2="noise1Clipped"
83
+
in="color1Flood"
84
+
result="color1"
85
+
/>
86
+
<feMerge result="effect1_noise">
87
+
<feMergeNode in="shape" />
88
+
<feMergeNode in="color1" />
89
+
</feMerge>
90
+
</filter>
91
+
</defs>
92
+
)}
89
93
</svg>
90
94
);
91
95
}
+11
-67
app/components/ValueCards.tsx
+11
-67
app/components/ValueCards.tsx
···
1
1
import FadeIn from "./ui/FadeIn";
2
+
import { GRAIN_ENABLED } from "./ui/GrainFilter";
2
3
3
4
export default function ValueCards() {
4
5
const cards = [
···
35
36
36
37
return (
37
38
<section id="values" className="relative py-24">
38
-
{/* Grain filter definition */}
39
-
<svg className="absolute h-0 w-0" aria-hidden="true">
40
-
<defs>
41
-
{/* Star clip-path (330x336 → objectBoundingBox) */}
42
-
<clipPath id="star-clip" clipPathUnits="objectBoundingBox">
43
-
<path
44
-
transform="scale(0.003030, 0.002976)"
45
-
d="M269.049 70.5681C302.25 60.8121 326.225 102.338 301.176 126.212C285.271 141.371 288.453 167.64 307.572 178.467L314.263 182.256C343.038 198.551 329.55 242.538 296.568 240.162C274.702 238.586 258.156 259.678 264.971 280.513C275.346 312.232 234.971 335.542 212.689 310.698C198.052 294.378 171.514 298.162 161.945 317.886C147.512 347.638 102.674 337.325 102.95 304.258L103.014 296.569C103.197 274.598 82.0388 258.707 60.9583 264.902C27.7579 274.658 3.78289 233.132 28.832 209.258C44.737 194.099 41.5545 167.83 22.4355 157.003L15.7443 153.214C-13.0301 136.919 0.457428 92.9322 33.44 95.3084C55.3054 96.8837 71.8515 75.7925 65.0365 54.9565C54.6619 23.238 95.0367 -0.0723286 117.318 24.7715C131.955 41.0915 158.494 37.3078 168.062 17.5841C182.496 -12.1677 227.333 -1.85504 227.058 31.2118L226.994 38.9011C226.811 60.8722 247.969 76.7627 269.049 70.5681Z"
46
-
/>
47
-
</clipPath>
48
-
<filter
49
-
id="grain"
50
-
x="0"
51
-
y="0"
52
-
width="100%"
53
-
height="100%"
54
-
filterUnits="objectBoundingBox"
55
-
colorInterpolationFilters="sRGB"
56
-
>
57
-
<feTurbulence
58
-
type="fractalNoise"
59
-
baseFrequency="0.5"
60
-
numOctaves="3"
61
-
stitchTiles="stitch"
62
-
seed="1581"
63
-
result="noise"
64
-
/>
65
-
<feColorMatrix
66
-
in="noise"
67
-
type="luminanceToAlpha"
68
-
result="alphaNoise"
69
-
/>
70
-
<feComponentTransfer in="alphaNoise" result="coloredNoise">
71
-
<feFuncA
72
-
type="discrete"
73
-
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
74
-
/>
75
-
</feComponentTransfer>
76
-
<feComposite
77
-
operator="in"
78
-
in2="SourceGraphic"
79
-
in="coloredNoise"
80
-
result="noiseClipped"
81
-
/>
82
-
<feFlood floodColor="rgba(0, 0, 0, 0.05)" result="colorFlood" />
83
-
<feComposite
84
-
operator="in"
85
-
in2="noiseClipped"
86
-
in="colorFlood"
87
-
result="colorNoise"
88
-
/>
89
-
<feMerge>
90
-
<feMergeNode in="SourceGraphic" />
91
-
<feMergeNode in="colorNoise" />
92
-
</feMerge>
93
-
</filter>
94
-
</defs>
95
-
</svg>
96
-
97
39
<div className="relative">
98
40
<div className="hide-scrollbar flex gap-6 overflow-x-auto pb-4 -ml-[140px] -mr-[140px] lg:-ml-[80px] lg:-mr-[80px] pl-0 pr-0 lg:justify-center items-center">
99
41
{cards.map((card, i) => (
···
118
60
}}
119
61
>
120
62
{/* Grain overlay */}
121
-
<div
122
-
className="pointer-events-none absolute inset-0"
123
-
style={{ filter: "url(#grain)" }}
124
-
>
63
+
{GRAIN_ENABLED && (
125
64
<div
126
-
className="h-full w-full"
127
-
style={{ backgroundColor: card.bg }}
128
-
/>
129
-
</div>
65
+
className="pointer-events-none absolute inset-0"
66
+
style={{ filter: "url(#grain)" }}
67
+
>
68
+
<div
69
+
className="h-full w-full"
70
+
style={{ backgroundColor: card.bg }}
71
+
/>
72
+
</div>
73
+
)}
130
74
{(card.label || card.body) && (
131
75
<div
132
76
className={`relative flex flex-col ${
+74
app/components/ui/GrainFilter.tsx
+74
app/components/ui/GrainFilter.tsx
···
1
+
/**
2
+
* Shared SVG grain filter definitions.
3
+
* Render once (e.g. in layout or page root) — all components reference by id.
4
+
*
5
+
* Toggle GRAIN_ENABLED to disable all grain effects site-wide.
6
+
*/
7
+
8
+
export const GRAIN_ENABLED = false;
9
+
10
+
export default function GrainFilter() {
11
+
return (
12
+
<svg className="absolute h-0 w-0" aria-hidden="true">
13
+
<defs>
14
+
{/* Star clip-path — used by ValueCards (always needed) */}
15
+
<clipPath id="star-clip" clipPathUnits="objectBoundingBox">
16
+
<path
17
+
transform="scale(0.003030, 0.002976)"
18
+
d="M269.049 70.5681C302.25 60.8121 326.225 102.338 301.176 126.212C285.271 141.371 288.453 167.64 307.572 178.467L314.263 182.256C343.038 198.551 329.55 242.538 296.568 240.162C274.702 238.586 258.156 259.678 264.971 280.513C275.346 312.232 234.971 335.542 212.689 310.698C198.052 294.378 171.514 298.162 161.945 317.886C147.512 347.638 102.674 337.325 102.95 304.258L103.014 296.569C103.197 274.598 82.0388 258.707 60.9583 264.902C27.7579 274.658 3.78289 233.132 28.832 209.258C44.737 194.099 41.5545 167.83 22.4355 157.003L15.7443 153.214C-13.0301 136.919 0.457428 92.9322 33.44 95.3084C55.3054 96.8837 71.8515 75.7925 65.0365 54.9565C54.6619 23.238 95.0367 -0.0723286 117.318 24.7715C131.955 41.0915 158.494 37.3078 168.062 17.5841C182.496 -12.1677 227.333 -1.85504 227.058 31.2118L226.994 38.9011C226.811 60.8722 247.969 76.7627 269.049 70.5681Z"
19
+
/>
20
+
</clipPath>
21
+
22
+
{/* Generic dark grain — used by ValueCards shapes */}
23
+
{GRAIN_ENABLED && (
24
+
<filter
25
+
id="grain"
26
+
x="0"
27
+
y="0"
28
+
width="100%"
29
+
height="100%"
30
+
filterUnits="objectBoundingBox"
31
+
colorInterpolationFilters="sRGB"
32
+
>
33
+
<feTurbulence
34
+
type="fractalNoise"
35
+
baseFrequency="0.5"
36
+
numOctaves="3"
37
+
stitchTiles="stitch"
38
+
seed="1581"
39
+
result="noise"
40
+
/>
41
+
<feColorMatrix
42
+
in="noise"
43
+
type="luminanceToAlpha"
44
+
result="alphaNoise"
45
+
/>
46
+
<feComponentTransfer in="alphaNoise" result="coloredNoise">
47
+
<feFuncA
48
+
type="discrete"
49
+
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
50
+
/>
51
+
</feComponentTransfer>
52
+
<feComposite
53
+
operator="in"
54
+
in2="SourceGraphic"
55
+
in="coloredNoise"
56
+
result="noiseClipped"
57
+
/>
58
+
<feFlood floodColor="rgba(0, 0, 0, 0.05)" result="colorFlood" />
59
+
<feComposite
60
+
operator="in"
61
+
in2="noiseClipped"
62
+
in="colorFlood"
63
+
result="colorNoise"
64
+
/>
65
+
<feMerge>
66
+
<feMergeNode in="SourceGraphic" />
67
+
<feMergeNode in="colorNoise" />
68
+
</feMerge>
69
+
</filter>
70
+
)}
71
+
</defs>
72
+
</svg>
73
+
);
74
+
}
+2
app/page.tsx
+2
app/page.tsx
···
8
8
import FooterQuote from "./components/FooterQuote";
9
9
import Footer from "./components/Footer";
10
10
import GrainedBlob from "./components/GrainedBlob";
11
+
import GrainFilter from "./components/ui/GrainFilter";
11
12
12
13
export default function Home() {
13
14
return (
14
15
<div className="overflow-x-hidden">
16
+
<GrainFilter />
15
17
<Nav />
16
18
<main className="relative z-10">
17
19
<Hero />