weblove's banner

weblove

@webloved • 110,900 subscribers

Shorts

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

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

415,300 просмотров

How I build with Claude 👇Academy in bio 🔗 CSS object-fit cover on full viewport images creates that immersive architectural photography experience Vanilla Tilt.js adds subtle 3D parallax to product cards on mouse move with zero WebGL needed Warm beige and charcoal two-color palette luxury brands use restraint because excess looks cheap Video autoplay muted loop behind the hero section creates motion without distracting from the product CSS scroll-snap turns each gallery room into a fullscreen section users snap between effortlessly SVG path animation draws architectural floor plan outlines on scroll revealing the space progressively Lazy loading with IntersectionObserver ensures high resolution architecture photography never slows the page Save this if you want a showroom site that makes clients feel they already walked through the space 🏛️ #claude #buildinpublic #webdesign #luxury #fyp

How I build with Claude 👇Academy in bio 🔗 CSS object-fit cover on full viewport images creates that immersive architectural photography experience Vanilla Tilt.js adds subtle 3D parallax to product cards on mouse move with zero WebGL needed Warm beige and charcoal two-color palette luxury brands use restraint because excess looks cheap Video autoplay muted loop behind the hero section creates motion without distracting from the product CSS scroll-snap turns each gallery room into a fullscreen section users snap between effortlessly SVG path animation draws architectural floor plan outlines on scroll revealing the space progressively Lazy loading with IntersectionObserver ensures high resolution architecture photography never slows the page Save this if you want a showroom site that makes clients feel they already walked through the space 🏛️ #claude #buildinpublic #webdesign #luxury #fyp

3,400,000 просмотров

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 📩 POV: you mastered 3D websites. A whole house you walk through just by scrolling. 9 rooms, one camera 🏠 The trick: the camera rides on a path. Scroll only decides how far along the path you are. 1. Build the house as one Three.js scene. One room per stop: lounge, bar, garage, stairs, gallery, library, billiards, vault, outside. 2. Put one point in the middle of each room at eye level (y = 1.6). Join them with CatmullRomCurve3. 3. Make a second curve for where the camera looks, the same points pushed 2 units forward. 4. Read scroll as p from 0 to 1. camera.position = path.getPointAt(p). camera.lookAt(look.getPointAt(min(p + 0.02, 1))). 5. Smooth it: p moves 8% toward the real scroll value each frame, so it glides instead of jumps. 6. Room i sits at p = i / 8. When p passes it, swap the room name and the floor number. 7. Bottom bar shows every room as a tick. Click one and it scrolls you there. 8. LOOK button: drag to turn your head up to 15 degrees left or right. Let go and it springs back. Save this before your next 3D build 🔥 #claude #webdesign #threejs #interiordesign #vibecoding

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 📩 POV: you mastered 3D websites. A whole house you walk through just by scrolling. 9 rooms, one camera 🏠 The trick: the camera rides on a path. Scroll only decides how far along the path you are. 1. Build the house as one Three.js scene. One room per stop: lounge, bar, garage, stairs, gallery, library, billiards, vault, outside. 2. Put one point in the middle of each room at eye level (y = 1.6). Join them with CatmullRomCurve3. 3. Make a second curve for where the camera looks, the same points pushed 2 units forward. 4. Read scroll as p from 0 to 1. camera.position = path.getPointAt(p). camera.lookAt(look.getPointAt(min(p + 0.02, 1))). 5. Smooth it: p moves 8% toward the real scroll value each frame, so it glides instead of jumps. 6. Room i sits at p = i / 8. When p passes it, swap the room name and the floor number. 7. Bottom bar shows every room as a tick. Click one and it scrolls you there. 8. LOOK button: drag to turn your head up to 15 degrees left or right. Let go and it springs back. Save this before your next 3D build 🔥 #claude #webdesign #threejs #interiordesign #vibecoding

23,100 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

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 📩 Pick your floor right on the building photo 🏙️ 1. One photo of the tower. Measure in px where the roof and the ground are, and count the floors (26 here). 2. Floor height = (ground minus roof) / 26. 3. On mousemove over the tower: level = 26 minus Math.floor((y minus roof) / floor height). Clamp it 1 to 26. 4. Draw a glowing band one floor tall at that spot: linear-gradient from transparent to rgba(120,200,255,0.6) and back. 5. A thin SVG line runs from the band to a side panel. The panel shows the level in big tabular-nums numbers. 6. Keep one array with 26 objects: residences, size, price, available. The panel just reads level minus 1. 7. Click the band: scale the photo to 6x from that floor in 1.2s, then fade into a white clay model of the apartment. 8. On phones, tap and drag up and down the tower instead of hover. Save this before your next real estate site 🔥 #claude #webdesign #realestate #architecture #vibecoding

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 📩 Pick your floor right on the building photo 🏙️ 1. One photo of the tower. Measure in px where the roof and the ground are, and count the floors (26 here). 2. Floor height = (ground minus roof) / 26. 3. On mousemove over the tower: level = 26 minus Math.floor((y minus roof) / floor height). Clamp it 1 to 26. 4. Draw a glowing band one floor tall at that spot: linear-gradient from transparent to rgba(120,200,255,0.6) and back. 5. A thin SVG line runs from the band to a side panel. The panel shows the level in big tabular-nums numbers. 6. Keep one array with 26 objects: residences, size, price, available. The panel just reads level minus 1. 7. Click the band: scale the photo to 6x from that floor in 1.2s, then fade into a white clay model of the apartment. 8. On phones, tap and drag up and down the tower instead of hover. Save this before your next real estate site 🔥 #claude #webdesign #realestate #architecture #vibecoding

557,000 просмотров • 3 дней назад

How I build with Claude 👇 Academy in bio 🔗 12 months of knowledge made this site. The build took one morning. An architecture studio has two things to show and every site picks one. The drawing or the finished house. Never both at once. Steal this for free: When you have a before and an after, stop stacking them. Split the screen and scroll them together. Left panel, blueprint on dark. Right panel, the real house on paper. One scroll, both sides advance. The visitor watches the line become a building without you explaining anything. How it works: both panels position sticky, top 0, height 100svh, side by side in a flex row. Each side scrolls its own inner column. ScrollTrigger with scrub pins the section and drives both. The trick nobody does: offset them. Right side lags 15% behind the left. The drawing always arrives first, exactly like real construction. The pitch stops being a claim and becomes something the client feels in their thumb. You are not late, you are early. I had nobody to copy. You have my 12 months in one place. Full prompt goes in the Academy. Save this if you build for studios 📐 #claude #buildinpublic #webdesign #architecture #fyp

How I build with Claude 👇 Academy in bio 🔗 12 months of knowledge made this site. The build took one morning. An architecture studio has two things to show and every site picks one. The drawing or the finished house. Never both at once. Steal this for free: When you have a before and an after, stop stacking them. Split the screen and scroll them together. Left panel, blueprint on dark. Right panel, the real house on paper. One scroll, both sides advance. The visitor watches the line become a building without you explaining anything. How it works: both panels position sticky, top 0, height 100svh, side by side in a flex row. Each side scrolls its own inner column. ScrollTrigger with scrub pins the section and drives both. The trick nobody does: offset them. Right side lags 15% behind the left. The drawing always arrives first, exactly like real construction. The pitch stops being a claim and becomes something the client feels in their thumb. You are not late, you are early. I had nobody to copy. You have my 12 months in one place. Full prompt goes in the Academy. Save this if you build for studios 📐 #claude #buildinpublic #webdesign #architecture #fyp

666,200 просмотров • 3 месяцев назад

Больше нет контента для загрузки