# Laptop Screen Scroll

> A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through.

Canonical: https://gsapvault.com/effects/laptop-screen-scroll
Live demo: https://gsapvault.com/demos/laptop-screen-scroll/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | webgl-shader, scroll-scrub, 3d-transforms, product-showcase |
| Uses Lenis | Yes |

## Lighthouse, as measured

Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A real 3D laptop opens around its physical hinge, then the camera travels into its screen and the visitor continues through the website inside. Choose between two complete looks: a midnight laptop with the Elsewhere travel site, or warm graphite hardware with the FORME studio site. Both use detailed geometry, textured keys and studio-lit aluminium materials.

The screen stays live HTML, projected by the same camera as the model. It reaches native viewport size for a sharp, working website, followed by matching website sections. Reverse scrolling pulls back into the device.

## Features

- Two complete looks with coordinated laptop finishes and live website designs
- Real 3D laptop geometry with physical hinge motion
- Lenis smoothing with a shared GSAP clock and native touch scrolling
- Midnight aluminium with authored normal maps and detailed keys
- Live HTML display aligned to the same 3D camera
- Native-size full-screen content and working in-page links
- Natural scroll continuation into the website
- Render-on-change WebGL with capped device pixel ratio
- Static fallback for reduced motion and unavailable WebGL
- Complete GSAP and GPU teardown with revert()

## Use Cases

- Agency portfolios presenting a finished website
- SaaS launches introducing an interface
- Developer case studies with a product reveal
- Landing pages promoting digital experiences

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

GSAP ScrollTrigger scrubs the laptop rotation, lid angle and camera position. Three.js renders the laptop only when its state changes, while CSS3DRenderer projects the live HTML screen with the same camera. Once the screen fills the viewport, the sticky stage scrolls away into ordinary website sections.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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

| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-enabled` | `true`, `false` | `true` | Use `false` for the static fallback. |
| `data-distance` | `60`–`250` | `150` | Scroll runway in viewport-height units; coarse pointers use 80%. |

### 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](https://sketchfab.com/3d-models/macbook-neo-f3dd26684f114b1baffd1b0800876627), licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/). 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](https://www.pexels.com/photo/10762369/) under the [Pexels licence](https://www.pexels.com/license/). 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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Laptop Screen Scroll](https://gsapvault.com/effects/laptop-screen-scroll)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt