Lightly

Download/reference the app shown in this post and clone it exactly, including the iPhone visual design, layout, interactions, animations, typography, spacing, and all visible states. Make it functional and runnable in the simulator. Match the reference as closely as possible and include any interaction shown in the source. Reference: https://x.com/cesaralvarezll/status/2111819610915770864. The actual 54-second video is uploaded as source.mp4 in project Files. Inspect it carefully, extracting frames as necessary.

Build a native SwiftUI iOS app named Lightly using Opus 5.5. Lightly is a "Wellbeing Companion" journaling app with a famously polished onboarding: a cute blue cloud mascot, soft pastel gradients, a face that shape-shifts between moods, a personalized plan and a paywall that doesn't feel like one. Portrait iPhone. Do NOT put a fake handset frame inside the actual app; the simulator provides that. Use realistic deterministic fixture data so every screen is rich and usable without permissions or backend. Do not publish externally.

Observed video sequence (0-54s): 0-1.8 welcome "Feel better" over a slowly drifting pastel gradient, mascot bobbing; tap Get Started; 1.8-12.1 intro pages, one per tap of Next, each sliding in from the right: "Talk it out with a journal that writes back", "Turn entries into actionable insights", "Track your mood", "Discover new sides of yourself", "Set your starting point", "You've got good company", "A daily plan you can keep", "Give us a rating" (then an "Enjoying Lightly?" rating card); 12.8-16.0 THE HERO MOMENT: on "Let's shape your plan around you" a cartoon face appears (eyes first, then the body grows under them) and morphs continuously through moods: pale-yellow triangle with a worried "o" mouth -> olive lumpy cloud blob, worried -> olive scalloped sunburst, eyes narrowing -> big coral-red rounded square, furious -> it shrinks to a small red square that bursts into confetti streamers -> a mint-green round blob with a big happy smile that keeps gently wobbling and blinking (16-19.4); 19.4-29.4 eleven quick questions (1/11 to 11/11), name typed "Cesar"; 29.4-30.5 "Personalizing your experience" ring 0 -> 100%; 30.5-35.8 "Cesar's Wellbeing Plan" story scrolling into the paywall, plan toggled Annual -> Weekly -> Annual; 35.8-42.5 reminders, notifications, "How did you hear about Lightly?"; 42.5-49.6 first journal entry ("Hi, I'm Journal", Add entry, AI consent, typed "Good", "Analyzing entry.." -> "+40 XP earned..." -> "Feeling Happy" entry); 49.6-53.7 encouragement screens and "Meet your helpers"; 53.7 "1 Day Streak! +5XP"; 54 home screen.

