Laptop Screen Scroll

Quick Start

Copy assets/ and the <main> markup from index.html, including the device root and the continuation sections. Also copy the three <template data-look-template> elements after </main>; they contain the second website look.

In the head, include the stylesheet and the synchronous WebGL capability probe from index.html:

Code snippet omitted: it ships with the download.

Before </body>, load GSAP and the module bridge. The effect script remains a classic script; the bridge supplies the current three.js modules:

Code snippet omitted: it ships with the download.

If your application already imports three.js, use its existing module instance and provide the CSS3D renderer classes above. Do not load a second copy. Serve the demo over HTTP; the model files cannot be fetched reliably from a file:// page.

Using It With Your Own Design

Keep [data-laptop-scroll] around the sticky [data-laptop-stage]. The source .laptop-media contains the live .screen-site and .site-frame content. The CSS device around it is a static fallback for reduced motion, missing dependencies or unavailable WebGL.

The live screen is moved into the CSS3D scene once at initialization and returned to its original parent on teardown. It is never swapped or duplicated while scrolling. The same perspective camera projects the model and the HTML. The screen uses a high-resolution CSS plane and a viewport-sized inner frame, so the final page retains native-sized text instead of enlarging a tiny screenshot.

Edit the .site-frame HTML, .site-* CSS, and continuation sections to create your own website. The example links point to #journeys, #approach and #plan; update their destinations with your content. Put the first continuation section immediately after the root in ordinary document flow, without an extra spacer. Its [data-site-continuation] attribute is a useful integration hook.

You can replace the live HTML with an image or a video inside .laptop-media. Use descriptive alt text for an image; use controls playsinline and captions for a video with speech. Keep important image content near the centre because the final camera view crops a landscape display on portrait screens. Live HTML is the default because it adapts to that final viewport and remains interactive.

The neutral stage colour, cue, fictional travel identity and photograph are replaceable. Preserve the sticky stage, the source media hook and the .webgl-screen CSS. Avoid scrolling-overflow ancestors around the stage; this effect uses native document scrolling. The fallback deck deliberately uses transform-style: flat to keep its decorative layers intact.

Options

Accessibility

• Native wheel, touch, arrow-key and Page Down/Up scrolling all control the same sequence.
• The stage has a visible keyboard focus outline. Screen links become available after the lid opens.
• Reduced motion uses the open static fallback and ordinary continuation content without creating a GPU context. Preference changes while mounted dispose or rebuild the scene.
• No JavaScript, unavailable WebGL or missing modules leave the fallback and website sections available.
• Hardware is decorative. The live screen and continuation use ordinary semantic HTML and real in-page links.
• The travel content is fictional. There are no booking submissions or external contact destinations.

Model and Image Credits

The laptop is adapted from MacBook Neo by Ranguel, licensed under Creative Commons Attribution 4.0 International. Changes include web optimization, hinge/camera integration, an unbranded midnight material treatment and replacing the display with live HTML. This is an unofficial visualization and does not imply endorsement by the creator or Apple.

The model remains under CC BY 4.0 within this package. Retain its attribution, source and licence link, identify further modifications, and do not apply the Vault code licence’s restrictions to this third-party model. These terms apply to the model asset; the surrounding effect code keeps its own licence.

The Elsewhere travel site is an original fictional design. Its misty forest photograph is Pexels photo 10762369 under the Pexels licence. The bundled 3200 × 2000 derivative is cropped and colour graded; the source is in assets/img-manifest.json.

Choosing Your Images

The forest provides a quiet, detailed setting behind white text. Keep strong text contrast in replacement imagery. A screen-filling photograph should be at least 2000 pixels wide; use a larger source for tall-screen cover crops. The live HTML handles typography separately, so a larger image does not make text sharper.

A generated studio reflection environment and the authored aluminium normal map give the midnight casing a satin finish. The model omits brand logos.

Smooth scrolling

Lenis smooths wheel input on the same GSAP ticker that updates ScrollTrigger. Touch scrolling stays native. Add the Lenis script from index.html before the module bridge. Use ?smooth=off or <html data-smooth="off"> for native scrolling; the URL setting takes precedence. Reduced motion disables the owned Lenis instance. An existing window.lenis is borrowed without adding a second clock or destroying it. Teardown releases the owned ticker and refresh listener.

Browser Support and Performance

The two looks share one model and texture set; switching looks downloads no second model. Geometry is shipped as a lossless gzip file (694 KB instead of 2.13 MB), decoded with the browser's DecompressionStream; older browsers use the original binary. Keep both laptop.bin.gz and laptop.bin when copying the assets. To regenerate the compressed copy after changing the geometry, run gzip -9 -c laptop.bin > laptop.bin.gz in assets/model-neo/.

The head probe preloads the geometry and textures only when WebGL and motion are enabled. Initialization loads them concurrently, rather than waiting for each texture in turn. Preserve those preload URLs if you move the assets.

The animated device requires WebGL 2 and modern ES modules/import maps. The static CSS fallback covers browsers without those features. Three.js is loaded as an ES module, not the deprecated UMD build.

The model has roughly 55,000 triangles. Rendering happens only when the scroll state or stage size changes and while the stage is visible; there is no idle animation loop. Pixel ratio is capped at 2 for fine pointers and 1.5 for coarse pointers. Lower that cap first if you need a cheaper render. A ResizeObserver follows the stage dimensions, including iframe resizing. GPU context loss restores the source media; context restoration resumes the model.

Dependencies

• GSAP 3.12+ and ScrollTrigger. Demo pin: GSAP 3.15.0. GSAP owns the media lifecycle and scroll-scrubbed lid/camera progress.
• Three.js 0.180.0, CSS3DRenderer and CSS3DObject. Three.js renders the physical device; CSS3DRenderer projects its live screen.
• Lenis 1.3.17 for optional smooth scrolling; no framework dependency.
• Mona Sans is loaded from Google Fonts for the optional cue, with a system-font fallback.

Two looks

The tabs switch the whole experience without reloading: Midnight / Elsewhere pairs blue-black aluminum with the forest travel site; Graphite / Studio pairs warm silver-gray aluminum with the Forme design studio. Both include their own hero and continuation content. The live screen node and scroll timeline are shared, so switching or reversing does not restart the animation.

The buttons use tab semantics, roving focus, Arrow keys, Home and End. The selected website labels the screen tabpanel. Tabs fade before entering the full website, with focus safely moved to the stage if needed; reverse scroll brings them back. Reduced motion keeps both tabs functional on the static device. Without JavaScript, the original Midnight look is visible and inactive controls are hidden.

Edit the existing .screen-site, #journeys and #approach markup for Midnight. Edit the three data-look-template blocks for Graphite. Both use the same section anchor IDs and retain the visible model attribution. Hardware colors are in graphiteColors in script.js; authored material roughness and normal maps are preserved.