@vaonnb: 🦅انين 🥷الصمت🦅

🦅مخاوي⚔️ ذيب 🐺
🦅مخاوي⚔️ ذيب 🐺
Open In TikTok:
Region: EG
Monday 15 December 2025 15:48:57 GMT
492560
12130
2
2493

Music

Download

Comments

To see more videos from user @vaonnb, please go to the Tikwm homepage.

Other Videos

How I build with Lovable 👇 Academy in bio 🔗 Headline that reveals line by line, step by step: 1. Split the headline into one span per line. Wrap each span in a div with overflow hidden and display block. That div is the mask. 2. Inner span starts at transform: translateY(100%). Animate to translateY(0) over 0.9s. 3. Stagger the lines by 0.08s. In GSAP: gsap.to('.line span', { yPercent: 0, duration: 0.9, stagger: 0.08, ease: 'power3.out' }). 4. Add a tiny blur on the way in for that speed feel: filter blur(6px) to blur(0px) on the same tween. 5. Fire it on entry, not on load. ScrollTrigger start 'top 80%', once true. Or IntersectionObserver threshold 0.3. Word that swaps under it, same mask: 6. Keep an array of words. Every 2.5s send the current span to yPercent -100 while the next enters from 100. 7. Lock the wrapper width to the longest word or use a ch value, otherwise the layout jumps every swap. Spark streaks across the top: 8. Take a spark or light leak clip shot on pure black. Video tag, muted, loop, playsinline, autoplay. 9. mix-blend-mode: screen on that video. Black turns invisible, only the light survives. No alpha channel, no huge webm. 10. Fade the bottom edge with mask-image: linear-gradient(to bottom, black 0%, transparent 100%). 11. Push it with filter: saturate(1.3) contrast(1.1). Micro labels: 12. Mono font, text-transform uppercase, font-size 11px, letter-spacing 0.12em, accent color at 70% opacity. Cheapest way to make a site read technical. Save this if you want text that lands like a machine ⚙️ #lovablepartner #buildinpublic #webdesign #typography #fyp
How I build with Lovable 👇 Academy in bio 🔗 Headline that reveals line by line, step by step: 1. Split the headline into one span per line. Wrap each span in a div with overflow hidden and display block. That div is the mask. 2. Inner span starts at transform: translateY(100%). Animate to translateY(0) over 0.9s. 3. Stagger the lines by 0.08s. In GSAP: gsap.to('.line span', { yPercent: 0, duration: 0.9, stagger: 0.08, ease: 'power3.out' }). 4. Add a tiny blur on the way in for that speed feel: filter blur(6px) to blur(0px) on the same tween. 5. Fire it on entry, not on load. ScrollTrigger start 'top 80%', once true. Or IntersectionObserver threshold 0.3. Word that swaps under it, same mask: 6. Keep an array of words. Every 2.5s send the current span to yPercent -100 while the next enters from 100. 7. Lock the wrapper width to the longest word or use a ch value, otherwise the layout jumps every swap. Spark streaks across the top: 8. Take a spark or light leak clip shot on pure black. Video tag, muted, loop, playsinline, autoplay. 9. mix-blend-mode: screen on that video. Black turns invisible, only the light survives. No alpha channel, no huge webm. 10. Fade the bottom edge with mask-image: linear-gradient(to bottom, black 0%, transparent 100%). 11. Push it with filter: saturate(1.3) contrast(1.1). Micro labels: 12. Mono font, text-transform uppercase, font-size 11px, letter-spacing 0.12em, accent color at 70% opacity. Cheapest way to make a site read technical. Save this if you want text that lands like a machine ⚙️ #lovablepartner #buildinpublic #webdesign #typography #fyp

About