Signal in
the aisle.

01The concept: kept, then sharpened

The retained idea is "Signal in the aisle": a night-time UK supermarket as a cinematic environment full of noise, and Axivelo as the instrument that finds the one line that pays. Dark retail atmosphere, barcode motifs, oversized editorial type, amber-gold accents, all preserved from v1.

What changed: the barcode animation is no longer the destination, it's the doorway. The hero now performs a complete scan in about two seconds, beam sweep, raw telemetry (EAN, ASIN, BSR, Buy Box) flickering beside the device, a lock-on flash that makes the retail environment pulse gold, and then the real Axivelo result screen resolves inside the phone while genuine numbers (ROI 36.7%, net profit £2.94, MAX PAY £8.42, an Amazon-on-listing risk flag) pop out as floating chips. As each chip lands, a thin gold outline briefly illuminates the matching value on the real screen, highlighting, never redrawing. A ⟲ replay control lets visitors run the scan again.

A dedicated transition band, "The barcode is the doorway.", now sits between the noise interlude and the decision scene: the Higgsfield barcode-macro still, full bleed, with a vertical gold beam that travels across it as you scroll.

02The real app screens used

Every app image on the page is a real, unedited Axivelo screenshot supplied in the project's asset folders, no invented UI. Selection and placement:

• Scanner screen (camera view, green frame corners), the hero phone's opening state.
• Profit & ROI result (ROI 36.7%, net £2.94, MAX PAY £8.42, VAT line, stress test, fee breakdown), the hero reveal, cropped from the raw 1440×3120 screenshot.
• Verdict card (La Roche-Posay, Buy Box £18.75, "Amazon is actively selling" warning, Deal Confidence 42/100 (Avoid)), Scene 1, "The decision", presented as a tall panel with a live caption. Chosen deliberately because it shows the app telling you not to buy: credibility over hype.
• Price History (Buy Box/Amazon/BSR, 90-day view), Scene 2 as a wide close-up crop, with its real warnings ("16.5% below 90-day avg", "Amazon is selling this item", "out of stock 36% of last 90 days") extracted as callout chips.
• Price-Drop Stress Test (profitable at £12.82, loss-making at −20%, "Fails below £12.08"), Scene 3 as a large centred crop; its punchline is quoted as display type.
• Business Dashboard, Scan History + Export P&L CSV, Watchlist alerts, Scene 4's three-phone layered composition with scroll parallax (these screenshots came pre-framed in device bezels on pure black, which blends seamlessly into the site's void background).
• Profit Defaults settings (target ROI 30%, min profit £3, shipping to FC, VAT status), embedded in the UK section as proof of VAT-aware, UK-first thinking.
• Sales Velocity + ROI calculator (5000/mo, £13.94 90-day avg, VAT scheme chips, gold "Scan next item" button), the closing CTA phone.

Presentation system: one full CSS-framed hero phone with an animated screen transition, one tall verdict panel, two full-bleed close-up crops, a three-phone parallax stage, one environment-embedded settings panel, one closing phone over a generated backdrop, no repeated screens, no screenshot grids.

03Pinterest research

Research was done live on Pinterest (browser automation on the provided account) across two rounds:

• Round 1 (v1): "dark premium fintech website design" (ember glow on black, spotlight devices), "futuristic scanner HUD interface dark" (corner brackets, telemetry), "big typography dark editorial website design" (oversized display type, outlined words), "supermarket aisle cinematic night photography" (the exact mood brief for the hero image).
• Round 2 (v2): "premium phone launch website dark cinematic" and dark app-landing references, these confirmed the winning pattern used throughout: a hero device surrounded by floating extracted UI chips, and angled multi-phone compositions for feature storytelling.

No Pinterest image was copied. The boards set composition, lighting, pacing and framing; all final visuals are either real app screens, Higgsfield generations, or code.

04Higgsfield MCP

Higgsfield (via MCP, model marketing_studio_image) produced the cinematic environment layer:

• Hero aisle, dark UK supermarket at night, one product caught in an amber scan beam. The site's establishing shot.
• Barcode macro, scan beam cutting across barcode stripes, now the full-bleed backdrop of the "doorway" transition band with a scroll-driven travelling beam.
• Shelf glow, a close shelf with one softly glowing product, used as the embedded background of "The decision" scene.
• Phone in the data void, a device orbited by golden data rings above fog, the closing CTA backdrop behind the real calculator phone.

