Phone Screen Scroll

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

The inline script is not optional. The framed screenshots are the fallback for no JavaScript, no WebGL and reduced motion, and without this they would paint for the half second it takes three.js to arrive and then be swapped for the stage. The probe runs before first paint, stamps html.gl when a canvas is coming, and the stylesheet lays the page out as the pinned stage from that class. No JavaScript, no class, the fallback shows; the effect removes the class again if it cannot build the phone after all. It probes WebGL 2, which current three.js requires.

2. Add the markup anywhere in your <body>. One li per screen:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Why the import map rather than a plain <script src> for three.js: three ships as ES modules only, and its old UMD build logs a deprecation warning on every page load. The shim imports it as a module (dynamically, so a blocked CDN falls back to your framed screenshots instead of a blank stage), puts it on window, and then loads assets/script.js as an ordinary script, so the effect stays a plain file you can drop into any build.

Already using three.js as a module? Skip the shim and make sure window.THREE is set before assets/script.js runs:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: a [data-phone-scroll] root holding a [data-phone-stage] and an ol[data-phone-steps]. The stage holds the [data-phone-slot] (the box the phone stands in), and optionally the caption and the rail. Every [data-step] carries one img[data-screen], a [data-step-label] and a [data-step-line]. The script reads the page: the number of screens, the scroll distance, the rail buttons and the timeline all follow the list, and there is no data array in the script. Add a screen by copying a whole li; remove one by deleting it. Change a screen by changing its src.

What is only the demo's styling: the dark stage, the accent colour, the type, the caption layout and the cue line. Delete the cue and repaint the tokens at the top of style.css. The rest of the file is layout the effect depends on.

The phone's finish is CSS tokens on the root: --phone-frame (the frame, a green-grey titanium, and the lens rings, which are the same metal a touch lighter), --phone-back (the frosted glass back, a deep forest green, and the polished camera plateau a shade darker), --phone-light (the floor bounce in the studio reflections) and --screen-bg (what the display shows while a screenshot loads). Any CSS colour works, including color-mix(). --phone-h is the phone's height on the stage; --dwell is the scroll distance per screen (100svh by default).

CSS the effect depends on:

• The html.gl rules. Under .gl the stage is position: sticky; height: 100svh, and the ol is pulled up over it with margin-top: -100svh so each li is one 100svh scroll beat. That is plain CSS, so the page has its final height before any script runs and nothing shifts when the canvas arrives. Keep it, and give the section no overflow: hidden ancestor, which would break sticky.
• The li content is visually hidden but not removed under .gl: screen readers still read each screen's image description, label and line, because the canvas itself is aria-hidden.
• The slot's size is the phone's on-screen size and its centre is where the phone is drawn. Resize the slot in CSS and the phone follows.

Choosing Your Screens

The screen is a plain texture, so almost any portrait screenshot works, but a few habits help:

• Portrait, about 9:19 to 9:20. The display is 853 by 1854 in proportion. The shader cover-fits any other ratio, cropping rather than stretching, so a landscape image shows only its middle. 853 by 1854 or larger is sharp on a retina display; there is no benefit above about 1200 wide.
• Screenshots of a real UI read best. The phone is a device, and a photograph on it looks like a wallpaper. The bundled screens are concept screenshots of Hush, a fictional sleep and focus sounds app, laid out as a real interface for this effect with stock photography; they show no real product.
• Leave the top 6.5 percent as a plain strip of the screen's own colour, and start your header below it and inset from the rounded corners. The phone draws its own status bar there (the clock, signal, wifi and battery, as vectors, in the true position on either side of the dynamic island and a corner radius in from the edge), so a screenshot that already has one shows two. Export screenshots without the status bar, or paint the strip over.
• Tell it whether the screen is dark or light with data-tone="dark" or "light" on the step: dark screens get white status glyphs, light ones dark glyphs, and the colour follows the picture all through a dissolve. The 3D phone measures the top of the screenshot itself when the attribute is missing (an image from another origin cannot be read, so give those the attribute); the flat fallback, which draws its status bar in CSS, always needs it.
• The clock reads 9:41. Set data-status-time="9:41" on the root to change it in the 3D phone; the flat fallback's clock is the content of .phone-frame::after in style.css.
• Screens that differ in overall tone dissolve best. The change happens while the back of the phone faces the viewer, so it is rarely seen; with data-spin="0" it is a visible soft dissolve, and similar screens hide the join.

Test the middle of a change, not only the rests.

Options

Set these as data attributes on [data-phone-scroll].

Attribute	Values	Default	Description
data-spin	0, 360, 720, -360	360	Degrees the phone turns on each change, in whole turns. 360 turns once through the edge and the back; 720 twice; a negative value turns the other way; 0 is a calm rock and dissolve with no turn. Other values round to the nearest whole turn, so the phone always lands facing you
data-idle	0, 1	1	The gentle float and sway between scrolls. 0 makes the loop fully render-on-demand
data-tilt	0 to 2	1	Pointer tilt strength. 0 turns the tilt off
data-intro	0, 1	1	The load entrance (a short rise and turn). 0 skips it
data-cue	text	none	The small hint in the corner of the stage. Empty or absent hides it

