Prompt — MILK / 01

# MILK / 01 Product Launch Website — Implementation Plan

> **Goal:** Build a visually exceptional single-product website that sells one carton of whole milk with the theatrical polish of a flagship technology launch.
>
> **Product:** `MILK / 01` — pasteurized whole milk, 1 L.
>
> **Scope:** Front-end showcase only. No cart, quantity selector, authentication, inventory, payment processing, or backend.
>
> **Primary impression:** “This is an absurdly beautiful website for ordinary milk.”

## 1. Execution rules

1. Inspect the repository before changing anything.
2. Preserve the existing framework and conventions when the repository already contains an application.
3. For a greenfield repository, use:

* Next.js App Router
* TypeScript
* CSS Modules and global CSS variables
* `motion` for animation
* `next/image` for photography
* Playwright for browser tests
* `@axe-core/playwright` for accessibility checks
4. Do not use stock photography. Generate the final photographic assets with Codex’s image-generation capabilities.
5. Do not leave placeholder images, placeholder copy, lorem ipsum, unfinished interactions, or temporary gradients.
6. Do not add a 3D/WebGL dependency. The visual ambition should come from excellent photography, SVG, typography, compositing, and restrained motion—not unnecessary rendering complexity.
7. Build the milk carton as a deterministic inline SVG so branding remains crisp and consistent.
8. Use generated photography for liquid, texture, and usage scenes.
9. Implement the complete responsive and reduced-motion experience.
10. Run linting, production build, accessibility tests, responsive tests, and manual visual review before declaring completion.

Save this plan in:

```text
docs/superpowers/plans/2026-06-25-milk-01-launch-site.md
```

---

# 2. Creative direction

## Core concept

Treat milk as though it were a newly unveiled, category-defining object.

The visual language should combine:

* Apple-style product restraint
* High-fashion editorial photography
* Industrial product documentation
* Slightly self-aware copy
* Warm, tactile dairy imagery
* Precision without fake scientific claims

The joke should remain understated. Do not make the page look like a parody or comedy site. The design must be credible first; the humor comes from applying excessive product-launch seriousness to milk.

## Brand

```text
MILK / 01
```

Product designation:

```text
WHOLE
PASTEURIZED
1 L
```

Primary line:

```text
Milk.
Reintroduced.
```

## Design personality

* Minimal
* Monolithic
* Cold and precise at first
* Warmer and more tactile as the visitor scrolls
* Large typography
* Considerable negative space
* Very few conventional “cards”
* Deliberate motion rather than constant movement
* Photography that looks physically real

## Avoid

* Rustic farms
* Barns
* Cows in fields
* Generic breakfast-table stock photography
* Blue sky and green pasture clichés
* Neon purple gradients
* Glassmorphism dashboards
* Excessive rounded cards
* Fake testimonials
* Fake sustainability claims
* Fake awards
* Fake laboratory language
* Baked-in text inside generated images
* Scroll hijacking
* Autoplay audio
* Gratuitous loading screens
* Custom mouse cursors that impair usability

---

# 3. Visual system

## Color tokens

Define these in `src/app/globals.css`:

```css
:root {
--ink: #050505;
--ink-soft: #151515;
--milk: #fffdf7;
--paper: #f3f0e8;
--cream: #e8e0d2;
--fog: #cfcdc6;
--chrome: #aeb3bc;
--signal: #245cff;
--line-dark: rgba(255, 255, 255, 0.16);
--line-light: rgba(5, 5, 5, 0.14);
}
```

Use cobalt blue only as a controlled product accent:

* Cap detail
* Fine rule on the carton
* Focus states
* Small status labels
* Active packaging callout

Do not turn the interface blue.

## Typography

Use:

* **Manrope** for interface, labels, numerals, and display sans-serif
* **Instrument Serif** for selected editorial words and quotations

Load both through `next/font`.

Typography specifications:

```text
Hero display:
clamp(4.5rem, 11vw, 11.5rem)
line-height: 0.82
letter-spacing: -0.065em

Major section headings:
clamp(3.4rem, 7vw, 7.5rem)
line-height: 0.9
letter-spacing: -0.055em

Body:
clamp(1rem, 1.25vw, 1.25rem)
line-height: 1.55
max-width: 54ch

Technical labels:
0.68rem–0.78rem
uppercase
letter-spacing: 0.16em
```

Use tabular numerals for nutrition values, temperatures, and product specifications.

## Layout

* Maximum content width: `1600px`
* Desktop outer gutter: `clamp(24px, 4vw, 72px)`
* Mobile gutter: `20px`
* Twelve-column desktop grid
* Eight-column tablet grid
* Four-column mobile grid
* Section vertical padding: `clamp(88px, 12vw, 190px)`
* Use full-bleed photography sparingly
* Maintain strong alignment across sections

## Surface treatment

