'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; /** * Modern Search UI Animation * Features: Material Design, Glassmorphism, Realistic Typing, Smooth Transitions */ const WIDTH = 1200; const HEIGHT = 700; const SUGGESTIONS = [ "丝绸之路纪录片运镜技巧", "西北大漠摄影构图指南", "丝绸之路最佳拍摄季节与光影", "古丝绸之路人文风情抓拍" ]; const COLORS = { bg: '#F9F9F7', searchBox: '#FFFFFF', text: '#333333', cursor: '#0047AB', iconGray: '#9AA0A6', iconBlue: '#1A73E8', highlight: '#F1F3F4', dropdownBg: 'rgba(255, 255, 255, 0.75)', shadow: 'rgba(0, 0, 0, 0.08)' }; export default function ModernSearchUI() { const [inputText, setInputText] = useState(""); const [showDropdown, setShowDropdown] = useState(false); const [iconState, setIconState] = useState({ scale: 1, color: COLORS.iconGray }); const [cursorVisible, setCursorVisible] = useState(true); const [activeItem, setActiveItem] = useState(-1); const [phase, setPhase] = useState("idle"); // idle, typing1, pause, typing2, feedback, dropdown const sequenceRef = useRef(0); useEffect(() => { let isMounted = true; const fullText = "丝绸之路怎么拍"; const part1 = "丝绸之路"; const part2 = "怎么拍"; const runSequence = async () => { if (!isMounted) return; // 1. Initial State setInputText(""); setShowDropdown(false); setIconState({ scale: 1, color: COLORS.iconGray }); setActiveItem(-1); setPhase("idle"); await new Promise(r => setTimeout(r, 1000)); // 2. Typing Part 1 setPhase("typing1"); for (let i = 1; i <= part1.length; i++) { if (!isMounted) return; setInputText(part1.slice(0, i)); await new Promise(r => setTimeout(r, 150 + Math.random() * 100)); } // 3. Pause setPhase("pause"); await new Promise(r => setTimeout(r, 300)); // 4. Typing Part 2 setPhase("typing2"); for (let i = 1; i <= part2.length; i++) { if (!isMounted) return; setInputText(part1 + part2.slice(0, i)); await new Promise(r => setTimeout(r, 120 + Math.random() * 80)); } // 5. Search Feedback setPhase("feedback"); setIconState({ scale: 1.2, color: COLORS.iconBlue }); await new Promise(r => setTimeout(r, 200)); setIconState({ scale: 1, color: COLORS.iconBlue }); // 6. Dropdown Expand setShowDropdown(true); setPhase("dropdown"); // 7. Highlight first item after a short delay await new Promise(r => setTimeout(r, 800)); setActiveItem(0); // 8. Wait and Reset await new Promise(r => setTimeout(r, 4000)); if (isMounted) runSequence(); }; runSequence(); // Cursor breathing timer const cursorInterval = setInterval(() => { setCursorVisible(prev => !prev); }, 500); return () => { isMounted = false; clearInterval(cursorInterval); }; }, []); return (

{/* Background Decorative Elements */} {/* Search Container */}

{/* Main Search Box */}

{inputText}

{/* Dropdown Menu */} {showDropdown && (

{SUGGESTIONS.map((item, index) => ( {item} ))}

)}

{/* Floating UI Elements for Polish */}

{/* Center Prompt (Optional subtle branding) */}

Search

{/* Footer Hint */}

Google 搜索手气不错

{/* Interaction Ripple Effect (Visual Only) */}

); } /** * Key technical choices: * 1. Fixed dimensions 1200x700 as requested. * 2. `useEffect` with empty dependency array to control the master animation loop. * 3. `AnimatePresence` and `motion` from framer-motion for smooth height and opacity transitions. * 4. Glassmorphism effect using `backdropFilter` and semi-transparent white. * 5. Typing simulation with `setTimeout` and `Math.random` for a human feel. * 6. Visual feedback on search icon using spring physics. * 7. Clean, Material-inspired aesthetic with cold tech blues and neutral grays. */