Nicholai
9845081330
- Add interactive link animations with orange glow and draw-in underlines - Implement scroll progress indicator (orange vertical bar) - Add animated section dividers that expand on scroll into view - Create loading skeleton for YouTube iframe previews - Animate accordion chevron to orange when open - Add hover tooltip to BIOHAZARD easter egg title - Add scroll-triggered fade-in for pigeon easter egg - Add subtle separation between contact links - Extract reusable components: ScrollProgressBar, SectionDivider, VideoPreview - Maintain dark VFX aesthetic with snappy framer-motion animations
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
interface VideoPreviewProps {
|
|
videoId: string;
|
|
title: string;
|
|
}
|
|
|
|
export function VideoPreview({ videoId, title }: VideoPreviewProps) {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
return (
|
|
<div className="relative w-full" style={{ width: 320, height: 180 }}>
|
|
<AnimatePresence>
|
|
{isLoading && (
|
|
<motion.div
|
|
initial={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="absolute inset-0 bg-black rounded-md flex items-center justify-center"
|
|
>
|
|
<motion.div
|
|
animate={{ opacity: [0.5, 1, 0.5] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
|
className="w-16 h-16 border-2 border-gray-800 rounded-md"
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
<iframe
|
|
width="320"
|
|
height="180"
|
|
src={`https://www.youtube.com/embed/${videoId}`}
|
|
title={title}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="rounded-md border-0"
|
|
onLoad={() => setIsLoading(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|