* Near-black hero and closing section
* Warm paper-white central sections
* Fine hairline rules
* Very subtle monochromatic grain overlay
* No visible texture over body copy
* Use shadows only around the product carton and photography
* Avoid generic drop-shadow cards

---

# 4. Product copy and content

Create `src/data/product.ts` and keep all product copy in one typed object.

Use this content:

```ts
export const product = {
brand: "MILK / 01",
name: "Whole Milk",
volume: "1 L",
price: "$5.00",
descriptor: "Pasteurized whole milk",
heroEyebrow: "WHOLE MILK · PASTEURIZED · 1 L",
heroTitleLineOne: "Milk.",
heroTitleLineTwo: "Reintroduced.",
heroBody:
"Cold, creamy, and naturally equipped with protein and calcium. The familiar carton, treated like a breakthrough.",
facts: [
{
value: "8 g",
label: "Protein",
detail: "Illustrative amount per 240 mL serving",
},
{
value: "1",
label: "Ingredient",
detail: "Whole milk",
},
{
value: "4°C",
label: "Keep chilled",
detail: "Refrigerate at or below 4°C / 40°F",
},
{
value: "4",
label: "Operating modes",
detail: "Pour, steam, blend, and bake",
},
],
modes: [
{
id: "pour",
index: "01",
title: "Pour",
body: "Cold. Direct. No setup required.",
},
{
id: "steam",
index: "02",
title: "Steam",
body: "Built for microfoam, coffee, and morning rituals.",
},
{
id: "blend",
index: "03",
title: "Blend",
body: "Adds body, protein, and a smooth base.",
},
{
id: "bake",
index: "04",
title: "Bake",
body: "Water, fat, and milk solids—useful chemistry.",
},
],
packaging: [
{
id: "board",
index: "01",
title: "Opaque paperboard",
body: "Helps shield the milk from light.",
},
{
id: "cap",
index: "02",
title: "Resealable cap",
body: "Open, pour, and close with one clean turn.",
},
{
id: "volume",
index: "03",
title: "One-liter format",
body: "Enough to be useful. Small enough to finish fresh.",
},
],
} as const;
```

Add the following exact section copy.

## Product introduction

Heading:

```text
The original
white paper.
```

Body:

```text
No algorithm. No subscription. Pasteurized whole milk in a resealable one-liter carton. It pours, steams, blends, and bakes. That is the pitch.
```

Supporting label:

```text
ONE INGREDIENT / MANY APPLICATIONS
```

## Specification section

Heading:

```text
Specs you
can taste.
```

Body:

```text
Milk does not need invented features. It already brings protein, calcium, richness, and structure to the table.
```

Footnote:

```text
Nutrition figures shown are illustrative for a whole-milk concept. Replace them with values from the verified commercial product label before a real launch.
```

## Texture section

Heading:

```text
Texture is
the technology.
```

Body:

```text
Milk brings body to coffee, tenderness to baking, and a clean, cold finish on its own.
```

## Packaging section

Heading:

```text
A carton
with a job.
```

Body:

```text
Opaque, resealable, and sized for the refrigerator door. The package exists to protect the product—not distract from it.
```

## Final section

Heading:

```text
The next big thing
was already in the fridge.
```

Purchase line:

```text
MILK / 01 · WHOLE · 1 L · $5.00
```

Button:

```text
Buy one carton
```

Demo disclosure:

```text
Concept storefront. Checkout is intentionally not connected.
```

---

# 5. Page architecture

Create the following section order:

1. Fixed navigation
2. Cinematic hero
3. Liquid color-transition bridge
4. Product introduction
5. Product specifications
6. Full-bleed texture sequence
7. Four operating modes
8. Interactive packaging anatomy
9. Closing purchase section
10. Minimal footer
11. Accessible demo-purchase notification

The entire page should feel like one continuous story rather than unrelated blocks.

---

# 6. File structure

Use this structure unless the existing project has an established equivalent:

```text
src/
app/
globals.css
layout.tsx
page.tsx
components/
navigation/
Navigation.tsx
Navigation.module.css
product/
MilkCarton.tsx
MilkCarton.module.css
DemoPurchaseButton.tsx
DemoPurchaseButton.module.css
sections/
HeroSection.tsx
HeroSection.module.css
IntroductionSection.tsx
IntroductionSection.module.css
SpecificationsSection.tsx
SpecificationsSection.module.css
TextureSection.tsx
TextureSection.module.css
ModesSection.tsx
ModesSection.module.css
PackagingSection.tsx
PackagingSection.module.css
PurchaseSection.tsx
PurchaseSection.module.css
Footer.tsx
Footer.module.css
effects/
LiquidTransition.tsx
LiquidTransition.module.css
GrainOverlay.tsx
HeroPointerField.tsx
ui/
SectionLabel.tsx
MagneticButton.tsx
VisuallyHidden.tsx
data/
product.ts
hooks/
useHeroProgress.ts
usePointerParallax.ts
useSectionTheme.ts
lib/
motion.ts
public/
images/
generated/
hero-milk-halo.webp
texture-pour.webp
mode-steam.webp
mode-blend.webp
mode-bake.webp
closing-glass.webp
og-milk-01.webp
prompts.md
tests/
e2e/
home.spec.ts
accessibility.spec.ts
responsive.spec.ts
playwright.config.ts
```

