eny.space Landingpage
style(ui): use css masking for hero and marquee fade effects
+9
-24
+6
-2
app/components/hero/hero-background.tsx
+6
-2
app/components/hero/hero-background.tsx
···
4
4
import Image from "next/image";
5
5
import { motion, useScroll, useTransform } from "framer-motion";
6
6
7
-
export function HeroBackground({ showPlanets = true }: { showPlanets?: boolean }) {
7
+
export function HeroBackground({
8
+
showPlanets = true,
9
+
}: {
10
+
showPlanets?: boolean;
11
+
}) {
8
12
const { scrollYProgress } = useScroll();
9
13
10
14
// Parallax ratios (approximate 10%, 30%, 80%)
···
99
103
style={{ y: midOrbsY }}
100
104
aria-hidden
101
105
>
102
-
<div className="absolute inset-0">
106
+
<div className="pointer-events-none fixed inset-0 -z-5 [mask-image:linear-gradient(to_bottom,transparent,black_14%,black_86%,transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_14%,black_86%,transparent)]">
103
107
<div className="absolute left-[12%] top-[18%] h-40 w-40 rounded-full bg-sky-400/10 blur-3xl shadow-[0_0_120px_rgba(56,189,248,0.55)]" />
104
108
<div className="absolute right-[10%] top-[35%] h-56 w-56 rounded-full bg-fuchsia-400/15 blur-3xl shadow-[0_0_160px_rgba(244,114,182,0.65)]" />
105
109
<div className="absolute left-[30%] bottom-[20%] h-48 w-64 rounded-[999px] bg-indigo-400/10 blur-[80px] shadow-[0_0_180px_rgba(129,140,248,0.6)]" />
+2
-13
app/components/logo-bar/logo-bar.tsx
+2
-13
app/components/logo-bar/logo-bar.tsx
···
22
22
23
23
function LogoBarItem({
24
24
item,
25
-
index,
26
25
}: {
27
26
item: (typeof PLACEHOLDER_LINKS)[number];
28
-
index: number;
29
27
}) {
30
28
const Icon = item.icon;
31
29
return (
···
43
41
44
42
function LogoBarScroll() {
45
43
return (
46
-
<div className="relative w-full overflow-hidden py-8">
47
-
<div
48
-
className="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-neutral-950 to-transparent z-10"
49
-
aria-hidden="true"
50
-
/>
51
-
<div
52
-
className="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-neutral-950 to-transparent z-10"
53
-
aria-hidden="true"
54
-
/>
44
+
<div className="relative w-full overflow-hidden py-8 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]">
55
45
<div className="flex w-max animate-marquee items-center [transform:translateZ(0)]">
56
46
{["a", "b"].map((blockId) => (
57
47
<div
···
59
49
className="flex shrink-0 items-center gap-16 whitespace-nowrap"
60
50
>
61
51
{PLACEHOLDER_LINKS.slice(0, 6).map((item, i) => (
62
-
<LogoBarItem key={`${blockId}-${i}`} item={item} index={i} />
52
+
<LogoBarItem key={`${blockId}-${i}`} item={item} />
63
53
))}
64
54
<div className="flex shrink-0 items-center">
65
55
<LogoBarItem
66
56
key={`${blockId}-6`}
67
57
item={PLACEHOLDER_LINKS[6]}
68
-
index={6}
69
58
/>
70
59
<span className="w-16 shrink-0" aria-hidden />
71
60
</div>
+1
-9
app/components/testimonials/testimonials-section.tsx
+1
-9
app/components/testimonials/testimonials-section.tsx
···
85
85
</div>
86
86
87
87
<div className="mx-auto mt-12 max-w-6xl">
88
-
<div className="relative w-full overflow-hidden py-4">
89
-
<div
90
-
className="pointer-events-none absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-slate-950/80 to-transparent z-10"
91
-
aria-hidden="true"
92
-
/>
93
-
<div
94
-
className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-slate-950/80 to-transparent z-10"
95
-
aria-hidden="true"
96
-
/>
88
+
<div className="relative w-full overflow-hidden pt-4 pb-8 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
97
89
<div className="flex w-max animate-marquee items-stretch gap-6 [transform:translateZ(0)]">
98
90
{["a", "b"].map((blockId) => (
99
91
<div