Apple級の製品ページReactコンポーネント

あなたには、コードベースに既存のReactコンポーネントを統合するタスクが与えられています コードベースは以下をサポートしている必要があります： - shadcnプロジェクト構造 - Tailwind CSS - Typescript そうでない場合は、shadcn CLIを介したプロジェクトのセットアップ方法、TailwindまたはTypescriptのインストール方法についての手順を提供してください。 コンポーネントとスタイルのデフォルトパスを決定してください。 コンポーネントのデフォルトパスが /components/ui でない場合は、このフォルダを作成することがなぜ重要であるかの手順を提供してください。 このコンポーネントを /components/ui フォルダにコピー＆ペーストしてください： ```tsx mac-book-neo-hero.tsx "use client"; import * as React from "react"; import { useEffect, useRef, useState } from "react"; export type FrameSequenceStep = { from: number; to: number; color: string; num: string; total: string; icon?: React.ReactNode; title: string; description: string; label: string; }; export type FrameSequenceHeroProps = { frameCount: number; framePath: (i: number) => string; eagerCount?: number; scrollHeight?: string; brand?: React.ReactNode; navLinks?: { label: string; href: string }[]; ctaLabel?: string; ctaHref?: string; title: React.ReactNode; subtitle?: string; steps: FrameSequenceStep[]; className?: string; }; const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(" "); export function FrameSequenceHero({ frameCount, framePath, eagerCount = 140, scrollHeight = "600vh", brand, navLinks = [], ctaLabel, ctaHref = "#", title, subtitle, steps, className, }: FrameSequenceHeroProps) { const spacerRef = useRef(null); const cacheRef = useRef(new Array(frameCount)); const loadedRef = useRef(0); const targetFrameRef = useRef(0); const displayFrameRef = useRef(0); const lastShownRef = useRef(-1); const rafActiveRef = useRef(false); const [loadPct, setLoadPct] = useState(0); const [loaderDone, setLoaderDone] = useState(false); const [navScrolled, setNavScrolled] = useState(false); const [subHidden, setSubHidden] = useState(false); const [activeIdx, setActiveIdx] = useState(-1); const [progress, setProgress] = useState(0); const [stepLocal, setStepLocal] = useState(0); const [currentSrc, setCurrentSrc] = useState(() => framePath(1)); const showFrame = (i: number) => { if (i === lastShownRef.current) return; setCurrentSrc(framePath(i + 1)); lastShownRef.current = i; }; const loop = () => { if (rafActiveRef.current) return; rafActiveRef.current = true; const tick = () => { const diff = targetFrameRef.current - displayFrameRef.current; if (Math.abs(diff) { const eager = Math.min(eagerCount, frameCount); const loadOne = (i: number) => { const img = new Image(); img.decoding = "async"; img.src = framePath(i + 1); const onSettle = () => { loadedRef.current += 1; const pct = Math.round((loadedRef.current / frameCount) * 100); setLoadPct(pct); if (loadedRef.current === eager) { setLoaderDone(true); for (let j = eager; j { const spacer = spacerRef.current; if (!spacer) return; const total = spacer.offsetHeight - window.innerHeight; const p = Math.max(0, Math.min(1, window.scrollY / Math.max(1, total))); targetFrameRef.current = p * (frameCount - 1); loop(); setProgress(p); setNavScrolled(window.scrollY > 4); setSubHidden(window.scrollY > 8); let idx = -1; let local = 0; for (let i = 0; i = s.from && p { window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); onScroll(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [steps, frameCount]); return ( {loadPct {brand} {navLinks.length > 0 && ( {https://t.co/tSkQpsSthN((l) => ( {l.label} ))} )}