Motion & Interactivity

Motion Design & UX Interactivity

ProctorAI utilizes Framer Motion and Tailwind CSS v4 to bridge the gap between static interfaces and a responsive, high-stakes monitoring environment. The motion system is designed to provide immediate cognitive feedback to both proctors and students, ensuring that critical events—like security violations or system status changes—are never missed.

1. Seamless Phase Transitions

The exam flow is governed by a state-driven machine (setup → exam → submitted). To prevent the jarring "jumpiness" common in multi-step forms, we use Framer Motion’s AnimatePresence to handle component lifecycle transitions.

• Setup Checks: Each system check (Camera, Mic, Network) uses an entry animation as it moves from pending to passed.
• Contextual Overlays: The proctoring warning log and confirmation modals slide into view using spring physics, providing a tactile feel to the interface.

// Example of the phase transition wrapper used in /exam
<AnimatePresence mode="wait">
  <motion.div
    key={phase}
    initial={{ opacity: 0, x: 20 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -20 }}
    transition={{ duration: 0.3 }}
  >
    {phase === 'setup' && <SetupComponent />}
    {phase === 'exam' && <ExamComponent />}
  </motion.div>
</AnimatePresence>

2. Real-Time Dashboard Feedback

The Proctor Dashboard is a live simulation. To help proctors manage cognitive load, visual motion is used to highlight changes in the student population without requiring a full page refresh.

• Alert Pulses: New alerts in the sidebar feed are prepended with a "fade-in and slide-down" animation, ensuring the proctor’s eye is naturally drawn to the latest event.
• Dynamic Risk Scoring: Student cards react to risk score updates using color-interpolated backgrounds (getRiskBg). When a student’s status changes to "Flagged," the card utilizes a subtle scale-up animation to demand attention.
• Metric Counters: Summary statistics (Active Sessions, Avg Risk Score) animate from their previous value to the new value, providing a sense of "live" telemetry.

3. Anti-Cheat & Interaction Guardrails

Interactivity is not just for aesthetics; it is used as a functional enforcement tool. The exam environment monitors user behavior and provides immediate feedback through the following mechanics:

| Feature | Interaction Trigger | Visual/Motion Feedback | | :--- | :--- | :--- | | Tab Detection | User leaves the browser tab. | Sequential "Violation Toasts" via sonner and incrementing red counters in the HUD. | | Gaze Monitoring | AI detects eye deviation. | The "Warning Panel" slides open and pulses red. | | System Checks | Component initialization. | Real-time audio visualizer (Canvas API) combined with Lucide icon state morphing. | | Input Protection | Right-click, Copy, or Paste. | Shake animation on the active question block and a "Restricted Action" notification. |

4. Analytics Visualization

The /analytics suite uses Recharts integrated with Framer Motion entry orchestrations.

• Chart Animations: Area and Bar charts animate their data points upon page load, allowing the proctor to see the "growth" of violation trends over the selected time range (Today, Week, Month).
• Staggered Layout: Dashboard cards use a staggered entrance animation (using delay props in motion.div) to create a professional, polished loading sequence.

5. Best Practices for Developers

When adding new interactive elements to the ProctorAI prototype:

1. Use the cn Utility: Combine Tailwind classes with dynamic states (e.g., cn("transition-colors", isWarning ? "text-red-500" : "text-blue-500")).
2. Spring Over Durations: Favor spring transitions (type: "spring", stiffness: 300, damping: 30) for UI elements like modals and buttons to maintain a modern, responsive feel.
3. A11y Considerations: Ensure that critical proctoring alerts also trigger a screen-reader compatible announcement, as motion alone is not sufficient for accessibility.