My Design System and Animation Layer
DesignMotionFramer MotionUI SystemsNext.js
By Neel Vora
This post walks through how I built my Design System and Animation Layer, and where it fits in the rest of my work.
My site uses a structured design system with an animation layer built on top of Framer Motion.
Design tokens
I use tokens for:
- Spacing
- Radius
- Shadows
- Typography
- Colors
These stay consistent across all subdomains.
Component families
Common component families include:
- Buttons
- Cards
- Modals
- Navigation
- Pills
- Tabs
Each one is designed with a consistent visual language.
Motion primitives
I built reusable, composable animations:
- Fade in
- Slide in
- Zoom subtle
- Staggered children
These appear across the shop, AI Lab, hero, and project pages.
Vibe system integration
Animations adapt based on active vibe:
- Bento hero staggers grid cells
- Carousel projects animate rotation
- Parallax hero fades based on scroll
Why this matters
This shows my ability to create a system level design language instead of one off components.
Keep exploring
From here you can:
- Visit /neel-vora for more background about me and my work.
- Browse more posts on the blog.
Thanks for reading! If you found this useful, check out my other posts or explore the live demos in my AI Lab.