# Mobile App Landing > A one-page site for a mobile app with a real 3D phone that turns to a new screen as you scroll through four features, plus store buttons, pricing with a monthly and yearly toggle, an FAQ and a QR download block. Built to be adapted in an afternoon: suits consumer apps, SaaS products, fintech, fitness, education and any launch that needs a phone in the hero. Canonical: https://gsapvault.com/templates/mobile-app-landing-template Live demo: https://gsapvault.com/demos/mobile-app-landing-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £20 | | Difficulty | advanced | | Plugins | ScrollTrigger, SplitText | | Techniques | webgl-shader, pinning, scrub, split-text, count-up, accordion, pointer-tilt, procedural-3d, keyboard-navigation, form-animation | | Uses Lenis | Yes | ## Lighthouse, as measured Google Lighthouse on the demo, 29 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 Nook is a complete one-page site for an invented household money app, built so that a buyer can make it their own in an afternoon. A bold colour-blocked identity (one saturated sorbet pink, a deep ink, a warm oat and three bright tones) carries a hero, a pinned feature story, press, a three-step how-it-works, a count-up proof band with reviews, pricing with a monthly and yearly toggle, an FAQ accordion and a closing download block with a QR code. The centrepiece is a real 3D phone, built in code with three.js rather than a mockup image. It has a satin titanium frame, a frosted glass back in deep petrol blue, a polished camera plateau with three lenses, side buttons, a glass front that reflects a small studio, and a status bar drawn around the dynamic island rather than baked into the screenshots. It stands on the hero with a slight turn, follows the pointer a few degrees, then glides down onto the feature story and stays fixed while it turns a full circle to a new screen for each of four features, with the copy, the stage colour and a step rail changing alongside. Every screen is an ordinary image referenced by one src in the markup, so replacing the screenshots needs no code. Without WebGL, with reduced motion, with a blocked CDN or with no script, the same four screens appear as flat pictures in a device frame, stacked with their copy. The palette, faces, radii and spacing sit in one token block at the top of style.css, every section is a commented block in index.html, and every place to edit is marked. The README walks through making it yours in thirty minutes. ## Features - A real 3D phone built in three.js: rounded titanium frame with a bevelled edge, grained frosted glass back, polished camera plateau with three coated lenses, flash and sensor, side buttons, a bottom port and speaker grille, and black glass over the screen - Physically based materials lit by a studio environment baked in code, so the metal, the glass and the lenses catch real reflections as the phone turns - One scrubbed timeline keeps the phone pinned while it turns a full circle and swaps its screenshot mid-turn for each of four features, with copy, floating cards, stage colour and a step rail changing alongside - The phone glides from the hero onto the story stage on scroll, and leaves with it when the story ends - A small pointer tilt and a slow idle float, with switches to turn either off - Screens are plain images: change one src per screen and the flat fallback and the 3D display both update, with a bundled HTML screen kit to redraw them; the phone draws a crisp vector status bar that follows each screen's tone - Hero headline split into masked lines, cards that float, section reveals, a count-up stat band and a how-it-works line that fills as you scroll - Pricing with a monthly and yearly toggle: prices swap with a roll, plans are repeatable cards and the yearly figures live in the markup - Keyboard-operable FAQ accordion, pricing toggle and feature rail with visible focus - A QR block that ships a real, scannable code, and store buttons in plain HTML - Designed fallback for no WebGL, reduced motion, blocked CDN and no script: the same screens as flat pictures in a device frame, stacked with their copy - First-class 390px layout: the phone takes the upper half of the pinned stage and the copy steps in a compact panel below it ## Use Cases - Consumer apps launching on iPhone and Android that need a phone front and centre - SaaS and productivity tools with a mobile companion - Fintech, budgeting and banking apps - Fitness, habit, meditation and wellbeing apps - Education and language-learning apps - Startup waitlists and product pages that want a store-button hero ## Questions about this template ### How do I replace the phone screens with my own screenshots? Each screen is one image tag with a src, one in the hero and one inside every feature step. Change the paths to your own portrait screenshots of any size; the 3D phone crops them to fit without stretching and the flat fallback uses the same file. Leave the top 6.5 percent of each plain, because the phone draws its own status bar there. No code changes are needed. The assets folder also holds an HTML screen kit if you would rather redraw the demo screens. ### Is the phone a 3D model file, and can I change its colour? It is built entirely in code, so there is no model to license or load. Two tokens at the top of style.css set the titanium frame and the frosted back glass, and the studio light takes a pale tint of your brand colour. Changing them recolours the phone; keep the back deep, as a pale frosted back reads as plastic. The body shape, camera bump and buttons are plain functions in script.js, which is where you would alter the model. ### How do I add a fifth feature or remove one? Copy a whole step block in the story section, edit its label, headline, copy, tone and screenshot, and save. The rail, step numbers, scroll distance and phone turns are worked out from the number of steps. Delete a block to remove one. Two to six features suit the pacing; the phone turns once per change, and data-spin sets how far. ### How do I set my own prices and plans? Plans are repeatable cards. Each price holds a monthly and a yearly figure as two spans in the markup, so you type both. A plan with one price, such as Free, needs neither. Copy a card to add a plan or delete one to remove it. The toggle only swaps which span shows, so there is no billing logic, and no payment is taken. ### Do the store buttons and QR code work? The buttons are plain links with placeholder addresses. Replace each href with your App Store and Google Play URLs. The QR code is a real, scannable image of an example address, so replace assets/qr.svg with a code for your own store page or smart link, or change the src. Nothing is tracked or wired to a store until you do. ### What does a visitor without WebGL see? The same page with the screenshots as flat pictures in a device frame, and each feature stacked as its own coloured band with its copy. The same happens with reduced motion, a blocked CDN and no script. The 3D phone is an enhancement over a complete page, so check both by trying the site with WebGL switched off. ### How much work is it to make this my own? About thirty minutes for a first pass: rename the app, repaint the token block, swap the screenshots, then edit the features, pricing and questions. Changing the shape of the phone or adding a new kind of section takes longer. Every place to edit carries an EDIT comment, so searching the folder for that word lists the work. ## Vibe-Code Ready Setup This template 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 ### Structure One static page in plain sections, each a commented block with a data-section hook and an anchor id. A synchronous head script adds a gate class before first paint, and a second one adds a 3D gate only when the browser has WebGL and motion is allowed. The script takes the classes away again if the phone cannot be built, so the page is always readable. ### The phone The phone is assembled in code from rounded extrusions and simple primitives: frame, glass, bump, lenses, buttons and a port. A small studio of emissive panels is baked into an environment map, so the materials reflect real light. The screen is a shader that shows one screenshot, or two with a soft wipe between them. One fixed canvas draws it over the page and the script places it on whichever slot in the markup is current. ### Scroll GSAP writes the phone's played values into one plain pose object: a scrubbed glide from the hero onto the story stage, then one pinned, scrubbed timeline that turns the phone, swells it briefly, swaps the screenshot in the middle of the turn and steps the copy and stage colour. The render loop reads that pose every frame and adds the pointer tilt and idle float itself, so continuous motion and played motion never fight. ### Features are read from the markup Each feature is a step block holding its copy, its screenshot and its floating cards. The script counts the steps, builds the rail from their labels and sets the scroll distance from their number, so adding or removing a step is a copy or a delete. The pricing toggle and the FAQ work the same way: plans and questions are repeatable blocks the script reads. ### Fallbacks With reduced motion, no WebGL, a blocked CDN or no script, the flat screenshots show in a simple device frame and every feature is its own coloured band with its copy. Pricing and the FAQ still work whenever GSAP loads, and the FAQ shows every answer open when it does not. ## Documentation How this template 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 **1. Upload the folder.** `index.html`, `assets/style.css`, `assets/script.js` (or `assets/script.min.js`), `assets/qr.svg` and `assets/screens/*.webp` are the whole site. `assets/screens/screen-kit.*` is optional and only used on your machine. Any static host will do. **2. Check the ``.** Four things must stay, in this order: _Code snippet omitted: it ships with the download._ The two small scripts must stay synchronous and in ``. The first adds the gate class that stops gated elements painting visible for a frame and then flashing to zero. The second adds `html.gl`, which the stylesheet uses to swap the flat screenshots for the pinned 3D story before first paint. Copy the probe from `index.html` exactly. `data-cfasync="false"` stops Cloudflare Rocket Loader deferring them. **3. Keep the scripts before ``, in this order:** _Code snippet omitted: it ships with the download._ three.js loads as an ES module through an import map, in a dynamic import, so a blocked or failed download simply leaves the flat screenshots in place. `assets/script.js` is added by that small module script once three has loaded or failed, so do not add a second `