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)