CookingFriend

CookingFriend

A friendlier way to cook.
Coming soon to iOS & Android.

/* Scroll-driven reveal */ @keyframes fade-up { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } } @supports (animation-timeline: view()) { .reveal { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; } .reveal-delay-1 { animation-delay: calc(-1 * (1 / 3) * 1ms); } .reveal-delay-2 { animation-delay: calc(-1 * (2 / 3) * 1ms); } } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px var(--gutter) 64px; overflow: hidden; } /* Warm ambient glow */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 50% at 50% -10%, rgba(255, 90, 54, 0.15) 0%, transparent 70% ); pointer-events: none; } .hero__icon { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 32px; box-shadow: 0 0 0 1px rgba(255,90,54,0.3), 0 8px 40px rgba(255,90,54,0.2), 0 2px 8px rgba(0,0,0,0.4); animation: fade-up 0.8s var(--ease-out) both; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(255,90,54,0.2); border-radius: var(--r-pill); padding: 4px 14px; margin-bottom: 24px; animation: fade-up 0.8s var(--ease-out) 0.05s both; } .hero__h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.0; max-width: 14ch; text-wrap: balance; animation: fade-up 0.8s var(--ease-out) 0.1s both; } .hero__h1 em { font-style: normal; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__sub { margin-top: 20px; font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--muted); max-width: 44ch; text-wrap: pretty; line-height: 1.6; animation: fade-up 0.8s var(--ease-out) 0.15s both; } .hero__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 36px; animation: fade-up 0.8s var(--ease-out) 0.2s both; } .hero__coming-soon { margin-top: 16px; font-size: 0.8rem; color: var(--subtle); animation: fade-up 0.8s var(--ease-out) 0.25s both; } /* ── Buttons ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: var(--r-pill); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; transition: opacity var(--dur), transform var(--dur), box-shadow var(--dur); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); opacity: 0.85; } .btn--primary { background: var(--accent-gradient); color: var(--accent-fg); box-shadow: 0 4px 24px rgba(255,90,54,0.35); } .btn--primary:hover { box-shadow: 0 6px 32px rgba(255,90,54,0.50); } .btn--secondary { background: var(--elevated); color: var(--fg); border: 1px solid var(--border); } .btn--secondary:hover { background: var(--card); border-color: var(--muted); } /* ── Section wrapper ───────────────────────────────────────────── */ .section { max-width: var(--max-content); margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--gutter); } .section__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section__title { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; } .section__body { margin-top: 16px; font-size: 1.0625rem; color: var(--muted); max-width: 48ch; text-wrap: pretty; line-height: 1.6; } /* ── Bento grid ────────────────────────────────────────────────── */ .bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 12px; margin-top: 48px; } .bento__card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; transition: border-color var(--dur), background var(--dur), transform var(--dur); } .bento__card:hover { border-color: rgba(255,90,54,0.25); background: var(--elevated); transform: translateY(-2px); } /* Layout: Watch card is wide, others fill */ .bento__card--watch { grid-column: span 12; } .bento__card--save { grid-column: span 12; } .bento__card--shop { grid-column: span 12; } .bento__card--voice { grid-column: span 12; } .bento__card--share { grid-column: span 12; } .bento__card--cook { grid-column: span 12; } @media (min-width: 600px) { .bento__card--watch { grid-column: span 7; grid-row: span 2; } .bento__card--save { grid-column: span 5; } .bento__card--shop { grid-column: span 5; } .bento__card--voice { grid-column: span 4; } .bento__card--share { grid-column: span 4; } .bento__card--cook { grid-column: span 4; } } @media (min-width: 900px) { .bento__card--watch { grid-column: span 8; grid-row: span 2; } .bento__card--save { grid-column: span 4; } .bento__card--shop { grid-column: span 4; } .bento__card--voice { grid-column: span 4; } .bento__card--share { grid-column: span 4; } .bento__card--cook { grid-column: span 4; } } .bento__icon { font-size: 2rem; margin-bottom: 20px; display: block; } .bento__card--watch .bento__icon { font-size: 2.5rem; } .bento__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .bento__card--watch .bento__title { font-size: clamp(1.4rem, 3vw, 1.875rem); margin-bottom: 14px; } .bento__body { font-size: 0.9rem; color: var(--muted); line-height: 1.65; } .bento__card--watch .bento__body { font-size: 1.0625rem; } /* Visual accent strip inside watch card */ .bento__video-mock { margin-top: 28px; border-radius: var(--r-lg); height: 180px; background: linear-gradient(160deg, #1C1C1F 0%, #0a0a0a 100%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .bento__video-mock::before { content: ''; position: absolute; inset: 0; background: var(--accent-gradient); opacity: 0.06; } .bento__video-mock__play { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid rgba(255,90,54,0.4); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* ── Privacy strip ─────────────────────────────────────────────── */ .privacy-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .privacy-strip .section { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .privacy-item__icon { font-size: 1.4rem; margin-bottom: 10px; } .privacy-item__title { font-size: 0.9375rem; font-weight: 700; margin-bottom: 6px; } .privacy-item__body { font-size: 0.85rem; color: var(--muted); line-height: 1.6; } /* ── CTA section ───────────────────────────────────────────────── */ .cta-section { text-align: center; } .cta-section__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; } .cta-section__title em { font-style: normal; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-section__sub { margin-top: 16px; font-size: 1.0625rem; color: var(--muted); margin-bottom: 36px; } /* ── Divider ───────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); }
CookingFriend app icon

A friendlier
way to cook

Watch short cooking videos, save the recipes you love, and let the app build your shopping list — synced with everyone you cook with.

App Store Google Play

Not yet on the stores — sign up to be notified

What it does

Everything for cooking.
Nothing you don't need.

Six tightly integrated features covering the whole journey — from finding inspiration to standing in the supermarket aisle.

Watch

A vertical feed of short cooking videos. Swipe up for the next one. Each video has a step-by-step timeline so you can jump straight to the part you need — no scrubbing, no confusion.

Save

Tap once to save a recipe. Organise your saves into lists. Long-press to rearrange.

Shop

Choose a recipe, pick your serving size — the app scales ingredients, groups by aisle, and merges duplicates automatically.

Voice

Say "two pounds of flour, a dozen eggs" — items appear as you speak. Processed on-device. Nothing sent to the cloud.

Cook mode

Hands-free step-by-step cooking. Voice commands, keep-awake screen, continuous listening — so you never touch your phone mid-recipe.

No account to browse

Use the shopping list without signing up. Sign-in is only for saving and syncing.

Camera stays on-device

Receipt scans and voice input are processed locally. No photo or audio ever leaves your phone.

Analytics off by default

Crash reports and analytics are opt-in with separate toggles. Change your mind any time.

One-tap deletion

Tap, type DELETE, gone — including everything synced to our servers.

EU data storage

Your data stays in the EU and is governed by GDPR. Full export is one tap away.

Open source

The code is open on GitHub. Read it, audit it, or contribute to it.

Ready to cook
smarter?

CookingFriend is coming to iOS and Android. Questions? Just email us.

Get in touch Privacy Policy