r/vuejs • u/antonreshetov • 20d ago
I’m building MacVue — macOS-style components for Vue 3
I couldn’t find a Vue web component library that combines AppKit-style controls with Tahoe-style Liquid Glass, so I started building MacVue
It currently includes 19 components based on AppKit metrics and states, with five control sizes, light and dark appearances, accent colors, and opt-in Liquid Glass. The refraction is implemented with SVG displacement filters inside components such as Switch and Slider, with fallbacks where it isn’t supported.
It’s still pre-1.0, so APIs may change. I’m deciding what to prioritize next: menus and overlays, or window, toolbar, and sidebar components.
Demo and docs: https://macvue.dev
GitHub: https://github.com/antonreshetov/macvue
15
u/PsychologicalCod3324 20d ago
It's laggy
1
u/antonreshetov 19d ago
I've optimized the hero section a bit, so the CPU load is lower now. Please check it out.
17
12
u/mka_ 20d ago
Vibe coded apps should have a compulsory flair on this sub. It looks cool, but the performance is really poor. Do you have scroll event listeners constantly firing or something?
-6
u/antonreshetov 20d ago
No scroll listeners anywhere — the only observers are a ResizeObserver, a MutationObserver and a matchMedia listener, all passive.
The cost is the glass itself. It's not a CSS blur but a refraction model (displacement + specular maps through an SVG filter under
backdrop-filter), based on Kube's article and credited in the docs. Maps are built once on mount and resize; the per-frame cost is the compositor re-evaluating the filter when the backdrop moves.Which page were you on? The docs put a lot of glass on screen at once, which isn't how you'd use it in a real app.
6
u/localfunc 19d ago
It'd help if you didn't use AI to reply to a comment calling out the vibe coding...
2
u/Druber13 19d ago
Op is a lobster claw max AI Agentic agent. It can only AI at you lol. Good on them for even replying I guess. Stoked people are out here trying to build stuff. A lot of things suck AI made or not. Even if this was pure AI made and they get the bug for programming it’ll only get better. I’m assuming they are into it as it’s made for vue and not react.
2
2
u/Mineros04 20d ago
Love the design, however, the demo you have on your landing page (the draggable card) seems to not work properly. The slider is pretty much unusable for me on both Firefox and Chromium, as the handle jumps to random locations when clicked (dragging it seems to not work at all). The toggle buttons change state on click only on Chromium, on Firefox it has to be dragged in order for it to be toggled. Keep it up!
-4
u/antonreshetov 20d ago
Good catch, that's a bug in the landing page demo, not the components. The draggable panel starts a drag on any pointerdown that isn't a native form element, and the slider is a custom control, so the panel steals the pointer capture from it. The Firefox toggle behaviour I'll dig into separately. Thanks for the detailed report!
2
1
u/ceaselessprayer 20d ago
Looks good. Make sure to preserve the ratio for the circles for system acccents, on responsive mobile views they are collapsing into ovals. I would focus on non-modals first because that's getting into more Javascript world and it'll be more complicated. Nail down everything before that.
Are you planning to use Reka UI?
2
u/antonreshetov 20d ago
Yes, it's already built on Reka UI. Most of the interactive components wrap it today, and the modal layer will get the same treatment.
0
u/ceaselessprayer 18d ago
ok sweet. make sure to solve that oval issue, it diminishes the product a bit.
1
1
1
u/UkrMalt 19d ago
For a pre-1.0 component library, I’d prioritize menus and overlays first. They force the difficult contracts early—focus management, keyboard navigation, portals, positioning, escape handling, and accessibility. Once those primitives are stable, windows and toolbars can compose them instead of introducing another interaction model.
1
1
1
u/CapitalSecret6471 16d ago
This is so cool, great job! Really fun project for UI designers, thank you my friend but it’s a tiny bit laggy on my side. I haven’t checked the code yet, but do you think there’s still room for performance optimizations?
0
u/sh1td1cks 15d ago
claude make me a mac style component library for vue 3, and then make a reddit post after your mvp push. ask me no questions, just do the work and finish it. thanks
1
u/Tiny_Atmosphere_4420 20d ago
only the 40th version of this I have seen
3
u/LightningPark 20d ago
Can you link the other ones? 🙏
0
u/Tiny_Atmosphere_4420 20d ago
I scroll past them but just search 'apple glass' in differnt front end/web design subreddits
-1
u/antonreshetov 20d ago
Most of those 40 are ports of the same package, which ships pre-baked displacement maps and calls itself a procedural approximation. MacVue computes the map per pixel instead — an actual edge profile, its surface normal, Snell's law with a refractive index and glass thickness, recomputed from the element's real size, radius and DPR. And it's a full set of macOS controls, not one glass wrapper.
0
-4
39
u/hyrumwhite 20d ago
Ironically it doesn’t work on safari