@webloved: How I build with Lovable 👇 Academy in bio 🔗 Type that cuts through an image, no 3D, step by step: 1. Three words, one per line, each in its own span. font-size: clamp(3rem, 9vw, 8rem), font-weight 800, line-height 0.9, letter-spacing -0.02em. 2. Stagger them horizontally, not centred. Line one flush left, line two indented 12%, line three indented 24%. That diagonal is what makes a static block feel like motion. 3. The image sits between them. Absolute position, z-index 2. Lines one and three at z-index 1, line two at z-index 3. Now the middle word runs over the image and the others run under it. 4. To split a single line, duplicate it. Same position, same font, the copy on z-index 3 with clip-path: inset(0 0 0 55%) so only the right half shows above the image. 5. Grain on the photo, not on the page: filter: grayscale(1) contrast(1.15), then an SVG feTurbulence layer with fractalNoise, baseFrequency 0.9, opacity 0.06, mix-blend-mode: multiply. 6. Keep the page pure white, #fff, and the type pure black. No greys anywhere. The only grey allowed is inside the photograph. The one rule underneath all of it: 7. Two typefaces maximum, and the second one only for 11px mono labels at 0.12em tracking. Everything else is one family at two weights. You can build this in an afternoon. Knowing it should be three words and not five is the part that took me 12 months. The full prompt behind this build goes in the Academy soon. Save this if you work with type 🖤 #lovablepartner #buildinpublic #webdesign #typography

weblove

Open In TikTok:

Region: PT

Thursday 20 August 2026 12:15:25 GMT