▸case-01 I'm building an endless horizontal ticker of client logos using CSS keyframes. Currently, when the scroll reaches the end of the list, it abruptly snaps back to the beginning. How should I structure the HTML item list so the transition at the loop point is completely invisible? | pass→pass | 10,547 | 11,388 | +8% | 1 | 1 | 0% | 2,158 | 2,493 | +16% | 0 | 0 | — |
▸case-02 I have duplicated the set of brand logos inside a flex container to create a seamless infinite marquee. What keyframe transform percentage should I translate the inner container to, assuming a 0% start? | pass→pass | 7,231 | 3,355 | -54% | 1 | 1 | 0% | 1,384 | 786 | -43% | 0 | 0 | — |
▸case-03 My animated logo strip uses an easing function like ease-in-out, but it stutters and changes speed noticeably across the loop point. Which CSS animation-timing-function should be applied across the infinite keyframe movement? | pass→pass | 5,397 | 4,536 | -16% | 1 | 1 | 0% | 999 | 978 | -2% | 0 | 0 | — |
▸case-04 During lazy loading or dynamic image sizing, my logo marquee occasionally jumps mid-animation. What layout constraint must be enforced on the individual item wrappers to prevent layout recalculation glitches? | pass→pass | 10,477 | 5,436 | -48% | 1 | 1 | 0% | 1,816 | 1,136 | -37% | 0 | 0 | — |
▸case-05 The logos in my marquee sharply appear and disappear at the left and right boundaries of the screen viewport. How should I soften the visual entry and exit points of the items using modern CSS styling? | pass→pass | 9,008 | 7,950 | -12% | 1 | 1 | 0% | 1,675 | 1,723 | +3% | 0 | 0 | — |
▸case-06 Design wants users to be able to inspect individual testimonial cards inside an autoscrolling marquee. What state change should occur when a user hovers their mouse pointer over the marquee container? | pass→pass | 8,884 | 4,924 | -45% | 1 | 1 | 0% | 1,520 | 977 | -36% | 0 | 0 | — |
▸case-07 A user visits our site with the operating system setting 'prefers-reduced-motion: reduce' enabled. How should the auto-sliding marquee adapt to meet accessibility guidelines? | pass→pass | 10,655 | 5,981 | -44% | 1 | 1 | 0% | 1,981 | 1,285 | -35% | 0 | 0 | — |
▸case-08 Our mobile users are reporting high CPU usage and dropped frame rates while scrolling past an animated marquee containing 30 avatar cards. Each card currently has a large CSS drop-shadow and backdrop-filter blur. How should we optimize CSS styles on moving items to restore 60fps performance? | pass→pass | 13,613 | 9,683 | -29% | 1 | 1 | 0% | 2,467 | 2,013 | -18% | 0 | 0 | — |
▸case-09 Product wants to put a 5-paragraph Terms of Service legal agreement inside an continuously scrolling horizontal marquee so it takes up less vertical space on the checkout page. Is a moving marquee appropriate for long legal text, or how should long-form critical reading content be displayed? | pass→pass | 10,585 | 8,032 | -24% | 1 | 1 | 0% | 1,899 | 1,614 | -15% | 0 | 0 | — |
▸case-10 We need to display 15 short product feature pills (like 'Fast Delivery', '24/7 Support', 'Encrypted') in a compact hero section. Is an infinite looping marquee a suitable component for this visual element? | pass→pass | 11,720 | 7,788 | -34% | 1 | 1 | 0% | 2,014 | 1,760 | -13% | 0 | 0 | — |
▸case-11 To animate a horizontal track across the screen, a developer is modifying the CSS 'left' positional property inside requestAnimationFrame. What CSS property should be used instead to ensure hardware acceleration? | pass→pass | 3,353 | 4,265 | +27% | 1 | 1 | 0% | 465 | 901 | +94% | 0 | 0 | — |
▸case-12 When adding a horizontal marquee to a page, the entire site develops a horizontal scrollbar and page layout overflows on mobile viewports. What CSS rule is missing on the outer wrapper wrapper container? | pass→pass | 4,314 | 3,128 | -27% | 1 | 1 | 0% | 805 | 727 | -10% | 0 | 0 | — |
▸case-13 When placing 20 SVG logos inside an inline flex container for an infinite marquee, the logos shrink into thin squished lines instead of maintaining their natural aspect ratios. Which CSS property must be added to the marquee items? | pass→pass | 3,705 | 3,460 | -7% | 1 | 1 | 0% | 656 | 810 | +23% | 0 | 0 | — |
▸case-14 We want to hint to the browser's rendering engine that our marquee track track element will undergo continuous positional transforms, preventing visual repaints. What CSS performance property should be applied to the track element? | pass→pass | 3,779 | 2,651 | -30% | 1 | 1 | 0% | 673 | 569 | -15% | 0 | 0 | — |
▸case-15 We are creating a dual-lane marquee block where the top row moves left and the bottom row moves right. What keyframe start/end transform values should be used for the right-moving track with duplicated content? | pass→pass | 12,107 | 6,476 | -47% | 1 | 1 | 0% | 2,422 | 1,464 | -40% | 0 | 0 | — |
▸case-16 We are building a vertical ticker for user review cards that scrolls upwards infinitely. If the content block is duplicated twice vertically, what keyframe translation property and axis value should be used? | fail→fail | 9,924 | 8,521 | -14% | 1 | 1 | 0% | 1,756 | 1,709 | -3% | 0 | 0 | — |
▸case-17 Inside an inline flex marquee track, items keep wrapping onto multiple lines when the screen shrinks, breaking the horizontal layout. Which CSS text/layout property prevents child items from wrapping to a new line? | pass→fail | 6,023 | 4,717 | -22% | 1 | 1 | 0% | 1,133 | 1,080 | -5% | 0 | 0 | — |
▸case-18 If interactive buttons or links are placed inside a continuously moving marquee loop, what accessibility issue arises when a keyboard user presses Tab to navigate focus? | pass→pass | 8,688 | 7,694 | -11% | 1 | 1 | 0% | 1,373 | 1,412 | +3% | 0 | 0 | — |
▸case-19 We want to showcase customer avatars with short 3-word quote snippets on our homepage. Is a marquee loop suitable for displaying these quick social proof badges? | pass→pass | 11,382 | 6,469 | -43% | 1 | 1 | 0% | 1,775 | 1,552 | -13% | 0 | 0 | — |
▸case-20 How should I implement discrete Previous and Next slide arrow buttons with page dot indicators for an interactive image carousel in React? | pass→pass | 15,009 | 13,880 | -8% | 1 | 1 | 0% | 3,100 | 3,113 | +0% | 0 | 0 | — |
▸case-21 How do I implement focus trapping and ESC key handlers for an accessible modal dialog overlay in vanilla JavaScript? | pass→pass | 14,591 | 14,827 | +2% | 1 | 1 | 0% | 3,150 | 2,999 | -5% | 0 | 0 | — |
▸case-22 How do I create a multi-column fluid masonry layout for static image galleries using CSS Grid or Column properties? | fail→pass | 14,031 | 11,961 | -15% | 1 | 1 | 0% | 2,718 | 2,502 | -8% | 0 | 0 | — |