Visual details:
- Background on every onboarding screen: a full-bleed animated mesh gradient of soft pastels (lime-yellow #E8F5B0, mint #A8F0D8, sky blue #A9D4F5, lavender-pink #EBC4EE, peach #F5D5C0), blobs drifting slowly (8-12 s loops), never static. Question screens use a lighter version fading to near white/peach at the bottom.
- Type: a bold geometric sans like Google Sans (bundle "Figtree" or "Outfit" from Google Fonts; fall back to SF Pro Rounded bold). Headlines 32-36pt bold, near-black #1A1A1A, centered. Subtitles 17pt regular grey #6B6B6B.
- Primary buttons: black #1A1A1A capsules with white 17pt semibold text; "Next" is a short centered pill (~120x52); "Continue"/"Get Started" are wide (screen width minus 40, 56 tall). Disabled = light grey with grey text.
- Top bar on intro pages: thin grey back chevron at left, a 5-dot page indicator centered (active dot dark, others light grey).
- Mascot: a soft 3D-looking blue cloud (gradient from #5A9BF0 to #8CC8F8 with lighter top-left highlights and a slight glow), face drawn on top: two thick black slanted brows, two white half-moon eyes with black pupils looking up-right, a small black curved smile. Draw it in SwiftUI (overlapping circles + gradient + blur) so it can bob, squish and blink. App icon = the mascot on a blue-to-mint gradient.

Screens and exact copy:
1. Welcome: "lightly" wordmark (bold, lowercase) and "Wellbeing Companion" under it; big mascot; huge 2-line "Feel" / "better" (about 90pt heavy, tight leading); "Get Started" button; "I already have an account"; tiny grey "By continuing you agree with our Terms of Use and Privacy Policy" with the two links underlined.
2. Intro pages (headline at the bottom above Next, illustration above):
   a. "Talk it out with a journal that writes back": white speech card "You" / "I'm afraid I'll mess it up..." (tilted slightly), the mascot peeking over a purple #6B5BD6 card "Lightly" / "Let's separate risk from story." Cards float in with a spring.
   b. "Turn entries into actionable insights": tilted cream card "New Insight", blue paw print "Dog walk 30 min" -> curved arrow -> yellow crescent moon with sparkles "Sleep quality +23%".
   c. "Track your mood": three big cartoon faces (red angry left, yellow neutral center largest, green smiling right) over rows of glassy chips that marquee sideways: "Good talk", "Quality sleep", "Fresh air", "Small win", "Exercise", "Music".
   d. "Discover new sides of yourself": a slowly scrolling 3-column grid of frosted tiles with glossy 3D clay icons and labels: Love (peach flower), Flow (blue stacked triangles), Care (green starburst), Energy (orange bolt), Intuition (yellow tulip), Voice (coral rounded square), Anger (green hexagon), Focus (pink target), Pulse (yellow scalloped badge), Path, Voice, Love repeating.
   e. "Set your starting point" (top), subtitle "We'll tailor your plan and prompts to your wellbeing journey", 2x2 frosted cards: Beginner "Just starting, no steady habits yet" (green starburst), Intermediate "Some routines, building consistency" (green donut), Advanced "Regular habits, want deeper guidance" (pink bow), Expert "Strong practice, leading yourself" (orange flower).
   f. "You've got good company" / "500k+ people use Lightly to move toward inner peace", four round-rect portrait photos scattered (generate them), laurel-wreath "500k+" / "Happy users", small floating hearts.
   g. "A daily plan you can keep" / "Short lessons, steady progress", a looping lavender ribbon road with a white circle node holding a blue gem "Day 1" / "Thoughts" and a tilted blue book "Report" with green stars.
   h. "Help us grow" / "Give us a rating", laurels "4.8 average rating" and avatar stack "+500k people", review cards: "Love it!" "I love the insights, summaries and encouragement this app provides. It helps me keep my thoughts in order and give me insights I didn't even think of!" Jennifer H. ★★★★★; "Best App Ever!!!" "This is one of the best journaling apps I've ever owned. And for someone who struggles with ADHD, one of the only things I actually stay consistent with. I recommend it to anyone and everyone." D. Edwards ★★★★★; Continue -> a dark frosted card "Enjoying Lightly?" / "Tap a star to rate it on the App Store." with the app icon, five blue outline stars and "Not Now".
3. Shape-shifting face (the hero, spend the most care here): header "A few quick questions — so your plan truly fits you." (grey, top), headline "Let's shape your plan around you", Next. Build the character as ONE morphing shape: represent every body as a polar radius function r(theta) sampled at ~120 points and animate by interpolating the points plus fill colour, so it flows between shapes instead of cross-fading. Face layers (thick black brows, white eyes with black pupils, mouth) animate separately: brow angle, eye openness, pupil position, mouth shape. Sequence on appear, about 3.2 s, then idle: eyes alone pop in -> pale yellow #EDE3A8 triangle, worried brows, small "o" mouth -> pale cream rounded blob -> olive #CFC266 lumpy cloud, worried -> olive scalloped sunburst, eyes narrowing to flat lines -> large coral #F08A7A-to-#E8707A gradient rounded square with furious brows and frown -> snaps down to a small red #E8344A square, still furious, which bursts into thin confetti streamers (red, blue, green, yellow) -> mint #5EF0A0 wobbly round blob with a wide open smile, which keeps wobbling and blinking until Next. Tapping the face replays the sequence.
4. Questions, 1/11 to 11/11: white rounded header card (bottom corners 28pt) with back chevron, a short dark progress bar centered, "n/11" at right in grey, the question in bold 22pt at left and a yellow emoji character holding a notepad at right. Answers are white rounded rows (16pt radius) with an emoji, bold title and grey subtitle; single-choice auto-advances with a horizontal slide. 1 "How would you like Lightly to call you?" big centered field "Type name", shield + "Your name will be used only within the app.", Continue (enables when typed). 2 "How do you identify your gender?" Male / Female / Non-binary. 3 "What's your age? Just to tailor things." 18-24 / 25-34 / 35-44 / 45-54 / 55+. 4 "Do you feel like you truly know the real 'you'?" 💯 Absolutely! "I'm my own best friend" / 🤔 Maybe "I'm still figuring myself out" / 🕵️ Not really "But I'm ready to learn more!". 5 "Do you often get caught up in your emotions?" (similar three answers). 6 "Do you ever find yourself overthinking every little detail?" 🌀 Yes "My mind is a 24/7 think tank" / 😨 Now and then "Especially when I'm stressed" / 🏄 Not too often "I usually go with the flow". 7 "Do moments of intense anxiety ever sneak up on you?" 😣 Yes "It feels overwhelming more often than I'd like" / 🔀 Sometimes "Especially during big changes or decisions" / ❄️ Not really "I'm generally pretty chill". 8 "How do you feel about the way you handle life's tough challenges and emotions?" 😔 I'm struggling "And it weighs me down" / 🌱 I could improve "I manage but would like better strategies" / 💪 I'm pretty confident "I can work through anything". 9 "How do you feel about sharing tough thoughts with others?" 😶 Super uneasy "I'd rather keep it to myself" / 🤝 I'm okay with it "If I really trust the person" / 💬 I'm pretty open "Even if it's awkward or tough". 10 "Were you guided to Lightly by a healthcare provider, therapist?" Yes "They suggested I try it out" / No "I found it on my own". 11 multi-select with right-side circles that fill with a dark check: 🌊 "Managing stress and heavy emotions", 🪞 "Getting to know myself better", ⚖️ "Feeling more balanced day-to-day", 🤯 "Overcoming worry and anxious thoughts", 🤝 "Building stronger relationships with friends/family", 🌟 "Boosting my self-esteem"; Continue.
5. "Personalizing your experience": a blue gradient ring filling 0 -> 100% over ~1.5 s with the percent in its centre (18%, 33%, 65%, 96%...), green lock badge, "Your interactions with Lightly are personal" / "You own your data. We keep it safe."; auto-advances.
6. Plan story (one vertical scroll, Continue fixed at the bottom scrolls it to the next section): "Cesar's" (the typed name, coral-to-orange gradient text on a white pill) / "Wellbeing Plan" / "Designed to help you reach your goals, step by step", a spiral-bound white notebook card with 4 rows: Journey Focus "Find Inner Clarity" (coral magnifier), Coaching Style "Deeper Reflection" (purple chat bubble), Growth Area "Realign Your Path" (yellow bolt), Future Feeling "Feel Steady and Clear" (pink sparkle). Then "Your personal AI Companion" ("personal" purple on a white pill) with the mascot flying in with speed lines, "Your personal AI companion for reflection, support, and insights". Then "91% of Lightly Pro Users feel less stress within 1 week" ("91%" grey on a pill, "1 week" pink on a pill) with a chart card "Self-Awareness over time": green line rising to a yellow face "With Lightly", red dashed line sinking to an angry red face "Without Support", x labels "Today" / "After 2 weeks"; lines draw in. Then "Unlock more ways to feel better" ("feel better" on a yellow pill) with feature rows: Personalised Wellbeing Plan "5-min a day to rewire your mindset", AI Insights "Uncover surprising patterns about you", Mood Dashboard "Keep track of your progress", Longer Conversations "Record up to 20 minutes per entry", Evolving Coaching "Enjoy your unique self-growth path".
7. Paywall: X close at top left, auto-rotating review carousel with ★★★★★ and dots: "Like a mini therapist in my pocket" Ally / "It's helping me to learn about myself each day!" Prire. / "Make me feel better if I need it!" scarlet.; "Start your journey"; plan cards (coral border + filled black check when selected): Annual with a coral "BEST OFFER" tag, "Just €0.77 per week", struck "€59.98" then "€39.99" "per year"; Weekly with a grey "Easy Start" tag, "Renews weekly", "€4.99" "per week"; green check "Cancel anytime"; "Restore  Terms  Privacy Policy"; Continue. No real purchases.
8. "We'll remind you to journal, so it becomes a habit!": rows Morning 09:00 AM, Day 02:30 PM, Evening 09:00 PM (selected = lavender row with a check), tip card 💡 "Users who set reminders journal 2x more consistently", "Set up later", Continue -> bottom sheet "Turn On Notifications" / "Don't miss your daily journal entry." / "Go to Settings" / "Skip".
9. "Last question! How did you hear about Lightly?" App Store / Friends/family / Facebook/Instagram / TikTok / News/blog/article / Other, Continue.
10. First entry: black top bar "1 of 2" / "Make your first journal entry" / "Skip", gradient card below with a small mascot and typewriter text "Hi, I'm Journal. This is your private space." with "Hi, Journal!"; then "Let's start with" and a card "Journaling" "+30 XP" / "How do you feel right now?" / "Add entry"; "Your entries are private and visible only to you". Editor: "X  Wed, 5", "How do you feel right now?", placeholder "Type whatever is on your mind", mic and send buttons; first send shows a sheet "Lightly uses AI to support you" (purple sparkles) / "We analyze your entries using artificial intelligence to offer personalized insights and emotional understanding." / checkbox "I agree that Lightly may process my entries and messages to generate AI responses." / "Agree & Continue". Then white screen with mascot "August 5 • 6:39 PM" / "Analyzing entry.." -> "+40 XP earned..." / Cancel, then the entry: "Today 6:39 PM", green face, "Feeling" / "Happy" (green), "PHOTOS TO REMEMBER" +, "JOURNAL ENTRY" "Positive Note 👍🌟", "ENTRY (1 words)" "Good", Continue. Then lavender #EBDDF2 screen, mascot, typewriter "Feeling good is a wonderful state." / "Embrace this positive feeling and let it uplift your day." Continue; "You don't need hours to feel better." / "Just a few minutes each day can bring more clarity. And the more you share, the better Lightly gets." Next; "2 of 2" "Meet your helpers": "Lightly app is more than a journal", "Guided conversations to help you gain perspective", a white pill with three characters Journal (blue) / Reflecty (teal) / Insighty (pink star), "Insights from your journaling over time", Finish.
11. Streak: salmon #F2CFCB screen, sparkles, a coral flame, big "1", "Day Streak!" / "+5XP", "You're first goal is to reach 3 days streak!", week circles MO TU WE TH FR SA SU with WE checked, Continue, "Skip" top right.
12. Home: black header with small coloured shapes, "1st discovery" and a blue progress bar "45/100", purple profile button; cards "Reach 7-day streak!" 1🔥 with day pills W T F S S M T (W yellow); "Journaling ✓+30 XP" / "Add entry" with a black round edit button; "Mood +30 XP" with five faces Terrible / Bad / Fine / Good / Great; a gradient "Unlock weekly summaries" / "Easily keep track of your life with AI-summarized week recaps." / "Get Premium" card with X; floating tab bar Journal / Reflecty / Insighty + a separate Journey button; today's entry "Today • 6:39 PM Feeling Happy" below.

Motion: every screen change slides horizontally with a spring (new screen in from the right); headlines and cards rise and fade in staggered; the mascot always idles (slow bob, occasional blink); illustrations float gently. Use native spring animations and gestures, not static screenshots. Generate the glossy 3D clay icons, the four portrait photos and the flame with gpt-image-1 if that's quicker than drawing them (transparent backgrounds).

Keep every file you create inside /home/user/workspace (fonts, generated images, scripts): tool access to /tmp and other paths outside the workspace is denied in this sandbox.

Build fully, run compile/build validation, resolve all errors, and launch in the web simulator. Prioritize fidelity to the attached source and the main flow: welcome, intro pages, the shape-shifting face, personalizing, plan and paywall come first. Deliver complete implementation rather than a plan.