Loading video...

Video Failed to Load

Go Home

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...

74,570 views • 6 months ago •via X (Twitter)

49 Comments

Fabian Albert's profile picture
Fabian Albert6 months ago

@xai @v0 if you're on Framer and want the easiest and quickest solution here you have it

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Thank you! I’ll try it out for sure

Luigi De Rosa's profile picture
Luigi De Rosa6 months ago

@xai @v0 Ehm, that’s not how was made though

alli's profile picture
alli6 months ago

@xai @v0 she's baaaaaack!!!

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 currently defrosting after months of hibernation! But we are sooo back! 💃🙌

OSOW's profile picture
OSOW6 months ago

@v0 @xai That’s sick!!! 💪🏻💪🏻💪🏻🔥🔥🔥

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@v0 @xai 🙌💃🙌

aaki building Neo Protein's profile picture
aaki building Neo Protein6 months ago

@xai @v0 cool! come do this for Neo Protein

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0

Eino's profile picture
Eino6 months ago

@v0 @xai This is a cool ai use case

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@v0 @xai Thank you!!

Dreamsandcode's profile picture
Dreamsandcode6 months ago

@xai @v0 This is amazing, thank you!

Taylor's profile picture
Taylor6 months ago

@xai @v0 I like the 3m tutorial length. Super easy to follow

˗ˏˋ Terry Sutton ˎˊ˗ — e/shadcn/ui's profile picture
˗ˏˋ Terry Sutton ˎˊ˗ — e/shadcn/ui6 months ago

@xai @v0 very cool

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Thanks Terry! Come back to SF soon!

Kwame's profile picture
Kwame6 months ago

@v0 @xai Super cool, earned a follow 👌🏿👌🏿👌🏿

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@v0 @xai Thank you!!

Emanuel Perez's profile picture
Emanuel Perez6 months ago

@xai @v0 Wow

Carson Suite's profile picture
Carson Suite6 months ago

@xai @v0 👀👀👀

Maayan Albert's profile picture
Maayan Albert6 months ago

@xai @v0 So cool!!

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Thank you❤️🙌

Dima's profile picture
Dima6 months ago

@xai @v0 nice stuff

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Thank you!

Ubaid Ullah Wahab's profile picture
Ubaid Ullah Wahab6 months ago

@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.

Lina Colucci's profile picture
Lina Colucci6 months ago

@xai @v0 Amazing video. Very helpful. Thank you!

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Thank you! Glad you liked it!

Shaz's profile picture
Shaz6 months ago

@xai @v0 Might wanna try it, the shawarma one is amazing

Logika Agency's profile picture
Logika Agency6 months ago

@xai @v0 It really does seem like grok is better at a lot of things. Just so expensive.

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 For video generation honestly @grok was the best video model after trying SORA (💀) , VEO3, Seedance.. but I do agree it is pricey

Logika Agency's profile picture
Logika Agency6 months ago

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.

Atom the UiUx Designer's profile picture
Atom the UiUx Designer6 months ago

@xai @v0 Safinaz you’re a genius. Thanks for this

Quadcode AI's profile picture
Quadcode AI6 months ago

@xai @v0 lowkey feels like cheating but in a smart way curious how it holds up on heavier pages

Gustav ❖'s profile picture
Gustav ❖6 months ago

@xai @v0 Holy shit that is so sick. Bookmarking this for inspo ✨

Esteban Suárez's profile picture
Esteban Suárez6 months ago

@xai @v0 SO good

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Learning from the best!😉

gomes.pt's profile picture
gomes.pt6 months ago

@xai @v0 How did you come up with this? Unreal

Quilkes's profile picture
Quilkes6 months ago

@xai @v0 Good, but still webgl is the best. It just a bit hard to set up and animate

Yan Liu's profile picture
Yan Liu6 months ago

@v0 @xai Awww, thank you so much for sharing! The video generation tip is super helpful 💛💛💛

Vlad's profile picture
Vlad6 months ago

@xai @v0 Well done, I'm doing the same but locally. 🙂

Safinaz Elhadary's profile picture
Safinaz Elhadary6 months ago

@xai @v0 Would love to see what you’re building!

HardGuy's profile picture
HardGuy6 months ago

@xai @v0 This was sooo goood!!!

Pako's profile picture
Pako6 months ago

@xai @v0 this is crazy creative!! i wonder how can i use this in calorie tracking space?

Dhiraj Ingle's profile picture
Dhiraj Ingle6 months ago

@xai @v0 I’m definitely going to try this in my next projects. Thanks for the inspiration!❤️

Swayam Sharma's profile picture
Swayam Sharma6 months ago

@xai @v0 @shreyash865

Abhishek Kumar's profile picture
Abhishek Kumar6 months ago

@xai @v0 Is it optimised for mobile as well ?

Dervy's profile picture
Dervy6 months ago

@xai @v0 V0, the Zionist!? friend of child genocidal killers?

Arthur.eth's profile picture
Arthur.eth6 months ago

@xai @v0 核心是FFmpeg把视频转换成帧webp,然后用canvas做无缝跟随,在CSS的容器中,高阶的话就得用GSAP+ScrollTrigger 插件了。

Kapil's profile picture
Kapil6 months ago

@xai @v0 Really Amazing, Thanks for sharing this, I was always curious how to build this kind of effect, but you made my day.

nick woodward's profile picture
nick woodward6 months ago

@xai @v0 why not scrub the video with a delay?

Related Videos

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 👇

jhey ʕ•ᴥ•ʔ

146,481 views • 2 years ago