diff --git a/README.md b/README.md index 1ac3cdf..be4c7ab 100644 --- a/README.md +++ b/README.md @@ -70,5 +70,8 @@ Export **in-app content only** from the simulator or device — no simulator chr The CSS frame dimensions assume tall iPhone screenshots and are controlled in `src/components/phone-mockup.tsx`. Use `captureMode="simulator"` only for old captures that already include device chrome. Homepage product images are -composited separately at 810 × 1656 with transparent backgrounds and rendered -through `src/components/product-device.tsx`. +composited at the bezel source size of 1350 × 2760 with transparent +backgrounds and rendered responsively through +`src/components/product-device.tsx`. The homepage uses CSS view timelines for +scroll-scrubbed device and chapter motion, with a static fallback and a +reduced-motion override. diff --git a/next.config.js b/next.config.js index 121c4f4..92a0f54 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,10 @@ import "./src/env.js"; /** @type {import("next").NextConfig} */ -const config = {}; +const config = { + images: { + qualities: [75, 92], + }, +}; export default config; diff --git a/public/screenshots/pitch/ask-black-dark.webp b/public/screenshots/pitch/ask-black-dark.webp index f0dafb4..1f61531 100644 Binary files a/public/screenshots/pitch/ask-black-dark.webp and b/public/screenshots/pitch/ask-black-dark.webp differ diff --git a/public/screenshots/pitch/ask-black.webp b/public/screenshots/pitch/ask-black.webp index e2f68b6..a8bcf9f 100644 Binary files a/public/screenshots/pitch/ask-black.webp and b/public/screenshots/pitch/ask-black.webp differ diff --git a/public/screenshots/pitch/home-black-dark.webp b/public/screenshots/pitch/home-black-dark.webp index f9dd6dd..8824334 100644 Binary files a/public/screenshots/pitch/home-black-dark.webp and b/public/screenshots/pitch/home-black-dark.webp differ diff --git a/public/screenshots/pitch/home-black.webp b/public/screenshots/pitch/home-black.webp index fffbceb..d48adc3 100644 Binary files a/public/screenshots/pitch/home-black.webp and b/public/screenshots/pitch/home-black.webp differ diff --git a/public/screenshots/pitch/know-me-natural-dark.webp b/public/screenshots/pitch/know-me-natural-dark.webp index 7e3f802..f5d2d9b 100644 Binary files a/public/screenshots/pitch/know-me-natural-dark.webp and b/public/screenshots/pitch/know-me-natural-dark.webp differ diff --git a/public/screenshots/pitch/know-me-natural.webp b/public/screenshots/pitch/know-me-natural.webp index 0bd1420..8288733 100644 Binary files a/public/screenshots/pitch/know-me-natural.webp and b/public/screenshots/pitch/know-me-natural.webp differ diff --git a/public/screenshots/pitch/medication-detail-natural-dark.webp b/public/screenshots/pitch/medication-detail-natural-dark.webp index dbd266e..3f6ac4a 100644 Binary files a/public/screenshots/pitch/medication-detail-natural-dark.webp and b/public/screenshots/pitch/medication-detail-natural-dark.webp differ diff --git a/public/screenshots/pitch/medication-detail-natural.webp b/public/screenshots/pitch/medication-detail-natural.webp index 7ef4d99..b454db6 100644 Binary files a/public/screenshots/pitch/medication-detail-natural.webp and b/public/screenshots/pitch/medication-detail-natural.webp differ diff --git a/public/screenshots/pitch/medications-black-dark.webp b/public/screenshots/pitch/medications-black-dark.webp index ec898f4..8c73257 100644 Binary files a/public/screenshots/pitch/medications-black-dark.webp and b/public/screenshots/pitch/medications-black-dark.webp differ diff --git a/public/screenshots/pitch/medications-black.webp b/public/screenshots/pitch/medications-black.webp index 5ef5c4c..814cb7c 100644 Binary files a/public/screenshots/pitch/medications-black.webp and b/public/screenshots/pitch/medications-black.webp differ diff --git a/public/screenshots/pitch/summary-natural-dark.webp b/public/screenshots/pitch/summary-natural-dark.webp index c6ad1ea..d555c0c 100644 Binary files a/public/screenshots/pitch/summary-natural-dark.webp and b/public/screenshots/pitch/summary-natural-dark.webp differ diff --git a/public/screenshots/pitch/summary-natural.webp b/public/screenshots/pitch/summary-natural.webp index 4383744..f3b7701 100644 Binary files a/public/screenshots/pitch/summary-natural.webp and b/public/screenshots/pitch/summary-natural.webp differ diff --git a/public/screenshots/pitch/transcript-black-dark.webp b/public/screenshots/pitch/transcript-black-dark.webp index 4e02ff5..964a6f0 100644 Binary files a/public/screenshots/pitch/transcript-black-dark.webp and b/public/screenshots/pitch/transcript-black-dark.webp differ diff --git a/public/screenshots/pitch/transcript-black.webp b/public/screenshots/pitch/transcript-black.webp index 75e32b6..ec65978 100644 Binary files a/public/screenshots/pitch/transcript-black.webp and b/public/screenshots/pitch/transcript-black.webp differ diff --git a/public/screenshots/pitch/visits-natural-dark.webp b/public/screenshots/pitch/visits-natural-dark.webp index 226b6b3..dfd32bc 100644 Binary files a/public/screenshots/pitch/visits-natural-dark.webp and b/public/screenshots/pitch/visits-natural-dark.webp differ diff --git a/public/screenshots/pitch/visits-natural.webp b/public/screenshots/pitch/visits-natural.webp index 967b699..d5b90de 100644 Binary files a/public/screenshots/pitch/visits-natural.webp and b/public/screenshots/pitch/visits-natural.webp differ diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index e4a024c..048d29a 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -131,6 +131,7 @@ export default function HomePage() { src="/screenshots/pitch/summary-natural.webp" darkSrc="/screenshots/pitch/summary-natural-dark.webp" alt="Medscribe visit summary in a natural titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-left" sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px" priority /> @@ -140,6 +141,7 @@ export default function HomePage() { src="/screenshots/pitch/home-black.webp" darkSrc="/screenshots/pitch/home-black-dark.webp" alt="Medscribe home screen in a black titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-right" sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px" priority /> @@ -151,7 +153,7 @@ export default function HomePage() {
-
+

The missing picture

@@ -190,10 +192,10 @@ export default function HomePage() {
    - {visitMoments.map((moment) => ( + {visitMoments.map((moment, index) => (
  1. @@ -217,6 +219,7 @@ export default function HomePage() { src={moment.image} darkSrc={moment.darkImage} alt={moment.alt} + className={`pitch-device-motion ${index % 2 === 0 ? "pitch-device-drift-right" : "pitch-device-drift-left"}`} sizes="(min-width: 1024px) 336px, (min-width: 640px) 320px, 72vw" />
    @@ -229,7 +232,7 @@ export default function HomePage() {
    -
    +

    Between visits

    @@ -249,6 +252,7 @@ export default function HomePage() { src="/screenshots/pitch/medication-detail-natural.webp" darkSrc="/screenshots/pitch/medication-detail-natural-dark.webp" alt="Medscribe medication detail in a natural titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-left" sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px" />
    @@ -257,6 +261,7 @@ export default function HomePage() { src="/screenshots/pitch/medications-black.webp" darkSrc="/screenshots/pitch/medications-black-dark.webp" alt="Medscribe medication list in a black titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-right" sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px" />
    @@ -297,7 +302,7 @@ export default function HomePage() {
    -
    +

    Ask from the record

    @@ -319,6 +324,7 @@ export default function HomePage() { src="/screenshots/pitch/ask-black.webp" darkSrc="/screenshots/pitch/ask-black-dark.webp" alt="Medscribe Ask response grounded in local health context, shown in a black titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-right" sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw" />
    @@ -334,10 +340,11 @@ export default function HomePage() { src="/screenshots/pitch/know-me-natural.webp" darkSrc="/screenshots/pitch/know-me-natural-dark.webp" alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel" + className="pitch-device-motion pitch-device-drift-left" sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw" />
    -
    +

    At the handoff

    @@ -425,7 +432,7 @@ export default function HomePage() {
    -
    +

    A precise privacy boundary

    @@ -486,7 +493,7 @@ export default function HomePage() {
    -
    +

    The right beta participant

    diff --git a/src/components/product-device.tsx b/src/components/product-device.tsx index 5a995d3..36f0ac7 100644 --- a/src/components/product-device.tsx +++ b/src/components/product-device.tsx @@ -26,12 +26,13 @@ export function ProductDevice({ }: ProductDeviceProps) { const shared = { alt, - width: 810, - height: 1656, + width: 1350, + height: 2760, sizes, priority, + quality: 92, className: cn( - "h-auto w-full drop-shadow-[0_35px_35px_rgba(15,23,42,0.22)] dark:drop-shadow-[0_38px_42px_rgba(0,0,0,0.5)]", + "h-auto w-full translate-z-0 drop-shadow-[0_35px_35px_rgba(15,23,42,0.22)] dark:drop-shadow-[0_38px_42px_rgba(0,0,0,0.5)]", className, ), }; diff --git a/src/styles/globals.css b/src/styles/globals.css index b80f820..2befd97 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -99,6 +99,97 @@ contain-intrinsic-size: auto 1000px; } +/* + * Scroll-scrubbed product motion. This stays CSS-only so the long homepage + * remains a server component and ships no scroll listener or animation + * runtime. Browsers without view timelines simply render the resting layout. + */ +.pitch-device-motion { + --pitch-enter-x: 0px; + --pitch-enter-rotate: 0deg; + --pitch-exit-x: 0px; + --pitch-exit-rotate: 0deg; + backface-visibility: hidden; + transform-origin: center; +} + +.pitch-device-drift-left { + --pitch-enter-x: -2.25rem; + --pitch-enter-rotate: -2deg; + --pitch-exit-x: 1.5rem; + --pitch-exit-rotate: 1.25deg; +} + +.pitch-device-drift-right { + --pitch-enter-x: 2.25rem; + --pitch-enter-rotate: 2deg; + --pitch-exit-x: -1.5rem; + --pitch-exit-rotate: -1.25deg; +} + +@keyframes pitch-device-scroll { + 0% { + opacity: 0.42; + transform: translate3d(var(--pitch-enter-x), 7rem, 0) scale(0.92) + rotate(var(--pitch-enter-rotate)); + } + 38% { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1) rotate(0deg); + } + 72% { + opacity: 1; + transform: translate3d(0, -1.5rem, 0) scale(1.018) rotate(0deg); + } + 100% { + opacity: 0.78; + transform: translate3d(var(--pitch-exit-x), -5rem, 0) scale(0.97) + rotate(var(--pitch-exit-rotate)); + } +} + +@keyframes pitch-copy-scroll { + from { + opacity: 0.2; + transform: translate3d(0, 3.5rem, 0) scale(0.985); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); + } +} + +@keyframes pitch-card-scroll { + from { + opacity: 0.58; + transform: translate3d(0, 4rem, 0) scale(0.97); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); + } +} + +@supports (animation-timeline: view()) { + .pitch-device-motion { + animation: pitch-device-scroll linear both; + animation-timeline: view(block); + animation-range: entry 0% exit 100%; + } + + .pitch-copy-motion { + animation: pitch-copy-scroll linear both; + animation-timeline: view(block); + animation-range: entry 5% cover 38%; + } + + .pitch-card-motion { + animation: pitch-card-scroll linear both; + animation-timeline: view(block); + animation-range: entry 0% cover 32%; + } +} + @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; @@ -116,6 +207,14 @@ .card-hover:hover { transform: none; } + + .pitch-device-motion, + .pitch-copy-motion, + .pitch-card-motion { + animation: none !important; + opacity: 1 !important; + transform: none !important; + } } /*