@webloved

How I build with Lovable 👇 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 📩 Games feel good because of hit-stop: a tiny freeze when a hit lands. Steal it for your clicks: 1. On click, loop over document.getAnimations() and call pause() on each one. 2. Wait 80ms, then call play(). Longer than 120ms feels like lag, shorter you don't notice it. 3. Right after, shake the clicked element: translate 4px, -3px, 2px, 0 over 150ms. 4. Pop a word on the hit, like "K.O.": scale 1.4 to 1 in 200ms with cubic-bezier(0.34,1.56,0.64,1). 5. Stat bars as blocks, not a smooth fill: grid-template-columns: repeat(6, 1fr); gap: 4px. 6. Fill the blocks one by one, 60ms apart, when they scroll into view. 7. End the page with a countdown, "CONTINUE? 9" to 0, and one button. 8. Wrap the freeze and shake in prefers-reduced-motion: no-preference. Keep the words for everyone. Save this before your next portfolio site 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #gamedev

How I build with Lovable 👇 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 📩 The subject breaking through the headline is 3 layers, not one image. Same text twice, the photo in the middle: 1. Cut the subject out as a transparent WebP. Nothing behind them. 2. Stack 3 layers in one box, each position: absolute; inset: 0. 3. Layer 1: the headline. Layer 2: the cutout. Layer 3: an exact copy of the headline with aria-hidden="true". 4. Clip the copy: clip-path: inset(50% 0 0 0). The top word sits behind the subject, the bottom word in front. 5. Size text and image both in vw, font-size: clamp(6rem, 18vw, 16rem), so the overlap holds on every screen. 6. Depth on mouse move: image moves 14px, text 5px, opposite directions. transform only. 7. pointer-events: none on the copy, so the buttons under it still click. 8. On phones, drop the copy and keep the subject in front. Simpler, still reads. Save this before your next event site 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #uidesign

How I build with Lovable 👇 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 📩 Those print-style dot images aren't a filter. It's 30 lines of canvas, and it works on any photo: 1. Draw the photo into a hidden canvas and read it with ctx.getImageData. 2. Sample a grid every 8px. One cell = one dot. 3. Brightness per cell: 0.299 R + 0.587 G + 0.114 B. 4. Radius = (1 - brightness / 255) * 4. Dark areas get big dots, light areas tiny ones. 5. Skip any dot under 0.4px, so the whites stay clean paper. 6. Shift every other row by half a cell (4px). That offset is what makes it read as print. 7. Draw every dot in one ink colour, rgb(220,40,30) on off-white. 8. Size the canvas at width × devicePixelRatio, or the dots go blurry on phones. Save this before your next editorial site 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #graphicdesign

How I build with Lovable 👇 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 📩 Don't tell visitors they'll save time. Let them drag a slider and watch their own number: 1. Ask for 3 inputs only: team size, hours a week on repetitive work, share they could automate. 2. Each one is an input type="range" with real defaults (5 people, 6h, 40%), so the result is never empty on load. 3. Result = team × hours × share. Show it per week and per year (× 46 working weeks). 4. Fill the track with CSS: background: linear-gradient(90deg, rgb(230,30,60) var(--p), rgb(55,55,55) var(--p)). Update --p on every input event. 5. font-variant-numeric: tabular-nums on the result, so the digits don't jump while dragging. 6. Round to the nearest 0.5h. "14.5 h" feels measured, "14.4372 h" feels fake. 7. aria-live="polite" on the result, so screen readers hear it change. 8. Reuse it on pricing: a "how many workflows" slider picks the plan and highlights that card. Save this before your next SaaS site 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #saas

How I build with Lovable 👇 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 📩 A B2B site that sells isn't about effects. It's the order. Pain, proof, product, process, ask: 1. Pain first. 3 numbered cards, each one problem written the way the client would say it. 2. Proof right after. 3 numbers max, counting up from 0 in 1.2s when they enter the screen, each with a unit and one line. 3. Product. The whole range in one row, a category label under each, no prices yet. 4. Process. 4 or 5 steps on one line, each with how long it takes. 5. Ask last. A quote form with only what sales needs: product, quantity, email, message. 6. The button says what happens next: "Request a quote", not "Submit". 7. Put the same button in the nav from the start, for people who already decided. 8. Check the order: every section answers the doubt the one before it raised. Save this before your next client site 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #uidesign