Void & Cloud-Interactive 3D Portfolio

A viral interactive portfolio experience (crossed 1.2M+ views) that redefines the traditional resume through spatial 3D interactions, fluid physics-based motion, and dark-aesthetic typography.

Comment

Inspiration

Most developer and designer portfolios today follow the exact same predictable pattern: a cookie-cutter template, a static photo, and walls of dry bullet points. They tell people what you do, but they rarely show what you are truly capable of crafting.

I wanted to challenge this status quo. I set out to build an interactive, living digital experience that treats a personal website not as a digital resume, but as a standalone product. My goal was to create a tactile digital world combining spatial 3D graphics, fluid physics-based motion, and bold typography.

The concept resonated far beyond my expectations: a showcase reel of this portfolio went viral on social media, amassing over 1.2 Million+ views and thousands of comments from developers and designers worldwide, validating that people crave digital experiences that evoke emotion and curiosity.

What it does

Void & Cloud is an immersive digital portfolio and creative engineering showcase designed to make exploring personal projects intuitive, memorable, and visually arresting:

Spatial 3D Hero Scene:Powered by Three.js and React Three Fiber, greeting users with interactive geometric forms and dynamic canvas lighting that react in real-time to cursor movement. Fluid Inertia Scrolling:Integrated with Lenis and GSAP to deliver continuous, butter-smooth scroll momentum without abrupt browser jumps. Tactile Micro-Interactions: Magnetic interactive buttons that gravitate toward the mouse pointer, subtle ghost cursor trails, and interactive text pressure animations. Curated Visual Hierarchy:Built with an intentional dark aesthetic (bg-void), high-contrast typography (Space Grotesk + Inter), and frosted glassmorphism accents. Interactive Project & Skills Showcase: Dynamic cards and responsive galleries that let visitors explore case studies and technical capabilities effortlessly.

How we built it

The experience was crafted using a modern creative web development stack:

Framework:Next.js (App Router) & React 19 for modular component architecture and server-rendered SEO optimization. 3D & Creative Canvas:Three.js and @react-three/fiber for real-time WebGL rendering and spatial lighting. Motion & Interaction Engine:GSAP (GreenSock) for high-performance timeline orchestration and Framer Motion for UI state transitions. Smooth Scroll Architecture:Lenis for inertia-based smooth scrolling synced with scroll-driven animations. Styling & Design System:Tailwind CSS with custom color tokens, glassmorphism filters, and precision typography featuring Space Grotesk, Inter, and Poppins. Deployment:Vercel with automated CI/CD and edge caching.

Challenges we ran into

Balancing 60 FPS Performance with Heavy 3D Graphics: Running real-time 3D canvas calculations alongside particle animations and complex DOM layout transitions can easily cause frame drops, especially on mobile devices. I solved this by optimizing geometry vertex counts, throttling draw calls, and leveraging GPU-accelerated CSS transforms. Scroll Synchronization:Preventing conflicts between native browser scrolling, virtual Lenis inertia, and GSAP ScrollTrigger timelines required careful lifecycle management and accurate bounding-box calculations. Accessibility in Motion-Heavy Design:Finding the balance between high-energy creative animations and readable, accessible UX required ensuring strict contrast ratios and establishing clear visual hierarchies so the motion enhances content rather than distracting from it.

Accomplishments that we're proud of

1.2M+ Viral Reach & Community Validation: Seeing over 1.2 million people engage with the interface proved that investing in high-fidelity UI/UX creates genuine human connection. Harmonious Tech Fusion:Successfully uniting Three.js 3D rendering, GSAP animations, and Next.js into a cohesive, responsive experience. Tactile Polish:Nailing the micro-interactions (magnetic pull, smooth cursor dynamics, and staggered menu transitions) so that every click and hover feels rewarding.

What we learned

  • How to optimize WebGL render loops and manage memory garbage collection to avoid memory leaks on single-page apps.
  • The importance of typography scale and whitespace when working with dramatic dark-mode palettes.
  • How micro-animations turn an otherwise passive visitor into an active, curious explorer.

What's next for Void & Cloud-Interactive 3D Portfolio

Accessibility Motion Toggle: Adding a dedicated one-click "Reduced Motion" mode to instantly adapt all animations for users with vestibular sensitivities. Interactive Case-Study Deep Dives:Expanding each project card into an interactive modal showcasing architecture diagrams, interactive prototypes, and design breakdowns. Audio-Reactive Mode: Experimenting with optional ambient spatial audio effects synced to user interaction.

Built With

Share this project:

Updates

Submission history