DEV Community

Ashish prajapati
Ashish prajapati

Posted on

✨ Visualizing a Feeling Through Particles, Anime.js, and Dreamy Backgrounds ✨

Hey everyone! 👋

Today I’m not just sharing a project — I’m sharing a feeling.

A feeling I tried to translate into visuals: ✨motion, freedom, softness, a dream.✨

Through moving particles, floating animations, and soft color shifts, I tried to capture what I often feel — a quiet, slow dance between energy and peace. 🕊️

This feeling was inspired by a story that really touched my heart — an emotion I carried from the anime Darling in the Franxx.

It’s not a direct recreation — it’s more like the echo of what I felt while watching it: the hope, the loneliness, the gentle freedom of dreams in the sky.

🎯 What This Represents for Me

  • Particles are my scattered thoughts, moving gently, sometimes colliding, always alive.
  • Flying birds are my dreams — drifting slowly across endless skies.
  • Anime.js animations of hearts, wings, feathers — are pieces of emotion that keep moving, floating, never fully still.
  • Smooth scrolling through soft background changes feels like the way emotions flow — not in sudden bursts, but gradual, natural, effortless.

This isn’t just a page with effects.

It's the visual version of something inside me.

⚙️ How I Built My Feeling (Technologies Used)

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Particles.js
  • Anime.js
  • Intersection Observer API
  • Smooth Scroll Behavior

📜 Small Glimpses of the Code

Particles Moving Like Gentle Chaos 

particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: '#ff6b6b' },
    shape: { type: 'circle' },
    move: { speed: 2, random: true }
  }
});
Enter fullscreen mode Exit fullscreen mode

The particles aren't random. They're lively, yet peaceful — like a mind daydreaming.

A Heart That Breathes 

anime({
  targets: '.heart',
  scale: [1, 1.2, 1],
  duration: 3000,
  loop: true,
  easing: 'easeInOutQuad'
});
Enter fullscreen mode Exit fullscreen mode

This little animation is the way my heart sometimes feels — expanding with hope, shrinking with fear, expanding again.

Soft Transitions Between Feelings (Sections) 

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const colors = {
        first: '#1a0f2e',
        second: '#2d1b4e',
        third: '#4a1942',
        fourth: '#6b2c70',
        fifth: '#8e3a8e'
      };
      document.body.style.backgroundColor = colors[entry.target.id];
    }
  });
}, { threshold: 0.3 });
Enter fullscreen mode Exit fullscreen mode

Each background color is a different emotion for me. A small shift, but meaningful.

A Dream Floating Across the Sky (Flying Bird) 

let birdPosition = 0;
function animateBird() {
  birdPosition += 0.5;
  const yOffset = Math.sin(birdPosition * 0.05) * 50;
  bird.style.transform = `translateX(${birdPosition}px) translateY(${yOffset}px)`;
  if (birdPosition > window.innerWidth) {
    birdPosition = -100;
  }
  requestAnimationFrame(animateBird);
}
animateBird();
Enter fullscreen mode Exit fullscreen mode

Just like how some dreams move — a little lost, a little aimless, but always moving.

📸 A Glimpse Into My Dream

[Link to the Feeling] : (https://my-dream-story.netlify.app/)

💬 What I Felt While Building This

Honestly?

  • Calmness.
  • Nostalgia.
  • A little sadness.
  • A lot of peace.

I wasn’t building a "project" this time. I was painting an emotion with code. 🎨

Code became my canvas, and these tiny interactions became my little world for a while.

And somewhere in this creation,

I kept thinking about the story of Zero Two and Hiro, the loneliness they faced, the skies they dreamed about —

and how even when everything felt heavy, their dreams always found a way to float. 🕊️

🚀 If You Ever Feel Like Coding a Feeling...

Here’s my advice:

  • Don’t worry about "making it perfect."
  • Focus on how it feels, not just how it looks.
  • Let animations breathe.
  • Let your emotions guide the color palette, the speed, the flow.

Because sometimes, code isn’t logic — it’s art. ✨

🎉 Thank You for Reading

This was deeply personal for me.

If you’ve ever felt something you couldn’t put into words — maybe try putting it into code. It’s surprisingly healing. 💖

Would love to hear if you've ever built something emotional too!

Stay dreamy, stay coding. 🌌

Inspired in spirit by the anime "Darling in the Franxx" — to the dreamers who keep flying, no matter what. 🌸

Top comments (0)