https://github.com/mohamedsadiq/sparks

An engineering snippets
https://github.com/mohamedsadiq/sparks

3d 3d-graphics 3d-models animated animation animation-css animations css framer-motion framer-motion-drag interactive react three-fiber three-js threejs threejs-example threejs-learning

Last synced: about 1 month ago
JSON representation

An engineering snippets

• Host: GitHub
• URL: https://github.com/mohamedsadiq/sparks
• Owner: mohamedsadiq
• Created: 2024-07-04T13:00:29.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T19:08:56.000Z (5 months ago)
• Last Synced: 2024-10-19T01:38:50.094Z (2 months ago)
• Topics: 3d, 3d-graphics, 3d-models, animated, animation, animation-css, animations, css, framer-motion, framer-motion-drag, interactive, react, three-fiber, three-js, threejs, threejs-example, threejs-learning
• Homepage: https://x.com/sadiq_moo
• Size: 25.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# sparks

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!

# Scrolling.

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

https://github.com/mohamedsadiq/sparks/assets/65205272/3fcfbdc5-f7d2-4cdc-bd08-81a23e21d870

# Quick Button.

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

![Quick Button](https://www.mosadiq.com/_next/image?url=%2Ffffsfs.gif&w=256&q=75)

# Widget.

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

https://github.com/mohamedsadiq/sparks/assets/65205272/7c83b3dd-1dd8-4a24-95f8-8ad039e4eabf

# The Martian.

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

https://github.com/user-attachments/assets/793e5208-673c-4177-8051-0da06e0369c7

# On Hover

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

https://github.com/user-attachments/assets/b192eab8-b41f-451c-af90-d942bd0e7a1e

# 3D interactive demo

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

https://github.com/user-attachments/assets/465482e0-5402-4c25-b42b-05f9bce61702