Do not create abstractions that are used once unless they isolate a meaningful interaction or accessibility concern.

---

# 7. Generated imagery

Generate the image assets before completing the final layout.

Store the exact prompts used in:

```text
public/images/generated/prompts.md
```

Use the strongest generated hero asset as a style reference for the remaining images.

## Shared visual direction

Every prompt should inherit this art direction:

```text
High-end editorial product photography in a black-chrome studio environment. Restrained palette of black, warm white, brushed silver, and a minute cobalt accent. Physically realistic dairy liquid, crisp highlights, controlled directional lighting, tactile detail, subtle film grain, generous negative space, no text, no logos, no visible brand packaging, no people, no malformed objects, no surreal colors, no generic stock-photo appearance.
```

## Asset 1: Hero milk halo

Filename:

```text
hero-milk-halo.webp
```

Target composition:

* 16:10 landscape
* Deep black background
* Circular milk crown or fluid halo
* Empty central area for the SVG carton
* Symmetrical enough to feel designed
* Slightly irregular enough to feel physical
* Bright edge highlights
* No additional glass or container

Prompt addition:

```text
A high-speed photographic milk crown forming an elegant circular halo around a completely empty center, suspended against near-black space. The ring should frame a vertical product placed later in compositing. The lower edge should dissolve into a soft reflective floor. Refined, sculptural, physically believable, not chaotic.
```

## Asset 2: Texture pour

Filename:

```text
texture-pour.webp
```

Target composition:

* 4:5 portrait
* Thick milk stream folding into a glossy white surface
* Hard specular details
* Dark negative space on the left for copy when cropped

Prompt addition:

```text
Extreme macro view of a smooth white milk stream folding into a glossy pool, photographed like a luxury material study. Dark negative space along the left third, precise ripples, creamy viscosity, no glass and no packaging.
```

## Asset 3: Steam

Filename:

```text
mode-steam.webp
```

Prompt addition:

```text
Macro editorial photograph of milk being steamed in a minimal brushed-steel pitcher. Fine vapor, glossy microfoam, warm directional morning light entering an otherwise dark studio, no hands, no coffee-shop background.
```

## Asset 4: Blend

Filename:

```text
mode-blend.webp
```

Prompt addition:

```text
Top-down macro photograph of pale milk forming a smooth controlled vortex inside a clear minimal blender vessel. Sculptural liquid motion, restrained white and chrome palette, clean geometry, no fruit, no visible controls or branding.
```

## Asset 5: Bake

Filename:

```text
mode-bake.webp
```

Prompt addition:

```text
Editorial macro photograph of milk flowing into pale batter, forming elegant ribbons and folds. Warm cream surface, subtle stainless-steel edge, sophisticated studio lighting, no utensils, hands, text, or rustic kitchen imagery.
```

## Asset 6: Closing glass

Filename:

```text
closing-glass.webp
```

Prompt addition:

```text
A single low cylindrical glass of cold milk on a reflective black-chrome plinth, condensation rendered with precise realism, cinematic spotlight, dark environment, restrained composition, large empty background for typography.
```

## Image rejection criteria

Regenerate any asset that contains:

* Gibberish text
* Extra vessels
* Broken fluid physics
* Repeated or mirrored artifacts
* Gray or dirty-looking milk
* Plastic-looking liquid
* Impossible shadows
* Random blue liquid
* Visible human anatomy
* Farm imagery
* Excessively busy splashes
* A composition that conflicts with the intended text placement

## Optimization

* Convert final images to WebP
* Keep the hero source below approximately 550 KB
* Keep each below-fold image below approximately 350 KB
* Use `next/image`
* Supply correct `sizes`
* Mark only the hero background as priority
* Lazy-load all other photography
* Do not scale small images beyond their native resolution

---

# 8. The milk carton SVG

Create `MilkCarton.tsx` as an inline, perspective-styled SVG.

Do not use a generated carton image because branding must remain sharp and repeatable.

## Required anatomy

Build the carton from these layers:

1. Soft elliptical floor shadow
2. Side face in slightly darker warm white
3. Front face in near-white
4. Gable-top left plane
5. Gable-top right plane
6. Thin folded seam
7. Short cylindrical cap
8. Cobalt cap top
9. Front label typography
10. One vertical cobalt registration line
11. Small technical product marks
12. Optional controlled highlight gradient

## Front label

Use real SVG text:

```text
MILK / 01
WHOLE
PASTEURIZED
1 L
```

