Reproduce the visual and narrative grammar of Apple product pages: one product per page, one idea per section, giant typography, and media as the protagonist. The tone is confident and minimalist; the scroll tells the story.
Art direction
- Backgrounds alternating between pure white and almost pure black per section; no decorative gradients.
- Neo-grotesque sans typography (SF Pro or similar: Inter, Söhne): huge headlines (clamp up to ~96px), slightly negative tracking, weights 600–700; gray body (
#86868bon light,#a1a1a6on dark). - Short headlines with a "pun" or bold statement ("Fast runs in the family.", "Pick your quick."), followed by a dense and specific paragraph. Never lorem ipsum.
- Single accent color (link/CTA blue); everything else neutral. The product is the only source of rich color.
- Lots of negative space: generous vertical padding (120–200px desktop), centered content with a reading max-width (~700px for text).
- Product images on a clean background, large, often bleeding past the viewport.
- Footnotes footer with numbered disclaimers (¹ ² ³) referenced in the claims.
Page structure
Canonical order, adaptable to the product:
- Local nav — thin sticky bar with the product name on the left, anchors/tabs and a "Buy" CTA on the right; gains a translucent background with blur on scroll.
- Hero — product name, short tagline, sub-line ("Now with…"), CTA, and a giant product image/video right below.
- Highlights — "Get the highlights.": horizontal carousel of large cards with media + sentence, arrow controls and pagination.
- Closer look — interactive gallery (colors, sizes, angles) with thumbnails/chips that swap the main media.
- Feature sections — one per theme (performance, battery, display, camera…), each with an eyebrow, large headline, paragraph and dominant media; alternate light/dark.
- Comparisons — animated horizontal bars ("Up to 8x faster…¹") with a named baseline; giant stats (huge number + small label).
- Tabs/explorer — categories (apps, uses) swapping a media panel + text.
- Purchase/upsell section — benefit cards (trade-in, financing, education).
- Footnotes — all claims numbered and detailed.
Motion system
If the project calls for a combined cinematic aesthetic, also apply the skill cinematographic-websites; in conflict, the Apple style wins: discreet, short, and physical motion.
- Entrance reveals: fade + small translateY (16–24px), 0.6–0.8s, ease-out; triggered by IntersectionObserver or ScrollTrigger when GSAP already exists.
- Stat numbers animate a count-up when they enter the viewport; comparison bars grow from the left.
- No bounce/elastic; nothing spins or blinks. The motion serves the product, it doesn't show off.
- Respect
prefers-reduced-motion: content visible without animation, videos replaced by a poster.
Video with scroll scrub
Signature pattern of Apple pages (product rotating/opening as you scroll):
- Pinned section (sticky or ScrollTrigger pin) with the video/canvas fullscreen; the scroll distance defines the progress.
- Accepted implementations: frame sequence in
<canvas>(more reliable) orvideo.currentTimemapped to progress (requires video with dense keyframes). - Preload the frames before activating; show the first static frame as a fallback.
- Overlaid text enters and exits in progress windows, synchronized with the right moment of the media.
- On mobile and reduced motion: swap for a short autoplay video or a static image.
Ambient videos
autoplay muted loop playsinline+poster; pause outside the viewport (IntersectionObserver).- Offer a discreet pause button (accessibility) in the corner of the video, as Apple does.
- Never play audio automatically.
Carousels
- Native horizontal scroll with
scroll-snap-type: x mandatoryand cards withscroll-snap-align; prev/next arrows that doscrollBysmooth. - Large cards (~70–85vw mobile, 380–480px desktop), generous border-radius (~28px), media covering the card with text overlaid or below.
- Pagination indicators (dots) synchronized with the visible item.
- Accessible: focusable cards, arrows with
aria-label, keyboard navigation; announce position ("2 of 6"). - Don't use heavy carousel libraries if native snap solves it.
Recurring components
- Giant stat: number at 80–120px + small label below ("Up to 24 hours battery life⁵").
- Comparison bar: variant label, animated proportional bar, multiplier on the right ("6.4x"), marked baseline.
- Selection chips (colors/sizes): round buttons or pills that swap the media with a crossfade.
- Category tabs: horizontal list of pills; panel swaps with a fast fade (0.3s).
- Highlight card: media + one strong sentence; no excess text.
- Promotional ribbon: thin strip above the hero for offers, dismissible.
Performance and quality
- LCP is the hero: prioritized image/video, no lazy; everything else lazy.
- Frame sequences: compressed WebP/AVIF, resolution adapted to the device; never dozens of MB on mobile.
- Fonts with subset and
font-display: swap; avoid layout shift in headlines. - Semantics: one
h1(product name), sections with hierarchical headings, footnotes linked witharia-describedbyor anchor links. - Test on real mobile: touch carousels, pin disabled or simplified, text legible without zoom.
Anti-patterns
- Cluttering with gradients, glassmorphism, glow, and badges — Apple is restraint.
- Long or generic headlines ("Welcome to the future of technology").
- Automatic carousel that spins on its own without user control.
- Video scrub without fallback (broken page with JS disabled or on a slow connection).
- Numerical claims without a corresponding footnote.
- Mixing more than one accent color.
Completion criteria
- Hero with giant typography, product as the protagonist, and a clear CTA.
- At least one signature pattern implemented (scroll scrub, highlights carousel, or animated comparison) as requested.
- Sections alternating light/dark with one idea each.
- Carousels navigable by touch, arrows, and keyboard.
- Reduced motion and mobile verified.
- Footnotes present for every quantitative claim.
- Result visually inspected on desktop and mobile.