function ScreenLibrary({ playing = false }) { const [t, setT] = useStateFS(0); const panelRef = React.useRef(null); React.useEffect(() => { if (!playing) { setT(0); return; } let startTime = performance.now(); let rafId; const loop = (now) => { const elapsed = (now - startTime) / 1000; setT(elapsed % 9); // 9-second loop rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, [playing]); // Coordinates mapping for full-width layout. Y values are %s of the // FSFrame body (~395px), so source values are picked to land on actual // elements rendered in the current layout. let cursorX = 85; let cursorY = 65; let isHoveredAdd = false; let isClickedAdd = false; let isDropdownOpen = false; let isHoveredDate = false; let isClickedDate = false; let isQuestionAdded = false; // Auto-scroll loop showing ALL categories let scrollTopAmount = 0; if (t < 1.2) { const pct = t / 1.2; const ease = pct < 0.5 ? 2 * pct * pct : 1 - Math.pow(-2 * pct + 2, 2) / 2; cursorX = 85 + (90 - 85) * ease; cursorY = 65 + (10 - 65) * ease; } else if (t < 1.5) { cursorX = 90; cursorY = 10; isHoveredAdd = true; } else if (t < 1.7) { cursorX = 90; cursorY = 10; isHoveredAdd = true; isClickedAdd = true; } else if (t < 2.0) { cursorX = 90; cursorY = 10; isDropdownOpen = true; } else if (t < 3.3) { // Scroll Down to show Choice, Rating, Benchmarking isDropdownOpen = true; cursorX = 92; cursorY = 28; const pct = (t - 2.0) / 1.3; scrollTopAmount = pct * 210; } else if (t < 3.8) { // Hold at bottom to read Benchmarking / Special isDropdownOpen = true; cursorX = 92; cursorY = 28; scrollTopAmount = 210; } else if (t < 4.8) { // Scroll Up back to Text Questions isDropdownOpen = true; cursorX = 92; cursorY = 28; const pct = (t - 3.8) / 1.0; scrollTopAmount = 210 * (1 - pct); } else if (t < 5.2) { // Hover over Date isDropdownOpen = true; scrollTopAmount = 0; const pct = (t - 4.8) / 0.4; cursorX = 92 + (87 - 92) * pct; cursorY = 28 + (34 - 28) * pct; isHoveredDate = true; } else if (t < 5.4) { // Click Date isDropdownOpen = true; scrollTopAmount = 0; cursorX = 87; cursorY = 34; isHoveredDate = true; isClickedDate = true; } else if (t < 5.8) { // Dropdown Closes, Question Appended isDropdownOpen = false; scrollTopAmount = 0; cursorX = 87; cursorY = 34; isQuestionAdded = true; } else if (t < 7.5) { // Cursor glides back to rest isQuestionAdded = true; const pct = (t - 5.8) / 1.7; const ease = Math.min(1, pct); cursorX = 87 + (85 - 87) * ease; cursorY = 34 + (65 - 34) * ease; } else { // Idle state showing appended card cursorX = 85; cursorY = 65; isQuestionAdded = true; } // Panel auto-scroll progress: scroll down once Q5 is being added, hold, then return to top before the loop restarts. let panelScrollProgress = 0; if (t >= 5.4 && t < 6.4) { const pct = (t - 5.4) / 1.0; panelScrollProgress = pct < 0.5 ? 2 * pct * pct : 1 - Math.pow(-2 * pct + 2, 2) / 2; } else if (t >= 6.4 && t < 8.2) { panelScrollProgress = 1; } else if (t >= 8.2 && t < 8.9) { const pct = (t - 8.2) / 0.7; panelScrollProgress = 1 - (pct < 0.5 ? 2 * pct * pct : 1 - Math.pow(-2 * pct + 2, 2) / 2); } React.useEffect(() => { const el = panelRef.current; if (!el) return; const max = el.scrollHeight - el.clientHeight; el.scrollTop = max * panelScrollProgress; }, [panelScrollProgress, isQuestionAdded]); // Ripple calculations const showRipple = (t >= 1.5 && t < 1.7) || (t >= 5.2 && t < 5.4); const rippleX = (t >= 1.5 && t < 1.7) ? 90 : 87; const rippleY = (t >= 1.5 && t < 1.7) ? 10 : 34; // Horizontal numbers scale 1-10 mockup const horizontalScale = (
{Array.from({ length: 10 }).map((_, idx) => ( {idx + 1} ))}
); const initialQs = [ { num: 1, name: 'Motivation', bench: 'MotivationBenchmark', title: 'How motivated have you felt about your work in the last month? *', mock: horizontalScale }, { num: 2, name: 'Stress and Workload Benchmark', bench: 'StressAndWorkloadBenchmark', title: 'How manageable has your workload felt over the past month? *', mock: horizontalScale }, { num: 3, name: 'Work Life Balance Benchmark', bench: 'WorkLifeBalanceBenchmark', title: 'How satisfied are you with your ability to maintain a healthy work-life balance? *', mock: horizontalScale }, { num: 4, name: 'Wellbeing Benchmark', bench: 'OverallWellbeingBenchmark', title: 'How would you rate your overall wellbeing at work this month? *', mock: horizontalScale } ]; return (
{/* Left builder Panel */}
{/* Header Row */}
General Questions
Main survey questions
{isQuestionAdded ? '5 questions' : '4 questions'}
{/* Header controls & Add Button */}
{/* Dropdown Menu (Upgraded Categories & Custom Icons matching close-up screenshot) */}
{/* TEXT QUESTIONS */}
TEXT QUESTIONS
I Short Text
Paragraph
Date
{/* CHOICE QUESTIONS */}
CHOICE QUESTIONS
Single Choice
Multiple Choice
Yes/No
{/* RATING QUESTIONS */}
RATING QUESTIONS
Custom Rating
5-Point Scale (CSAT)
NPS Scale (0-10)
{/* BENCHMARKING */}
BENCHMARKING
Overall Wellbeing
Stress & Workload
Work-Life Balance
Motivation
{/* SPECIAL */}
SPECIAL
Information Page
{/* Active Question Cards exactly as per screenshot */}
{initialQs.map((q, idx) => (
{q.num}
{q.name} {q.bench} Required
{q.title}
{q.mock}
))} {/* Q5 - Added dynamically */}
5
Joining Date DateQuestion Required
When did you join the patching team? *
DD / MM / YYYY
{/* Visual Mouse Cursor */}
{/* Click Ripple Indicator */} {showRipple && ( )}
); }