Additional microcopy:

```text
KEEP COLD
LOT 0001
```

Avoid excessive label content.

## Props

```ts
type MilkCartonProps = {
variant?: "hero" | "diagram" | "mini";
activePart?: "board" | "cap" | "volume" | null;
decorative?: boolean;
className?: string;
};
```

## Behavior

* `hero`: high-detail carton with animated highlight and floor shadow
* `diagram`: exposes three packaging hotspots
* `mini`: simplified closing-section rendering
* When `activePart` changes, highlight only the relevant SVG group
* Inactive parts should reduce slightly in opacity but remain visible
* Use CSS classes rather than mutating SVG attributes imperatively
* Provide an SVG `<title>` when meaningful
* Set `aria-hidden="true"` when used decoratively

## Hero motion

Animate the entire carton, not its individual faces:

* Initial rotation: `-5deg`
* Initial scale: `0.94`
* Resting rotation: `0deg`
* Scroll rotation: up to `4deg`
* Pointer parallax: maximum 6px
* Floating movement: maximum 8px
* Shadow changes slightly with vertical movement

The carton must never feel like it is wobbling or hanging from a string.

---

# 9. Navigation

## Desktop

Fixed navigation with:

* Left: `M / 01`
* Center: `Product`, `Specs`, `Uses`, `Carton`
* Right: `Buy milk`

Behavior:

* White text over the hero
* Dark text over light sections
* Use `IntersectionObserver` through `useSectionTheme`
* Apply a restrained translucent background only after leaving the hero
* Height: approximately 76px
* Maintain visible keyboard focus
* Anchor links scroll to the correct section
* Do not obscure headings when navigating

## Mobile

* Brand on the left
* Compact `Buy milk` button on the right
* Omit the center links rather than adding a hamburger menu for four anchors
* Height: approximately 64px

Use `scroll-margin-top` on section anchors.

---

# 10. Hero section

Create a hero with a minimum height of `100svh`.

## Layering

From back to front:

1. Near-black background
2. Subtle radial light
3. Generated milk halo
4. Fine technical labels
5. Giant first title line
6. SVG milk carton
7. Giant second title line
8. Body copy and CTAs
9. Scroll cue
10. Liquid transition at the bottom

## Composition

Desktop:

* `Milk.` appears high and left, behind the carton
* The carton is centered slightly right of the viewport midpoint
* `Reintroduced.` crosses the lower portion of the viewport
* Part of the second line may overlap the carton using foreground layering
* Body copy occupies the lower-left grid
* Static price and product designation sit lower-right

Mobile:

* Stack `Milk.` and `Reintroduced.`
* Keep the carton central
* Position body copy beneath the title
* Remove the complicated foreground text overlap
* Preserve strong scale without clipping letters

## Hero entrance sequence

After first paint:

1. Navigation fades in
2. Technical eyebrow reveals through a vertical mask
3. `Milk.` reveals
4. Halo fades and scales from `1.06` to `1`
5. Carton rises approximately 36px and sharpens
6. `Reintroduced.` reveals
7. Body and buttons appear
8. Scroll indicator appears last

Total animation duration should be roughly 1.2–1.5 seconds.

Do not block the page behind a splash screen.

## Pointer effect

On fine-pointer devices only:

* Track pointer within the hero
* Set normalized CSS variables
* Move the halo by no more than 12px
* Move the carton by no more than 6px
* Move the foreground title by no more than 2px
* Interpolate smoothly
* Stop updating when the hero is outside the viewport
* Disable completely for touch devices and reduced-motion users

## Scroll behavior

Use a sticky interior container and normal document scrolling.

During the hero’s scroll range:

* Carton scales from `0.94` to `1.05`
* Carton rotates from `-5deg` to `4deg`
* Title opacity reduces gradually
* Halo rotates no more than 10 degrees
* Body copy moves upward slightly
* The liquid transition rises from the bottom

Do not pin the hero for longer than approximately `160vh`.

---

# 11. Liquid transition

Create a signature transition from black hero to warm-white content.

Use a large warm-white shape with a curved meniscus, not a generic rectangular wipe.

Implementation:

* Build the shape with an inline SVG or oversized rounded element
* Width should exceed the viewport to prevent exposed corners
* Map hero scroll progress to vertical translation
* Add a faint upper highlight line
* Do not animate individual wave points continuously
* Avoid cartoon-like sine waves
* The transition should resemble a liquid surface rising through the frame

Reduced-motion behavior:

* Display a static curved boundary
* No scroll-linked translation

---

# 12. Product introduction

Background: `--paper`.

Use a large two-column editorial composition.

Left:

```text
THE ORIGINAL WHITE PAPER
```

Right:

```text
No algorithm. No subscription. Pasteurized whole milk in a resealable one-liter carton. It pours, steams, blends, and bakes. That is the pitch.
```

Include:

