Posts

Showing posts from January, 2026

3D Aurora Birthday Animation 🎉 (Relaxing Visuals)

Image
  Youtube link -  Click me In this blog i shared the source code of the video HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < title > Create Birthday Wish 🎂 </ title >   < link rel = "stylesheet" href = "style.css" > </ head > < body class = "form-page" >   < div class = "form-box" >     < h2 > 🎉 Create a Birthday Wish </ h2 >     < input id = "nameInput" placeholder = "Enter name..." maxlength = "20" />     < button onclick = " go ()" > Celebrate 🎂 </ button >   </ div >   < script >     function go () {       const name = document . getElementById ( "nameInput" ). value . trim ();       if (! name ) return alert ( "Please enter a name!" );       window . location . href = `celebrate.html?name= ${ encodeU...

Coding a 'Smart' Particle System (Text to Dots Tutorial)

Image
Youtube video  In this blog i have share the source code the video . Html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < canvas id = "canvas1" ></ canvas > </ body > < script src = "script.js" ></ script > </ html > Css body { margin : 0 ; background : #000 ; overflow : hidden ; font-family : sans-serif ; } canvas { display : block ; } Javascript const canvas = document . getElementById ( 'canvas1' ); const ctx = canvas . getContext ( '2d' ); canvas . width = window . innerWidth ; canvas . height = window . innerHeight ; let particles = []; const mouse ...

Ghost Messenger

Image
  Instead of a messaging app, build a tool where you type a secret message, and it turns into "Unreadable Ghost Text" Html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Ghost Messenger </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "container" >         < h1 > Ghost Messenger 👻 </ h1 >         < textarea id = "userInput" placeholder = "Type or paste your message here..." ></ textarea >                 < div class = "btn-group" >             < button onclick = " ghostify ()" > Ghostify (Encode) </ button >       ...

Popular posts from this blog

Birthday card in html css js

Create Animated Tooltip Popups in HTML/CSS | No JavaScript Needed!

Built a 3D Morphing Engine with 8,000 Particles! ✨ (Three.js)

Create an Instagram Profile Page Using HTML and CSS | UI Clone Tutorial

JavaScript Voronoi Circles effect |HTML JS| #coding

Digital Clock with animation |HTML|CSS|JS

Coding a 'Smart' Particle System (Text to Dots Tutorial)

MOST EXPENSIVE AND EXTREME GAMING SETUPS EVER