Loading video...
Video Failed to Load
Just figured out how to do that smooth Apple scroll effect in 2 steps! It came down to two things: 1. Generating a scroll-optimized video with xAI GROK 2. Turning it into frames in v0 so users can actually scroll through it That's it! 🤯 You might wanna save... show more
74,362 views • 5 months ago •via X (Twitter)
49 Comments
@xai @v0 if you're on Framer and want the easiest and quickest solution here you have it
@xai @v0 Thank you! I’ll try it out for sure
@xai @v0 Ehm, that’s not how was made though
@xai @v0 she's baaaaaack!!!
@xai @v0 currently defrosting after months of hibernation! But we are sooo back! 💃🙌
@v0 @xai That’s sick!!! 💪🏻💪🏻💪🏻🔥🔥🔥
@v0 @xai 🙌💃🙌
@xai @v0 cool! come do this for Neo Protein
@xai @v0
@v0 @xai This is a cool ai use case
@v0 @xai Thank you!!
@xai @v0 This is amazing, thank you!
@xai @v0 I like the 3m tutorial length. Super easy to follow
@xai @v0 very cool
@xai @v0 Thanks Terry! Come back to SF soon!
@v0 @xai Super cool, earned a follow 👌🏿👌🏿👌🏿
@v0 @xai Thank you!!
@xai @v0 Wow
@xai @v0 👀👀👀
@xai @v0 So cool!!
@xai @v0 Thank you❤️🙌
@xai @v0 nice stuff
@xai @v0 Thank you!
@xai @v0 Breaking that Apple-style scroll into just two steps with GROK + v0 is super clean. It makes highend UX feel accessible for any landing page. What frame rate did you find works best for keeping the scroll buttery smooth? I share daily AI workflow tips too.
@xai @v0 Amazing video. Very helpful. Thank you!
@xai @v0 Thank you! Glad you liked it!
@xai @v0 Might wanna try it, the shawarma one is amazing
@xai @v0 It really does seem like grok is better at a lot of things. Just so expensive.
@xai @v0 For video generation honestly @grok was the best video model after trying SORA (💀) , VEO3, Seedance.. but I do agree it is pricey
really better than VEO ? I must have missed something, tbh I thought VEO is the best still , just like NBP or NB2 are still my fav for img gen. For being truthful and not accondescending, for coding, for idea development, for finding niche info, I think its really better than most other models though. I mean the best information edge now is on twitter or reddit imho. most likely twitter more than reddit given how much they nerfed bots here so i feel like its source of information can be quite a good signal.
@xai @v0 Safinaz you’re a genius. Thanks for this
@xai @v0 lowkey feels like cheating but in a smart way curious how it holds up on heavier pages
@xai @v0 Holy shit that is so sick. Bookmarking this for inspo ✨
@xai @v0 SO good
@xai @v0 Learning from the best!😉
@xai @v0 How did you come up with this? Unreal
@xai @v0 Good, but still webgl is the best. It just a bit hard to set up and animate
@v0 @xai Awww, thank you so much for sharing! The video generation tip is super helpful 💛💛💛
@xai @v0 Well done, I'm doing the same but locally. 🙂
@xai @v0 Would love to see what you’re building!
@xai @v0 This was sooo goood!!!
@xai @v0 this is crazy creative!! i wonder how can i use this in calorie tracking space?
@xai @v0 I’m definitely going to try this in my next projects. Thanks for the inspiration!❤️
@xai @v0 @shreyash865
@xai @v0 Is it optimised for mobile as well ?
@xai @v0 V0, the Zionist!? friend of child genocidal killers?
@xai @v0 核心是FFmpeg把视频转换成帧webp，然后用canvas做无缝跟随，在CSS的容器中，高阶的话就得用GSAP+ScrollTrigger 插件了。
@xai @v0 Really Amazing, Thanks for sharing this, I was always curious how to build this kind of effect, but you made my day.
@xai @v0 why not scrub the video with a delay?
![CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇](https://image.24vids.com/tw-1752479022674481373/ext_tw_video_thumb/1752475535978934272/pu/img/5naYIYo6vw_NbpbO.jpg)
![this is f**king dangerous... someone just figured out how to run Claude Code, Codex, and Cursor inside Grok Bot [here is how you set it up in 4 mins] 1. copy the 'setup-grok-prompt' 2.give it to your agent 3. you are done](https://image.24vids.com/tw-2092641104311263405/amplify_video_thumb/2092640945384955904/img/YRU62hsQQzBk76Om.jpg)
![CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇](https://image.24vids.com/tw-1738039148672426164/ext_tw_video_thumb/1738032359302156288/pu/img/s8BufTPl8FRWOouG.jpg)
