Original Summary

I’m building this because I feel like a lot of modern interfaces are starting to look the same. Same cards. Same rounded buttons. Same gradients. Same generic component libraries. I wanted to build something different, actual product surfaces that feel designed, while still giving developers the code to build them themselves. Here’s what I shipped in week 1: • Integrations Dialog • Trial Popover • Liquid Slider • Dynamic Tabs • Liquid Switch • Pill Toast • Two-Factor Dialog • Confirm Button • Upgrade Modal • QR Code • Pricing blocks The interesting part wasn’t shipping the components. It was figuring out why some of them felt completely wrong even when the CSS technically worked. Some of the challenges I faced where 1. Liquid glass is way harder than it looks There isn’t really a single “liquid glass” CSS trick. For the slider, I wanted the thumb to actually feel like it was sitting inside the track rather than just being an element placed on top. That meant cloning the rail underneath the thumb, masking a hole through the middle, and then scaling/skewing that clone based on pointer velocity so the fill stretches with the drag. The chromatic fringe is created with opposing cyan/red shadows, while the rim uses a conic gradient with mask-composite: exclude so only the edge lights up. And the annoying part is if any layer is a few pixels off, it immediately stops looking like refraction and starts looking like a cheap overlay. 2. Tap vs drag is basically a state machine The switch and slider both needed a threshold. Around 3px / 150ms: Below that → it’s a tap/click. Above that → it’s a drag. It sounds simple, but getting that threshold wrong creates weird interactions where a tap leaves the control stuck in its “liquid” state or a drag accidentally toggles the switch. I learned that pointer UX isn’t really about individual events. It’s about distance + time + state + cancellation . 3. SVG goo is ridiculously fragile The liquid switch uses feGaussianBlur combined with a color matrix to melt the thumb and track into one blob. Then there’s another filter to remove the leftover black pixels using feMorphology and feComposite. One thing that caught me is that every instance needs unique filter IDs. Otherwise, two switches on the same page can start affecting each other. Also, the SVG defs need to live in a hidden 0×0 SVG so they don’t unexpectedly affect layout. 4. WebGL inside a dialog introduced a completely different set of problems I wanted a Bayer dither effect in the modal header. It’s an 8×8 shader matrix with a pixel size of 3. But putting WebGL inside a dialog means dealing with rounded clipping, transparency over the content, and dark mode. The published dither primitive couldn’t be changed because it was already installed elsewhere, so the dialog needed its own fork. That was a good reminder that sometimes the cleanest solution isn’t making one primitive handle every possible use case. What I learned A few things stood out this week: 1. Pointe

  • 情报分类：商业与市场研究
  • 分类依据：内容涉及商业、投资或市场动态
  • 信息来源：Reddit · SaaS
  • 发布时间：2026/9/19 06:36:51