Post by @webloved

How I build with Claude 👇 Academy in bio 🔗 Full prompt goes in the Academy soon. It took hours of testing to get right. Want a site like this? Send me an email, email in bio 📩 One product, three flavours. Let the whole page change colour as you scroll into each one: 1. Give each flavour section an id: cacao, peche, framboise. 2. One palette per flavour as CSS variables: :root[data-flavour="cacao"] { --bg: rgb(243,232,222); --ink: rgb(74,44,30) }. Same for the other two. 3. IntersectionObserver with rootMargin "-50% 0px -50% 0px", so it fires when a section crosses the middle of the screen. 4. On fire, set document.documentElement.dataset.flavour to that id. 5. body gets transition: background-color 600ms, color 600ms. The page melts from one flavour to the next. 6. 6 to 8 ingredient PNGs per flavour, each moving at its own speed: 0.2 to 0.6 times the scroll. 7. Small ones slower with filter: blur(2px), big ones faster and sharp. Instant depth, no WebGL. 8. The Add to bag button uses --ink too, so the button always matches the flavour on screen. Save this before your next product site 🔥 #claude #claudeai #webdesign #vibecoding #3dwebsite