TMCandClaude Opus 5.5
0fbefd2ca6
Labels: each layer's pin now sits on its outer rounded corner, the layer's rightmost point, so a tag straight across from it is joined by a short line that crosses nothing; the stack moves left by just enough for the tags to fit, and the open stack is a little smaller so it keeps clear of the chapter's heading. While the stack is open, scrolling walks through the layers from the glass to the wallpaper: the one looked at stays bright and its tag lights up cyan, the others dim (where the tags are shown). Chapter 8 is three screens long for it. Centring: the labels' list sat in the stage's grid flow, so the grid split its height into two rows and the story phone was centred in the top one (about 100 px high on a 1146 px window). It is out of the flow now; measured equal gaps above and below at 2000 x 1146, 1440 x 900 and 1280 x 720. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Flexera Launcher website
A one-page landing site for Flexera Launcher. Plain HTML, CSS and JavaScript: no build step, no libraries, and nothing is loaded from anyone else's server.
| File | What it is |
|---|---|
index.html |
The page and all its copy |
styles.css |
Layout, colours and the phone's look |
script.js |
The phone model, the scroll story, the playground, the scroll effects |
assets/ |
App icon (WebP and PNG favicons), QR code, link-preview image (og.jpg) |
fonts/ |
Unbounded, Space Grotesk, JetBrains Mono and Outfit, Latin subset, each with its licence |
Look at it
Open index.html in a browser. To see it as a server would serve it:
cd WEBSITE
python -m http.server 8080
and open http://localhost:8080.
After a release
- Change
VERSIONat the top ofscript.js. The page fills every version number from it.index.htmlcarries the same number as a fallback for browsers without JavaScript; replace0.13.0there too. - The download buttons and the QR code point at
.../releases/download/latest/FlexeraLauncher.apk, the fixed-name copy that every release uploads, so they never need changing. - If the hero changes, retake
assets/og.jpg(1200 x 630, the top of the page).
The phone
The phone is drawn in HTML at 390 x 844 and scaled to fit, four times over: a looping teaser in
the hero, one driven by the scroll position through the eight "How it works" chapters
(storyState() in script.js), one in the playground that answers to touch and mouse, and the
list phone of the race (the playground's controller, locked to the app list). All of them render
the same state object, described in blank(). The 40 app names and icons on it are generic
stand-ins, not real apps.
Other moving parts, all in script.js:
- Wave headline (
setupWaveTitle): the hero's letters swell from weight 560 to 900 around the mouse; without a mouse a wave rolls through on its own. - Page alphabet (
setupPageWave): one letter per section on the right edge. Hover to see the wave, drag to jump between sections, tap to scroll there. On phones it shows while scrolling. - Detail-card switches (
setupLook): left-handed alphabet, comfy rows and icon shape, applied to every phone on the page. - Every layer, pulled apart (
setupAnatomy): the story's eighth chapter. The story phone is swapped for a double built from separate layers (it looks the same closed), which then comes apart in 3D with a labelled tag per layer and goes back together. - Race (
setupRace): find an app in a shuffled grid of 40, then in the list with the alphabet. - Magnetic buttons and the finger cursor (
setupPointerFx), desktop only. - Easter eggs: scrub to F in the playground, or type "flexera" anywhere.
Everything that moves on its own stops for visitors who ask their system for reduced motion.
Fonts
All four are under the SIL Open Font License 1.1 (fonts/*-OFL.txt), downloaded from Google Fonts
and served from this folder.