▸case-01 Can you create a cohesive motion choreography specification for visual loading states and skeleton placeholders in our application? Please detail timing offsets, easing functions, and feedback principles so our frontend engineering team can implement consistent UI transitions. | pass→pass | 23,203 | 21,091 | -9% | 1 | 1 | 0% | 4,681 | 4,373 | -7% | 0 | 0 | — |
▸case-02 We are building a responsive drawer menu that slides in from the side. A developer on the team suggests animating the CSS 'left' and 'width' properties directly to achieve the smooth open/close movement. How should we configure the motion properties for optimal 60fps rendering? | pass→pass | 12,935 | 11,498 | -11% | 1 | 1 | 0% | 2,567 | 2,435 | -5% | 0 | 0 | — |
▸case-03 We need easing curve recommendations for interactive modal overlays. A designer suggests using ease-in (cubic-bezier(0.42, 0, 1, 1)) when the modal appears on screen so it starts slowly, and ease-out when it leaves. What are the correct easing function choices for entering and exiting UI components? | pass→pass | 14,030 | 10,398 | -26% | 1 | 1 | 0% | 2,750 | 2,161 | -21% | 0 | 0 | — |
▸case-04 Our design team is setting hover feedback durations for primary CTA buttons. Someone proposed a 600ms transition so users can clearly see the background gradient shift. What duration range should be specified for micro-interactions like button hover and active press states? | pass→pass | 10,366 | 9,696 | -6% | 1 | 1 | 0% | 1,900 | 1,811 | -5% | 0 | 0 | — |
▸case-05 We need to ensure our complex page transitions and scroll-driven parallax effects comply with accessibility guidelines. Developers plan to completely delete all CSS animation rules from the site stylesheet. How should prefers-reduced-motion be handled in modern web app CSS? | pass→pass | 13,567 | 14,951 | +10% | 1 | 1 | 0% | 2,610 | 3,078 | +18% | 0 | 0 | — |
▸case-06 When rendering a search results list of 25 cards, an engineer suggests applying a 200ms cumulative stagger delay per card so the bottom items animate in after 5 seconds. How should staggered entry choreography be parameterized for lists? | pass→pass | 12,746 | 13,169 | +3% | 1 | 1 | 0% | 2,563 | 2,499 | -2% | 0 | 0 | — |
▸case-07 For an alert dialog window, a designer wants the dark backdrop and the modal dialog box to pop into existence instantaneously (0ms) while the confirm button bounces for 800ms. What is the recommended choreography and timing relation between overlay backdrops and dialog content? | pass→pass | 12,409 | 12,832 | +3% | 1 | 1 | 0% | 2,136 | 2,291 | +7% | 0 | 0 | — |
▸case-08 We are building a swipeable bottom sheet on mobile web. Developers want to apply a fixed 400ms linear CSS transition while the user's finger is actively dragging across the screen. How should motion behavior be configured during active user gesture tracking? | pass→pass | 10,853 | 11,091 | +2% | 1 | 1 | 0% | 1,824 | 2,068 | +13% | 0 | 0 | — |
▸case-09 We are styling contextual tooltips for table action icons. The product manager wants tooltips to appear instantly with a 0ms duration, while another developer suggests a 500ms slide-and-fade animation. What motion timing and entrance delay parameters should be established? | pass→pass | 11,882 | 11,020 | -7% | 1 | 1 | 0% | 2,162 | 2,022 | -6% | 0 | 0 | — |
▸case-10 When expanding a nested navigation dropdown menu, a developer wants to use linear timing (cubic-bezier(0, 0, 1, 1)) so the expansion speed remains strictly constant from top to bottom. What easing curve and duration should be applied to expanding spatial surfaces? | fail→fail | 10,033 | 5,939 | -41% | 1 | 1 | 0% | 1,883 | 1,277 | -32% | 0 | 0 | — |
▸case-11 For toast notifications that automatically auto-dismiss after 4 seconds, an engineer proposes sliding them up into the header over a 1000ms duration with dynamic bouncing. What visual transition path and duration should be used when dismissing dynamic toast notifications? | pass→pass | 11,202 | 9,966 | -11% | 1 | 1 | 0% | 2,054 | 1,835 | -11% | 0 | 0 | — |
▸case-12 In a single-page application route transition, a dev suggests fading out the old page over 500ms, waiting 300ms on a blank screen, and then sliding in the new page over 500ms (total 1300ms page swap). How should route transition choreography be optimized for perceptual performance? | pass→pass | 13,568 | 12,205 | -10% | 1 | 1 | 0% | 2,505 | 2,231 | -11% | 0 | 0 | — |
▸case-13 We need to animate expanding accordions. Animating height: auto directly in CSS is causing jank. A dev suggests animating max-height from 0px to 2000px on every accordion regardless of content size. What is the recommended approach for smooth height expanding transitions? | pass→pass | 11,942 | 13,126 | +10% | 1 | 1 | 0% | 2,353 | 2,541 | +8% | 0 | 0 | — |
▸case-14 For continuous inline loading spinners, a designer recommended an ease-in-out curve with a 500ms loop period. What rotational continuous motion specification should be used for ongoing progress indicators? | pass→pass | 10,178 | 8,567 | -16% | 1 | 1 | 0% | 1,954 | 1,765 | -10% | 0 | 0 | — |
▸case-15 A floating action button (FAB) transforms into a full-screen dynamic surface when clicked. An engineer suggests expanding it using pure linear scaling without morphing origin constraints. How should spatial morph transitions between floating elements and expansion surfaces be orchestrated? | pass→fail | 15,411 | 13,125 | -15% | 1 | 1 | 0% | 2,726 | 2,532 | -7% | 0 | 0 | — |
▸case-16 When switching active tabs in an navigation bar, a designer proposes resetting the underline indicator width and redrawing it with a snap jump (0ms). How should motion be configured for active indicator pill/underline movements across sibling tabs? | pass→fail | 10,491 | 10,851 | +3% | 1 | 1 | 0% | 1,883 | 2,077 | +10% | 0 | 0 | — |
▸case-17 We are implementing a horizontal logo marquee that continuously scrolls text banners. A dev suggests setting a CSS transition on window scroll position and re-rendering DOM elements every frame. How should infinite continuous scrolling content be implemented for optimal GPU acceleration? | pass→pass | 12,203 | 13,529 | +11% | 1 | 1 | 0% | 2,375 | 2,578 | +9% | 0 | 0 | — |
▸case-18 When a form submission fails validation, a designer wants to animate the text field with a 1000ms slow pulse color glow. An alternative proposal is a crisp error shake. What motion parameters should be specified for inline input validation error feedback? | pass→pass | 10,747 | 10,677 | -1% | 1 | 1 | 0% | 2,204 | 2,109 | -4% | 0 | 0 | — |
▸case-19 When clicking a gallery thumbnail image, it expands into a hero image modal. An engineer suggests vanishing the thumbnail immediately, waiting 200ms, and fading in the high-res hero image from opacity 0. How should shared element transition choreography be structured? | pass→pass | 13,936 | 13,429 | -4% | 1 | 1 | 0% | 2,358 | 2,320 | -2% | 0 | 0 | — |
▸case-20 We are exporting a promotional motion graphics video in Adobe After Effects to post on YouTube. Should we render using ProRes 422 HQ or H.264 MP4 format, and what bitrate target should we set for 4K 60fps video exports? | fail→fail | 10,199 | 11,306 | +11% | 1 | 1 | 0% | 1,822 | 2,194 | +20% | 0 | 0 | — |
▸case-21 When rigging a 3D character mesh in Blender for game engine export, how should we resolve mesh pinching around the shoulder joint during arm rotation using weight painting and bone constraints? | pass→pass | 15,755 | 14,970 | -5% | 1 | 1 | 0% | 2,876 | 2,713 | -6% | 0 | 0 | — |
▸case-22 We are writing a custom GLSL fragment shader for a WebGL liquid fluid particle physics simulation. How should velocity advection and Navier-Stokes pressure Poisson solver iterations be calculated in shader code? | fail→fail | 19,791 | 19,865 | +0% | 1 | 1 | 0% | 4,501 | 4,679 | +4% | 0 | 0 | — |