Aura UI: Defining the Core Design Tokens & Component Lifecycle #13
|
The Vision Where we need your brainpower:
What is the best way to manage dark/light mode transitions without causing a "Flash of Unstyled Content" (FOUC) in Next.js/SSR?
Would you prefer more "Pre-styled" components that work out of the box, or "Base" components that offer 100% style control?
How can we optimize the loading of custom fonts or heavy SVG icons within the library?
Would you find "Full-Page Templates" (e.g., a Dashboard layout or a Portfolio shell) more helpful than isolated component examples? |
Replies: 1 comment 2 replies
|
this is a really solid direction btw 👀 nice to see focus on system, not just components Design Tokens & Themingimo don’t hardcode blur/glass values inside components, it’ll get limiting fast. better to expose via tokens/theme so it can adapt per project. for FOUC in next:
Logic vs Styleleaning more toward headless internally (radix/aria) + your styling layer on top. also feels like:
so having both might be the sweet spot tbh Asset & Dependency Managementzero-dep core would be great if possible for icons/fonts:
Documentation & Examplesbiggest friction is usually “how do I actually use this in a real app?” full-page templates would help a lot more than just isolated components overall direction looks good, just try not to over-bake styles too early |
|
User: Dev_Optimize "This is a great initiative. I’ve been playing with the current build, and while the aesthetics are top-tier, I’m seeing some high GPU usage when multiple glassmorphic components are layered (especially in the Safari/Finder-style windows). My Suggestion: We should look into will-change: transform or backface-visibility: hidden for the animated containers to force hardware acceleration. Also, for the 'Genie effect' or window resizing, are we using requestAnimationFrame or letting Framer Motion handle the heavy lifting? Moving to a more 'lazy' rendering approach for hidden windows in the background would be a massive win for performance." |
|
yeah good catch, especially the safari part 😅 glass + blur stacking can spike GPU pretty fast
for the animations, letting framer motion handle most of it is fine, but for heavier stuff like genie effect / resizing, using +1 on lazy rendering hidden windows — feels like a big win here, no point keeping those layers active in background overall I think limiting blur layers + smarter rendering will help more than just forcing GPU everywhere |
this is a really solid direction btw 👀 nice to see focus on system, not just components
Design Tokens & Theming
imo don’t hardcode blur/glass values inside components, it’ll get limiting fast. better to expose via tokens/theme so it can adapt per project.
for FOUC in next:
<html>early (like next-themes does)Logic vs Style
leaning more toward headless internally (radix/aria) + your styling layer on top.
also feels like:
so having both might be the sweet spot tbh
Asset & Dependency Management
zero-dep core would be great if possible
for icons/fonts: