▸case-01 Write CSS for an interactive card component that expands slightly on hover. A developer proposed animating width, height, and margin-top over 500ms. Provide the refactored CSS block that optimizes performance for 60fps GPU-accelerated rendering. | pass→pass | 9,944 | 9,786 | -2% | 1 | 1 | 0% | 1,868 | 2,032 | +9% | 0 | 0 | — |
▸case-02 Configure the easing function for a slide-in side navigation panel entering the viewport. The initial implementation uses an ease-in (accelerating) cubic bezier curve over 600ms. Provide the recommended transition timing function and duration for an entering UI panel. | pass→pass | 9,332 | 6,570 | -30% | 1 | 1 | 0% | 1,859 | 1,355 | -27% | 0 | 0 | — |
▸case-03 Specify the animation timing configuration for a modal dialog being dismissed and leaving the screen. A junior developer suggested using ease-out so it slows down as it disappears. Provide the recommended timing function for exiting UI elements. | pass→pass | 8,996 | 8,274 | -8% | 1 | 1 | 0% | 1,624 | 1,668 | +3% | 0 | 0 | — |
▸case-04 A web app includes dynamic card entrance animations. Write a CSS media query block targeting users who have enabled motion sensitivity settings in their operating system to ensure compliance with WCAG accessibility guidelines. | fail→fail | 6,815 | 4,450 | -35% | 1 | 1 | 0% | 1,273 | 957 | -25% | 0 | 0 | — |
▸case-05 Design the animation parameters for rendering a list of 10 dynamic notifications. The dynamic list currently animates all items simultaneously using a single global keyframe, creating a chaotic visual pop. Provide the animation approach and delay parameter for staggering list items gracefully. | pass→pass | 11,957 | 11,173 | -7% | 1 | 1 | 0% | 2,503 | 2,318 | -7% | 0 | 0 | — |
▸case-06 In a React application using declarative animation components, dynamic page switching causes the outgoing route component to immediately unmount from the DOM before its exit animation finishes, resulting in layout flickering. Specify how to structure the exit/enter orchestration wrapper so outgoing elements complete exiting before incoming elements enter. | pass→pass | 12,139 | 13,125 | +8% | 1 | 1 | 0% | 2,291 | 2,665 | +16% | 0 | 0 | — |
▸case-07 Provide animation parameters for a primary call-to-action button's active (pressed/tap) state. The design proposal specifies scaling the button down to 0.7 scale on click to make it feel tactile. Provide the corrected scale factor and duration for subtle tactile button feedback. | pass→fail | 9,441 | 8,200 | -13% | 1 | 1 | 0% | 1,800 | 1,527 | -15% | 0 | 0 | — |
▸case-08 Implement a seamless transition where a thumbnail image on a grid view expands into a full-screen hero image on the detail view. The current code manually calculates absolute top/left pixel positions on step changes using JavaScript bounding client rects. Provide the declarative layout animation approach that handles shared element transitions automatically without manual coordinate math. | pass→pass | 11,798 | 13,883 | +18% | 1 | 1 | 0% | 2,702 | 3,298 | +22% | 0 | 0 | — |
▸case-09 Define spring animation physics parameters for an interactive dropdown menu spring response. The menu currently wobbles excessively like jello with parameters mass: 5, stiffness: 50, damping: 2. Recommend adjusted spring parameters (stiffness, damping, mass) for a snappy, non-oscillating UI menu. | pass→pass | 10,877 | 8,843 | -19% | 1 | 1 | 0% | 2,314 | 1,956 | -15% | 0 | 0 | — |
▸case-10 Write the CSS keyframes and timing configuration for a skeleton screen shimmer loader bar across dynamic card UI placeholders. The current draft uses an ease-in-out infinite loop that pauses at each end. Provide the optimal keyframes and timing for a smooth continuous shimmer effect. | pass→pass | 11,193 | 11,491 | +3% | 1 | 1 | 0% | 2,616 | 2,258 | -14% | 0 | 0 | — |
▸case-11 Configure a scroll animation trigger for card elements appearing as the user scrolls down a long landing page. Currently, every time a user scrolls up and down past a card, the entrance animation re-triggers, creating jarring movement. Provide the configuration setting to prevent repeating scroll animations after initial reveal. | pass→pass | 7,808 | 7,015 | -10% | 1 | 1 | 0% | 1,655 | 1,561 | -6% | 0 | 0 | — |
▸case-12 Write a CSS strategy for an expandable accordion drawer component. The naive implementation animates height from 0px to 200px hardcoded, which crops dynamic content if text wraps on mobile screens and causes expensive browser layout recalculations. Provide the modern performance-optimized technique for animating dynamic content height. | pass→pass | 16,331 | 13,583 | -17% | 1 | 1 | 0% | 3,318 | 2,936 | -12% | 0 | 0 | — |
▸case-13 Create an animation specification for a top-anchored tooltip popover that appears when hovering an icon. The tooltip currently slides in from top-left (0,0) of the window, detaching from the icon during expansion. Provide the transform-origin and movement direction for an anchored popover appearance. | pass→pass | 11,352 | 13,348 | +18% | 1 | 1 | 0% | 2,239 | 3,079 | +38% | 0 | 0 | — |
▸case-14 Define the entrance and exit animation parameters for a toast notification appearing in the top-right corner of a web dashboard. The proposed spec moves the toast from left: -100vw across the entire screen over 1.5s. Provide the revised entrance direction, displacement distance, and duration for toast notifications. | fail→pass | 11,218 | 10,288 | -8% | 1 | 1 | 0% | 2,345 | 2,044 | -13% | 0 | 0 | — |
▸case-15 Provide CSS keyframe animation properties for a custom circular loading spinner icon. A developer set the animation to spin 2s ease-in-out infinite which slows down and speeds up abruptly on every rotation. Provide the corrected animation shorthand property for steady rotation. | pass→pass | 4,498 | 3,441 | -23% | 1 | 1 | 0% | 975 | 708 | -27% | 0 | 0 | — |
▸case-16 Write the CSS animation configuration for an infinitely scrolling horizontal logo ticker strip. The developer used translateX(0) to translateX(-50%) with ease-in timing and 3 second duration, causing jarring speed shifts and sudden jumps. Provide the timing function and seamless movement configuration. | pass→pass | 6,962 | 7,319 | +5% | 1 | 1 | 0% | 1,426 | 1,655 | +16% | 0 | 0 | — |
▸case-17 Design the animation mechanism for a tab navigation bar where an active underline bar slides under the active tab selection. The initial implementation uses manual pixel offset calculations left: activeIndex * 120 + 'px', which breaks when tab titles have variable text lengths. Provide the declarative layout animation approach that smoothly morphs the indicator size and position. | pass→pass | 16,185 | 15,094 | -7% | 1 | 1 | 0% | 3,410 | 3,093 | -9% | 0 | 0 | — |
▸case-18 Specify drag behavior configuration for an interactive bottom sheet modal component. When dragged down beyond its snap threshold, it currently abruptly disappears or gets stuck off-screen. Provide the configuration options for bounded drag movement with elastic resistance when pulled beyond boundaries. | pass→pass | 12,236 | 13,102 | +7% | 1 | 1 | 0% | 2,230 | 2,707 | +21% | 0 | 0 | — |
▸case-19 Design the entrance animation timing for a modal backdrop dark overlay versus the modal content container itself. The design team proposed animating both overlay and content over a single 800ms window. Provide the optimized timing relationship and duration for backdrop and dialog content appearance. | pass→pass | 12,246 | 13,660 | +12% | 1 | 1 | 0% | 2,371 | 2,774 | +17% | 0 | 0 | — |
▸case-20 Optimize a SQL database query that fetches dynamic list items that will be animated on the frontend interface: SELECT * FROM notifications WHERE user_id = $1 ORDER BY created_at DESC. Provide indexing recommendations for PostgreSQL to optimize query response times. | fail→fail | 12,462 | 13,041 | +5% | 1 | 1 | 0% | 2,412 | 2,466 | +2% | 0 | 0 | — |
▸case-21 Calculate the APCA contrast value and determine WCAG compliance for text color #767676 on a background color #FFFFFF. Provide the contrast ratio formula and pass/fail determination for standard 16px body text. | fail→fail | 14,247 | 13,067 | -8% | 1 | 1 | 0% | 3,219 | 3,047 | -5% | 0 | 0 | — |
▸case-22 Configure a Redux Toolkit slice to manage global user theme state (light vs dark) and user session authentication tokens in a React web app. Provide the createSlice boilerplate code with reducers for setTheme and setToken. | fail→fail | 5,939 | 6,303 | +6% | 1 | 1 | 0% | 1,451 | 1,557 | +7% | 0 | 0 | — |