Moving Button Icon Only by Drawing and Coding!!!

This project is a digital motion experiment built around a hand‑designed “moving button” icon. The goal was to create a simple object that demonstrates bounce behavior using only drawings, frame‑based images, and lightweight animation logic. Instead of relying on pre‑made assets or templates, I created the button icon myself by sketching the shapes, refining the outlines, and exporting each stage as a clean image. These images were then sequenced to simulate impact, recoil, and upward motion, giving the button a clear bounce effect.

To keep the workflow modular and reproducible, I based the entire build on my own code structure from GitHub. The project follows the same engineering style I use in my other repositories: small components, clean functions, and image‑driven animation. Anyone can inspect the underlying logic, reuse the drawing frames, or adapt the bounce behavior for their own UI experiments.

GitHub link: https://github.com/Mr-A-Hacker

1. Drawing Tools

1. Paper or a sketchbook for the original button concept
2. Pencil/pen for outlining the icon
3. Optional: markers or shading tools if you want stronger contrast before digitizing

2. Digital Capture Tools

1. A phone or camera to take clear photos of each drawing stage
2. Good lighting (desk lamp or window light) to avoid shadows on the sketches

3. Image Editing Software

1. Any basic editor (GIMP, Photopea, Krita, or even phone apps) to:
2. Clean up the drawings
3. Remove backgrounds
4. Export each frame as a PNG
5. Optional: vector tools (Inkscape) if you want sharper edges

4. Animation / Coding Tools

1. A computer with Python, JavaScript, or your preferred language
2. A simple animation loop or frame‑switching logic
3. Your GitHub code structure for modular organization
4. GitHub: https://github.com/Mr-A-Hacker

5. File Assets

1. Your hand‑drawn button icon frames
2. Bounce sequence images (squash, stretch, impact, recoil, rise)
3. Final exported PNGs for the animation

6. Optional Enhancements

1. A tablet or stylus if you want to refine the drawings digitally
2. A screen recorder if you want to show the bounce in action
3. A simple UI mockup to place the bouncing button inside a real interface

The first step in creating the bouncing button icon was designing the actual button shape by hand, not digitally. I wanted the motion to feel personal and authentic, so I started with a physical sketch — the same one shown in the photo where the hand is mid‑drawing the hooded figure and the glowing “Follow” button.

1. Define the Core Shape

I began with a rounded rectangular outline for the button, keeping the geometry clean and balanced. This simple shape ensures smooth bounce behavior later when animated.

2. Add Realistic Details

To give the button depth and realism, I added:

1. Inner shading to simulate surface curvature
2. A highlight line for light reflection
3. A subtle press indentation to show tactile response

These hand‑drawn details make the bounce visually believable once motion is applied.

3. Capture Each Frame

Using my phone, I photographed each stage of the sketch:

1. The base button (neutral position)
2. A slightly squashed version (impact)
3. A stretched version (rebound)
4. A pressed‑down version (rest state)

Each photo became a frame in the bounce sequence, preserving the handmade texture visible in the drawing.

4. Keep It Modular

Every drawing was stored separately so I could import them individually into my animation code. This modular approach mirrors my GitHub engineering workflow — clean, reusable, and easy to extend.

After finishing the hand‑drawn sketch, the next step was to bring it into the digital workspace for refinement and color. This stage transforms the physical drawing into a clean, animated‑ready asset.

1. Capture the Drawing

I used my laptop’s camera or phone to take a high‑resolution photo of the sketch. The goal was to preserve every pencil line and shadow detail — especially the hand, the hooded figure, and the “Follow” button with the GitHub logo. Make sure the lighting is even and the paper fills the frame; this prevents distortion when editing later.

2. Import to the Computer

Once captured, I transferred the photo to my laptop and opened it in an image editor (GIMP, Krita, or Photoshop). I cropped the edges, adjusted brightness and contrast, and cleaned up stray marks to make the outlines crisp.

3. Add Digital Color

Using layers, I began coloring the sketch:

1. Base layer: soft neutral tones for the hoodie and mask
2. Highlight layer: subtle light reflections on the “Follow” button
3. Accent layer: faint blue glow around the GitHub logo to emphasize motion

The coloring was done carefully to preserve the hand‑drawn texture while adding digital depth.

4. Prepare for Animation

I exported the colored version as a PNG with transparent background options ready for coding. This version becomes the visual core of the bounce animation.

This stage brings the digital sketch to life. The masked figure remains perfectly still while the glowing blue “Follow” icon rotates smoothly in mid‑air, casting light and subtle pulses that create a hacker‑aesthetic atmosphere.

1. Scene Setup

Import your colored sketch and separate layers:

python

Keep the figure static by locking its layer:

python

2. Rotation and Glow Logic

Create a rotation loop for the button:

python

This makes the GitHub “Follow” icon spin continuously while maintaining a soft glow.

3. Light Casting and Pulse Effects

Add dynamic light and wave pulses:

python

The waves expand and fade, giving the illusion of digital energy radiating outward.

4. Keep the Figure Still

Ensure no movement occurs on the figure layer:

python

Only the button rotates and emits light — the figure remains motionless, illuminated by the glow.

5. Final Composition

Render all layers together:

python

The result: a dark, high‑tech scene where the rotating “Follow” button becomes the sole source of motion and energy

After coding and testing the animation, the project came together exactly as planned. The masked figure remained perfectly still, preserving the realism of the original sketch, while the glowing blue “Follow” button rotated smoothly in mid‑air. The light pulses radiated outward in subtle waves, casting a faint blue reflection across the mask and hoodie — just enough to give the scene a living, digital energy.

Performance and Visual Outcome

1. The rotation loop ran seamlessly at 60 FPS, keeping the motion fluid and consistent.
2. The glow intensity and pulse timing synced perfectly, creating a rhythmic, high‑tech feel.
3. The dark background amplified the contrast, making the button the clear focal point.
4. The figure’s stillness reinforced the hacker‑aesthetic — calm, controlled, and powerful.

Result Summary

The final animation looked like a cinematic still brought to life: a quiet, mysterious figure illuminated by a rotating beacon of technology. It captured the essence of the Make It Bounce theme — motion born from precision and design.

GitHub link for reference: https://github.com/Mr-A-Hacker

I’m Mr‑A‑Hacker, a software developer and engineer who builds modular, privacy‑first systems and offline AI assistants. My projects focus on real‑world impact — tools that teach, protect, and empower users through clean engineering and creative design. Every repository I publish is tested, documented, and built to help others learn or build faster.

What I Do

1. Develop LAN‑only platforms and Flask‑based simulations for cybersecurity and forensic education
2. Create modular backend automation and self‑contained AI tools that run without cloud dependency
3. Design interactive visual projects like this bouncing “Follow” button — blending art, motion, and code
4. Engineer contest‑ready software that demonstrates precision, creativity, and technical depth

Why Follow Me

Following me on GitHub means joining a space where:

1. Every project is open‑source and educational
2. You’ll see real engineering, not templates or gimmicks
3. I share code that teaches, not just code that works
4. You’ll get early access to new experiments in animation, cybersecurity, and automation

I build with purpose — every commit is a step toward smarter, safer, and more creative technology. If you value originality, modular design, and hacker‑level precision, you’ll find my repositories worth your time.

Follow me on GitHub: 👉 github.com/Mr‑A‑Hacker