samsour.de / eny-social
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(FooterQuote): add dimming animation for the quote text

Sam Sauer de5c8743 13c6d2d6

+53 -8
+53 -8
app/components/FooterQuote.tsx
··· 1 1 "use client"; 2 2 3 - import FadeIn from "./ui/FadeIn"; 3 + import { useRef, useState, useEffect } from "react"; 4 + 5 + const QUOTE = 6 + "\u201CSocial media should be public infrastructure. Like roads, libraries or public spaces. Open, transparent and built for the people who use it.\u201D"; 4 7 5 8 export default function FooterQuote() { 9 + const ref = useRef<HTMLElement>(null); 10 + const [progress, setProgress] = useState(0); 11 + 12 + useEffect(() => { 13 + const el = ref.current; 14 + if (!el) return; 15 + 16 + const observer = new IntersectionObserver( 17 + ([entry]) => { 18 + if (entry.isIntersecting) { 19 + observer.disconnect(); 20 + const words = QUOTE.split(" "); 21 + const totalDuration = 1200; 22 + const stepDuration = totalDuration / words.length; 23 + 24 + words.forEach((_, i) => { 25 + setTimeout(() => { 26 + setProgress(i + 1); 27 + }, i * stepDuration); 28 + }); 29 + } 30 + }, 31 + { threshold: 0.6 } 32 + ); 33 + 34 + observer.observe(el); 35 + return () => observer.disconnect(); 36 + }, []); 37 + 38 + const words = QUOTE.split(" "); 39 + 6 40 return ( 7 - <section className="px-6 py-24"> 41 + <section ref={ref} className="px-6 py-24"> 8 42 <div className="mx-auto max-w-4xl text-center"> 9 - <FadeIn> 10 - <blockquote className="quote"> 11 - &ldquo;Social media should be public infrastructure. Like roads, libraries or public 12 - spaces. Open, transparent and built for the people who use it.&rdquo; 13 - </blockquote> 14 - </FadeIn> 43 + <blockquote className="quote"> 44 + {words.map((word, i) => ( 45 + <span 46 + key={i} 47 + className="transition-colors duration-300" 48 + style={{ 49 + color: 50 + i < progress 51 + ? "var(--dusk-blue)" 52 + : "color-mix(in srgb, var(--dusk-blue) 15%, transparent)", 53 + }} 54 + > 55 + {word} 56 + {i < words.length - 1 ? " " : ""} 57 + </span> 58 + ))} 59 + </blockquote> 15 60 </div> 16 61 </section> 17 62 );