| 369 | ] |
| 370 | |
| 371 | function PhilosophySection() { |
| 372 | const [litWords, setLitWords] = useState<Set<number>>(new Set()) |
| 373 | |
| 374 | const lightUp = (i: number) => { |
| 375 | setLitWords((prev) => { |
| 376 | const next = new Set(prev) |
| 377 | next.add(i) |
| 378 | return next |
| 379 | }) |
| 380 | } |
| 381 | |
| 382 | const dimDown = (i: number) => { |
| 383 | setLitWords((prev) => { |
| 384 | const next = new Set(prev) |
| 385 | next.delete(i) |
| 386 | return next |
| 387 | }) |
| 388 | } |
| 389 | |
| 390 | return ( |
| 391 | <div className="flex flex-col gap-12 md:gap-16"> |
| 392 | {PHILOSOPHY_WORDS.map((item, i) => ( |
| 393 | <motion.div |
| 394 | key={item.word} |
| 395 | initial={{ opacity: 0, filter: 'blur(12px)' }} |
| 396 | whileInView={{ opacity: 1, filter: 'blur(0px)' }} |
| 397 | viewport={{ once: true, amount: 0.5 }} |
| 398 | transition={{ duration: 0.7, delay: i * 0.1 }} |
| 399 | className="group" |
| 400 | > |
| 401 | <motion.div |
| 402 | onViewportEnter={() => lightUp(i)} |
| 403 | onViewportLeave={() => dimDown(i)} |
| 404 | viewport={{ margin: '0px 0px -50% 0px' }} |
| 405 | className={cn( |
| 406 | 'font-dm-mono text-7xl md:text-[8rem] lg:text-[6rem] xl:text-[8rem] font-medium leading-[0.85] tracking-tighter select-none transition-all duration-500', |
| 407 | litWords.has(i) ? 'keyword-filled' : 'keyword-hollow', |
| 408 | )} |
| 409 | > |
| 410 | {item.word} |
| 411 | </motion.div> |
| 412 | <p className="mt-3 md:mt-4 text-zinc-400 text-sm md:text-base font-mono tracking-wide"> |
| 413 | {item.description} |
| 414 | </p> |
| 415 | </motion.div> |
| 416 | ))} |
| 417 | </div> |
| 418 | ) |
| 419 | } |
| 420 | |
| 421 | const wordVariant = { |
| 422 | initial: { opacity: 0, y: 30, filter: 'blur(8px)' }, |