An honest note on video: the plan was image-to-video (slow dolly down the aisle) using the hero still as a start frame. Every video model on the connected account was attempted across three sessions, Kling 3.0 Turbo, Grok Video 1.5, and Seedance 2.0 (even in its cheapest 480p fast mode), and every attempt returned job_minimum_basic_plan_required: video generation is gated behind a paid Higgsfield plan. The motion layer is therefore hand-built over the Higgsfield stills: a breathing light-shimmer along the beam line, ~46 canvas-drawn gold dust motes that twinkle brighter near the beam, a slow Ken-Burns drift, and the scroll-driven beam in the doorway band, restrained, loopable, and zero-download. If the plan is upgraded, the same start frame can become a true video loop with no layout changes.

05Motion & scroll design

• Hero scan sequence, a GSAP timeline: beam sweep (×2, fast), lock-on flash, scanner→result crossfade, then four data chips spring out (back.out) and settle into a slow float. Total payoff ≈ 2s after load; replayable.
• Scenes, alternating copy/screen layouts revealed by IntersectionObserver-style ScrollTriggers; list items stagger in.
• Panels, every real screen gets a one-time light sweep on reveal, a cursor-tracked gold spotlight, and a gentle 3D tilt on hover.
• Depth, the three command-centre phones and the CTA phone parallax at different rates (data-depth); the giant outlined £ drifts behind the UK section.
• Atmosphere, film grain, scan-ticker of real telemetry, compact "noise" canvas of drifting price tags, gold scroll-progress hairline.

Technology: GSAP 3 + ScrollTrigger from CDN, vanilla JS, no framework, no build step. The v1 pinned scrollytelling section was deliberately removed, the real screens communicate faster than the reconstructed UI did.

06Lighting & readability (the v2 grade)

• Hero image brightened (brightness 1.12) while a radial darkening pocket sits behind the headline, cinematic darkness, clear focal points.
• Headline moved to pure white with soft shadow; body copy lightened; nav gets a top gradient scrim plus blur-on-scroll.
• Focused light: phone glow, panel gold blooms, chip borders coloured by meaning (green profit, gold price, red risk).

07Performance, mobile, accessibility

• All app screens exported as WebP (q86–90 for UI legibility), total ~600 KB for eleven assets; environment stills 25–75 KB each. The two hero phone screens are preloaded; everything below the fold is loading="lazy".
• Mobile is a deliberate layout: single column, phone directly under the headline (the app appears on the first swipe), chips pulled to screen edges, phones stacked vertically in the command centre, CTA always one tap away in the nav.
• prefers-reduced-motion: the scan sequence is skipped and the result state renders immediately; grain, drift and parallax are disabled.
• Alt text on every real screen describes the actual data shown.

08Structure & deployment

site/
├── index.html       , hero reveal + 6 scenes + CTA
├── guide/index.html , this page
├── css/main.css     , design system + scenes
├── css/guide.css    , this page
├── js/main.js       , scan sequence, canvases, ScrollTriggers
├── assets/          , Higgsfield stills, favicon
│   └── app/         , real Axivelo screens (WebP)
└── netlify.toml     , publish config + cache headers

# local preview
npx serve site

# deploy (Netlify CLI)
cd site
netlify deploy --prod --dir . --site b234ca6c-0e34-4240-a4fa-52a54e294107

Hosted on Netlify as a static deploy at axivelo-showcase.netlify.app, with immutable caching on /assets.

09Iteration log (v2)

• Pass 1 (product clarity): hero message completed ("Every shelf is hiding a signal"), real result revealed within ~2s, re-cropped the hero screen to fill the device, CTA wired to the real Google Play listing, Amazon-UK positioning in kicker + sub + dedicated scene.
• Pass 2 (creative elevation): chip float physics, panel light sweeps, 3D tilt, three-phone parallax stage, scene-specific backgrounds (shelf glow, blue market wash, gold stress bloom), brighter cinematic grade.
• Pass 3 (ruthless polish): removed the v1 fake-UI sections entirely (reconstructed phone, HTML signal cards, invented dashboards), removed an unused asset, fixed caption contrast, verified desktop/mobile flows, console clean, all resources 200.

