Animating Your Portfolio with Three.js & Themes
May 10, 2025
5 min read
Three.jsNext.jsTailwind CSSFramer Motion
# Animating Your Portfolio with Three.js & Themes
An interactive background can make or break your site’s first impression. In this post, I walk through:
- **Dynamic starfields** using @react-three/fiber and @react-three/drei, with a fallback for non‑WebGL browsers.
- **Dual Three.js scenes**: one bright, pastel theme for “light mode,” one deep‑space vibe for “dark mode.”
- **Next.js App Router** and the `"use client"` directive to ensure the canvas only renders on the client.
- **Smooth theme toggling** with `next-themes`, Framer Motion for icon rotation, and Tailwind’s `dark:` variants.
By the end, you’ll have a fully animated, theme‑aware background that enhances engagement without overwhelming content.