"use client"; import { useRef, useEffect, useState } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { cn } from "../../lib/utils"; interface AnimatedSmartwatchProps { /** Content to display on the watch screen (URL or component) */ screenContent?: string; /** Watch color */ color?: "black" | "silver" | "gold"; /** Band color */ bandColor?: "black" | "white" | "blue" | "red" | "green"; /** Scale factor for the watch size (default: 1) */ scale?: number; /** Custom class name for the container */ className?: string; /** Whether to fix position at center point (default: false) */ fixPositionAtCenter?: boolean; } export default function AnimatedSmartwatch({ screenContent = "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80", color = "black", bandColor = "black", scale = 1, className, fixPositionAtCenter = false, }: AnimatedSmartwatchProps) { const containerRef = useRef(null); const [currentTime, setCurrentTime] = useState(new Date()); // Update time every second useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => { clearInterval(timer); }; }, []); // Format time values const hours = currentTime.getHours() % 12 || 12; const minutes = currentTime.getMinutes().toString().padStart(2, "0"); const seconds = currentTime.getSeconds().toString().padStart(2, "0"); const day = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"][ currentTime.getDay() ]; const date = currentTime.getDate(); // Track scroll progress within the container const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start end", "end start"], }); // Create scroll-based animations // If fixPositionAtCenter is true, maintain the center position (0.5) values after reaching the midpoint const rotateZ = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [-45, 0, 0] : [-45, 0, 45] ); const rotateX = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [10, 0, 0] : [10, 0, 10] ); const rotateY = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [-10, 0, 0] : [-10, 0, 10] ); const scale3d = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [0.8, 1, 1] : [0.8, 1, 0.8] ); // Lighting effects - also fixed at optimal values if fixPositionAtCenter is true const brightness = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [0.7, 1, 1] : [0.7, 1, 0.7] ); const reflectionOpacity = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [0.1, 0.4, 0.4] : [0.1, 0.4, 0.1] ); // Shadow effects - also fixed at optimal values if fixPositionAtCenter is true const shadowOpacity = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [0.2, 0.5, 0.5] : [0.2, 0.5, 0.2] ); const shadowBlur = useTransform( scrollYProgress, [0, 0.5, 1], fixPositionAtCenter ? [10, 25, 25] : [10, 25, 10] ); // Color styles with enhanced metallic effects const caseColors = { black: { main: "from-gray-800 to-gray-950", highlight: "from-gray-700 to-gray-800", edge: "bg-gray-700", button: "from-gray-600 to-gray-800", }, silver: { main: "from-gray-300 to-gray-400", highlight: "from-gray-200 to-gray-300", edge: "bg-gray-200", button: "from-gray-400 to-gray-500", }, gold: { main: "from-amber-200 to-amber-400", highlight: "from-amber-100 to-amber-300", edge: "bg-amber-100", button: "from-amber-300 to-amber-500", }, }; const bandColors = { black: { main: "from-gray-800 to-gray-950", texture: "opacity-10", highlight: "bg-gray-700", }, white: { main: "from-gray-100 to-gray-200", texture: "opacity-5", highlight: "bg-white", }, blue: { main: "from-blue-600 to-blue-800", texture: "opacity-10", highlight: "bg-blue-500", }, red: { main: "from-red-600 to-red-800", texture: "opacity-10", highlight: "bg-red-500", }, green: { main: "from-green-600 to-green-800", texture: "opacity-10", highlight: "bg-green-500", }, }; return (

{/* Watch Container with 3D perspective */}

{/* Upper watch band with enhanced realism */}

{/* Band texture */}

{/* Band highlights */}

{/* Band connection to watch */}

{/* Band clasp */}

{/* Watch body with animations and enhanced realism */} {/* Watch case with enhanced metallic effect */}

{/* Metallic texture */}

{/* Circular brushed metal texture */}

{/* Case highlights for realism */}

{/* Enhanced digital crown */}

{Array.from({ length: 8 }).map((_, i) => (

))}

{/* Side button */}

{/* Screen with enhanced bezel */} {/* Watch face with live time */}

{/* Background image with reduced opacity */} {screenContent && (

)} {/* Digital time display with enhanced typography */}

{hours} : {minutes} {seconds}

{day} {date}

{/* Enhanced screen reflections */} {/* Screen edge vignette */}

{/* Subtle screen texture */}

{/* Watch sensors on the back */}

{/* Heart rate sensor */}

{/* Small charging contacts */}

{/* Serial number */}

SN: WCH94720XZYA

{/* Lower watch band with enhanced realism */}

{/* Band texture */}

{/* Band highlights */}

{/* Band connection to watch */}

{/* Band adjustment holes */}

{Array.from({ length: 5 }).map((_, i) => (

))}

{/* Band buckle */}

{/* Enhanced dynamic shadow with more realistic shape */}

); }

Animated Smartwatch

Animated Smartwatch

Premium Design

Install Dependencies