SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsapple-design-web

apple-design-web

Frontend & websites

View repository

Updated 10-16 02:31

About this skill

Apple Design — Web (apple.com language · scrollytelling · engineering)

Recreating apple.com: the page formula, the signature scroll effects, and how it's actually built.

When to use

  • Building a premium marketing/product landing page.
  • Implementing scroll-driven animation (frame-scrub, pinning, parallax, reveals).
  • Deciding the front-end architecture for an Apple-grade page.

Core rules

  • Light-first (do this before anything else). apple.com is predominantly light (#f5f5f7/white); a dark hero is the exception, used for ≤1 purposeful moment — never the default. Show the real product in a real device frame (a real screenshot), never an abstract placeholder. Restraint > gratuitous effects — see apple-design's references/restraint-and-antislop.md.
  • Commit to motion on flagship pages (motion IS the substance here). On a flagship/marketing/product surface, a page with only static one-shot fades is a dead template, not Apple-grade. Commit to the interaction inventory — continuous damped scroll-progress transforms (the #1 differentiator), sticky-pinned choreographed scenes, cross-section theme morph (light↔dark), and ambient float so it breathes when scrolling stops. This does NOT weaken light-first/real-product/restraint — both must hold: alive AND tasteful. The motion budget scales by surface (utility surfaces get far less); see the inventory at the top of references/scrollytelling-techniques.md and the surface axis in apple-design's references/restraint-and-antislop.md.
  • The formula: slim sticky translucent nav (~44–48px, blur, chapter-adaptive color) → big centered product hero (name + one tagline + "Learn more ›"/"Buy ›") → alternating full-bleed feature sections, one idea each → bento feature grid → tech specs → fat multi-column footer.
  • Scrollytelling decision tree (current apple.com is VIDEO-first): cinematic hero clip → video currentTime scrub (what apple.com ships — preload=none + lazy scroll-triggered src + static start/end-frame JPEG fallback + reduced-motion→static frame; mobile-Safari scrub flaky → ImageBitmap hybrid); interactive 3D product the user rotates → WebGL-3D scroll viewer (three.js + GLTF, KTX/Basis textures — Apple's own product-viewer pattern); many crisp frames / frame-exact at low count → canvas image-sequence (the classic pre-2022 alternative — preload, draw on rAF, sliding-window createImageBitmap decode + .close()); continuous element motion → damped scroll-progress (lerp a shadow-scroll value; engine in apple-design-motion); light↔dark chapters → cross-section theme morph (IO discrete-snap default, rAF-lerp or animation-timeline variants); chaptered card deck → sticky-stack (CSS position:sticky staggered top + ascending z-index, JS recede enhancement); simple reveal/parallax → CSS animation-timeline: view()/scroll() with @supports + IntersectionObserver fallback. The reusable damped-scroll + pointer-reactive engine lives in apple-design-motion; this skill composes it into page-level scenes. Media sourcing, encoding, frame-decode + delivery → references/media-assets-and-delivery.md.
  • Engineering: apple.com is progressive-enhanced HTML/CSS/vanilla JS (observed: Browserify ac-* bundles), not a heavy SPA. Responsive <picture>/srcset, loading="lazy", content-hashed immutable assets, deferred JS.
  • Never scroll-jack, never ship huge unoptimized frame sets, always guard motion with prefers-reduced-motion.

References

File Use for
references/web-applecom-language.md Page anatomy + measured specs; nav/hero/feature/footer HTML+CSS recipes
references/scrollytelling-techniques.md The apple.com/iphone interaction inventory (ranked alive behaviors, must-consider core vs flourishes) + working code: canvas scrubber, sticky scene, IO reveals, CSS scroll-driven animation, cross-section theme/background morph, sticky-stacked chaptered cards
references/web-frontend-engineering.md Observed apple.com architecture, image/font/perf strategy, PE patterns
references/media-assets-and-delivery.md How current apple.com delivers hero media (video-first reverse-spec, WebGL-3D viewer, content-hash URLs) · updated technique decision tree · licensed code patterns (provenance + LICENSE) · asset-sourcing IP may/may-not + ship-only-our-own guardrail · encoding/caching/frame-decode (createImageBitmap, sliding window, video keyint=5)

Common mistakes

  • Cluttered hero / multiple competing CTAs; weak whitespace; busy backgrounds behind product.
  • Shipping a heavy framework for a static marketing page; render-blocking JS; unoptimized images.
  • Janky non-rAF scroll handlers; no reduced-motion fallback; content hidden behind animation.
  • Under-animating a flagship page — only static one-shot IO fades = a dead template. On a marketing/product surface, commit to continuous damped scroll-progress + theme morph + ambient float (the inventory). Equally: over-animating a utility surface — match the motion budget to the surface axis.

Related: the damped-scroll + pointer-reactive engine → apple-design-motion · type/color/grid → apple-design-foundations · the nav glass → apple-design-materials · CDN/image delivery → apple-design-backend · copy & persuasion → apple-design-tactics.