Bike Cards Scroll Animation

🔥 Scroll-Based Letter Opacity Effect

watch complete video on youtube

Text stays visible, but each letter smoothly increases opacity with a subtle glow as you scroll.

Built using HTML, CSS & JavaScript.

Perfect for landing pages & hero sections.

Scroll-Based Effect

Hackathon-ready calculator built using pure HTML, CSS & JavaScript.

👉 watch complete video

✔ Modern glassmorphism UI
✔ Keyboard support
✔ Input validation
✔ Single HTML file

📂 Source code included

🔥 Floating Input Animation (HTML + CSS)

👉 watch complete video

A modern input field where the placeholder smoothly moves up on focus.

✅ No JavaScript
✅ Clean & reusable UI
✅ Perfect for login & contact forms

More UI components coming soon 🚀

🔥 Floating Input Animation

Plane Cursor with Smoke (HTML + CSS + JS)

👉 watch short video on YT

create a custom SVG jet plane cursor that follows the mouse with smooth motion and speed-based smoke animation.

📂 Download full source code below 👇

Jet Plane Cursor

🔥 Animated Upload Button using HTML CSS & JavaScript

👉 watch short video on YT

I just built a smooth & modern upload button animation 🚀

✅ CSS animations
✅ JavaScript logic
✅ Beginner friendly

💻 Source Code 👇

🔥 Animated Upload Button

📂 Project: Animated Login UI

👉 watch complete video

Build a modern, eye-catching login form with rotating decorative rings.

Features :
🔹 Fluid, non-perfect "scribble" rings
🔹 Smooth 360° animations
🔹 Interactive focus effects
🔹 Sliding gradient "Sign In" button

👇 Download the source code below !

👉 watch complete video

In this video, we cover everything you need to know about CSS animation including :

✅️ CSS Transform
✅️ CSS Transition
✅️ CSS Keyframes
✅️ Animation Properties
✅️ Real-world Mini Project

Watch full video on my channel 🔥

💎 Neon Animated Button with Mirror Effect (HTML/CSS)

👉 watch short video on YT

✅ Rotating Border : Smooth sequential animation using 4 <span> elements.
✅ Mirror Effect : Bottom reflection for a high-end 3D feel.
✅ Dynamic Glow : Intense neon "bloom" effect on hover.

👇 Download the source code below !

​🚀 Animated Neon Border Button with Mirror Reflection

🎨 Pro CSS Trick: Premium Gradient Text Effect

Looking to upgrade your UI? 🚀

✅ Background Clipping : Making the gradient flow inside the font.
✅ Text Stroking : Adding that sharp, professional outline.
✅ Typography Pro-Tips : Why letter-spacing and weight matter for that "SaaS" look.

Perfect for landing pages, hero sections, and portfolio headers! 💻✨

The Smoothest Navigation Bar 🌊

👉 watch short video on YT

Check out this smooth, curved tab navigation bar!

👇 Download the source code below !