Let's explore Aceternity UI in more depth, we will discuss: tech stack, license, dark mode, performance, functionality, accessibility and responsiveness.
Aceternity UI is a great new, free and open-source UI library that is taking the frontend world by the storm.
⏱️Timestamps:
00:00 - What we will cover
00:25 - Tech Stack - Next.js, React, dependencies
01:20 - Dark Mode
01:30 - Aceternity Studio
01:39 - Pricing
01:48 - Blog
01:56 - How it's different?
02:08 - "Own Your Components" Trend
02:58 - How shadcn/ui is different
03:33 - Accessibility
03:44 - Tooltip example
05:00 - How shadcn/ui handles tooltips
05:30 - prefers-reduced-motion
06:45 - Cheat Sheet how to reduce animations
07:10 - Performance
07:20 - FPS Monitor
07:48 - CPU Throttling
08:01 - tsParticles Throttling
08:12 - Can React handle Evervault Card?
09:15 - Usability / Functionality
09:50 - Scroll Hijacking
10:06 - Hiding content on hover
10:30 - Animations Controllers
10:55 - Responsiveness
11:14 - Ratio of elements size on mobile
11:35 - Mobile vs Usability
11:49 - Final note on minimalism
📖 Acknowledgments and further reading:
Aceternity UI: https://ui.aceternity.com/
Manu Arora tweeter: / mannupaaji
Web accessibility for seizures and physical reactions: https://developer.mozilla.org/en-US/d...
A primer to vestibular disorders: https://www.a11yproject.com/posts/und...
prefers-reduced-motion: https://developer.mozilla.org/en-US/d...
MDN's ARIA docs for Tooltips: https://developer.mozilla.org/en-US/d...
Framer Motion on prefers-reduced-motion: https://www.framer.com/motion/guide-a...
usePrefersReducedMotion hook snippet: https://www.joshwcomeau.com/snippets/...
shadcn/ui: https://ui.shadcn.com/
Aceternity Svelte Version: https://aceternity.sveltekit.io/
@vueuse/motion: https://motion.vueuse.org/
tsParticles lib: https://particles.js.org/
simplex-noise lib: https://www.npmjs.com/package/simplex...