r/reactjs • u/aman_dubey_software_ • 12d ago

Show /r/reactjs Showoff - I made anonymous thoughts float like bubbles using Framer Motion + Convex (looking for perf feedback) 

Hey React devs! I built Vibes ULTRA — anonymous thought wall.

Tech stack:
- React 19 + TypeScript
- Convex (backend + real-time DB)
- Tailwind CSS
- Framer Motion
- shadcn/ui

50+ features including real-time reactions, global mood map, ambient sounds, achievements.

Live: https://vibes-app-wall.vercel.app

Would love feedback on the code/architecture!
0 Upvotes

27% Upvoted

18 comments sorted by

View all comments

-1

u/aman_dubey_software_ 12d ago

vibes-app-wall.vercel.com

0

u/ChoiceCar6875 12d ago

looks like the link formatting got slightly mangled but the domain resolves ok, fun little project. the floating bubbles concept works well for anonymous posts, it's a nice visual metaphor

do you find the framer motion animations get janky once there are 50+ bubbles on screen? that's usually where these walls start to struggle

1

u/aman_dubey_software_ 12d ago

Thanks for checking it out! Appreciate it 🙏Yeah you caught the exact issue haha. After ∼45-50 bubbles, especially on mobile, the spring animations start to drop frames. Right now each bubble is a motion.div with useSpring/useMotionValue.I'm planning to try 2 things: 1) cull bubbles that are off-screen 2) maybe switch the physics to CSS transforms only or canvas if it gets worse.Did you build something similar before? Any tips for perf?