▸case-01 We are implementing a tabbed dashboard card expander where clicking a card expands it into a full-screen modal view. Users complain about abrupt jumps when switching views. Write the React motion component configuration for the shared container element so it smoothly morphs between the list thumbnail and modal view across component trees. | pass→fail | 13,907 | 14,146 | +2% | 1 | 1 | 0% | 2,945 | 2,847 | -3% | 0 | 0 | — |
▸case-02 In a notification toast container, removing a toast causes the surrounding items to instantly snap into place while the exiting toast is still fading out, causing visual overlapping. Configure the component managing exit animations so adjacent items wait or pop smoothly when an item unmounts. | pass→pass | 16,215 | 10,083 | -38% | 1 | 1 | 0% | 3,185 | 1,841 | -42% | 0 | 0 | — |
▸case-03 Our React application bundle grew by 35KB after adding interactive motion components across several routes. We want to reduce initial bundle size while retaining hover and scroll animation support. What optimization wrapper and loading strategy should be used to dynamic-load motion features? | pass→pass | 12,194 | 11,668 | -4% | 1 | 1 | 0% | 2,066 | 2,338 | +13% | 0 | 0 | — |
▸case-04 We need to build a top progress indicator bar for a long article page. A developer wrote an window scroll event listener that updates React state on every frame, causing low FPS and high rendering overhead. Provide the high-performance hook pattern using motion values to drive the progress bar's scaleX. | pass→pass | 10,515 | 7,571 | -28% | 1 | 1 | 0% | 2,000 | 1,628 | -19% | 0 | 0 | — |
▸case-05 A swipeable sheet component currently uses linear timing functions (`duration: 0.3, ease: 'linear'`), making dragging and releasing feel robotic and unnatural. What transition configuration object replaces time-based duration with physics-based responsiveness? | pass→pass | 7,946 | 6,501 | -18% | 1 | 1 | 0% | 1,459 | 1,098 | -25% | 0 | 0 | — |
▸case-06 A navigation menu overlay needs to reveal its 5 menu links sequentially with a 0.08s delay between each item when the drawer opens, without writing individual delay properties on every list item component. Show the variant orchestration setup for the parent container. | fail→fail | 6,147 | 6,390 | +4% | 1 | 1 | 0% | 1,315 | 1,350 | +3% | 0 | 0 | — |
▸case-07 When expanding a card container using layout animation, child text and icon SVGs inside the card become stretched and distorted during scaling. How do you prevent child elements from stretching during parent layout animation? | pass→pass | 12,058 | 11,626 | -4% | 1 | 1 | 0% | 2,295 | 2,370 | +3% | 0 | 0 | — |
▸case-18 We need to animate the background glow of a high-tech card between theme CSS custom variables `--glow-color-start` and `--glow-color-end` dynamically on theme toggle. Show how to animate CSS variables using motion elements. | pass→pass | 15,767 | 16,349 | +4% | 1 | 1 | 0% | 3,304 | 3,680 | +11% | 0 | 0 | — |
▸case-08 A feature grid animates into view when scrolled into the viewport. However, scrolling up and down repeatedly triggers the entry animation every single time the element enters view, distracting users. Configure the viewport trigger configuration object to run only on first reveal. | pass→pass | 5,322 | 3,500 | -34% | 1 | 1 | 0% | 1,074 | 694 | -35% | 0 | 0 | — |
▸case-09 A draggable modal dialog allows users to drag the window completely off-screen, losing track of the UI. Configure dragging capabilities so the element is bounded to a parent container area while retaining elastic boundary pull resistance. | pass→pass | 13,672 | 9,504 | -30% | 1 | 1 | 0% | 2,768 | 2,037 | -26% | 0 | 0 | — |
▸case-10 A complex multi-step user onboarding sequence requires triggering animations sequentially after async API network calls complete, rather than reacting to declaratively changing props. What hook creates imperative controls to trigger animations programmatically? | pass→pass | 6,496 | 4,853 | -25% | 1 | 1 | 0% | 1,205 | 1,015 | -16% | 0 | 0 | — |
▸case-11 We want to rotate a 3D visual element from -45deg to 45deg based on horizontal cursor drag position from -200px to 200px. Updating state on mousemove is causing frame drops. What hook converts raw numeric motion values into derived degree units efficiently? | pass→pass | 9,401 | 10,719 | +14% | 1 | 1 | 0% | 1,861 | 1,425 | -23% | 0 | 0 | — |
▸case-12 When items in a dynamic filterable grid are removed, remaining items jump immediately to their new positions without animating smoothly across the grid layout. How do you ensure remaining elements animate smoothly to new positions when sibling items unmount? | fail→pass | 14,244 | 10,963 | -23% | 1 | 1 | 0% | 2,814 | 2,044 | -27% | 0 | 0 | — |
▸case-13 Our user accessibility audit requires disabling non-essential parallax and slide animations when the user has set their system OS preferences to prefer reduced motion. What hook detects this state to conditionally apply reduced transitions? | pass→pass | 8,415 | 3,831 | -54% | 1 | 1 | 0% | 1,802 | 782 | -57% | 0 | 0 | — |
▸case-14 We want to animate the stroke drawing sequence of a vector checkmark SVG upon task completion. A developer suggested manipulating stroke-dasharray manually with CSS keyframes. Show the motion SVG path props that animate vector path completion cleanly. | pass→pass | 10,832 | 6,538 | -40% | 1 | 1 | 0% | 2,103 | 1,400 | -33% | 0 | 0 | — |
▸case-15 A list of items needs different entry directions (left or right) based on each item's index in an array. Rather than defining separate variant objects for odd and even items, show how to pass dynamic arguments into motion variants. | pass→pass | 6,117 | 8,046 | +32% | 1 | 1 | 0% | 1,294 | 1,719 | +33% | 0 | 0 | — |
▸case-16 In a custom horizontal image carousel driven by touch gestures, releasing the drag gesture stops the movement abruptly without natural momentum coasting. What drag configuration enables physics-driven inertia and snapping on release? | pass→pass | 13,595 | 6,860 | -50% | 1 | 1 | 0% | 2,464 | 1,353 | -45% | 0 | 0 | — |
▸case-17 A developer wrote a sidebar drawer animation using `animate={{ width: isExpanded ? 300 : 80 }}` which triggers browser layout recalculations on every frame, causing high CPU load. Reconfigure the animation parameters to achieve visual expansion using GPU-accelerated transform properties. | pass→pass | 16,391 | 13,402 | -18% | 1 | 1 | 0% | 3,395 | 2,724 | -20% | 0 | 0 | — |
▸case-19 A pulse indicator component needs to bounce up quickly in 10% of total duration, hold at peak height for 70% of duration, and drop back down in the final 20% of duration. Show the animation property configuration for non-linear multi-stage keyframe timing. | fail→pass | 9,706 | 7,530 | -22% | 1 | 1 | 0% | 1,925 | 1,484 | -23% | 0 | 0 | — |
▸case-20 Configure a Tailwind CSS theme extension in tailwind.config.js to define a custom CSS keyframe animation named 'spin-slow' that continuously rotates an SVG icon 360 degrees infinitely over 3 seconds. | pass→pass | 5,493 | 5,222 | -5% | 1 | 1 | 0% | 1,299 | 1,219 | -6% | 0 | 0 | — |
▸case-21 Write a HTML5 Canvas 2D frame update loop using requestAnimationFrame that updates particle X and Y positions based on vector velocity and repaints the canvas context background every frame. | fail→fail | 8,747 | 10,518 | +20% | 1 | 1 | 0% | 2,120 | 2,598 | +23% | 0 | 0 | — |
▸case-22 Write a pure JavaScript function that uses the Web Animations API (WAAPI) `element.animate()` method on a DOM element to slide it down 100px with easing over 400ms without importing external UI libraries. | pass→pass | 4,936 | 7,108 | +44% | 1 | 1 | 0% | 1,034 | 1,500 | +45% | 0 | 0 | — |