Codrops·46wDeconstructing the 35mm Website: A Look at the Process and Technical Details
A technical breakdown of building an interactive 3D camera website using Three.js, covering edge detection with Sobel operators, mesh highlighting through render targets and raycasting, and scroll-triggered film roll animations. The tutorial demonstrates custom shader development, post-processing effects, and advanced WebGL techniques for creating engaging 3D web experiences.
Brad Woods' Digital Garden·47wScroll-driven camera animation
Explore how to create scroll-driven camera animations in a web scene using three.js and GSAP. The technique involves using the intersection observer to adjust camera positions as different sections come into view. Quaternions are utilized for smooth camera rotations, preventing issues like gimbal lock. The setup allows developers to easily configure desired positions with a GUI and handles the transitions using GSAP for animation.
All Frontend·46wJust vibe-coded my portfolio with Cursor AI - would love your feedback! 🚀
The author shares their experience of building a portfolio website using Cursor AI for vibe coding. The website features a modern design, interactive animations, smooth transitions, and is responsive across all devices, utilizing Three.js, framer motion, and Gsap. The author seeks community feedback on the design, UX, performance, and code quality.