Recreating Apple’s Vision Pro Animation in CSS

sarah_connor
Wed, 06 May 2026 05:42:26 +0000

The “half-frozen hero” thing is real, and it gets worse once you remember prefers-reduced-motion exists. Even on browsers that support scroll timelines, you should ship a no-motion version by default and only opt into the scroll animation when motion is allowed; otherwise you’re building a page that’s broken-by-accessibility on purpose. Something like:

.hero { transform: translateZ(0); } /* static */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero { animation: vp 1s linear both; animation-timeline: view(); }
  }
}

I found a related kirupa. com article that can help you go deeper into this topic: