WABI × SHOPIFY — MOTION + SOUND October 22, 2026 Motion + sound brief Shopify 🤝 Wabi: a new kind of social shopping The idea The plan starts in the group chat. Wabi brings a few good options into the conversation; someone’s taste, constraint or vote changes what the group chooses. Make the pleasure of planning together feel tangible. Rebuild selected review cuts in After Effects with our motion designer and SFX designer. These are animatics and visual references; the timing is a starting point. Shortlist 1. One night off-grid — cave → canopy → tent. Arriving after dark makes quick setup matter. 2. Our tent, together — canopy → tent video opening. Space for muddy bags changes the group’s vote. 3. A sofa for us — a couple’s rooftop moment, then a sofa bed for a visiting mum. 4. First light — candlelight, then lamps under $200. A partner’s request for cordless light decides the shortlist. 5. Jenna’s birthday — a breakfast-table opening, three gifts for a coffee-loving friend, and a choice made together. 6. White night, our way — jewelry and white-earring portraits, then one theme with different tastes. Matching color doesn’t mean matching outfits. Motion direction Open on DTS video, with close, readable messages over it. One continuous pullback reveals the glass phone. Keep the same scene softly blurred behind it; leave air above and below the frame. Let the glass catch the scene’s light. Use weightier, deliberate easing. Keep bubbles and their text stable through camera movement. Carry one Wabi orb smoothly to the last message in its run. Cards arrive with a small stagger; votes and replies have a clear cause and effect. No double zooms, overlapping readable screens, decorative product spins or harsh transcript masks. Keep native inline product cards, crisp type and milky incoming bubbles. Present three to five useful options. A brief comparison or vote should help the choice, then get out of the way. Sound direction Let the scene establish the world: water, leaves, fabric, a little space. Add restrained tactile cues for messages, cards and votes. Give the winning choice one satisfying accent, then a clean Wabi × Shopify finish. Avoid a whoosh for every move. Bring a sound-led timing pass back before locking the edit. Handoff + finish Begin at 4:5, 1080 × 1350. Keep 60 fps review exports; confirm the final delivery frame rate together. Deliver the organized AE project with collected assets, a clean picture master, a sound mix and separate 48 kHz dialogue/ambience/SFX/music stems as applicable. Adapt 9:16 after the hero cut is approved. Current films are silent illustrative reviews, not live shopping captures. Product details are merchant snapshots unless marked as illustrative fixtures, as in the current Jenna’s birthday concept. Dialogue and votes are scripted. Confirm current product details and footage/music usage before launch. Shop Pay can be a later approved checkout beat; these cuts do not show a completed purchase. Reference: Shopify scene-setting film. Keep the warmth and clarity, with Wabi’s own visual language. Collection: https://shopify.joonas.wtf/ Assets: https://shopify.joonas.wtf/shopify/assets.html GAUNTLET ROUND 26 — CURRENT NATIVE UI STUDY Our tent, together has an additional 39-second comparison/vote/checkout study. Keep the shorter DTS v3 as an alternative. 0–5.75s: Existing two-shot DTS opening and one continuous pullback 6–11.5s: Current compact three-product native list 11.5–16s: Native Markdown comparison table; 14pt type, 8pt cell padding, neutral header 16–22.4s: Sam asks for muddy-bag space; Wabi points to Rumpus; native single-choice poll 22.4–25.1s: Four fictional votes, three for Rumpus; fixed rows, full-height result fills, viewer checkmark and faces 25.1–32.2s: Explicit quantity request; subtotal before shipping/tax; native checkout-link Pay pill 32.2–36.2s: System-sheet entrance; visibly labeled provisional merchant checkout (not a captured production screen) 36.2–39s: Sequential exit to Wabi × Shopify SOURCE BOUNDARY Frontend main ed8e33ff097eaf4bc95d91882db6ab1b8c2d50a1: ItemCardsView, ChatCardChrome, ChatCardTypography, MarkdownTableAttachment/MarkdownMetrics, PollCardView/PollCardOptions/ChoiceList, ChatViewController+Links and ChatCheckoutSheet. Backend main 8778e2e1de10cabc00abf5da06c9e0f73822104a: create_shopify_checkout and shop_create_checkout capability instructions. Wabi creates a checkout link; the person pays. Do not use PurchaseReviewSheet approval-wallet UI for this Shop route, infer a completed purchase, or invent delivery/payment details. Native-looking portions here are source-derived web adaptations, not simulator captures. Merchant page remains provisional pending a separately authorized reference capture. AE / SFX Keep product identities and type stable while scrolling. Use one soft arrival for the table; let the vote land as one restrained cluster with slight row stagger. Pay opens the sheet with weight, not a cross-dissolve. Leave an unhurried reading beat before the logo. No payment-success sound: no purchase is shown. GAUNTLET ROUND 27 — TIGHTER PAY HANDOFF (34 SECONDS) Latest Our tent, together keeps the Q73 comparison and voting read holds, but stops at the verified native checkout-link card instead of opening the provisional merchant page. Preserve the 39-second merchant illustration and the shorter 29-second DTS film as alternatives. 0–5.75s: two-shot DTS scene-setting opening, one continuous phone pullback 6–11.5s: three products in current native compact collection 11.5–16s: native Markdown comparison; stable reading hold 16–22.4s: Sam's muddy-bag requirement changes recommendation to Rumpus; Maya's poll 22.4–25.1s: authored 3-to-1 result; fixed rows, transformed full-height result fill, own-choice checkmark 25.1–28s: explicit request for one 4-person tent 28–31.2s: concise Rumpus subtotal before tax/shipping; native Pay-link card 31.2–31.85s: phone clears, with no readable-screen overlap 31.95–34s: Wabi × Shopify closing AE / SFX: keep the last checkout link legible; no invented Pay tap, purchase confirmation or success sound. Final arrival can be a soft resolved tone. Retain the table/vote timing instead of speeding the whole sequence. This is a silent web animatic for re-animation. SOURCE: frontend eb3c8ba848dfa1b0a3ab2051e3847db2170d97c4, backend8778e2e1de10cabc00abf5da06c9e0f73822104a. Remote compare confirms no iOS changes since Q73. Pay opens ASWebAuthenticationSession in source; this shorter film ends before that system sheet. Not a native capture or a runtime integration test. No merchant checkout layout is presented in this variant.