eny.space Landingpage
1
fork

Configure Feed

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

style(ui): use css masking for hero and marquee fade effects

+9 -24
+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
··· 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
··· 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