* A small one-ingredient annotation
* An oversized serif italic treatment for the word `original`
* A fine horizontal rule
* Ample empty space
* A small carton side-profile or technical registration mark

Animation:

* Reveal heading line by line
* Draw the horizontal rule from left to right
* Fade body copy upward by no more than 20px
* No rotating or bouncing elements

---

# 13. Product specifications

Build a sticky two-column section.

## Left column

Sticky content:

```text
SPECS / 01
Specs you can taste.
```

Supporting body copy and the nutrition disclaimer.

## Right column

Create four full-width specification rows using the product data.

Each row contains:

* Large value
* Label
* Detail
* Thin dividing line
* Small index

Rows:

```text
8 g / Protein
1 / Ingredient
4°C / Keep chilled
4 / Operating modes
```

Interaction:

* As each row crosses approximately 55% of the viewport, promote it to active
* Active value becomes high contrast
* Previous and next rows remain readable at reduced opacity
* Do not animate values with spinning odometers
* A restrained masked number reveal is sufficient

Mobile:

* Remove sticky behavior
* Render rows naturally
* Maintain large values
* Ensure the disclaimer remains legible

---

# 14. Texture section

This is the first major photographic interruption.

## Entry transition

Begin with the image cropped into a wide horizontal slit:

```css
clip-path: inset(36% 12% 36% 12% round 999px);
```

As the section enters:

* Expand the clip toward the full image
* Reduce corner radius
* Move from warm-white page background into the dark photography
* Keep the animation tied to section progress
* Do not exceed a small amount of image parallax

## Composition

* Generated `texture-pour.webp` occupies most of the viewport
* Heading overlays the dark negative space:

```text
Texture is
the technology.
```

* Body copy sits beneath at a readable width
* Add the small label:

```text
MATERIAL STUDY / WHOLE MILK
```

* Maintain strong text contrast with a controlled overlay gradient where needed

Mobile:

* Use a 4:5 crop
* Do not place text over visually busy liquid
* Disable the complex clip progression when reduced motion is enabled

---

# 15. Operating modes

Background returns to `--paper`.

Heading:

```text
One carton.
Four modes.
```

Create a two-by-two editorial grid on desktop.

Each mode contains:

* Image
* Index
* Title
* One-sentence body
* Small arrow or state indicator

Grid layout:

* Pour: reuse a deliberate crop from `texture-pour.webp`
* Steam: `mode-steam.webp`
* Blend: `mode-blend.webp`
* Bake: `mode-bake.webp`

Cards should not resemble dashboard widgets.

Use:

* Large imagery
* Minimal framing
* Asymmetrical image heights
* Fine lines rather than heavy card backgrounds
* One card offset vertically to break the grid

Hover behavior:

* Image scales no more than `1.025`
* Crop shifts slightly
* Index changes to cobalt
* Body copy remains stationary
* Respect reduced motion

Mobile:

* Use horizontal scroll snap or a single-column stack
* Prefer a stack if scroll snap causes inaccessible content
* Do not hide explanatory text

---

# 16. Packaging anatomy

This section should feel like an industrial product teardown.

## Desktop layout

Left:

* Large `MilkCarton` with `variant="diagram"`
* Three hotspot markers

Right:

* Packaging heading
* Introductory body
* Three interactive specification rows

Heading:

```text
A carton
with a job.
```

Rows:

1. Opaque paperboard
2. Resealable cap
3. One-liter format

## Interaction

* Hovering or focusing a row activates the matching SVG area
* Clicking a row locks its active state
* Clicking the active row again returns to the default state
* Hotspots must also be keyboard reachable
* Hover cannot be the only way to access the information
* On touch devices, tapping rows changes the highlight
* Highlighted SVG part receives the cobalt accent and a subtle glow
* Do not use tooltips that disappear before they can be read

## Mobile

* Carton appears above the rows
* Tapping a row updates the carton
* Keep the carton visible while the selected explanation remains on screen
* Do not use a tiny technical diagram

---

# 17. Closing purchase section

Use a full-height near-black section.

Background:

* `closing-glass.webp`
* Positioned to the right on desktop
* Used as a restrained atmospheric element, not a conventional product thumbnail

Foreground:

```text
The next big thing
was already in the fridge.
```

Below:

```text
MILK / 01 · WHOLE · 1 L · $5.00
```

Add:

* Small `MilkCarton` SVG
* `Buy one carton` button
* Static demo disclosure

## Purchase interaction

Clicking the button must not pretend to process a payment.

Implement an accessible status notification:

```text
Demo storefront — checkout is not connected.
```

Requirements:

* Use `role="status"`
* Do not interrupt screen readers with `alert`
* Keep the message visible long enough to read
* Button remains usable after activation
* No fake cart counter
* No quantity selector
* No drawer
* No checkout modal
* No external link

## Button treatment

Create one premium interaction:

