Theme-Aware Blobs for Background Personality

Every portfolio site has a “background.” Most are boring gradients. I wanted something alive but not distracting — so I landed on SVG blobs that wiggle, float, and even shift colors when I toggle dark mode.

Setup

• I grabbed a few blob SVGs from Blobmaker (online generator).
• Dropped them into motion.div with scroll transforms.
• Applied currentColor so they adapt instantly to theme changes.

With a light theme, they’re pastel and airy. In dark mode, they deepen into moody purples and blues. Tiny detail, but it really changes the vibe.

Challenges

Performance. I noticed flickering when blobs moved too fast, so I throttled their scroll speed and randomized size instead. Also had to balance contrast — blobs that were too dark made text unreadable.

Takeaways

Little touches like this make a site feel crafted. It’s subtle, but users notice when a site “breathes.”