Catalogue

Every element, with the caveat that comes with it

44 interface elements, each rendered live on its own page with the source and the one thing that breaks it.

1. An analog clock wound by one line of JavaScript animation-delay: -43200s motion
2. The logo that never hits the corner animation + cqw motion
3. resize keeps writing after max-width stops it resize + max-width layout
4. A gradient border that keeps its corners background + padding surface
5. A spotlight that follows the cursor radial-gradient at var() hover
6. A progress bar tied to scroll, with no JavaScript animation-timeline: scroll() motion
7. A table header that stays put position: sticky table
8. Cut a paragraph to three lines -webkit-line-clamp text
9. A textarea that grows as you type field-sizing: content form
10. An accordion with no JavaScript <details name> disclosure
11. A focus ring for keyboards only :focus-visible a11y
12. A wide table that keeps its first column position: sticky (inline) table
13. Shadows that show there is more to scroll background-attachment: local scroll
14. A segmented control with a sliding indicator :has() + translate control
15. A skeleton that does not lie about the layout @keyframes + gradient loading
16. A menu button that turns into a close button aria-expanded menu
17. A switch that is still a checkbox appearance: none form
18. A marquee that never jumps translateX(-50%) motion
19. Frosted glass over anything backdrop-filter surface
20. Type painted with a gradient background-clip: text type
21. A range slider you can actually style ::-webkit-slider-thumb form
22. A card that tips towards the cursor perspective + rotate hover
23. A gradient angle that actually animates @property motion
24. A card that reads its own container, not the window @container layout
25. Type that scales with its container cqi layout
26. Boxes that keep their proportions aspect-ratio layout
27. A heading that breaks where a typesetter would text-wrap: balance type
28. Paragraphs with no orphan last line text-wrap: pretty type
29. Hyphenation in a narrow column hyphens: auto type
30. An error state that waits its turn :user-invalid form
31. Native controls in your palette accent-color form
32. A label that floats out of the way :placeholder-shown form
33. A carousel the browser drives scroll-snap-type scroll
34. Scrolling that stops at the edge overscroll-behavior scroll
35. Anchor links that clear a sticky header scroll-padding-top scroll
36. A wrapper that knows its input is wrong :has() state
37. Hovering one row quiets the others :has() + :not() hover
38. A layout that changes when the list gets long :has(:nth-child()) layout
39. A modal that traps focus for you showModal() dialog
40. A popover with no JavaScript at all popovertarget dialog
41. A section the page cannot reach inert a11y
42. Animating something in from display: none @starting-style motion
43. The exit animation, which is the hard half allow-discrete motion
44. Reordering a list without it jumping startViewTransition() motion