|

Adding Immersive Environments to a Web Page

Joseph Simpson Updated on

Using USDZ files to create immersive backgrounds for web pages.

Using Website Environments

visionOS 26 brings several new features to Safari. Website Environments were shown off at WWDC 2025. The feature is current behind a feature flag and it may change before rolling out to all users. But it can be a fun and simple way to add something extra to a page.

To enable this flag, go to: Settings > Apps > Safari. Scroll to the bottom and tap Advanced, the look for Feature Flags. Look for the option called Website environments and toggle it on.

Webkit Feature Flags

Currently this is not a very discoverable feature. If a page includes one, you can find a button called Open Website Environment in the menu on the left side of the URL bar in Safari. Hopefully Apple will make this a bit more prominent when they roll this out to all users.

Tapping this button will open the environment in progressive immersive mode. I haven’t yet found a way to specify immersion level or full immersion.

You can even try it on this article. Just be away that the content of the scene orbits around you in space. If you have sensitivity to motion then you may want to sit this one out.

Setup

These Environments are USDZ files that we can add to the head section of a site or page. We just add a link tag with the rel="spatial-backdrop" attribute. For example, the scene included with this article is

<link rel="spatial-backdrop" href="https://stepinto.vision/wp-content/uploads/2025/10/CapsuleOrbit.usdz">

We can add these to each page on a site to have unique backgrounds. Or add one to a shared header to use the same file on multiple pages. Unfortunately, navigating from one page to another pops us out of the environment, at least for now.

Step Into Vision is a WordPress site, so we needed a way to enable USDZ file uploads. Fortunately, Alex Moise published a short code snippet we can use. You can use this to create a WordPress plugin or add it using one of the many code snippet plugins. Once this has been added, you can upload USDZ files directly to the media library. Then just copy the URL for the file to use in your link tag. We use the Kadence suite of tools, which includes a per-page script override section.

If you are working with Squarespace, reach out to Todd H. to ask how he enabled this on his site. Make sure to check out his article too.

Scenes

These scenes can contain 3D models, PBR and Shader Graph Materials, Animations, Audio files, and even Particles. I haven’t tested every component in Reality Composer Pro, but it seems to include most things that QuickLook or inline models support.

I mocked up a basic demo scene using Reality Composer Pro. I used spheres to create a background and floor. Then I created sets of capsules arranged in formation. I grouped these and duplicated the groups a few times, then change the transform for each group. Used a simple Fresnel Shader on the capsules. I used Timelines to have these groups orbit the center of the scene, with a behavior that starts on scene open. For the audio, I dropped in a simple background track and added an ambient audio component. I set both the timeline and auto to loop so you can hang out in the space as long as you want.

The USDZ files we can use here should be as small as possible. I haven’t found any documentation that recommend a specific size, but I would target 25 MB or smaller. I created for this article is 3.6 MB.

A few scenes that are worth checking out

A few other resources

I’m very interested to see where this feature goes. When will it roll out to all users on Apple Vision Pro? Will other headsets support these scenes? And most importantly, when will Apple publish that Severance scene they showed off in the video?

If you find you need more control of the user experience, then it may be time to look into WebXR.

Follow Step Into Vision

Questions or feedback?