Hi, I'm Priyanshu, a frontend engineer from Bengaluru. For the past 3+ years
I've built React and Next.js apps, mostly complex interfaces: canvas annotation
tools, custom video players and role-based dashboards.
On the side, I've been building Devsloka UI: a
library of animated React components for landing pages. Its tagline is
"Build something that moves." Here's what's inside and how it's built.
What's in it
- 41 components: Morphing Nav, Morphing Card, Morphing Modal, Text Effect, Product Tour, Expanding Cards, Content Carousel and more
- 18 blocks: Hero, Features, Pricing, Testimonials, FAQ, Team, Contact, Newsletter, Changelog, Blog, CTA, plus auth screens (Sign In, Sign Up, OTP, Forgot Password) and a 404 page
- 4 backgrounds and 16 hooks
- Playful ones, like a laptop that closes as you scroll, an animated smartwatch, a receipt printer and arc scroll steps
The stack
React 19, Next.js, Tailwind CSS v4, Motion, Radix and TypeScript.
Why copy-paste instead of an npm package
The library follows shadcn conventions. You install a component like this:
npx shadcn@latest add <registry url>
Or you copy the source straight into your project.
The code lives in your repo. You can change anything, there's no runtime
dependency, and you never wait for me to merge a PR to fix your animation
timing. The tradeoff is that you don't get automatic updates.
What's free and what's coming
- Free (MIT): every component, background and hook
- Pro (coming soon): more complex components, full-page templates, new components every month and an AI skill for customizing components. It will be a one-time purchase, with no subscription.
Need a site built?
I also run a small web studio, Devsloka. We build
websites and web apps with Next.js and TypeScript, add AI features to
products, and do UI/UX and motion design. You can see more of my work at
priyanshukr.com.
Try it
Which animated component do you rebuild most often? I'll consider adding it
next.
Top comments (0)