---
id: "2115787941272555550"
source: https://x.com/malisauskasLT/status/2115787941272555550
author: "Erikas Mališauskas (@malisauskasLT)"
media: "video, 1916x1080, 48.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Ecommerce App Suite Landing Page Scroll

## Summary
A full scroll-through of a light, airy landing page for a suite of store apps: a centred headline with a tiny glossy app icon, a large tabbed product mockup framed by a halftone blue gradient, an upsell popup demo, stats and a logo strip, photo case-study cards, an AI assistant section, a black trial CTA card and a founder note styled as a sheet of paper. A clean example of mixing crisp SaaS UI with tactile textures like halftone and paper grain.

## Style
- Theme: light (white and pale grey with one black CTA block)
- Mood: clean, trustworthy, crisp, friendly, confident
- Tags: saas-landing, ecommerce, product-mockup, halftone, case-studies, stats-row, paper-texture, black-cta
- Category: Landing page, Testimonials

## Palette
| Role | Hex |
|---|---|
| Page white | #FFFFFF |
| Section grey | #F4F5F5 |
| Ink black | #131013 |
| Card white | #FDFDFD |
| Muted grey | #A9A9AF |
| Hairline | #D8D8D9 |
| Photo warm brown | #806359 |
| Halftone blue | #5A7BEA |
| Icon violet | #8B6CF0 |

## Typography
- Hero headline: neutral grotesk, semibold, title case, two lines centred, about 7% of frame height, -0.02em tracking; the first word is coloured violet next to a small glossy app icon. Inter SemiBold.
- Section headings ("How merchants grow with..."): same grotesk, semibold, left-aligned, about 4% of frame height.
- Big stats ("120,000+", "$3.3B+", "24/7"): semibold numerals about 4% of frame height with 9px grey labels underneath. Inter with tabular-nums.
- Body and captions: regular grotesk 13 to 14px, grey #6B6B70.
- Founder note: grotesk on a paper sheet, bold two-line heading, body with a few bold and underlined words.

## Layout
- 16:9 frame showing a 1440px-wide page; content max width about 1100px, centred.
- Sticky top nav: placeholder wordmark left, dropdown links next to it, black pill button right; 56px tall, white.
- Hero: centred stack, headline, two-line subcopy, black pill CTA (36px tall), star rating line, then a 900px product mockup card with a tab bar of five coloured icon tabs; 12px radius, 1px hairline border, soft shadow.
- Stats row: three centred columns with 120px gaps, followed by a greyscale logo strip.
- Case studies: 3-card row (one wide 2:1 card, two narrow), photos in greyscale with white captions bottom-left, 12px radius; metrics and quotes below each card.
- CTA: black card about 800x220px with 20px radius, text left and a dark dashboard mockup right, halftone grain on the right edge.
- Footer: five link columns on grey; founder note sheet with ruled lines and a slight 1 degree tilt.

## Elements
- Glossy app icon: 28px rounded square with a purple-blue gradient beside the headline.
- Halftone gradient: blue dot-screen clouds fading into white behind the hero mockup.
- Product mockup: store page with thumbnails, product photo of a black pouch, bundle options as radio cards with prices and a "Most popular" badge.
- Upsell popup: modal with two product images, offer headline and a black full-width add button.
- Logo strip: seven greyscale placeholder logos, 24px tall.
- AI section: grey card with a chat panel and a settings panel, plus two floating app-icon tiles above.
- Founder note: paper sheet with two avatar photos and name and title captions.

## Motion
- 0 to 48000ms: a continuous smooth scroll from hero to footer, about 120px per second, with brief pauses on each section.
- The upsell popup scales in from 0.96 with a fade over 250ms when its trigger is clicked in the mockup.
- Integration icon tiles float in from above with a 100ms stagger and settle with a gentle spring.
- Stats count up from 0 over about 1200ms when they enter the viewport.
- The paper note lifts in with a 20px rise and slight rotation (2 to 1 degrees) over 500ms.

## Rebuild it
1. React sections inside a `max-w-[1100px] mx-auto` container; sticky nav with `backdrop-blur bg-white/80 h-14`.
2. Hero mockup: `rounded-xl border border-neutral-200 shadow-[0_20px_60px_rgba(0,0,0,0.08)]`; halftone backdrop from an SVG dot pattern masked by a radial gradient tinted `#5A7BEA`.
3. Stats: Motion `useInView` plus `animate(0, target, { duration: 1.2 })` writing into a ref for the count-up.
4. Case study cards: `grid grid-cols-[2fr_1fr_1fr] gap-4`, photos with `grayscale` and a bottom gradient overlay for captions.
5. CTA card: `bg-[#131013] rounded-[20px] p-10 text-white` with a noise PNG overlay at 15% opacity on the right.
6. Paper note: white card with `repeating-linear-gradient` ruled lines, `rotate-1`, and a `whileInView` rise.

## Generation prompt
A bright, clean SaaS landing page for an ecommerce app suite scrolling from top to bottom: centred two-line headline with a small glossy violet app icon, a large product page mockup framed by blue halftone dot clouds, an upsell popup, a stats row, a greyscale logo strip, photo case study cards, an AI assistant chat section, a black rounded free-trial card with grain, and a founder note on a ruled paper sheet; crisp grotesk type, soft shadows, no real brand names.