Fallbacks for phones and reduced motion

Three separate problems

"Mobile" hides three different conditions, and each has its own answer. No cursor: a touch screen has no hover, so anything that responds to pointer movement needs another trigger. Less graphics power: a phone has more pixels per inch and less power to fill them, and it slows down as it heats up. A request for less motion: a setting, on any device, by which a person says that large movement on screen is unwelcome or makes them unwell.

A wide laptop with a touch screen, a phone with a mouse attached and a desktop with reduced motion switched on all exist. Ask the tool to detect each condition by itself, not to infer all three from the screen width.

When there is no cursor

• Run it on its own. A slow automatic pass of the same effect, repeated every few seconds, shows what the surface does without any input.
• Use the finger. A drag can stand in for pointer movement, as long as it never blocks vertical scrolling. Horizontal drags are safer than vertical ones.
• Use scroll. Tie the effect to how far the section has travelled through the screen. Every device has scroll.
• Use tilt with caution. Device orientation can drive parallax, but it may need the visitor's permission and is not always available. Treat it as an extra, never as the only trigger.
• Make tap targets real. Anything that opened on hover needs a tap equivalent, at a size a thumb can hit.

When the graphics chip is weak

Ask for a lighter tier with named cuts: a lower pixel ratio cap, fewer particles or a coarser simulation grid, no post-processing, nearer fog so less of the scene is drawn. Give the numbers for both tiers in the prompt so the lighter one is designed, not improvised.

Choosing the tier by screen width is a rough guide at best. A sturdier method is to start at the lighter tier on small screens, measure the frame rate for a few seconds, and step down if it is low. Ask also for the page to survive losing the WebGL context, which browsers can take away under memory pressure: the still image should return and the page should stay usable.

When reduced motion is on

The prefers-reduced-motion setting is exposed to pages as a media query. The request is to avoid large, sweeping movement: camera flights, parallax, zooms, things that spin. It is not a request for a broken or empty page, and small changes such as a fade or a colour shift are generally fine.

For a scroll story, replace the pinned scene with stills, one per chapter. For a hero, show the resting picture. For particles, show shapes formed and cross-fade between them. For a 3D product, show the stills of each moment. Write the replacement into the prompt explicitly; "respect reduced motion" alone tends to produce a site that simply switches everything off.

The still version is the foundation

One set of still images covers four cases at once: the poster while the scene loads, reduced motion, no WebGL, and devices too slow for the lighter tier. The stills can be captured from the scene itself, so they match. Because they are ordinary images with ordinary text beside them, they are also what search engines and link previews see.

This is the reason to design the still version first. If the page makes sense as five pictures and five lines of copy, the live scene is an improvement on something that already works. If it does not, the scene is hiding a page with nothing in it.

A fallback block to add to any immersive prompt

Fallbacks for this build. Build the still version first, then the live scene on top of it.

Detect each condition separately (do not infer them from screen width):
- touch: matchMedia("(hover: none), (pointer: coarse)")
- reduced motion: matchMedia("(prefers-reduced-motion: reduce)"), and react if it changes while the page is open
- WebGL: try to create the context; treat failure and "webglcontextlost" as no WebGL
- slow: average frame rate under 40 over the first 3 seconds

Tier A, full (desktop, fine pointer): the scene as described above.

Tier B, light (touch, or small screens under 700px wide):
- pixel ratio capped at 1.5
- [particle count / simulation grid / model detail] reduced to [number]
- no post-processing, fog distance halved
- pointer effects replaced by [an automatic pass every 8 seconds / a horizontal finger drag / scroll position]
- nothing may block vertical scrolling; tap targets at least 44px

Tier C, still (reduced motion, no WebGL, or still slow after dropping to tier B):
- no canvas; show [n] still images, one per moment, each with its line of copy in HTML
- images at ./stills/01.jpg … in two sizes, 800px and 1600px wide, lazy-loaded after the first
- transitions limited to a 0.3s opacity fade
- every link and button from the live version is present

All tiers:
- ./stills/01.jpg is the poster from first paint; the scene fades in over 0.6s when ready
- headline, copy and navigation are HTML in every tier, colour [#hex] on [#hex]
- with ?tier=a, ?tier=b or ?tier=c in the URL, force that tier so I can check each one

Stack stays Vite + React + TypeScript with plain CSS.

When you are done, run the site and open it three times with ?tier=a, ?tier=b and ?tier=c at 390px and 1440px wide. Confirm that all three show the same copy and the same links.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• What makes a website immersiveDepth, continuity and response to input are what make a website immersive. What each means in a prompt, and the cases where you should not do it.
• A performance budget for 3D websites, written into the promptWhat to write into a prompt so a 3D or WebGL site runs: pixel ratio cap, draw calls, texture sizes, one render loop, and pausing when off screen.
• How to describe scroll-driven animation in a promptThe vocabulary for scroll moments in a prompt: pinning, progress from 0 to 1, easing and reversibility, with a moment sheet to copy.

• Cursor interactions
• WebGL heroes
• 3D galleries