The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🌟 My competition entry: Built an animated grid and 3D viewer—is fully adaptive to all MagicPath design system (my favourite is the NeoBrutalist).
Dynamic Grid Transformations
- Organic noise animation: Add flowing, natural movement with fully adjustable amplitude, scale, and speed.
- Hover effects: Shapes smoothly grow and react to cursor proximity with customizable boost, radius, and easing.
- Variety of shapes: Enable any shape on the grid cells like; circle, diamond, hexagon e.t.c.
Grid cells respond playfully to hover and theme - each cell scales and rotates on hover for a playful, tactile effect. Plus even the 3D model matches the grid’s design system. Try out every variant! 🪄
Live Demo 👉 https://designs.magicpath.ai/v1/happily-sky-8904
Component 👉 https://designs.magicpath.ai/v1/sturdy-gate-4023
@Chidiebere Peter so cool!
@lukas margerie thank you for that youtube tutorial. Super helpful (keep it coming 🚀 👍🏽0
@Chidiebere Peter man that looks fantastic!!
@Andres Sepulveda Morales i appreciate the kind words
@Chidiebere Peter I really love this! Seeing it applied in a real project is mind-blowing. This truly deserves recognition — amazing work, buddy!
@Hyginus Ukeh Thanks a bunch. I took you advice on finding a real live application for it 🤝. You inspired this 🙏🏽
@Chidiebere Peter dope!
@Jeremiah Welch Thanks Jeremiah
@Chidiebere Peter This is seriously impressive! 🌟 I love how playful and tactile the grid feels.
Which hover effect or shape was the most fun to create?
@FlutterflowDevs Aha... the star shape and diamond ws the most fun to create. For the hover effect. The noise distortion was also incredibly interesting to make as well
@Chidiebere Peter I can imagine! The noise distortion must have made the grid feel alive. Did you experiment with combining multiple effects at once, or keep them separate for clarity?
@FlutterflowDevs It did actually. But i feel like it made it a bit simple. I did advice you KEEP IT SIMPLE (*KISS)
@Chidiebere Peter Wow! This is phenomenal, I love this.
@Adewale Adeyemo I really appreciate the kind words. Inspired by #thenewcontra
@Chidiebere Peter This is so impressive!
@Nia Nguyen Aww... thank you for your kind words
@Chidiebere Peter woah, this is beautiful! Love how the interactive effect feels and how awesome it looks, woo-hoo! 🙌 🎉
@Erika Carpio 😊 Awesome, I'm glad you're loving it! Your enthusiasm is infectious! Keep spreading that positivity and good vibes! 👏💖
@Chidiebere Peter Super fun! I like retro vintage. 🔥
@Monic ✧ Yes, that's exactly what i was going for
@Chidiebere Peter Playful and slick!
@Chirag Madhu yah, glad you had fun with it 😅
@Chidiebere Peter Top Notch man
@Muhammad Noorani let's bring the trophy home man
@Chidiebere Peter Yes, may the best wins but I also hope they don't mess up judging... and choose wisely and value each submission done...
@Chidiebere Peter Love it!
@Chidiebere Peter This one’s wild — the grid motion gives it so much life ⚡️
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
