22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:Tfff,Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons. **Phone Frame:** - Dimensions: 375px wide x 780px tall - Border radius: 52px - Background color: `#8a9aaa` - Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)` - A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50 **Background:** - Full-bleed background image using this exact URL: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85` - Apply `blur(12px)` and `scale(1.1)` to the background image - Semi-transparent overlay: `#8a9aaa` at 30% opacity on top **Font:** - Load "Helvetica Now Var" from: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var` - Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif - Apply globally to all elements **Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):** 1. **Header Badge** (top, with 40px margin-bottom): - Liquid glass pill with Timer icon (12px, white/80) + text "Vitaforge Daily" (12px, white/90, medium weight) - Padding: 10px vertical, 12px horizontal 2. **Title Section** (32px margin-bottom): - Subtitle: "Choose all that apply" - white/60, 14px - Heading: "What aspects of your wellness would you like to boost?" - white, 28px, normal weight, tight leading and tracking 3. **Selection Grid** (2 columns, 12px gap, pushes to fill available space): - 4 cards: "Sleep quality", "Stress", "Weight", "Skin" - Each card: rounded-[32px], 100px height, padding 16px - Shows a number label (01, 02, etc.) in white/50, 11px, medium weight - Option text in white, 16px, medium weight - "Stress" (id:2) and "Skin" (id:4) are pre-selected - Cards are toggleable on click 4. **Voice Button** (centered, 24px vertical margin): - Yellow/gold radial glow behind: `radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)` - 64px circular liquid glass button with a waveform SVG icon (white strokes, strokeWidth 2, strokeLinecap round) showing 5 vertical bars of varying heights - "voice" label below in white/70, 12px 5. **Slide-to-Confirm Button** (bottom, inside 24px horizontal padding): - Full-width rounded-full track, 56px tall, liquid glass style - White circular thumb (44px) on the left with ArrowRight icon (gray-800) - "Done" text centered in white/60, 14px, medium weight - 3 ChevronRight icons on the right (14px) at white/40, white/50, white/60 opacity - Draggable thumb with pointer events: snaps back if not dragged past 85%, snaps to end if past 85% **Liquid Glass Effect (CSS classes):** `.liquid-glass`: - Background: `rgba(255,255,255,0.01)` with luminosity blend mode - Backdrop filter: `blur(4px)` - Box shadow: `inset 0 1px 1px rgba(255,255,255,0.1)` - `::before` pseudo-element for gradient border: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)` with 1.4px padding and mask-composite exclude technique `.liquid-glass-selected`: - Same as above but background: `rgba(255,255,255,0.12)`, blur 8px, stronger box shadow (`inset 0 1px 2px rgba(255,255,255,0.2)`), and brighter gradient border (0.6 alpha at edges, 0.25 at 20%/80%) **Animations:** - Staggered fade-up animation on all elements - Keyframes: from `opacity:0, translateY(16px)` to `opacity:1, translateY(0)` - Duration: 0.5s, easing: `cubic-bezier(0.22, 1, 0.36, 1)`, fill: forwards - Delays: header 0.1s, title 0.25s, grid cards 0.4s/0.48s/0.56s/0.64s, voice 0.7s, slider 0.85s **Dependencies:** - React 18, Tailwind CSS 3, Lucide React, Vite, TypeScript24:T59ad, CozyPaws - Everything Your Pets Love

Happy Clients and Their Pets
Who Love Our Products

Everything
Your Pets Love

Best Products
for Your Pet

4.6

Based on Reviews from Happy
Pet Owners Worldwide

New Arrivals

Sunset Cat Bowl $19.99

Mint Cat Bowl $29.99

Cat Toy $12.99

Cat Bed $34.99