V7: the production-polish pass. Readability floor raised site-wide (12px minimum on labels, tracked-caps capped at 0.18em, body contrast tokens lifted); the decision headline is now "Buy or walk. Know why.", describing decision intelligence rather than an automated call; the command centre gained a scroll-driven focus sequence (History, then the dominant Dashboard, then Watchlist light up in turn, no hover required, phones stacked large on mobile); the final CTA keeps one primary button with the official Google Play badge beneath the factual reassurance; pricing CTAs read Start free / Choose Annual Pro / Choose Monthly Pro against the in-app paywall as source of truth. The Impeccable detector suite was installed and run: 124 findings triaged to zero. Genuine fixes included the nav padding transition, a heading-level skip on the legal hub, tiny-text and extreme letter-spacing, an em-dash prose pass, unambiguous ✕ marks in the comparison table, and a real horizontal-overflow bug (the hero glow bled up to 100px past the viewport, now clipped). Six deliberate brand devices, such as the gold gradient display type and barcode eyebrow tags, are recorded as reasoned ignores in .impeccable/config.json. A follow-up restraint pass masked the drifting price-tag canvas away from the outlined headline (the source of a perceived ghosting overlap), simplified the interlude to 'One scan cuts through the noise', gave the doorway title a dark backdrop pocket, removed the hero micro-proof line and the CTA fine-print (the footer keeps the estimates disclaimer), reordered the CTA to button → Play badge → one reassurance, rewrote the decision bullets to four scannable points, enlarged the dashboard phone and UK settings panel further, and re-verified. Final verification ran on the deployed draft across seven viewports (1440 down to 360px): zero JS errors, zero overflow, settled text after mid-scroll reloads, and every internal link and anchor resolving.

V6: brand mark, navigation IA & the wow pass ×3: the mark was switched to the supplied app-icon artwork, the metallic AV on its dark tile (nav + CTA, rounded with a gold ring; the same tile is the favicon) after the transparent-looking monogram turned out to carry a white background. Navigation was rationalised to six items: The decision · Market · Pricing · Blog · Calculator · Get Axivelo (Command centre and UK remain on-page; Legal & support lives in the footer). The official Google Play badge now sits beside the CTA button, both linking to the live listing. Three focused improvement passes followed: (1) first impression, an animated gold shine across "signal.", a breathing volumetric light-ray over the aisle, and a gold hairline under the scrolled nav; (2) journey, drifting EAN digits in the doorway band, a breathing glow on the Annual pricing card, hover-zoom on every real screen panel, command-centre phones that straighten toward the cursor, a fade-mask on the giant £, and a custom gold scrollbar; (3) verification, Playwright sweeps of every beat on a draft deploy, zero JS errors, then production.

V5: site pages & living CTA: seven placeholder pages were added in the landing's design language (shared page.css layer: barcode section tags, Clash Display titles, dashed-gold "in preparation" stubs with shimmering ghost-skeleton lines): /blog (three ghost article cards), /calculator (web-calculator shell pointing at the app), /legal (hub with policy cards + support@axivelo.app and security@axivelo.app contact cards), /privacy, /terms, /subscription-terms and /account-deletion (each a doc shell with effective-date placeholders; all noindexed until real content lands). The closing CTA background was brought to life in code: a 24-second Ken-Burns breathe on the Higgsfield phone-void still, scroll parallax moved to the container so the two transforms never fight, and ~26 canvas-drawn gold embers rising around the phone, visibility-gated, reduced-motion-safe.

V4: real logo & pricing: the hand-drawn SVG monogram was replaced everywhere (nav, CTA, favicon) with the genuine Axivelo app icon, cropped from the supplied brand lockup. A full pricing section was added between the UK scene and the CTA, designed as a scan result: three plans in GBP, Free £0 (10 scans/day), Annual Pro £6.67/mo billed £79.99 yearly (BEST VALUE · SAVE 33%, centre, elevated), Monthly Pro £9.99/mo, with rolling price counters, a light-beam sweep and a green "VERDICT: BEST VALUE" ribbon locking onto the Annual card, deliberately identical Pro feature lists (annual is only a cheaper way to bill), an expandable FREE/PRO comparison ledger (alerts honestly marked "coming soon"), and a factual footnote that prices come from the app's Google Play paywall. All figures match the in-app paywall screenshot: £9.99 monthly, £79.99 annual, 10 free daily scans.

V3 production-polish round: supporting-copy readability raised across the page (larger, lighter-on-dark body text, nav, bullets, captions, footer); vertical pacing tightened ~12% without losing cinematic air; the hero phone enlarged and separated from the background with a darker pocket and stronger glow; gold outline highlights now sweep the real ROI / profit / MAX PAY values as their chips land; the Keepa chart gained a travelling scan-cursor that syncs its three warning callouts; the stress test gained a descending row highlight ending on the "fails below £12.08" line; a factual reassurance line was added at the CTA (10 free scans a day, upgrade to Pro for unlimited, taken from the app's real plan screen); focus-visible keyboard states added; the Open Graph image was rebuilt as an 80 KB JPEG. Footer links to the product's terms pages were prepared but withheld because axivelo.app was unreachable for verification at publish time, only verified destinations ship.