* Dark/light inversion
* Liquid-like background fill moving across the button
* Maximum magnetic offset of 4px on fine-pointer devices
* Normal static button on touch and reduced-motion devices
* Clear keyboard focus ring
* Minimum touch target of 44px

---

# 18. Footer

Keep the footer minimal.

Include:

```text
M / 01
Whole milk, dramatically presented.
```

Links:

* Product
* Specs
* Uses
* Carton
* Back to top

Small print:

```text
Concept product experience. Nutrition and packaging claims must be verified against the final commercial product before publication.
```

Do not add fabricated social accounts, legal pages, addresses, certifications, or newsletter forms.

---

# 19. Motion system

Create shared motion constants in `src/lib/motion.ts`.

Use approximately:

```ts
export const easeOutExpo = [0.16, 1, 0.3, 1] as const;
export const easeStandard = [0.22, 1, 0.36, 1] as const;

export const durations = {
fast: 0.22,
normal: 0.5,
slow: 0.9,
} as const;
```

## Motion hierarchy

There should be only three signature motion moments:

1. Hero composition and pointer depth
2. Liquid transition
3. Texture-image aperture reveal

Everything else should be restrained:

* Opacity
* Small vertical translation
* Fine line drawing
* Subtle image crop changes

## Reduced motion

When `prefers-reduced-motion: reduce` is enabled:

* Disable pointer parallax
* Disable magnetic button movement
* Remove scroll-linked rotation
* Remove large clip-path interpolation
* Keep content immediately visible
* Preserve the static meniscus shape
* Use short opacity transitions only
* Ensure no information depends on motion

Do not merely slow animations down.

---

# 20. Responsive requirements

Test at minimum:

```text
390 × 844
768 × 1024
1024 × 768
1440 × 900
1728 × 1117
```

## Mobile priorities

* Preserve the giant typography without horizontal overflow
* Keep the carton large enough to remain the hero
* Simplify overlapping layers
* Keep CTAs visible above the fold where practical
* Ensure text never overlays a visually busy image area
* Disable pointer-only effects
* Avoid sticky sections taller than the device
* Use `svh`, not only `vh`
* Respect safe-area insets
* Do not allow generated photography to produce layout shifts

## Tablet priorities

* Prevent the hero carton from colliding with copy
* Switch packaging anatomy to vertical when two columns become cramped
* Preserve a readable 45–65 character body line length

## Desktop priorities

* Use the full width without making copy lines excessively long
* Keep the hero composition visually centered on ultrawide displays
* Cap image and text containers rather than stretching indefinitely

---

# 21. Accessibility

Required:

* One `<h1>`
* Logical heading order
* Semantic `<nav>`, `<main>`, `<section>`, and `<footer>`
* Descriptive button labels
* Visible keyboard focus
* Skip link
* Alt text for meaningful photography
* Empty alt text for purely decorative photography
* SVG titles where relevant
* `aria-hidden` on decorative SVGs
* Minimum AA contrast
* No information conveyed by color alone
* Keyboard-accessible packaging controls
* A live status region for the demo purchase message
* Reduced-motion support
* No focus traps
* No autoplay audio or video
* No unannounced content changes

Suggested alt text:

```text
Hero halo:
Decorative; use empty alt text.

Texture:
A close-up stream of milk folding into a glossy white surface.

Steam:
Milk forming fine foam inside a brushed-steel pitcher.

Blend:
Milk creating a smooth vortex inside a clear blender vessel.

Bake:
Milk flowing into pale batter.

Closing:
A cold glass of milk illuminated on a dark reflective surface.
```

---

# 22. Performance requirements

Targets:

* Lighthouse mobile performance: at least 90
* Lighthouse accessibility: at least 98
* Lighthouse best practices: at least 95
* Lighthouse SEO: at least 95
* No unexpected cumulative layout shift
* No hydration warnings
* No console errors
* No continuously running pointer listener outside the hero
* No animation loop when the document is hidden
* No oversized JavaScript animation framework
* No unused image assets in the final bundle

Implementation notes:

* Use CSS for simple transitions
* Use Motion only for scroll progress and coordinated sequences
* Stop observing elements after one-time entrance animations
* Use `will-change` only during active motion
* Remove `will-change` afterward where practical
* Use responsive image sizing
* Inline only the deterministic SVG carton
* Avoid large base64 images
* Avoid canvas-based grain
* Use a tiny repeating texture or CSS background for grain

---

# 23. Metadata

Set:

```text
Title:
MILK / 01 — Milk, Reintroduced

Description:
A one-liter carton of whole milk, presented with the seriousness of a flagship product launch.
```

Create `og-milk-01.webp` from the hero art direction:

* 1200 × 630
* Carton centered
* Milk halo
* `MILK / 01` and `Milk. Reintroduced.` added through deterministic design tooling, not generated text
* High contrast
* Legible when viewed small

Use an appropriate black theme color.