25:T13be,Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements. **Phone mockup:** - 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow - Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar **Hero section (top):** - Full-width, 430px tall - Contains a looping muted autoplay video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4` - Video covers the area with `object-fit: cover; object-position: center top` - Bottom gradient overlay fading from transparent at 52% to the background color at 100% - Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px **Identity section (overlaps hero by -112px margin-top):** - Centered name "Dasha" (28px, weight 500) - Left and right laurel images flanking the name (local assets `/assets/images/laurel-left.png` and `laurel-right.png`), 73px tall, 0.6 opacity, positioned via `right: calc(50% + 66px)` / `left: calc(50% + 66px)` - Subtitle "Plum Parfait Latte" below (15px, muted color `rgba(235, 220, 205, 0.55)`) **Achievements pill (centered, 30px below identity):** - Glass pill button, 54px tall, 225px wide, 27px border-radius - Trophy icon (local `/assets/images/icon-trophy.png`, 18px) + text "12 achievements" (18px, weight 500) **Stats grid (3 columns, 12px gap, 26px top padding, 16px horizontal padding):** - Each card: semi-transparent background `rgba(255,255,255,0.06)`, 24px border-radius - Card 1: coffee image `https://polo-pecan-73837341.figma.site/_assets/v11/a8ba62db54d1e331b7beb36d69308e9b92516b99.png` (84x84), number "154", label "drinks consumed" - Card 2: sandwich image `https://polo-pecan-73837341.figma.site/_assets/v11/953600065119f54f64ab9edb076b3cbb289fcff8.png` (84x84), number "36", label "sandwiches eaten" - Card 3: cafe image `https://polo-pecan-73837341.figma.site/_assets/v11/aef68e05f729a30ed177f74c2cece578c05bfdba.png` (84x84), number "12", label "cafes visited" - Numbers: 25px, weight 500. Labels: 13px, color `#BAAA9A8C` **Favorite card (12px below stats, 16px horizontal margin):** - Same card background, 24px radius, 110px height, flex row with 16px gap - Latte image `https://polo-pecan-73837341.figma.site/_assets/v11/976a811111808abc50be33c2483872dbdb6ad5a8.png` (108x108, object-fit contain) - Text column: "Favorite" (13px, weight 500), "Latte" (19px, weight 500), "Ordered 73 times" (13px, color `#BAAA9A8C`) - Shuffle button on right (glass circle, local icon `/assets/images/icon-shuffle.png` 19px) **Partial next card:** Same card style but only 34px tall with flat bottom corners (teaser for scroll) **Glass button system:** - Shared `.glass` class: no border, `rgba(255,255,255,0.03)` background, subtle inset box-shadows for edge highlights, `backdrop-filter: blur(2px) saturate(1.3)`, scale-down on `:active` - `.glass.circle`: 58x44px, 22px radius - `.glass.pill`: 54px tall, pill-shaped **Fonts:** - Primary: "Neue Haas Unica" (loaded from local `/assets/fonts/neue-haas-unica/stylesheet.css`) - Also load "Helvetica Now Display" from `/assets/fonts/helvetica-now/stylesheet.css` - Fallbacks: -apple-system, SF Pro Display, Inter, Segoe UI, Roboto **Page background (behind phone):** - Multiple warm-toned radial gradients over `#070402`: - `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))` - `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))` - `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))` - `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))` **Entry animations (respects prefers-reduced-motion):** - Hero: `heroReveal` - opacity 0 + scale(1.01) to normal, 1.9s, cubic-bezier(0.16, 1, 0.3, 1) - Top bar buttons: `dropIn` from translateY(-10px), 0.7s, staggered 0.35s/0.42s - Laurels: `fadeIn` 0.8s, delay 0.5s - Name: `fadeRise` from translateY(16px), 0.7s, delay 0.5s - Subtitle: same, delay 0.58s - Achievements: same, delay 0.66s - Stat cards: staggered at 0.74s, 0.80s, 0.86s - Favorite card: delay 0.94s - Next card: fadeIn delay 1.02s - All use cubic-bezier(0.16, 1, 0.3, 1) except simple fadeIn which uses ease-out **JavaScript (liquid glass effect):** - Generates a displacement map canvas for each `[data-liquid]` element based on its dimensions and border-radius - Uses SDF (signed distance field) of a rounded rectangle to compute refraction vectors - Creates SVG `` filters and applies them as `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)` - Falls back to standard blur if SVG filter not supported **CSS variables:** ``` --bg: #180a06 --card: rgba(255, 255, 255, 0.06) --text: #ede4d8 --muted: rgba(235, 220, 205, 0.55) --radius-card: 24px ``` **Responsive:** At 440px viewport, phone scales to zoom 0.6. Body flex-wraps at 900px.26:T6a60, Nixito — Screen Gallery (Standalone)