Set this on each [data-step]:

Attribute	Values	Default	Description
data-yaw	degrees, e.g. -24	0 for the first, then alternating -18 and 16	The angle that screen rests at: 0 faces you, a small negative or positive angle is a three-quarter view. The turn to the next screen starts from here

Add ?still=1 to the URL to switch off the float, the tilt and the entrance together (useful for screenshots). Add data-smooth="off" on <html>, or ?smooth=off in the URL, to turn Lenis off.

The change itself is authored in script.js as three constants next to the timeline (HOLD, BACK_HOLD, DRIFT): how long each screen rests, how long the back is held to the viewer, and how far it drifts while held, so the reflections slide across the camera module.

Accessibility

• Reduced motion: the phone never starts. The page is the list of screens, each in a flat device frame with its label and line, stacked and centred. The stage, the canvas and the rail are not built, and a change of the motion preference while the page is open builds or removes the phone live.
• Without JavaScript, without WebGL, or with a blocked CDN: the same list. One fallback, three failure modes, and it is never hidden until a canvas has actually been created.
• Keyboard: the step rail is a row of native buttons in the tab order with a visible focus ring. Enter or Space moves the scroll position to that screen; the arrow keys, Home and End move along the rail and follow. Page Down and the space bar scroll the section as usual.
• Screen readers: the canvas is aria-hidden; the list underneath stays readable, with each screen's image description, label and line. The rail buttons are named "Screen 3 of 5: The mix" and the current one carries aria-current="step".
• Touch: scrolling stays native. The canvas takes no pointer events.
• Contrast: the caption and cue clear 4.5:1 on the stage colour; measure again if you repaint --stage, --ink or --accent.

Dependencies

Dependency	Version	Required
three.js	0.180.0	Yes, as an ES module (see Quick Start)
GSAP core	3.15.0 (3.12+)	Yes: see below
ScrollTrigger	3.15.0 (3.12+)	Yes: scrubs the timeline
Lenis	1.3.17	Optional: smooth scrolling on the shared GSAP clock

What GSAP does here, exactly. One ScrollTrigger scrubs one GSAP timeline that writes a plain pose object: yaw, pitch, a small swell and which screenshot is showing (a fraction is the dissolve). The load entrance and the caption change are played tweens, gsap.matchMedia() decides whether the phone exists at all, gsap.context().revert() is the teardown, and gsap.ticker is the one clock the render loop shares with Lenis and ScrollTrigger. GSAP does not touch the three.js scene graph.

What three.js and the render loop do. The loop reads pose and adds the pointer tilt and the idle float, which it owns outright, then draws. It never tweens. It runs only while the stage is on screen and only while something changed (a scroll, a pointer move, a resize, or the float itself), and sleeps otherwise.

Everything three.js is used for (WebGLRenderer, MeshPhysicalMaterial, ExtrudeGeometry, LatheGeometry, PMREMGenerator, ShaderMaterial) is long-stable API, so pinning a different version is a one-line change in the import map. If GSAP is not present, ScrollTrigger is missing or three.js does not load, the framed screenshots show.

Browser Support

Anything with WebGL 2, which is every current browser. Support is probed before three.js is asked for a renderer, deliberately: three logs its own failure to the console as errors before it throws, so catching the exception would hide nothing and a visitor with WebGL disabled would get a console full of red on a page that had quietly fallen back. Probed first, that visitor simply gets the framed screenshots and a clean console. In a browser old enough to lack import maps the module never runs and the framed screenshots are what shows.

If the graphics context is lost (a driver reset, a tab juggled on a phone) the effect rebuilds its environment map when the browser restores it and carries on where it was.

Performance

The phone is a few dozen meshes, so a few dozen draw calls, of physically based materials lit by one baked environment map; the cost is the fragment pass at the canvas size, not the geometry. Pixel ratio is capped at 2 (1.5 on touch devices). The loop stops when the stage leaves the screen or the tab is hidden, and with data-idle="0" it draws only when the scroll, the pointer or the window changes. On a phone the idle float alone is drawn at half rate.

To buy back frames on low-end hardware, set data-idle="0" first: it removes the only continuous cost. After that, lower the --phone-h token, which shrinks the area shaded.

Image Credits

The five bundled screens are concept screenshots of Hush, a fictional calm sleep and focus sounds app, designed as HTML for this effect and rendered to images; they show no real product. The photographs inside them are from Pexels under the Pexels licence (photo ids 2635817, 10762369, 15222306, 5851472, 249614, 26953466, 7112541, 6869257 and 8956014). Each master is 853 by 1854 pixels, the proportion of the phone's display, with the top 6.5 percent left as a plain strip because the effect draws the status bar itself. The masters are in assets/img-src/, baked to WebP with bun scripts/build-template-assets.ts phone-screen-scroll --force. To replace one, save your own portrait screenshot (853 by 1854 or larger, status bar removed or the strip kept plain) over the master or point its entry in assets/img-manifest.json at it, run that command, and set data-tone on the step to match.