Welcome to vibe log
This is where product thinking meets vibe coding.
This is the home of my 4-week creative dev journal. I started this journey to level up as a designer. I don’t just want to design dynamic experiences; I want to learn how to build them myself.
Over the course of four weeks, I’m following a lesson plan I created to explore motion, interaction, and immersive front-end design. The main focus is on building advanced, scroll-driven experiences using tools like Framer Motion, Lenis, and vanilla JavaScript, with room for generative visuals, AI textures, and eventually, 3D.
Week 2: Bringing 3D & Narrative to the Scroll Experience
Week 2 focuses on moving beyond flat motion into immersive, interactive experiences by introducing 3D elements. Using react-three-fiber and related tools, the goal is to design, animate, and embed a 3D scene that integrates seamlessly with the site’s existing scroll-driven storytelling.
Week 1: Build a site that responds to scroll with animation and depth
Kicking things off with the basics: scroll, motion, and layout rhythm. I set up my first interactive page using Framer Motion and Lenis, created custom scroll sections, and brought the layout to life with smooth, scroll-triggered animation. It’s already shifting how I think about motion in UI.