"The closed state is a tiny circle that sits exactly on the trigger button center: 1.25rem is 20px, which matches the center of the 40x40 trigger."
"Opening uses the same origin, but with a much larger radius: 100% can still miss the far corner when the origin is bottom-left. 150% gives enough headroom so the whole overlay is guaranteed to reveal across aspect ratios and viewport sizes."
"The overlay is not one painted layer. It is a stack: shell (glass + border), reflection, gradient wash, noise texture, content, trigger button (above the clip-path panel)."
"When closed, the overlay does not intercept taps. The clip animation is only part of it. We also switch interaction and affordance state."
The WorkCard detail panel utilizes a circular reveal that originates from the trigger button, creating a cohesive interaction. The closed state is a small circle centered on the trigger button, ensuring the overlay and trigger share the same coordinate system. The opening radius is set to 150% to guarantee full visibility across different aspect ratios. The overlay consists of multiple layers, which can be inspected in 3D for better understanding. Additionally, the interaction state changes alongside the visual elements, enhancing user experience.
Read at Karl Koch
Unable to calculate read time
Collection
[
|
...
]