Do not add misleading Product schema or checkout availability markup for a nonfunctional storefront.

---

# 24. Implementation sequence

## Task 1: Repository audit and baseline

* [ ] Inspect package manager, framework, existing styles, route structure, testing setup, and lint rules.
* [ ] Preserve existing architecture when viable.
* [ ] Install only the missing dependencies needed for Motion, Playwright, and Axe.
* [ ] Run the existing lint and build commands before modifying files.
* [ ] Record any existing failure separately rather than silently fixing unrelated code.
* [ ] Commit only if baseline configuration changes were required.

**Acceptance gate:** The application starts locally and the original baseline status is known.

---

## Task 2: Generate and approve imagery

* [ ] Generate all six photographic assets using the supplied prompts.
* [ ] Review each image against the rejection criteria.
* [ ] Regenerate weak or inconsistent images.
* [ ] Convert approved assets to optimized WebP.
* [ ] Store prompts and generation notes in `prompts.md`.
* [ ] Produce the Open Graph composition.
* [ ] Confirm all images have the intended negative space and crop flexibility.

**Acceptance gate:** No placeholders remain, and all imagery belongs to one coherent art direction.

**Commit:**

```text
assets: add generated MILK 01 campaign imagery
```

---

## Task 3: Establish design foundation

* [ ] Configure Manrope and Instrument Serif.
* [ ] Add global reset and color tokens.
* [ ] Add spacing, container, typography, focus, reduced-motion, and grain utilities.
* [ ] Set metadata in `layout.tsx`.
* [ ] Add skip-link behavior.
* [ ] Create the typed product-data object.
* [ ] Verify global styles at all target viewport sizes.

**Acceptance gate:** A blank page using the design system renders without overflow or font shifting.

**Commit:**

```text
style: establish MILK 01 visual system
```

---

## Task 4: Build the deterministic milk carton

* [ ] Implement all SVG faces and label elements.
* [ ] Add `hero`, `diagram`, and `mini` variants.
* [ ] Add active packaging-part highlighting.
* [ ] Add accessible SVG behavior.
* [ ] Validate the carton at small and large sizes.
* [ ] Ensure no SVG text becomes blurry or clipped.
* [ ] Add the controlled floor shadow and highlight.

**Acceptance gate:** The carton remains sharp at every viewport and responds correctly to all three packaging states.

**Commit:**

```text
feat: add responsive MILK 01 carton illustration
```

---

## Task 5: Build navigation and hero

* [ ] Build responsive fixed navigation.
* [ ] Implement section-aware navigation color.
* [ ] Construct all hero layers.
* [ ] Add generated halo with responsive cropping.
* [ ] Add the carton SVG.
* [ ] Implement hero entrance sequence.
* [ ] Implement pointer parallax.
* [ ] Implement sticky scroll progress.
* [ ] Build reduced-motion fallback.
* [ ] Confirm the first viewport is visually complete before scrolling.

**Acceptance gate:** The hero is strong as a static screenshot and gains depth from motion without depending on it.

**Commit:**

```text
feat: build cinematic MILK 01 hero
```

---

## Task 6: Build liquid transition and introduction

* [ ] Implement the curved liquid transition.
* [ ] Connect it to hero scroll progress.
* [ ] Build the introduction typography.
* [ ] Add restrained reveal animations.
* [ ] Confirm that the black-to-paper transition has no seams.
* [ ] Test reduced-motion rendering.
* [ ] Test anchor scrolling into the section.

**Acceptance gate:** The transition reads as a liquid meniscus rather than a generic wipe.

**Commit:**

```text
feat: add liquid transition and product introduction
```

---

## Task 7: Build specification section

* [ ] Add sticky copy column.
* [ ] Render all four typed product facts.
* [ ] Implement active-row detection.
* [ ] Add masked value reveals.
* [ ] Add the nutrition disclaimer.
* [ ] Remove stickiness at cramped widths.
* [ ] Confirm tabular numerals align correctly.

**Acceptance gate:** The section is readable without animation and visually precise with animation.

**Commit:**

```text
feat: add whole milk specification story
```

---

## Task 8: Build texture and operating modes

* [ ] Implement the aperture-style texture reveal.
* [ ] Add overlay typography with reliable contrast.
* [ ] Build the operating-mode grid.
* [ ] Add the four generated image crops.
* [ ] Implement restrained image hover behavior.
* [ ] Build the mobile layout.
* [ ] Verify no source image is stretched or poorly cropped.

**Acceptance gate:** Photography feels art-directed rather than placed into generic cards.

**Commit:**

```text
feat: add milk texture and usage modes
```

---

## Task 9: Build packaging anatomy

* [ ] Render the diagram carton.
* [ ] Add three hotspots.
* [ ] Add interactive rows.
* [ ] Implement hover, focus, click, and touch behavior.
* [ ] Ensure row and hotspot states remain synchronized.
* [ ] Add keyboard activation.
* [ ] Build vertical mobile layout.
* [ ] Test all active states with reduced motion.

