# Word Game App Landing > A one-page site for a mobile game or consumer app with a real 3D phone that turns to a new screen as you scroll through four features, and a row of letter tiles that solves itself as the phone glides away. Store buttons, pricing with a monthly and yearly toggle, an FAQ and a scannable QR download block. Built to be adapted in an afternoon: suits word and puzzle games, trivia and quiz apps, education and language apps, habit and streak trackers, and any launch that needs a phone in the hero. Canonical: https://gsapvault.com/templates/word-game-app-landing-template Live demo: https://gsapvault.com/demos/word-game-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, 3d-transforms, 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 Inkling is a complete one-page site for an invented daily word puzzle, written in the voice of a newspaper games page and built so that a buyer can make it their own in an afternoon. Two colours carry it: a cobalt blue and a sunflower yellow, the same pair the game uses for its tiles. A blue-black ink, a warm paper and a high-contrast display serif give it the grown-up, editorial feel of a printed puzzle page, with hard-edged shadows in place of soft ones. The centrepiece is a real 3D phone, built in code with three.js rather than a mockup image. It has a titanium frame, a frosted glass back in deep ink blue with a polished camera plateau, side buttons, a glass front that reflects a small studio, and a status bar drawn around a dynamic island rather than baked into the screens. It stands on a cobalt slab in the hero while a row of letter tiles beside the headline turns over, one by one, as you scroll and spells the day's word. The phone 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 screens needs no code. The five bundled screens were generated with an AI image model and ship with the style sheet and the master files, plus an HTML screen kit for redrawing them exactly. Without WebGL, with reduced motion, with a blocked CDN or with no script, the same screens appear as flat pictures in a device frame, stacked with their copy, and every tile shows its letter. 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 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, frosted glass back with a polished camera plateau, a vector status bar round the dynamic island, side buttons, a bottom port and speaker grille, and black glass over the screen - A hero row of letter tiles that turns over in order as you scroll, so the day's word solves itself while the phone leaves; scroll back and it un-solves - One scrubbed timeline keeps the phone pinned while it turns a full circle and swaps its screen mid-turn for each of four features, with copy, specimen 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 reusable CSS letter tile (letter, colour state, flip) that also draws the how-to-play rules, the specimen cards and a tile-lettered footer wordmark - Five bundled AI-generated app screens with their masters, a screen style sheet for generating matching ones, and an HTML screen kit to redraw them - Cobalt and sunflower palette with measured contrast, a display serif and a highly legible UI sans, all in one token block - 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, every tile face up - 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 - Word, puzzle, trivia and quiz games launching on iPhone and Android - Language-learning and education apps built around a daily habit - Habit, streak and wellbeing trackers - Consumer apps and SaaS products with a mobile companion - Subscription apps that need a free tier and a paid tier side by side - Startup waitlists and product pages that want a store-button hero ## Questions about this template ### The bundled app screens are AI-generated. Can I use them, and how do I replace them? They are original artwork made with an image model for this demo, so ship them if they suit you. Each screen is one image tag with one src; point it at your own screenshot of any portrait size. The download includes the masters, the exact style sheet and prompts, and an HTML screen kit to redraw any screen precisely. ### My app is not a word game. What do I do with the letter tiles? Keep them, retitle them, or delete them. A tile row is a few inline elements whose letters you type into the markup, so spell your own name or a slogan, or remove the hero row and the rules cards. The scroll-driven solve only attaches to a row that asks for it, so nothing else breaks. ### How do I change the game colours and the tile states? Two brand colours, blue and yellow, sit at the top of style.css beside ink, paper and a neutral for the third state. Change them and the tiles, the buttons, the stage tones and the phone's studio light follow. The comment above them lists the measured contrast pairs, so you can see which limits to respect. ### How do I set my own free and paid plans? Plans are repeatable cards, each with a monthly and a yearly figure written as two spans; type both. The bundled example is a free tier with ads, a paid tier that removes them and unlocks an archive, and a family tier. 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, and the QR code is a real, scannable image of an example address. Replace each href with your App Store and Google Play URLs and swap assets/qr.svg for a code pointing at your store page or smart link. Nothing is tracked or wired until you do. ### 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 screens, then edit the four features, the plans and the 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 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, camera module, 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 image, 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 screen 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. ### Letter tiles A tile is one inline element: its letter is an attribute and its colour is a state. A tile marked to flip has a blank front and a coloured back, and turns over with a single rotation. The hero row is tied to the first screen of scrolling, so it solves as the phone leaves and un-solves in reverse. Any other row turns over once, in order, as it scrolls into view. Without motion every tile simply shows its face. ### Features are read from the markup Each feature is a step block holding its copy, its screen and its specimen 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 screens 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/img/*.webp` are the whole site. `assets/screens/`, `assets/img-src/` and `assets/img-manifest.json` are 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 screens 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 screens in place. `assets/script.js` is added by that small module script once three has loaded or failed, so do not add a second `