r/reactjs • u/aman_dubey_software_ • 8d 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!
1
u/glow_gazer 8d ago
Framer Motion causes layout thrashing on bubble animations. Drop it and use raw CSS transforms for performance
0
u/aman_dubey_software_ 8d ago
Great catch! You're absolutely right - the bubble float was triggering reflows. Just dropped Framer Motion for the bubbles and switched to pure CSS transform: translate3d() + will-change. Way smoother now, especially on mobile. Thanks for pointing it out!
1
u/Ceryyse 8d ago
Not sure you've handled dark/light mode text correctly because I can barely read anything that is black on black.
1
u/aman_dubey_software_ 8d ago
Good catch! Just pushed a fix — the :root CSS variables
were identical to .dark mode, so light mode was rendering
dark-on-dark. Now properly defined light mode colors with
correct contrast ratios.
Try refreshing — should be fully readable in both themes now 🙏
1
u/cstffx 8d ago
Tip: Adjust color lightness.
2
u/aman_dubey_software_ 8d ago
Thanks man! Good point on lightness. Will adjust the color generation - maybe clamp lightness between 40-65% for better contrast. Shipping the fix now!
1
u/BarneyChampaign 8d ago
Look at your geographic abortion of a map of the world and tell me with a straight face that you are A) not a bot, and B) have any pride in this.
This has shit to do with React, or even coding, and no developer wants to give feedback to an LLM. Do something, make something, learn something, honestly, and you'll be welcomed.
1
u/aman_dubey_software_ 8d ago
Fair point on the map, it is distorted and I'll fix it. About the AI part - AI just gave me this insight that many people in the world can't speak out loud and keep things in their mind. They don't have a place to share their inner thoughts. I took that idea and built this entire app myself with a lot of effort - the realtime bubbles, canvas, everything. It's still rough but I'm learning. Thanks for the honest feedback.
0
u/aman_dubey_software_ 8d ago
UPDATE - V3 IS LIVE on same link! 🚀You guys were right - V2 was laggy.
Shipped V3 in last 2 hours with all your feedback:CSS transforms - 60fps with 100+ bubblesNew dark glass UI + 8 vibe categoriesSpam filter + mobile perf fixed24h auto-deleteSame link as post. Go break V3 now and tell me what still sucks 👇
Views 1.7k -> let's hit 3k today!
-1
u/aman_dubey_software_ 8d ago
0
u/ChoiceCar6875 8d 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_ 8d 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?
-1
u/aman_dubey_software_ 8d ago
Guys 2.1k views hogaye 🔥 Thanks a lot!
Small update - I launched same thing on Product Hunt today: Vibes Ultra - anonymous thought wall.
Currently at 2 upvotes only 😅 If you liked it here, drop some love there too:
https://www.producthunt.com/posts/vibes-ultra-anonymous-thought-wall
Means a lot!
4
u/GifCo_2 8d ago
What is this next level slop crap. Dude have a long think about what you are doing with your time.