@webloved: How I build with GPT-6 Astra 👇 Academy in bio 🔗 That hero is not 3D. It is a video scrubbed by your scroll. 1. Render the scene as an MP4, then re-encode it with a keyframe on every frame: ffmpeg -i in.mp4 -g 1 -crf 20 -an out.mp4. This is the step everyone skips. Without it, scrolling backwards stutters because the browser has to decode from the last keyframe every time. 2. Make the section 400vh tall. Inside it, a container with position: sticky, top 0, height 100vh, and the video at object-fit: cover. 3. progress = how far you have scrolled into the section / (section height - window height), clamped between 0 and 1. 4. Never set currentTime straight from the scroll event. In requestAnimationFrame: t += (progress * video.duration - t) * 0.1, then video.currentTime = t. That 0.1 lerp is the smoothness. 5. Video muted, playsinline, preload auto, and call pause() once on load so it never autoplays. 6. Drive the headline from the same progress value: opacity fades out between 0.15 and 0.25. 7. Under 768px swap to a WebP frame sequence on a canvas. iOS seeks video badly until the user has touched the page. Save this if you build cinematic sites 🔥 #astra6 #webdesign #frontend #javascript #creativecoding

weblove

Open In TikTok:

Region: PT

Monday 21 September 2026 12:45:41 GMT