UI motion
Lifesum nutrition app hero animation with scanning food plates
Lifesum nutrition app hero animation with scanning food plates by @ashikartistry. Build a single-file HTML hero (HTML + CSS + vanilla JS, no libraries)…
@ashikartistryView post
Prompt
Build a single-file HTML hero (HTML + CSS + vanilla JS, no libraries) for Lifesum, an AI nutrition app. Desktop 1440px wide, full-height hero. Don't describe the product, show it working.
BACKGROUND
#F7F5F3, with a soft peach radial glow (#F8E6D8, very faint) behind the scan card.
NAV
Floating dark pill, centered, 12px from top, ~660×56px, radius 16px, background #2F2F2F.
Left: "Lifesum" wordmark in a white serif. Middle: Home, About, Support (white, 13px). Right: white pill button with Apple logo + "Download App" (black, 13px).
COPY (centered, dark text on light background, every line at least 4.5:1 contrast)
- "Healthy eating": 36px, regular, #2B251E
- "Simplified with AI.": 64px, medium, letter-spacing -0.02em, #2B251E. "AI" in #4A3018, the period in orange #F89848
- Subhead, max 460px wide, 15px, #6B655E: "Discover the power of nutrition to enable a healthier weight, better mood, restful sleep, and longevity."
- Dark button #383637, 44px tall, radius 10px, Apple logo + "Download App" in white
- Under it: 5 orange stars #F9A04F + "4.8/22.9k ratings globally" (12px, grey)
SCAN CARD
White card #FCFAF8, ~460×400px, radius 28px, soft shadow. Small round white pause button (||) top-right.
Four orange corner brackets (#F89848, 6px stroke, rounded caps, quarter-circle arcs) just outside the card's corners, like a camera viewfinder.
A top-down plate photo (~300px) inside the card.
Two more plates at the bottom-left and bottom-right edges of the screen, partly off-screen, 40% opacity, slight blur, like a carousel.
SEQUENCE (loops, ~10s per plate)
1. 0–1.2s: a vertical orange scan bar sweeps left→right over the plate, tinting the scanned area light orange.
2. 1.2–2.4s: white dots with dark pill labels pop onto each food item, staggered 80ms.
3. 2.4–3.2s: a small peach pill "Calculating macros…" appears at the top of the card.
4. 3.2s: the plate moves up and 3 macro cards slide up from the bottom of the card:
Fats: bg #F8DFDE, red flame icon
Protein: bg #E2EFE1, green dumbbell icon
Carbs: bg #EAEDF8, blue rice-ball icon
Label 12px, value 16px bold, counting up from 0 over 800ms.
5. Hold 2.5s, cards slide down, the plate exits left, the next plate enters from the right, and the side plates rotate.
PLATES + VALUES
1. Grilled salmon, microgreens, asparagus, avocado → Fats 31g, Protein 42g, Carbs 18g
2. Steak, bacon, boiled eggs, cheese cubes, almonds → Fats 68g, Protein 72g, Carbs 9g
3. Pasta, garlic bread, roasted potatoes → Fats 26g, Protein 22g, Carbs 138g
MOTION
Entering: cubic-bezier(0.23, 1, 0.32, 1), 300–600ms. Nothing bouncy. With prefers-reduced-motion, show the final state (plate 1 with macros) and no loop.
DON'T
No stock photos of people, no text over photos, no gradient text, no generic icon-card grid, no purple.
you'll need the plate images too (any image model, then remove the background → PNG):
1. Top-down photo of a round white ceramic plate with a grilled salmon fillet, a small pile of microgreens, roasted asparagus and fanned avocado slices. Soft even studio light, plate fills the frame, isolated on a plain white background, 2048×2048.
2. Same style: grilled ribeye steak, crispy bacon strips, two halved soft-boiled eggs, a few cheese cubes and almonds.
3. Same style: spaghetti in a light cream sauce, toasted garlic bread slices, roasted baby potatoes with parsley.