**Acceptance gate:** Every packaging explanation is accessible with mouse, keyboard, and touch.

**Commit:**

```text
feat: add interactive carton anatomy
```

---

## Task 10: Build purchase section and footer

* [ ] Compose the closing photography and carton.
* [ ] Add the final headline and price line.
* [ ] Implement the purchase button.
* [ ] Implement the accessible demo status message.
* [ ] Add the footer and back-to-top link.
* [ ] Confirm the button never implies a successful transaction.
* [ ] Test repeated button activation.

**Acceptance gate:** The page has a satisfying conclusion without pretending checkout exists.

**Commit:**

```text
feat: add closing purchase experience
```

---

## Task 11: Responsive and motion polish

* [ ] Review every target viewport.
* [ ] Remove horizontal overflow.
* [ ] Correct hero collisions.
* [ ] Refine image focal positions per breakpoint.
* [ ] Check sticky-section lengths.
* [ ] Verify mobile tap targets.
* [ ] Test reduced-motion from a cold page load.
* [ ] Test touch behavior without hover assumptions.
* [ ] Confirm navigation never covers anchored headings.
* [ ] Remove animations that do not materially improve the composition.

**Acceptance gate:** No breakpoint feels like a compressed desktop layout.

**Commit:**

```text
fix: refine responsive layout and motion behavior
```

---

## Task 12: Automated testing

Create Playwright tests covering:

```ts
import { expect, test } from "@playwright/test";

test("renders the complete product story", async ({ page }) => {
await page.goto("/");

await expect(
page.getByRole("heading", { level: 1, name: /milk.*reintroduced/i }),
).toBeVisible();

await expect(page.getByText("Specs you can taste.")).toBeVisible();
await expect(page.getByText("One carton.")).toBeVisible();
await expect(page.getByText("A carton with a job.")).toBeVisible();
});

test("communicates that purchasing is a demo", async ({ page }) => {
await page.goto("/");

await page.getByRole("button", { name: "Buy one carton" }).last().click();

await expect(page.getByRole("status")).toContainText(
"checkout is not connected",
);
});

test("supports packaging interaction from the keyboard", async ({ page }) => {
await page.goto("/#carton");

const capControl = page.getByRole("button", {
name: /resealable cap/i,
});

await capControl.focus();
await page.keyboard.press("Enter");

await expect(capControl).toHaveAttribute("aria-pressed", "true");
});
```

Add an Axe test:

```ts
import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";

test("has no automatically detectable accessibility violations", async ({
page,
}) => {
await page.goto("/");
await page.waitForLoadState("networkidle");

const results = await new AxeBuilder({ page }).analyze();

expect(results.violations).toEqual([]);
});
```

Additional tests:

* [ ] No console errors
* [ ] No horizontal page overflow at 390px
* [ ] Navigation anchors resolve
* [ ] Reduced-motion page remains fully usable
* [ ] All generated image files return successfully
* [ ] Purchase disclosure appears after activation
* [ ] Packaging controls expose correct pressed state
* [ ] Page title and metadata are present

**Commit:**

```text
test: cover MILK 01 interaction and accessibility
```

---

## Task 13: Final verification

Run the repository’s equivalents of:

```bash
npm run lint
npm run test
npm run test:e2e
npm run build
```

Then perform a manual review at all target viewports.

Check:

* [ ] No placeholder content
* [ ] No generated-image artifacts
* [ ] No broken image crops
* [ ] No hydration warnings
* [ ] No console errors
* [ ] No inaccessible packaging states
* [ ] No clipped typography
* [ ] No unreadable text over photography
* [ ] No sticky-scroll dead zones
* [ ] No excessive animation
* [ ] No layout shift during font or image loading
* [ ] No checkout functionality accidentally introduced
* [ ] Nutrition disclaimer remains present
* [ ] Hero still looks premium with JavaScript motion disabled
* [ ] Every section contributes to the same visual story

Run Lighthouse and address material regressions.

**Final commit:**

```text
chore: complete MILK 01 launch-site verification
```

---

# 25. Definition of done

The implementation is complete only when:

1. The first viewport looks like a premium flagship product campaign.
2. The generated imagery is coherent and free from obvious AI artifacts.
3. The milk carton branding is sharp and consistent everywhere.
4. The page has three memorable motion moments without becoming exhausting.
5. The site works with keyboard, touch, reduced motion, and narrow screens.
6. The product claims stay grounded in real milk attributes.
7. No checkout or quantity logic exists.
8. The purchase button explicitly identifies the experience as a demo.
9. The production build succeeds.
10. Automated accessibility and interaction tests pass.
11. There are no placeholders, unfinished sections, or generic template components.
12. A visitor could reasonably say: “That is an unreasonable—and remarkably beautiful—website for milk.”