Spark It's a collection of engineering snippets meant to spark your curiosity. Dive in, explore, contribute, and use these snippets to supercharge your projects. Have fun experimenting!
It's a scroll, but with a twist. Instead of the typical scroll bar, I integrated circular indicators to signify the moving content, elevating the overall user experience. https://www.mosadiq.com/sparks/scroll
the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/scroll.js
OPAwHQYp6J1ayJrL.video.mp4
The Quick Button is an interactive UI component designed to enhance user engagement through dynamic animations. Built using React, Framer Motion and Tailwind CSS, this button offers a visually appealing experience by incorporating smooth transitions and state changes upon user interaction. https://www.mosadiq.com/sparks/button
the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/button.js
A widget inspired by Arkady's design, Built using React, Framer Motion and Tailwind CSS, This interactive widget dynamically generates dots representing exercise progress. Each click triggers a visual update, reflecting changes in exercise status with animated transitions and interactive elements.
https://www.mosadiq.com/sparks/widget the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/widget.js
Ext.Tw.Video.1805003030342901760.mp4
This interactive demo allows you to control and observe the behavior of a character in a 3D environment. Using Three.js.
https://www.mosadiq.com/sparks/TheMartian the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/TheMartian/index.tsx
martin.mov
This demo showcases a series of dynamically animated buttons built with React and Framer Motion. https://www.mosadiq.com/sparks/onhover the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/onhover.js
Screen.Recording.July.11.mov
This interactive demo showcases a collection of 3D models brought to life using React, Three.js, React Three Fiber. Framer Moti on, the interface provides a seamless experience through smooth animations and state transitions.
https://www.mosadiq.com/sparks/gameui the code: https://github.com/mohamedsadiq/Personal-website/blob/main/pages/sparks/gameui/index.js