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
pendingtopassed. - 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
delayprops inmotion.div) to create a professional, polished loading sequence.
5. Best Practices for Developers
When adding new interactive elements to the ProctorAI prototype:
- Use the
cnUtility: Combine Tailwind classes with dynamic states (e.g.,cn("transition-colors", isWarning ? "text-red-500" : "text-blue-500")). - 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. - A11y Considerations: Ensure that critical proctoring alerts also trigger a screen-reader compatible announcement, as motion alone is not sufficient for accessibility.