27:T17e2,**Create a luxury jewelry mobile app concept displayed inside a realistic iPhone mockup. The design is a "Blue Nile" branded mobile screen with a warm orange hero section and a product card below. Use React, Tailwind CSS, and Lucide React icons. The entire phone is centered on a warm off-white page background.** --- ### Page & Phone Frame - **Page background:** `#f5f5f0` (warm off-white), full viewport height, centered with flexbox and `p-8` padding. - **Phone mockup:** 375x812px, `rounded-[55px]`, black frame with 12px padding. Drop shadow: `0 50px 100px -20px rgba(0,0,0,0.5), 0 30px 60px -10px rgba(0,0,0,0.4)`. A subtle white/10 border highlight on the outer frame. Side buttons on left (silent switch at top-120px, two volume buttons at 170px and 235px) and right (power button at 185px). Screen area has `rounded-[43px]` with overflow hidden. - **Dynamic Island:** Centered pill at top-12px, 126x36px, black rounded-full, containing a small 10x10px dark circle (camera lens) with a border of `#2a2a3e`. --- ### Fonts (Critical) - **Body font:** "Test Founders Grotesk Light" loaded from: `https://db.onlinewebfonts.com/c/7973d1644865c7217230fea96daae6fe?family=Test+Founders+Grotesk+Light` - **Logo font:** "NimbusSanExt" loaded from: `https://db.onlinewebfonts.com/c/12487acadbf8efa35235fe8d339411ec?family=NimbusSanExt` --- ### Color Palette - **Brand orange (hero background):** `#E96B00` - **Brand peach (glow):** `#F6BB7E` - **Brand dark:** `#0B2122` --- ### Hero Section (Top ~73% of screen) - **Background:** Solid `#E96B00` (brand-orange), full width, `flex-1` to fill available space, `overflow-hidden`, positioned relative. - **Gradient glow:** A 600x600px circle positioned at `-left-24`, `top-[33%]`, color `brand-peach/40`, blurred 200px. - **Vertical grid lines:** Two vertical 1px white lines at `left-1/3` and `left-2/3`, opacity 16% (`bg-white/[0.16]`), spanning full height. - **Navigation bar:** Absolutely positioned at top, `px-4 pt-14`, z-index 70, flexbox space-between. - **Logo (left):** White bold text "Blue" on first line, "Nile" on second line (`
`), font-family `NimbusSanExt, sans-serif`, `text-xl font-bold leading-none`. - **Menu button (right):** 40x40px flex center, white. Shows a Lucide `Menu` icon (5x5) by default, crossfades/rotates to Lucide `X` icon when menu is open. Transition: 300ms cubic-bezier(0.77,0,0.18,1), with rotation and scale effects. - **Hero image (center):** Absolutely positioned at `-bottom-10`, centered horizontally with `left-1/2 -translate-x-1/2`, z-20, width `132%` (`max-w-none`). - **Image URL:** `https://soft-zoom-63098134.figma.site/_assets/v11/9028130a3e77802079d3a2e663b85ee12d365b61.png` - **Behind the image:** An 80% wide, 60% tall rounded-full glow using `brand-peach/40` with `blur-[80px]`, centered via absolute + translate. - **Awards section (bottom-left and bottom-right):** Absolutely positioned at `left-4 right-4 bottom-4`, z-30, flex space-between, vertically centered. - **Left side:** `[12+]` displayed as: - `[` in white, `text-5xl font-light` - `12` in white, `text-5xl font-bold` - `+` in white, `text-lg font-bold`, positioned slightly up with `relative -top-1` - `]` in white, `text-5xl font-light` - **Right side:** White uppercase text, `text-base`, `tracking-wide leading-snug`, reading "Awards / Celebrate / Innovation" (each word on its own line via `
`). --- ### Mobile Menu Overlay - **Backdrop:** Full-screen absolute overlay, z-60, with `bg-black/60 backdrop-blur-sm`. Fades in/out over 500ms. Clicking it closes the menu. - **Drawer:** Slides in from the left, 80% width (max 280px), background `brand-orange`, with `shadow-2xl`. Transition: translateX, 500ms, cubic-bezier(0.77,0,0.18,1). - **Menu items:** List of links ["Search", "Catalog", "About", "Profile", "Favorites"], white text, `text-2xl font-medium`, each with `py-2.5` and a bottom border of `white/10`. Each item staggers in with 50ms delay intervals (starting at 80ms) via opacity and translateX animation. Hover: slides right 2px and dims to 80% opacity. --- ### Product Card (Bottom ~27% of screen) - **Container:** White background, `p-3`, fixed height 220px, flex column justify-between. - **Product info (top-left):** - Title: "Coco Crush ring", black, `text-lg font-medium leading-tight` - Subtitle: "18K yellow", `text-black/60 text-xs mt-1` - **Product image (centered):** Absolutely positioned center (50%/50% translate), width 70%, object-contain. - **Image URL:** `https://soft-zoom-63098134.figma.site/_assets/v11/6297b1b8b8a1c0720cbd098274da6619ad35b486.png` - **Price info (bottom-left):** - Label: "From", `text-brand-dark/64 text-xs` - Price: "$25,550", `text-brand-dark text-lg font-medium` - **Arrow button (bottom-right corner):** 72x68px black box, absolutely positioned at `bottom-0 right-0`, containing a white Lucide `ArrowUpRight` icon (4x4). Hover: slightly lighter black (`bg-black/90`) with transition. --- ### Animations (Staggered on mount) All elements animate in on mount with a 100ms initial delay: 1. **Translate stagger:** Elements fade in (opacity 0 to 1) and slide up (translateY 20px to 0) with `0.7s cubic-bezier(0.16, 1, 0.3, 1)` easing, each subsequent element delayed by 120ms. 2. **Scale stagger:** Elements scale from 0.92 to 1 with opacity fade, `0.8s cubic-bezier(0.16, 1, 0.3, 1)`. 3. **Fade stagger:** Pure opacity fade, `0.8s cubic-bezier(0.16, 1, 0.3, 1)`. Stagger order (index): grid lines (0), logo (1), menu button (2), hero image fade (3), awards left (4), awards right (5), product card container (6), product text top (7), product image (8), price section (9), arrow button scale (10). --- ### CSS Utilities - `.scrollbar-hide` class to hide scrollbars on the screen content area. - Global reset: `* { margin: 0; padding: 0; box-sizing: border-box; }` - Body: font-family set to "Test Founders Grotesk Light", with `-webkit-font-smoothing: antialiased`. --- ### Tech Stack - React 18 + TypeScript - Vite - Tailwind CSS 3.4 - Lucide React (for Menu, X, ArrowUpRight icons) - No additional UI libraries28:T2022,**Build a single-page HTML showcase displaying two iOS device frames (370x790px each) side by side on a neutral `#F4F4F4` stage. The stage auto-scales to fit the viewport using JS. Both phones have a Dynamic Island, status bar (time "11:11", signal/wifi/battery icons in white SVG), and a home indicator bar. Animations are gated behind video `loadeddata` events + font loading, with a 5s safety timeout.** --- ### Fonts 1. **ITC Garamond Std Narrow** (self-hosted from Cloudinary): - Light (300): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-LtNarrow_i2zcip.woff2` / `.woff` variant `ITCGaramondStd-LtNarrow_soc5vc.woff` - Book (400): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrow_xjfoc0.woff2` / `.woff` variant `ITCGaramondStd-BkNarrow_wfoxm1.woff` - Book Italic (400 italic): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrowIta_hiy9ld.woff2` / `.woff` variant `ITCGaramondStd-BkNarrowIta_rlarxo.woff` 2. **Google Fonts**: `Playfair Display` (400, 500, 600 + italic) and `Inter` (400, 500, 600, 700) --- ### Screen 1 -- "The place for all your places" (Light device frame) **Background**: Dark (#02040c). Uses a native 470x1008 design scaled down to 370x790 via `transform: scale(0.787234)` with `transform-origin: top left`. **Video background (hero)**: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_114906_ad7cee37-9e56-434f-99bc-92d5bdc4f9fe.mp4 ``` - `autoplay loop muted playsinline`, `object-fit: cover`, `object-position: center 48%`, covers entire frame, z-index 0. **Hero fade overlay**: Bottom 46% of the frame, gradient from `rgba(2,4,12,0)` to `rgba(2,4,12,.35)` at 46% to `rgba(2,4,12,.72)` at 100%. z-index 1. **Logo** (centered, top 74px): ``` https://polo-pecan-73837341.figma.site/_assets/v11/b1ddc82509144261f1999a0c4d92be5ce6689c0f.png ``` - Width 118px, `filter: drop-shadow(0 0 7px rgba(190,215,255,.28))`. z-index 4. **Title** (top 618px, centered, z-index 4): - Font: ITC Garamond Std Narrow, weight 300, 66px, line-height 68px, letter-spacing 0.2px - Text: `The place for all` then line break, then `your places` in italic (weight 400) - Text shadow: `0 0 34px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.35)` - The italic "your places" has an extra glow: `0 0 10px rgba(255,255,255,.6), 0 0 20px rgba(255,235,190,.5), 0 0 40px rgba(255,210,140,.32)` **Subtitle** (top 787px, centered, z-index 4): - Font: Inter, 16.5px, weight 400, line-height 26px, color `rgba(255,255,255,.52)` - Text: "Save, Organize and Share\nyour favorite places" **Button** (top 874px, left 32px, 406x55px, z-index 4): - White background, border-radius 28px, box-shadow `0 6px 26px rgba(0,0,0,.28)` - Apple logo SVG (18x21, fill #1a1a1a) + text "Continue with Apple" - Font: Helvetica Neue, 18px, weight 500, -webkit-text-stroke 0.6px #1a1a1a **Terms** (top 950px, centered, z-index 4): - Font: 12px, weight 400, color `rgba(255,255,255,.42)` - Text: "By continuing, you agree to **Terms of Use**" (bold text is `rgba(255,255,255,.82)`, weight 400) --- ### Screen 2 -- "Unlock Pro" (Dark device frame) **Background**: Dark (#14151d). **Video background**: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_115050_a1ba47d0-aedf-413c-9dea-14509599d3dd.mp4 ``` - `autoplay loop muted playsinline`, positioned `left: 0; top: -30%`, 370x790px, `object-fit: cover`, z-index 0. **Background fade** (full overlay, z-index 1): ```css linear-gradient(to bottom, rgba(20,21,29,0) 0%, rgba(20,21,29,0) 40%, rgba(20,21,29,0.55) 55%, rgba(20,21,29,0.92) 66%, #14151d 74%, #14151d 100%); ``` **Heading** (left 28px, top 386px): - Font: ITC Garamond Std Narrow, weight 500, 26px, line-height 1, color white - Letter-spacing 0.2px, text-shadow `0 0 18px rgba(120,180,220,0.35)` - Text: "Unlock Pro:" **Divider** (left 28px, top 418px, 265x1px): - `linear-gradient(to right, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 100%)` **Feature list** (left 28px, top 429px, width 314px): Each row is 24px tall with a 22px-wide icon area + text (13.5px, weight 400, white, 4px left margin). Icons are all SVG, 19x19 (or 20x20 for infinity), stroke #fff, stroke-width 1.7, no fill: 1. **Layers icon** (paths: `M12 2 2 7l10 5 10-5-10-5Z` / `M2 12l10 5 10-5` / `M2 17l10 5 10-5`) -- "Create private Guides" 2. **Phone icon** (rect 6,2.5 12x19 rx2.5 + line 10.5,18.5 to 13.5,18.5) -- "Import from social media" 3. **Infinity icon** (path: `M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.988-8-13.083-8-5.096 0-5.096 8 0 8 5.095 0 7.988-8 13.083-8z`) -- "Unlimited Guides" 4. **Sparkle icon** (path: `M12 3c.4 3.6 1.4 4.6 5 5-3.6.4-4.6 1.4-5 5-.4-3.6-1.4-4.6-5-5 3.6-.4 4.6-1.4 5-5Z`) -- "AI search" 5. **People icon** (circle cx8.5 cy8 r3 + path for body + second person outline) -- "Collaborate with friends" **Pricing cards** (left 28px, top 561px, 314x123px): - **Monthly card** (left 0, 144x123px, border-radius 14px): - Background image: `https://polo-pecan-73837341.figma.site/_assets/v11/ef4533e6536f2495088e56e0f98036b5ff15446d.png` (cover, centered) - Border: 1px solid `rgba(255,255,255,0.11)` - Inner padding: 14px 14px 15px 15px - "Monthly" label (13px, weight 400), "$20" price (19px, weight 500, margin-top 6px, letter-spacing 0.3px), "Billed Monthly" at bottom-left (12px) - All text white with `text-shadow: 0 1px 6px rgba(0,0,0,0.35)` - **Yearly card** (left 154px, 160x123px, border-radius 14px): - Background: #1e212a, border: 1px solid `rgba(255,255,255,0.11)` - "Yearly" label + "Billed Yearly" in `rgba(255,255,255,0.50)` - "$200" price in `rgba(255,255,255,0.62)` - **Save badge** (left 15px, top 66px): inline-flex pill, padding 5px 8px, border-radius 11px, background #4d5057, text "Save $40.00" (10.5px, weight 600, color `rgba(255,255,255,0.65)`, letter-spacing 0.2px) **Subscribe button** (left 28px, top 709px, 314x50px): - White background, border-radius 26px - "Subscribe" text: Helvetica Neue, 16px, weight 500, color #0c0c0e, -webkit-text-stroke 0.4px - Right chevron SVG: 9x15, stroke #0c0c0e, stroke-width 2, path `M1.5 1.5 7 7.5 1.5 13.5` --- ### iOS Device Frame (reusable for both) - Width: 370px, Height: 790px, Border-radius: 48px - Light frame: background `#F2F2F7`; Dark frame: background `#000` - Box-shadow: `0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)` - Dynamic Island: 126x37px, border-radius 24px, black, centered at top 11px - Status bar time: SF Pro weight 590, 17px, white - Status bar icons: signal bars (4 rects), WiFi (3 arcs + dot), battery (rect + fill + nub) -- all white SVG - Home indicator: 139x5px bar, border-radius 100px, `rgba(0,0,0,0.25)` on light / `rgba(255,255,255,0.7)` on dark --- ### Stage Layout - Gap between phones: 70px - Viewport padding: 40px - Background: `#F4F4F4` - Auto-scale JS: measures stage vs viewport, applies `transform: scale(min(1, fitRatio) * 0.95)` centered --- ### Entrance Animations All paused until `.ze-ready` class is added to viewport (triggered when both videos fire `loadeddata` + fonts ready, or 5s timeout). **Keyframes used:** - `zeBgSettle`: scale 1.12 + opacity 0 to scale 1 + opacity 1 (1.7s, for backgrounds) - `zeReveal`: translateY(26px) + scale(0.985) + blur(7px) + opacity 0 to normal (0.9s) - `zeDrop`: translateY(-16px) + scale(0.90) + opacity 0 to normal (0.9s) - `zeLine`: scaleX(0) to scaleX(1), transform-origin left (0.9s) - `zePop`: translateY(8px) + scale(0.78) to bounce scale(1.07) to scale(1) (0.7s, spring easing) **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)` (expo-out). Save badge uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring). **Stagger (Screen 1):** - Hero bg: 0s delay - Logo (zeDrop): 0.45s - Title (zeReveal): 0.62s - Subtitle: 0.78s - Button: 0.94s - Terms: 1.06s **Stagger (Screen 2):** - Video bg (zeBgSettle): 0.12s delay - Heading (zeReveal): 0.58s - Divider (zeLine): 0.72s - Row 1-5 (zeReveal): 0.80s, 0.88s, 0.96s, 1.04s, 1.12s - Monthly card: 1.22s - Yearly card: 1.30s - Subscribe button: 1.42s - Save badge (zePop): 1.55s **Reduced motion:** All animations disabled via `@media (prefers-reduced-motion: reduce)`. -8:["$","$L22",null,{"activeCategory":"apps","items":[{"category":"apps","id":450,"media":[{"id":487,"alt":"Wellness Companion","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.531Z","createdAt":"2026-08-13T14:07:27.531Z","url":"/api/media/file/apps-0436-01.mp4","thumbnailURL":null,"filename":"apps-0436-01.mp4","mimeType":"video/mp4","filesize":441690,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":233,"prompt":"$23","title":"Wellness Companion"},{"category":"apps","id":451,"media":[{"id":488,"alt":"Pet Products","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.553Z","createdAt":"2026-08-13T14:07:27.553Z","url":"/api/media/file/apps-0435-01.mp4","thumbnailURL":null,"filename":"apps-0435-01.mp4","mimeType":"video/mp4","filesize":871970,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":230,"prompt":"$24","title":"Pet Products"},{"category":"apps","id":452,"media":[{"id":489,"alt":"Coffee Rewards","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.571Z","createdAt":"2026-08-13T14:07:27.571Z","url":"/api/media/file/apps-0434-01.mp4","thumbnailURL":null,"filename":"apps-0434-01.mp4","mimeType":"video/mp4","filesize":551201,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":208,"prompt":"$25","title":"Coffee Rewards"},{"category":"apps","id":453,"media":[{"id":490,"alt":"AI Assistant App","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.656Z","createdAt":"2026-08-13T14:07:27.656Z","url":"/api/media/file/apps-0433-01.mp4","thumbnailURL":null,"filename":"apps-0433-01.mp4","mimeType":"video/mp4","filesize":13217728,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":183,"prompt":"$26","title":"AI Assistant App"},{"category":"apps","id":454,"media":[{"id":491,"alt":"Fine Jewelry Shop","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.917Z","createdAt":"2026-08-13T14:07:27.917Z","url":"/api/media/file/apps-0432-01.png","thumbnailURL":"/api/media/file/apps-0432-01-300x220.png","filename":"apps-0432-01.png","mimeType":"image/png","filesize":482317,"width":1574,"height":1155,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/apps-0432-01-300x220.png","width":300,"height":220,"mimeType":"image/png","filesize":35338,"filename":"apps-0432-01-300x220.png"},"square":{"url":"/api/media/file/apps-0432-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":137601,"filename":"apps-0432-01-500x500.png"},"small":{"url":"/api/media/file/apps-0432-01-600x440.png","width":600,"height":440,"mimeType":"image/png","filesize":113557,"filename":"apps-0432-01-600x440.png"},"medium":{"url":"/api/media/file/apps-0432-01-900x660.png","width":900,"height":660,"mimeType":"image/png","filesize":224343,"filename":"apps-0432-01-900x660.png"},"large":{"url":"/api/media/file/apps-0432-01-1400x1027.png","width":1400,"height":1027,"mimeType":"image/png","filesize":476083,"filename":"apps-0432-01-1400x1027.png"},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/apps-0432-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":349963,"filename":"apps-0432-01-1200x630.png"}}}],"order":180,"prompt":"$27","title":"Fine Jewelry Shop"},{"category":"apps","id":455,"media":[{"id":492,"alt":"Place Saver","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.970Z","createdAt":"2026-08-13T14:07:27.970Z","url":"/api/media/file/apps-0431-01.mp4","thumbnailURL":null,"filename":"apps-0431-01.mp4","mimeType":"video/mp4","filesize":1852859,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":126,"prompt":"$28","title":"Place Saver"}],"page":2,"query":"","totalDocs":26,"totalPages":2}]

EverythingYour Pets Love

Best Productsfor Your Pet

New Arrivals

Welcome Backto Rovio

Speak the World'sLanguage!

Everything
Your Pets Love

Best Products
for Your Pet

Welcome Back
to Rovio

Speak the World's
Language!