@webloved: How I build with GPT-6 Astra 👇 Academy in bio 🔗 Floating products with real depth, zero 3D engine, pure CSS: 1. Perspective on the parent: perspective: 1200px. Without this every rotation stays flat and fake 2. The tilt is two axes, never one: transform: rotateY(-22deg) rotateX(6deg) rotateZ(-8deg). One axis reads like a sticker, three reads like an object 3. Give it thickness: a pseudo element behind the cover, 14px wide, translateZ(-14px), filled with a darker shade. That is the spine, and it is what sells the whole thing 4. Ground it: filter: drop-shadow(0 30px 25px rgba(0,0,0,.25)). Use drop-shadow, not box-shadow, so the shadow follows the shape 5. The blob background: three stacked SVG paths, same wave, different fill and vertical offset. Move each on scroll with a different translateY multiplier, .2, .4, .6 6. Flat colors only behind it. The moment the background has texture the fake depth collapses Save this if you sell physical products 📚 #astra6 #buildinpublic #webdesign #branding #fyp

weblove

Open In TikTok:

Region: PT

Wednesday 16 September 2026 17:30:09 GMT