Olivia
Online
Vibecode
@vibecodeapp
The first ever app that builds apps. Try for FREE and publish your app to the App Store today at
San Francisco, CA
Joined March 2025
9 Following
72.5K Followers
1.4K Posts
Pinned Tweet
Introducing Built on iPhone.
Describe any app on your iPhone. Vibecode writes the Swift, builds, tests, and installs it DIRECTLY on your home screen.
No Mac. No Xcode. No Computer.
Powered by Opus 5.5. Live on the App Store now.
Use the link below to get 50% off your first month 👇🏼
This notebook app on the iPhone Duo is genius.
Couldn’t wait to try it so I made it myself.
1 prompt on @vibecodeapp
Remix it here: https://t.co/XHNenntxnU
Prompt 1, the full build:
Build Weather, a polished native iPhone weather app in SwiftUI in the iOS 26 system style of the iPhone's built-in Weather app: full-screen animated skies (rain, sun, snow, a starry night, clouds, thunderstorms with lightning), a big thin temperature over the sky, a glass Conditions card with the hourly row, the 10-day forecast with temperature range bars, a grid of glass tiles (UV index, sunset, wind compass, precipitation, feels like, humidity, visibility, pressure), a header that collapses as you scroll, a pager between saved cities, the locations list with live sky cards and search, a day detail sheet with a chart, and a precipitation map. The user's location is New York. It is Thursday, November 12, 2026, 8:41 AM in New York.
ASSETS
curl -L once and unzip flat: https://t.co/Jh5TQ6KjUp (weather-icon.png: use it as the app icon). Every sky, icon and chart is drawn in code or with SF Symbols (multicolor). No image generation is needed.
SHELL
Opens straight on the New York page: no splash, onboarding, permission prompts or sign-in. The status bar stays visible and white on every screen. Pages fill the screen edge to edge behind the status bar.
SCREENS
1. Location page (one per saved location, in a horizontal pager; see PAGER):
a. Sky: the page's SkyView fills the screen behind everything (see SKIES).
b. Header, centred, white, soft shadow: "MY LOCATION" (13 pt semibold, tracked, only on the first page); the city name (34 pt regular); the temperature (100 pt thin, "48°"); the condition (20 pt medium, "Rain"); "H:53° L:44°" (20 pt medium). About 300 pt tall at rest.
c. Collapse on scroll: as the page scrolls up 0 → 190 pt, the temperature, condition and H/L fade out and the city name slides up under the status bar with one line "48° | Rain" (20 pt medium) under it; that compact header stays pinned and the cards scroll under it, clipped by a soft 24 pt fade at its bottom edge. Scrolling back restores it.
d. Conditions card (glass, see LOOK): a top row "Conditions" (17 pt semibold) with "Temperature (°F)" (13 pt, white 60%) under it and at the right a 3-segment glass picker of icons (thermometer.medium = temperature, drop.fill = precipitation, wind = wind); a summary line (15 pt) "Rain ends around 9:30AM. Wind gusts are up to 18 mph."; a hairline; then a horizontal row of 24 hourly columns (52 pt wide): the hour ("Now" in bold first, then "9AM", "10AM"…), a multicolor SF Symbol (28 pt) with the precipitation % under it in #7FD3FF when ≥30%, and the value (20 pt medium). Sunrise and sunset get their own columns ("6:38AM" sunrise.fill "Sunrise", "4:41PM" sunset.fill "Sunset"). The picker swaps the row's values with a quick crossfade: temperature "48°", precipitation "80%" with drop symbols, wind "12" with a location.north.fill arrow rotated to the wind direction. Tap the card: the day detail sheet.
e. Next-hour card (only on a page where it is raining or snowing now): "Rain stopping in 35 min" (17 pt semibold) and "Next-hour precipitation" (13 pt, white 60%); a chart of 60 thin bars (one per minute, 2 pt wide, #7FD3FF), heavy at Now, tapering to nothing at 35 min, over three dashed grid lines labelled "Heavy", "Moderate", "Light" at the left; x labels "Now", "10m", "20m", "30m", "40m", "50m".
f. 10-day card: header "10-DAY FORECAST" with calendar (13 pt semibold, white 60%), then 10 rows (44 pt) separated by hairlines: the day (20 pt medium, "Today" first, then "Fri", "Sat"…), the multicolor symbol (with the precip % under it when ≥30%), the low (20 pt medium, white 60%, right-aligned), the range bar (a 4 pt capsule, 96 pt wide track at white 20%, with a filled segment from the day's low to its high placed on the whole 10 days' range; the fill is a horizontal gradient by temperature: ≤32° #5AC8FA, 45° #63D2A3, 55° #A6E05A, 65° #FFD60A, 75° #FF9F0A, ≥85° #FF453A), the high (20 pt medium, white). Today's bar has a 6 pt white dot with a 1.5 pt dark ring at the current temperature. Tap a row: the day detail sheet on that day.
g. Tiles: a 2-column grid of square glass tiles (12 pt gaps), each a header (SF Symbol + uppercase 13 pt semibold title, white 60%), a big value and a caption. In order: UV INDEX ("1", "Low", a 4 pt bar with a green→yellow→orange→red→purple gradient and a white dot at 1/11, "Low for the rest of the day."); SUNSET ("4:41PM", a sine curve with a horizon line and a glowing sun dot on it at the current time, "Sunrise: 6:38AM"); WIND (a compass dial: 72 ticks, N E S W, an arrow pointing to the wind direction, "12" over "mph" in the centre; beside it "Wind 12 mph", "Gusts 18 mph", "Direction 40° NE"); PRECIPITATION ("0.4″", "Today", "1.1″ expected in next 24h."); FEELS LIKE ("44°", "Wind is making it feel colder."); HUMIDITY ("93%", "The dew point is 46° right now."); VISIBILITY ("4 mi", "Light rain is reducing visibility."); PRESSURE (a gauge dial of ticks with a needle and an arrow.down "Falling", "29.86" over "inHg"). Values per location come from FIXTURES.
h. Footer: "Weather for New York" and "Learn more about weather data and map data" (13 pt, white 60%), then space for the bottom bar.
2. Bottom bar (fixed over every page): a 44 pt glass circle with map (left), a glass capsule in the centre with location.fill for the first page then one dot per page (7 pt, current white, others white 40%), a 44 pt glass circle with list.bullet (right). Tapping a dot jumps to that page. The map circle opens the map; the list circle opens the locations list.
3. Locations list (full-screen, zoom transition: the current page shrinks into its card): "Weather" (34 pt bold) and a 36 pt glass circle with ellipsis at the right; a vertical list of 112 pt cards (20 pt corners, 10 pt gaps), each with its own live mini SkyView, the city (24 pt semibold) and under it "My Location" or the local time (15 pt), the condition at the bottom left (15 pt), the temperature at the top right (52 pt light) and "H:53° L:44°" at the bottom right (15 pt). A glass search bar fixed at the bottom: magnifyingglass, "Search for a city or airport", mic.fill. Tap a card: zoom back into that page. Typing in search lists matching cities from FIXTURES' search list; tapping one shows its page as a sheet with "Cancel" and "Add" at the top; Add appends it to the list and the pager. Swipe a card left to delete (not My Location).
4. Day detail sheet (large detent, dark sky-tinted background): "Conditions" title and an xmark; a day strip (Thu 12, Fri 13 … Sat 21: 3-letter day over the date in a 36 pt circle, selected white with dark text); the day's symbol, "48°" (32 pt) and "H:53° L:44°"; a metric menu button ("Temperature" with chevron.up.chevron.down: Temperature, Precipitation, Wind, Feels Like, Humidity) above a Swift Charts line chart of the day's 24 hours (the line coloured with the temperature gradient, a soft area fill, the current hour's dot, hour labels 12AM 6AM 12PM 6PM, the min and max marked "L" and "H"); "Daily Summary" with a sentence for the day. Changing the day or the metric animates the chart.
5. Map (full-screen cover): a SwiftUI Map (standard, muted) centred on the current page's city; an animated precipitation overlay of soft radial blobs (blue #2F8CFF → green #3FD08A → yellow #FFD60A → magenta #E040FB at the core) drifting slowly northeast; the city's temperature pin (a 48 pt glass circle with the symbol and "48°"); a glass legend card at the top left ("Precipitation", Extreme, Heavy, Moderate, Light with a gradient strip); an xmark circle at the top left, a layers circle at the top right; a glass bottom card "Forecast" with a play button and a timeline (7AM … 7PM, "Now" marked) that plays the blobs' drift over 4 s.
PAGER
A custom horizontal pager driven by ONE offset value, so a real drag and HOOK MODE's scripted drag run the same code: the content follows the finger 1:1 and settles with a spring (≤ 0.25 s, no overshoot past the next page); the sky crossfades between the two pages' SkyViews by the drag progress (never a blank or black frame). Each page keeps its own scroll position.
SKIES (Components/Sky/SkyView, Canvas + TimelineView, 60 fps)
Every sky is a vertical gradient plus seeded particles whose positions are pure functions of (seed, time since the sky started), so a run is identical every time, and every sky starts PRE-WARMED: at its first frame the screen is already full of rain or snow mid-fall, never empty.
- rain: #4E5D6E → #2E3946; three soft dark cloud bands drifting left at 8 pt/s; 160 streaks (1.2 x 18–30 pt, white 30–45%, slanted 10°, 1,100–1,500 pt/s); card tint #1F2833.
- clearDay: #2C7BE0 → #6AB6F6; a sun glow at the top left (a 260 pt radial white → clear), three faint lens-flare rings along the diagonal shimmering slowly, two thin high clouds drifting; card tint #1D5FB0.
- snow: #6F8197 → #AFBDCC; 140 flakes (2–5 pt white, 60–85%), 35–80 pt/s, swaying sideways (sine, 20 pt); card tint #4C5D71.
- clearNight: #0A1430 → #1C2B57; 110 stars (1–2 pt) twinkling at random phases, a soft moon glow at the top right; card tint #101C3C.
- cloudy: #6B7C90 → #9AA8B8; big soft cloud shapes (blurred ellipses) drifting at 6–12 pt/s; card tint #4A596B.
- thunderstorm: #262B40 → #474C66; dark cloud bands, the rain particles, and lightning: the whole sky flashes white (opacity 0 → 0.32 → 0 in 0.08 s) twice 0.12 s apart with a jagged white bolt (a 7-segment path from the top, 2 pt, glow) shown for 0.15 s; the first pair fires 0.5 s after its page becomes current, the next 1.0 s later, then every 4 s; card tint #1C1F2E.
Cards on a page use its sky's card tint at 55% over .ultraThinMaterial with a 0.5 pt white 15% border.
FIXTURES (Data/Fixtures.swift; the day is Thursday, November 12, 2026)
Locations, in page order (local time; current; condition; sky; H/L; summary):
1. New York (My Location); 8:41 AM; 48°; Rain; rain; H:53° L:44°; "Rain ends around 9:30AM. Wind gusts are up to 18 mph." Hours from Now: 48 cloud.rain.fill 80%, 9AM 48 cloud.rain.fill 70%, 10AM 49 cloud.drizzle.fill 40%, 11AM 50 cloud.fill, 12PM 51 cloud.fill, 1PM 52 cloud.sun.fill, 2PM 53 cloud.sun.fill, 3PM 53 sun.max.fill, 4PM 51 sun.max.fill, Sunset 4:41PM, 5PM 50 moon.stars.fill, then cooling to 44 at 6AM with sunrise 6:38AM. 10 days (symbol, precip, low, high): Today cloud.rain.fill 80% 44 53; Fri sun.max.fill 41 55; Sat cloud.sun.fill 43 58; Sun cloud.fill 46 57; Mon cloud.rain.fill 70% 45 52; Tue cloud.sun.fill 39 50; Wed sun.max.fill 37 49; Thu cloud.snow.fill 40% 33 42; Fri cloud.sun.fill 35 46; Sat sun.max.fill 38 51. Tiles as in SCREENS 1g.
2. Miami; 8:41 AM; 81°; Sunny; clearDay; H:84° L:72°; "Sunny conditions will continue all day. Wind gusts are up to 14 mph." Hours: 81 sun.max.fill, 9AM 82, 10AM 83, 11AM 84, 12PM 84 cloud.sun.fill, 1PM 84, 2PM 83 cloud.sun.fill, 3PM 82 cloud.bolt.rain.fill 40%, 4PM 81, 5PM 80 sun.max.fill, Sunset 5:32PM. 10 days 72–86, Sat cloud.bolt.rain.fill 40%. UV 6 High, feels like 86°, humidity 74%, wind 9 mph E.
3. Denver; 6:41 AM; 27°; Snow; snow; H:31° L:19°; "Snow will continue until 11AM. 2–4″ expected." Hours: 27 cloud.snow.fill 90% … 31 at 2PM, sunrise 6:43AM. 10 days 19–52, Fri clearing. Next-hour card "Snow stopping in 52 min". Feels like 18°, visibility 1 mi.
4. Tokyo; 10:41 PM; 54°; Clear; clearNight; H:61° L:50°; "Clear conditions tonight, continuing through the morning." Hours: 54 moon.stars.fill, cooling to 50, sunrise 6:11AM sunny 60s. 10 days 47–64.
5. London; 1:41 PM; 50°; Cloudy; cloudy; H:52° L:45°; "Cloudy conditions will continue for the rest of the day." 10 days 41–55 with two rainy days.
6. Chicago; 7:41 AM; 46°; Thunderstorms; thunderstorm; H:49° L:38°; "Thunderstorms until 10AM. Wind gusts are up to 32 mph." Hours: 46 cloud.bolt.rain.fill 90%, 8AM 46 cloud.bolt.rain.fill 80%, 9AM 47 cloud.rain.fill 60%, then clouds and 38 overnight. 10 days 31–49.
7. Sydney; 12:41 AM (Fri); 66°; Partly Cloudy; clearNight with two drifting clouds; H:77° L:63°.
Write fitting hourly (24 h), 10-day and tile values for every location from these anchors. Search list (not saved): Los Angeles 64° Sunny, Paris 47° Cloudy, San Francisco 57° Partly Cloudy, Seattle 49° Rain, Toronto 39° Snow, Mumbai 88° Haze, Dubai 86° Sunny, Reykjavík 34° Snow, Honolulu 82° Sunny, Austin 66° Cloudy.
HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the RIGHT edge (x 378–402, y 300–360 pt), drawn in its own window above every sheet, cover and the keyboard (a tap there closes whatever is open), resets everything to this state and plays this run through the real pager code, identical every time (seconds from the tap): 0.00 with no animation: page 1 (New York) current, scrolled to the top, header expanded, every sheet and cover closed, Conditions on Temperature, every page's sky restarted pre-warmed (rain already falling everywhere on the New York sky); 0.90 the touch dot lands at (300, 470) pt; 1.00 → 1.35 it drags to (70, 470), ease-in-out, and the pager follows it 1:1; 1.35 release: the pager settles on page 2 with the normal spring; 1.40–1.60 the dot fades; then hold (page 2's sky runs its own animation; a thunderstorm page fires its lightning on the schedule in SKIES).
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, glides with the drag, and fades after release.
- What the eye must see: frame 0 fully drawn (sky, header, Conditions card, bottom bar; no fade-in, no grey placeholder, no empty sky); the incoming page's content slides with the finger while the skies crossfade, never a flash of black or white; flashes ≤ 0.12 s; the status bar never hidden. Waits use these times, not the app's normal delays.
LOOK
Text white (secondary white 60%), SF Pro (no rounded fonts); hairlines white 15%. Glass cards: 20 pt corners, 16 pt padding, 16 pt side margins, 10 pt between cards (sky card tint + .ultraThinMaterial + border, as in SKIES). Glass circles and capsules for the bottom bar and buttons. Springs under 350 ms, light haptics on taps and page changes, pressed states (scale 0.97).
RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait. Swift Charts for charts, MapKit for the map.
- Deterministic fixtures. No backend, login, permissions, location services, analytics or network calls at runtime (the map's tiles are the only network use). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Files under 300 lines, big bodies split into subviews, no long chained expressions; draw particles in one Canvas per sky, not one view per particle.
- Keep every file inside /home/user/workspace (/tmp is denied).
REMIX-READY
Theme/Theme.swift (colours, fonts, the temperature gradient stops; no colour literals elsewhere), Theme/Copy.swift (every word), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE targets and timings). Codable models with String ids (Location, HourForecast, DayForecast, Tile, SkyKind) behind one WeatherDataSource protocol (FixtureWeatherSource) feeding an @Observable LocationsStore (saved pages, current index, search). Every page renders from ONE value type, ForecastPage (eyebrow e.g. "MY LOCATION", title, bigValue e.g. "48°", condition, hiLoText, sky: SkyKind, summary, conditionsTitle, hours: [HourItem(label, symbol, accentText e.g. "80%", valueText e.g. "48°")], nextHour: optional, daysTitle, days: [DayItem(label, symbol, accentText, lowText, highText, low, high)], tiles: [TileItem(symbol, title, value, unit, caption, style)], footer), built from a Location by ForecastPage(location:); the pager, list cards and views only read ForecastPage, so a remix can add a page that isn't a city (a calendar, a surf report, a hair forecast) by building one ForecastPage. Components/: SkyView, GlassCard, ConditionsCard, HourColumn, NextHourChart, DayRow, RangeBar, TileGrid, CompassDial, SunArc, PressureGauge, PagerView, PageDots, LocationCard, TouchDot. Features/<Screen>/. README.md under 80 lines: file map; how to add a city, add a sky, change units (°C), and how ForecastPage works (one value per page); 3 one-prompt remixes (a surf forecast where wave height is the big number; a hair forecast with a Frizz Index tile; a dog-walk forecast with paw-safe pavement temperatures). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the page dots capsule for 1 s to reset everything to launch (pages, scroll positions, sheets, added cities, picker).
BUILD
Theme, Copy and Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. The location page (sky, header, Conditions card, 10-day, tiles, collapse) first, then the pager and bottom bar, then HOOK MODE, then the locations list and search, then the day detail sheet, then the map. Fetch weather-brand.zip as soon as the shell runs; check the file exists, never view it. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
+1 prompt, the remix that forecasts your meetings:
Add My Calendar as page 2: today's meetings as the weather, one ForecastPage. Eyebrow "MY CALENDAR", title "Today", big "6", condition "Cloudy with a chance of meetings", "H:2h L:15m", thunderstorm sky. Conditions row 9AM–5PM, each hour's meeting as icon + name (sun.max.fill Free, cloud.fill Standup, cloud.rain.fill Planning, cloud.bolt.rain.fill All-hands at 2PM). 10-day rows: this week's meetings. Tiles: Focus Time, Meeting Index (9, Extreme), Feels Like ("Back-to-backs make it feel longer"). HOOK MODE still opens on New York exactly as it is; its swipe now lands on My Calendar.
Everyone builds a weather app first.
This one has live animated skies, hourly and 10-day forecasts, and a rain map.
All made in 1 prompt. One more made it forecast your meetings.
Remix on @vibecodeapp and make it your own today
This app that finds a fair spot for your whole group to meet is genius.
Couldn't wait for it to be real so I made it myself.
1 prompt on @vibecodeapp
Remix it here: https://t.co/2Cbzh6rdOs
Prompt 1, the full build:
Build Snagzy, an original deals shopping app for iPhone in SwiftUI, in the genre of Temu: a white, orange-accented marketplace of cheap finds with a search pill, category tabs, an 11.11 sale banner, Lightning deals with countdowns, a 2-column product feed with sold counts and stars, a spin-to-win coupon wheel, product pages, add-to-cart that flies into the cart, a cart with a free-shipping bar, checkout and orders. Its own name, logo and words, all below. The shopper is Maya Chen. Today is Wednesday, November 11, 2026 (11.11, the biggest sale day of the year).
ASSETS
curl -L once each and unzip flat: https://t.co/2qz3RMxOUm (snagzy-icon.png: use it as the app icon) and https://t.co/TIVd7vkmrP (p-*.jpg: 800x800 product photos, one per product, named in FIXTURES). Put every image in the asset catalog under its file name. The Snagzy logo is drawn in code (SnagzyMark in Brand.swift, a unit box s): a white bag body, a rounded rectangle from (0.22 s, 0.36 s) to (0.78 s, 0.82 s) with 0.07 s corners; a handle, the upper half of a circle of radius 0.14 s centred at (0.5 s, 0.36 s), stroked 0.06 s; an orange lightning bolt cut out of the body (polygon 0.545,0.44 → 0.415,0.615 → 0.495,0.615 → 0.455,0.755 → 0.595,0.565 → 0.51,0.565). On #FB7701 it is the icon; in the app it is drawn orange with a white bolt. No image generation is needed.
SHELL
Opens on Home: no splash, onboarding, sign-in, wheel pop-up or permission prompts. A 4-item tab bar, white with a hairline #EDEDED on top: Home (house.fill), Categories (square.grid.2x2.fill), You (person.fill), Cart (cart.fill with a #FB4A00 badge, 3 at launch). 10 pt labels; selected #FB7701, unselected #777777. The status bar stays visible and dark on every screen.
SCREENS
1. Home (one ScrollView, white):
a. Search row (fixed above the scroll, white): SnagzyMark 30 pt at the left; a search pill (40 pt tall, 1.5 pt #222222 outline, fully rounded) with the placeholder "cloud slides" in #999999, a camera icon inside at the right, then a 32 pt black circle with a white magnifyingglass at the pill's right end; at the far right a 34 pt bell (bell, #222222) with a 7 pt #FB4A00 dot. Tapping the pill opens Search.
b. Category tabs (fixed under the search row): All, Women, Home, Men, Beauty, Kids, Sports, Jewelry (15 pt; selected #222222 semibold with a 2.5 pt #222222 underline that slides, others #666666); a tap filters the feed.
c. A green strip (#EEF8F0, 28 pt): checkmark.shield.fill + "Free shipping" · "Free returns within 90 days" (13 pt, #0A8A3E).
d. The 11.11 banner: a 128 pt card (12 pt corners, 12 pt side margins), a #FB7701 → #FF3D00 diagonal gradient with soft white confetti dots drawn in code, "11.11 BIG SALE" (32 pt black weight, white, slight italic), "Up to 90% off" (15 pt semibold white), the banner's own countdown "Ends in 17:42:10" in white mono digits ticking every second, and a white "Shop now" capsule (orange text). Tap: the Lightning deals page.
e. "Lightning deals" row: bolt.fill (#FB7701) + "Lightning deals" (18 pt bold) + the Lightning pill (CountdownPill: a #FB7701 capsule, white text "Ends in 00:09:59", monospaced digits) + "See all ›" at the right (#666666). Under it a horizontal row of deal cards (112 pt wide): the photo (112x112, 8 pt corners), the price (17 pt heavy #FB4A00, "$" smaller), a red #E02020 "-84%" tag over the photo's top left, and a stock bar (6 pt, track #FFE0CC, fill #FB4A00) with "Only 2 left!" (11 pt semibold #E02020) under it.
f. "Recommended for you" (18 pt bold), then a 2-column grid (8 pt gaps, 12 pt margins) of ProductTile: the square photo (8 pt corners) with badges over it (top left: a discount tag "-84%"; bottom: a translucent black 55% strip with an urgency line, e.g. "Almost sold out" or "1.2K bought in the last hour"); the title (14 pt, 1 line); a price row: price (18 pt heavy #FB4A00), the struck "was" price (12 pt #999999, strikethrough); "★★★★★ (2,318)" (11 pt, stars #222222); "12K+ sold" (11 pt #999999) and a 30 pt cart button at the right (cart.badge.plus, 1.5 pt #222222 circle outline). Tap the tile: the product page. Tap the cart button: add one to the cart with the fly-to-cart animation.
g. A floating Spin button over Home's right edge, 120 pt above the tab bar: a 62 pt mini wheel (8 alternating #FB7701/#FFF1E0 wedges) turning slowly (one turn per 6 s) with a "SPIN" capsule (white text on #E02020) under it. Tap: the wheel.
2. Lightning deals page (push): an orange header (#FB7701) with "Lightning deals", the countdown pill (white with orange text) and a back chevron; rows: photo 96 pt, title (2 lines), price + struck price + "-84%" tag, the stock bar with "93% claimed · Only 2 left!", a small orange "Buy now" capsule (adds to the cart with the fly animation).
3. Product page (push): the photo full width (square) with "1/1" in a capsule; a discount tag; under it a #FFF1E6 bar: bolt.fill + "Lightning deal" + "Ends in 00:09:59" ticking; the price (30 pt heavy #FB4A00), the struck price, "-84%"; the title (17 pt); "★ 4.8 (2,318 reviews) · 12K+ sold"; badges "Only 2 left!" and "Almost sold out" (UrgencyBadge); "Color" chips (three per product, text chips, selected with a 1.5 pt #222222 border) and a quantity stepper; "Free shipping · Arrives Nov 18–23" with a truck icon; "Free returns within 90 days"; Reviews: three cards (initials avatar, name, ★★★★★, date, text); a sticky bottom bar: a heart (wishlist) and "Add to cart" (a full #FB7701 capsule, 50 pt, 17 pt bold white). Add to cart: the fly-to-cart animation, then the button shows "Added ✓" for 1.2 s.
4. Fly-to-cart (Components/FlyToCart, one overlay used everywhere): a 64 pt copy of the product photo (8 pt corners, soft shadow) lifts from the tapped spot and arcs to the Cart tab icon in 0.5 s (a quadratic curve bowing up, scale 1 → 0.3, always visible, never fades early); as it lands the Cart badge pops (1 → 1.35 → 1, 0.25 s) and its number rolls up one; a dark capsule toast "Added to cart" with checkmark.circle.fill (#32C766) slides down under the status bar and holds 1.4 s.
5. Cart (tab): "Cart (4)" title; a free-shipping bar: "Free shipping unlocked ✓" in #0A8A3E on #EEF8F0 (under $10: "Add $3.21 more for free shipping" with an orange progress bar); rows with a round orange checkbox, the 80 pt photo, the title, the chosen colour, the price + struck price, a −/+ stepper (count rolls), swipe to delete; "Almost sold out" and "Only 2 left!" UrgencyBadges on two rows; a line "You're saving $184.21 today!" (#0A8A3E); a sticky bottom: the total ("$41.12", 20 pt heavy) and "Checkout (4)" (#FB7701 capsule). Launch cart: sunset lamp, cloud slides (Lilac), claw clips.
6. Checkout (sheet): shipping address "Maya Chen · 214 Bedford Ave, Apt 3R, Brooklyn, NY 11211", delivery "Standard · Free · Nov 18–23", payment "Apple Pay" (selected) or "Card •••• 4242", the coupon line "$100 coupon bundle" (after the wheel: −$4.00), the summary (items, shipping Free, total); "Submit order" (#FB7701, 50 pt). Submit: the button shows a spinner 0.8 s, then Order placed: a full-screen white page, a 96 pt #32C766 check drawing itself, 80 confetti pieces (orange, gold, red, white) falling, "Order placed! 🎉", "Arrives Nov 18–23", "Order #SNZ-1111-4821", "Keep shopping" (orange) and "View order"; the cart empties and the order appears in You → Orders.
7. Spin wheel (full-screen cover): black 55% dim; a white card (20 pt corners): "Spin to win" (24 pt heavy) and "Your 11.11 welcome gift" (#666666); the wheel (300 pt): 8 wedges alternating #FB7701 and #FFF1E0 with 4 pt white separators and a white rim with 16 small gold bulbs that blink in turn; labels along the radius (bold, white on orange, orange on cream): "$100 coupon bundle", "30% OFF", "Free gift", "$20 OFF", "90% OFF", "$5 OFF", "Free shipping", "$50 OFF"; a gold pointer at the top; a 76 pt #E02020 hub button "SPIN". Spin: 4.2 s, 5 full turns then lands on "$100 coupon bundle" (always), ease-out (cubic), a light haptic per wedge passing the pointer; landing: the wedge glows, 80 confetti pieces burst from the centre, and the card's lower part springs to "Congratulations! 🎉" + "You won a $100 coupon bundle" + a #FB7701 "Claim now" capsule; Claim: the cover closes and a toast "$100 coupon bundle added". xmark at the top right closes it.
8. Categories (tab): the search pill on top; a left rail (96 pt, #F6F6F6) of categories (Featured, Women, Home & Kitchen, Men, Beauty, Kids & Toys, Sports, Electronics, Jewelry; selected white with a 3 pt #FB7701 bar); at the right "Shop by category" and a 3-column grid of 72 pt round photos with names under them; a tap shows that category's products in a 2-column grid.
9. Search (push): the field focused, "Recent" chips (cloud slides, sunset lamp, capybara), "Trending" with a flame (1 star projector, 2 claw clips, 3 tumbler, 4 dog hoodie); typing filters products live by title; results in the 2-column grid.
10. You (tab): Maya's 64 pt initials avatar (MC on #FB7701), "Maya Chen", "Snagzy member since 2025"; a row of order states with icons and counts (Processing 1, Shipped 2, Delivered 14, Returns 0); "Coupons & offers" ("$100 coupon bundle" after the wheel), "Credit $5.00", "Wishlist (6)", "Following shops", "Addresses", "Settings". Orders (push): order cards with product thumbnails, status chips (Processing, Shipped, Delivered) and "Track".
FIXTURES (Data/Fixtures.swift)
Products (id = photo; title; price; was; rating; reviews; sold; colours; category; urgency line):
1. p-sunset-lamp; "LED Sunset Projection Lamp, 16 Colors"; $6.98; $42.99; 4.8; 2,318; 12K+; Black, White, Pink; Home & Kitchen; "Only 2 left!"
2. p-cloud-slides; "Cloud Slides, Pillow Soft, Unisex"; $5.21; $29.99; 4.7; 9,433; 100K+; Lilac, Cream, Black; Women; "1.2K bought in the last hour"
3. p-earbuds; "Wireless Earbuds with Charging Case"; $7.86; $59.99; 4.6; 5,102; 45K+; White, Black, Pink; Electronics; "Almost sold out"
4. p-star-projector; "Galaxy Star Projector Night Light"; $12.36; $79.99; 4.8; 1,207; 8.9K+; White, Black, Blue; Home & Kitchen; "Lowest price in 180 days"
5. p-frother; "Handheld Milk Frother, USB-C"; $2.98; $19.99; 4.7; 3,860; 33K+; Black, White, Sage; Home & Kitchen; "Only 4 left!"
6. p-tumbler; "40 oz Tumbler with Handle & Straw"; $8.97; $45.00; 4.8; 4,412; 21K+; Pink, Sage, Cream; Home & Kitchen; "3.4K bought in the last hour"
7. p-dog-hoodie; "Cozy Dog Hoodie, Teddy Fleece"; $4.47; $24.99; 4.9; 866; 6.4K+; Cream, Brown, Pink; Featured; "Almost sold out"
8. p-blender; "Portable Mini Blender, 6 Blades"; $9.42; $49.99; 4.6; 2,045; 15K+; Mint, Pink, White; Home & Kitchen; "Only 3 left!"
9. p-ice-roller; "Ice Roller for Face & Eyes"; $3.42; $21.99; 4.7; 1,733; 18K+; Blue, Pink, Clear; Beauty; "862 bought in the last hour"
10. p-puffer-tote; "Quilted Puffer Tote Bag"; $8.15; $46.00; 4.8; 1,120; 9.7K+; Silver, Black, Cream; Women; "Almost sold out"
11. p-car-vacuum; "Cordless Mini Car Vacuum"; $11.98; $69.99; 4.5; 902; 7.2K+; Black, Grey, White; Electronics; "Only 5 left!"
12. p-utensils; "Silicone Kitchen Utensil Set, 12 pcs"; $9.99; $55.99; 4.8; 3,301; 26K+; Sage, Black, Grey; Home & Kitchen; "Lowest price in 180 days"
13. p-claw-clips; "Matte Claw Clips, 8 Pack"; $2.49; $16.99; 4.8; 14,210; 120K+; Pastel, Neutral, Black; Beauty; "5.1K bought in the last hour"
14. p-smartwatch; "Smart Watch, Fitness Tracker"; $14.97; $99.99; 4.5; 1,876; 11K+; Black, Pink, Silver; Electronics; "Only 2 left!"
15. p-string-lights; "Fairy String Lights, 33 ft"; $4.39; $25.99; 4.7; 6,744; 52K+; Warm, Cool, Multi; Home & Kitchen; "Almost sold out"
16. p-eye-mask; "Heated Steam Eye Mask"; $6.75; $34.99; 4.6; 512; 4.1K+; Pink, Grey, Blue; Beauty; "Only 3 left!"
17. p-lint-remover; "Rechargeable Lint Shaver"; $5.37; $29.99; 4.7; 2,099; 14K+; White, Coral, Grey; Home & Kitchen; "1.8K bought in the last hour"
18. p-waffle; "Mini Heart Waffle Maker"; $10.89; $49.99; 4.8; 731; 5.5K+; Red, Pink, Mint; Home & Kitchen; "Almost sold out"
19. p-phone-tripod; "Phone Tripod with Remote"; $5.67; $32.99; 4.6; 3,987; 31K+; Black, White, Pink; Electronics; "Only 4 left!"
20. p-desk-org; "Desk Organizer with Drawers"; $6.24; $36.99; 4.7; 1,044; 8.0K+; White, Pink, Sage; Home & Kitchen; "Lowest price in 180 days"
21. p-press-nails; "Press-On Nails, 24 pcs, Glossy Pink"; $3.88; $19.99; 4.6; 7,021; 60K+; Pink, Nude, Red; Beauty; "2.7K bought in the last hour"
22. p-capybara; "Giant Capybara Plush, 20 in"; $9.88; $49.99; 4.9; 2,688; 17K+; Brown, Cream, Pink; Kids & Toys; "Only 2 left!"
23. p-hoodie; "Oversized Fleece Hoodie"; $11.49; $59.99; 4.7; 5,566; 40K+; Oatmeal, Black, Sage; Men; "Almost sold out"
24. p-sneakers; "Breathable Knit Running Sneakers"; $16.98; $89.99; 4.6; 9,433; 100K+; White, Grey, Black; Men; "3.9K bought in the last hour"
Discount = round((was − price) / was × 100), shown "-84%". Lightning deals row and page: sunset lamp, earbuds, capybara, smartwatch, frother, claw clips (each "Only 2 left!"…"Only 6 left!", 81–96% claimed). Home's grid order: cloud slides, sunset lamp, capybara, earbuds, tumbler, dog hoodie, star projector, claw clips, then the rest. Reviews for the sunset lamp: Jasmine R. "Turned my room into golden hour. Obsessed 🧡" (Nov 2); Marcus T. "Way brighter than I expected for the price" (Oct 28); Elena V. "Bought 3 as gifts lol" (Oct 19). Write three fitting reviews for every other product (first name + initial, a date in Oct–Nov 2026).
HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the LEFT edge (x 0–24, y 300–360 pt), drawn in its own window above every sheet, cover, toast and the keyboard (a tap there closes whatever is open), resets everything to this state and plays this run through the real countdown, cart and toast code, identical every time (seconds from the tap): 0.00 with no animation: Home scrolled to the top, All selected, every photo drawn, Cart badge 3, the Lightning pill reading "Ends in 00:00:02" (the banner's own countdown keeps ticking normally); 0.25 the pill rolls to 00:00:01; 0.50 it rolls to 00:00:00 and flashes white (0.1 s); 0.70 it snaps back to "Ends in 23:59:59" with a bounce (scale 1.15 → 1.0, spring) while a small arrow.clockwise in the pill spins once; 0.85 the touch dot lands on the first grid tile's cart button; 1.00 press: the fly-to-cart arc (0.5 s) to the Cart tab, the badge 3 → 4 pops, the "Added to cart" toast holds 1.4 s; 2.40 the dot fades; hold. After the run the pill counts down normally from 23:59:59.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, shrinks to 0.9 while pressed, glides 0.15 s between points, and fades after its last release.
- What the eye must see: frame 0 fully drawn (no fade-in, no grey placeholder); countdown digits roll (the old digit slides up and out, the new one slides in), never blink or jump; the flying photo is visible for the whole arc; badges pop, counts roll; toasts hold ≥1.2 s; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Decode every photo off the main thread at launch; warm up haptics at launch.
LOOK
White #FFFFFF backgrounds, #F6F6F6 grouped fills, text #222222, secondary #666666, tertiary #999999, hairlines #EDEDED. Brand orange #FB7701 (buttons, selected tab, pills); price orange-red #FB4A00; deal red #E02020 (discount tags, low stock); success green #0A8A3E (text) and #32C766 (checks); gold #FFC233 (wheel pointer, bulbs). SF Pro: 14 pt body, heavy prices with a smaller "$", monospaced countdown digits. 8 pt corners on photos, capsules for buttons and pills. Pressed states darken; buttons scale to 0.97.
RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures. No backend, login, permissions, analytics or network calls at runtime (all photos are bundled). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.
- Keep every file inside /home/user/workspace (/tmp is denied).
REMIX-READY
Theme/Brand.swift (the name, SnagzyMark, a Copy enum with every word), Theme/Theme.swift (colours, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE targets and timings). Codable models with String ids (Product, Review, CartItem, Order, Coupon, Category, Urgency) behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (CatalogStore, CartStore, DealsStore with one shared Clock for every countdown, WheelStore, OrderStore); views never read Fixtures. Every urgency element (countdown pills, discount tags, struck "was" prices, "Only N left!", "Almost sold out", "bought in the last hour", "Lowest price in 180 days", stock bars) is drawn by ONE view, Components/UrgencyBadge (Urgency.Kind: countdown, discount, wasPrice, lowStock, almostGone, boughtRecently, lowestPrice, stockBar), reading one @Observable UrgencyStyle from the environment, so a remix can restyle, hide or animate all of them at once. Components/: UrgencyBadge, CountdownPill, RollingDigits, ProductTile, DealCard, PriceRow, FlyToCart, CartBadge, Toast, SpinWheel, Confetti, TouchDot, SnagzyTabBar, SearchRow. Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, swap the products and photos; how UrgencyBadge works (one place to change every badge); how to add a wheel prize; 3 one-prompt remixes (Snagzy for a local farmers' market with pickup times; for your Etsy shop with your own products; a sneaker-drop app with raffles). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the Home tab icon for 1 s to reset everything to launch (cart, coupons, orders, wheel, scroll position, tab).
BUILD
Theme, Brand and Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Home (search row, tabs, strip, banner, Lightning deals row, the grid with UrgencyBadge) first, then the product page and fly-to-cart, then HOOK MODE, then the cart and checkout with Order placed, then the spin wheel, then Categories, Search, You and Orders. Fetch snagzy-brand.zip and media.zip as soon as the shell runs; check each file exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
+1 prompt, the remix that made it honest:
Replace the search row's bell with a small "Honest" switch (off at launch, after the reset and when HOOK MODE starts). Turning it on: every UrgencyBadge hides and a copy of it falls from its spot in a full-screen overlay (not clipped by its tile) off the bottom of the screen with gravity, 0.8 s, staggered 25 ms, spinning ±40°. Then calm grey labels fade in where they were: "In stock", "Ships in 8–12 days", "Same price tomorrow"; "Lightning deals" reads "Deals". Off brings them back. HOOK MODE keeps every timing, but at 0.85 the dot lands on the switch and presses it at 1.00.
It's 11.11, the biggest shopping day of the year.
This one has lightning deals, a spin-to-win wheel, a real cart and checkout.
All made in 1 prompt. One more made it Temu, but honest.
Remix on @vibecodeapp and make it your own today
The hardest part of the NYC subway is picking the right stairs.
So I built 3D directions that show which car to board and which stairs to take.
2 prompts on @vibecodeapp
Remix it here: https://t.co/QUoGZXzpwr
Prompt 1, the full build:
Build Twirl, an original short-video app for iPhone in SwiftUI, in the genre of TikTok: a For You feed of full-screen videos you swipe through, double-tap hearts, the right rail with a spinning sound disc, comments, share, LIVE with gifts that take over the screen, Following, Friends, Inbox, Discover, the profile grid and posting a video. Its own name, logo and words, all below. The user is Maya Chen (@maya.makes). Today is Tuesday, November 10, 2026.
ASSETS
curl -L once each and unzip flat: https://t.co/jasA0oe2hX (twirl-icon.png: use it as the app icon) and https://t.co/x3lyxLXpn3 (the clips v-*.mp4 and live-jess.mp4: 720x1280 H.264, 8-12 s, no audio track; a JPEG of each clip's first frame with the same name; av-* 400 px avatars; gift-* 512 px transparent PNGs). Bundle the clips as resources and put every image in the asset catalog under its file name. The Twirl logo is drawn in code (TwirlMark in Brand.swift, in a unit box s): a ring, Circle().trim(from: 0, to: 0.78) rotated -20° so the gap sits at the upper right, diameter 0.43 s, stroke 0.11 s with round caps, around a rounded play triangle 0.19 s tall nudged 0.025 s right of centre; drawn three times: cyan #25F4EE offset (-0.022 s, -0.022 s), pink #FE2C55 offset (+0.022 s, +0.022 s), white on top. No image generation is needed.
SHELL
Opens on Home's For You: no splash, onboarding, sign-in or permission prompts. A 5-item tab bar, 49 pt, opaque black with a hairline (white 10%) on top: Home (house.fill), Friends (person.2.fill), Create (a 44x30 pt white rounded rectangle, 8 pt corners, a 4 pt cyan #25F4EE sliver showing at its left edge and a pink #FE2C55 sliver at its right, a black plus; no label), Inbox (ellipsis.message.fill, a #FE2C55 badge "7"), Profile (person.fill). 10 pt labels under the icons; selected white, unselected #8A8B91. The video area ends at the tab bar's top. The status bar stays visible on every screen (white on dark screens, dark on light ones).
SCREENS
1. Home. Top bar over the video (no background, a black 35% → 0 gradient behind it): at the left a LIVE glyph (a 28x20 pt rounded-rectangle outline, 2 pt white, "LIVE" 7 pt black weight inside; opens the LIVE room); centred "Following" and "For You" (17 pt semibold; selected white with a 24x2.5 pt white underline that slides between them, unselected white 60%; a 5 pt red dot after Following); magnifyingglass (22 pt) at the right (opens Discover). Under it the feed: Components/VerticalPager, a custom vertical pager driven by one offset value (the current index plus the drag translation). A drag moves the pages 1:1 with the finger; a release past 22% of the height or a fast flick settles on the next/previous page with a spring (response 0.32, damping 0.86), otherwise it springs back. The page that becomes current plays from 0:00; pages that leave pause and rewind.
2. Video page (Components/VideoPage). The clip fills the page (aspect fill), with a black 0 → 40% gradient under the caption. Players come from Services/VideoCache: one AVQueuePlayer + AVPlayerLooper per clip, created and prerolled at launch, muted; each page draws the clip's first-frame JPEG under its AVPlayerLayer and hides it only once the layer isReadyForDisplay, so a page never shows black. Right rail (centred 30 pt from the right edge, items 18 pt apart, white 36 pt icons with a soft shadow, 13 pt semibold counts under them): the creator's 48 pt avatar (1.5 pt white ring) with a 20 pt #FE2C55 circle holding a white plus over its bottom edge (tap: it turns into a white check, then shrinks away 0.6 s later; you follow them); heart.fill + count; ellipsis.bubble.fill + count (opens comments); bookmark.fill + count (tap: #FACE15 with a pop, +1); arrowshape.turn.up.right.fill + count (opens share); then the sound disc: a 44 pt black disc with three grey groove rings and the creator's avatar (26 pt) in its centre, turning once every 5 s while playing, two small music.note glyphs drifting up and left from it and fading (1.6 s each, staggered). Caption at the bottom left (12 pt from the left edge, up to the rail): "@kaylamoves" (16 pt semibold) + " · 2d" (#8A8B91); the text (15 pt, 2 lines, hashtags semibold, "more" if longer); "♫ " + the sound name (14 pt) scrolling as a marquee in a 180 pt clip. A single tap pauses or plays (a 72 pt play.fill at white 40% fades in and out). A double-tap anywhere: one heart per tap (86 pt, a #FF3B5C → #FE2C55 gradient with a white glint) pops at the tap point, rotated at random within ±25°, scale 0.4 → 1.15 → 1.0 (spring, 0.25 s), then floats up 70 pt and fades (0.55 s); the rail heart turns #FE2C55 with a pop (1 → 1.3 → 1, 0.3 s) and its count rolls up one (the old number slides up and out, the new one slides in; it never jumps). A tap on the rail heart toggles the like the same way (unliking turns it white and rolls down).
3. LIVE item in the feed (FeedItem kind .live): Jess's clip full screen; her rail avatar wears a #FE2C55 ring with a "LIVE" tag that pulses (1.0 → 1.08, 1.2 s); a capsule "Tap to watch LIVE" (white 15% fill, 14 pt semibold) at the bottom centre; a tap opens the LIVE room.
4. Comments: a white sheet (12 pt top corners, 72% of the height): "1,284 comments" (13 pt semibold #161823, centred) and xmark; rows: 32 pt avatar, the name (13 pt semibold #8A8B91), the text (15 pt #161823), "2h · Reply" (12 pt #8A8B91), and at the right a heart + count (tap: #FE2C55 with a pop, +1). Pinned bar: Maya's 32 pt avatar, an "Add comment..." capsule (#F1F1F2), at and face.smiling icons; a quick row 😍 😂 🔥 😮 👏 above the keyboard. Sending springs the comment in at the top ("maya.makes · now", the rows below glide down) and the page's comment count rolls up one.
5. Share: a white sheet: "Send to" with 6 friend avatars and names, then round grey icons "Copy link", "Save video", "Duet", "Stitch", "Add to Favorites"; a tap shows a toast ("Link copied", "Saved to Photos") and closes it.
6. LIVE room (push, full screen, black): live-jess.mp4 looping. Top left a capsule (black 30%): Jess's 32 pt avatar, "jess.vibes" (13 pt semibold) over "1.2M likes" (11 pt), a 24 pt #FE2C55 plus (follow); under it two small capsules "🔥 Hourly #3" and "Explore". Top right: three overlapping 26 pt viewer avatars, a "8.2K" capsule (black 30%) and xmark (closes). Comments at the bottom left (70% wide, rows fade out at the top): a 24 pt avatar, the name (13 pt semibold white 70%) and the text (14 pt white); a scripted stream adds one every 1.4 s, sliding up: "hiii jess 😍", "where's the jacket from??", "first time catching you live!", "leo.mp4 joined" (grey), "the lipstick 😮💨", "say hi to Brazil 🇧🇷", "ava.sun shared the LIVE" (grey), "you're so funny lol", then it loops. Bottom bar: an "Add comment..." capsule (white 15%), a 40 pt gift button (gift.fill on a #FE2C55 → #FF6A88 gradient circle), a 30 pt rose (gift-rose, sends Rose at once) and share.
7. Gift panel: a sheet (#121212, 16 pt top corners, 44% of the height): "Gifts" (16 pt semibold white) and at the right the coin balance "52,480" + "Recharge" (the coin: a #FFC400 circle with a white star.fill). A 4x2 grid: each gift a 64 pt image, its name (12 pt white) and price (11 pt #8A8B91 with a small coin): Rose 1, Heart 5, Donut 30, Disco Ball 199, Corgi 299, Rocket 1,000, Castle 20,000, Lion 29,999. A tap selects it (a white 10% rounded tile, the image scales to 1.15) and shows a #FE2C55 "Send" capsule under it; Send sends it, keeps the panel open and rolls the balance down by the price.
8. Small gifts (up to 299): a banner springs in from the left at 55% of the height: a capsule (black 35%) with Maya's 30 pt avatar, "maya.makes" (13 pt semibold) over "sent Rose" (12 pt), the gift image (48 pt) poking out past its right end, then "x1" (30 pt heavy italic white with a #FE2C55 shadow) that pumps (1.6 → 1.0, 0.2 s) and counts up with every send of that gift within 3 s (x2, x3…); the banner slides out 2.5 s after the last send; up to two banners stack.
9. Big gifts (Rocket, Castle, Lion): the room dims to 70% (0.2 s); the gift flies in from the bottom centre and grows to 88% of the width with a spring (0.45 s), a radial glow behind it (Lion and Castle #FFC400, Rocket orange) and 40 sparkle particles bursting outward; Lion roars at 0.6 s: the image punches 1.0 → 1.12 → 1.0 and the screen shakes 3 times (6 pt, 0.25 s); a top banner "maya.makes sent Lion" with its price; it holds 2.0 s, then shrinks and flies into Jess's capsule, which flashes while her likes roll up.
10. Following tab: the same pager with Amara, Mei and Kayla's videos. Friends: a light screen "Friends", a 2-column grid of friends' clips (3:4 posters, an avatar and name under each); a tap plays it in a pager.
11. Discover (push, light): a search field "Search" with a #FE2C55 "Search" text button, "You may like" rows with a red flame, then a 2-column grid of posters with the caption (2 lines), avatar, handle and heart count; typing filters by caption and handle live.
12. Inbox (light): "Inbox" (17 pt semibold); rows with 48 pt round icons: "New followers" (person.2.fill on #20D5EC) "jordan.k started following you.", "Activity" (bell.fill on #FE2C55) "kaylamoves liked your video.", "System notifications" (tray.fill on #161823); then messages: a 56 pt avatar, the name (16 pt semibold), a #8A8B91 preview, the time, a red dot when unread. A thread (push): Maya's bubbles #FE2C55 with white text on the right, theirs #F1F1F2 on the left, a "Send a message..." bar; sending appends the bubble with a spring.
13. Profile (light): the top bar "Maya Chen" + chevron.down, line.3.horizontal at the right; the 96 pt avatar centred, "@maya.makes" (17 pt semibold), counts "312" Following · "1,204" Followers · "18.9K" Likes (17 pt bold over 13 pt #8A8B91), "Edit profile" and "Share profile" (#F1F1F2, 4 pt corners, 15 pt semibold), the bio "making little things on weekends ✨"; tabs square.grid.3x3 · lock.fill · heart (a sliding 2 pt underline); a 3-column grid (1 pt gaps, 3:4 cells) of posters with "▷" + views at the bottom left (12 pt semibold white with a shadow), the first cell tagged "Pinned" (#FE2C55 capsule). A creator's profile (tap a rail avatar or a handle) is the same with a #FE2C55 "Follow" button that turns into a grey "Following", and their clips in the grid.
14. Create (the Create button): a full-screen black cover: xmark at the top left, a "♫ Add sound" capsule (white 15%) at the top centre; the selected clip playing large; at the bottom an "Upload" strip of the 9 bundled clips (3:4 thumbnails, the selected one ringed #FE2C55) and a #FE2C55 "Next" capsule → the Post screen (light): a caption field "Describe your post...", "# Hashtags" and "@ Mention" chips, "Everyone can view this post", a #FE2C55 "Post" capsule. Post: the cover slides down, a top toast "Posting…" with a ring filling in 0.8 s, then "Your post is live ✓" (1.6 s), and the clip is first in Maya's grid with "▷ 0".
FIXTURES (Data/Fixtures.swift)
Creators (handle, name, avatar): kaylamoves Kayla Brooks av-kayla; biscuit.the.collie Biscuit av-biscuit; theo.skates Theo Hart av-theo; nonna.rosa Nonna Rosa av-nonna; glam.by.mei Mei Lin av-mei; luna.the.void Luna av-luna; dani.eats.bkk Dani av-dani; amara.dances Amara av-amara; jess.vibes Jess Park av-jess; maya.makes Maya Chen av-maya. Friends and commenters: jordan.k av-jordan, priya.p av-priya, leo.mp4 av-leo, ava.sun av-ava, sam.wav av-sam, nina.b av-nina, omar.hd av-omar, zoe.fr av-zoe.
For You, in order (clip; caption; sound; likes, comments, saves, shares):
1. v-kayla, kaylamoves; "this one's for the group chat 💜 #dance #fyp"; "original sound - kaylamoves"; 8,412, 312, 1,096, 204.
2. v-biscuit, biscuit.the.collie; "he heard the word 'walk' 🐾 #dogsoftwirl #bordercollie"; "Walkies (Sped Up) - Biscuit"; 9,986, 541, 870, 1,302.
3. v-skate, theo.skates; "first clean ollie at golden hour 🌅 #skate"; "original sound - theo.skates"; 6,233, 188, 402, 96.
4. v-pasta, nonna.rosa; "fresh pasta in 8 seconds, don't tell your nonna 🍝 #pasta #recipe"; "Tarantella in the Kitchen - nonna.rosa"; 7,710, 1,024, 3,891, 2,410.
5. LIVE: jess.vibes, "LIVE now · chatting + Q&A 💬".
6. v-glam, glam.by.mei; "pink era makeup in 30 seconds 💗 #grwm #makeup"; "pink era - glam.by.mei"; 5,402, 233, 1,544, 120.
7. v-luna, luna.the.void; "she has never caught it. she never will. #catsoftwirl"; "original sound - luna.the.void"; 9,421, 877, 610, 1,980.
8. v-skewers, dani.eats.bkk; "midnight skewers in Bangkok 🔥 #streetfood"; "Night Market - dani.eats.bkk"; 8,890, 402, 2,214, 731.
9. v-tokyo, amara.dances; "neon lights, checkered pants 🏁 #dance"; "Neon Heart - amara.dances"; 7,045, 266, 588, 143.
Kayla's comments: priya.p "the arm thing at 0:03 😭🔥" (1,204); jordan.k "saving this for the group chat" (388); ava.sun "okay but the ring light 💜" (212); leo.mp4 "TUTORIAL PLEASE" (98); sam.wav "song name??" (41); nina.b "the smile at the end" (26). Write four fitting comments for each other video from the commenters.
Inbox: jordan.k started following you (2m); kaylamoves liked your video (1h); priya.p commented: "teach me pls 😭" (3h); nonna.rosa mentioned you in a comment (5h); "Your video passed 12K views ✨" (1d). Messages: priya.p "did you see kayla's new one 😭" (unread, 9:41 AM), jordan.k "send me the pasta video" (Yesterday), ava.sun "LIVE tonight?" (Nov 8), sam.wav "lol" (Nov 6).
Maya's grid: v-luna ▷ 12.4K (Pinned), v-pasta ▷ 3,210, v-skewers ▷ 8,804, v-skate ▷ 2,115, v-glam ▷ 960, v-biscuit ▷ 1.1M.
HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the LEFT edge (x 0–24, y 300–360 pt), drawn in its own window above every sheet, cover, toast and the keyboard (a tap there closes whatever is open), resets everything to this state and plays this run through the real pager, heart and count code, identical every time (seconds from the tap): 0.00 with no animation: Home, For You, page 1 = Kayla's video playing from 0:00, unliked (8,412), every poster drawn, Biscuit's page prerolled under it; the touch dot lands at (250, 430) and holds; 0.55 and 0.67 double-tap there: two hearts, the rail heart pops, 8,412 → 8,413; 1.00 the dot glides to (240, 680) and presses at 1.15; 1.15–1.45 it drags up to (240, 330) and the pager follows it 1:1; 1.45 release: the pager settles on page 2 with its spring and Biscuit's video plays from 0:00; 2.05 and 2.17 double-tap at (200, 430): two hearts, Biscuit's rail heart pops, 9,986 → 9,987; 2.60 the dot fades; hold.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, shrinks to 0.9 while pressed, glides 0.15 s between points, follows the drag, and fades after its last release.
- What the eye must see: frame 0 fully drawn (no fade-in, no black video, no blank poster); the pager follows the finger and settles with a spring, never jumps; hearts pop and float, never blink; counts roll; toasts hold ≥1.2 s; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Decode every image off the main thread at launch; warm up haptics at launch.
LOOK
Feed and LIVE: black #000000, white text with a soft shadow (black 35%, radius 2), grey #8A8B91, pink-red #FE2C55 (likes, Follow, Post, Send), cyan #25F4EE accents, gold #FFC400 (coins, big gifts), yellow #FACE15 (saves). Light screens (Friends, Discover, Inbox, Profile, sheets): white, text #161823, secondary #8A8B91, fills #F1F1F2, hairlines #E3E3E4. SF Pro: 15 pt body, semibold handles, bold counts. Pressed states darken.
RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures. No backend, login, permissions, analytics or network calls at runtime (all media is bundled). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.
- Keep every file inside /home/user/workspace (/tmp is denied).
REMIX-READY
Theme/Brand.swift (the name, TwirlMark, a Copy enum with every word), Theme/Theme.swift (colours, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE targets and timings). Codable models with String ids (Creator, Clip, FeedItem with a Kind enum (.video, .live) and its counts, Comment, Gift, LiveComment, AppNotification, Thread, Message) behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (FeedStore, LiveStore, InboxStore, ProfileStore, CreateStore); views never read Fixtures. Services/VideoCache.swift. Components/: VerticalPager, VideoPage, FeedItemView (switches on Kind), RightRail, SoundDisc, HeartBurst, CountRoll, CaptionView, TouchDot, GiftBanner, BigGiftOverlay, GiftPanel, Toast, TwirlTabBar. Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, swap the clips and creators, add a feed item kind (a new case in FeedItem.Kind + one view in Components: an ad, a poll, a to-do card); how to add a gift; 3 one-prompt remixes (Twirl for recipes, every video with an ingredients card; for apartment tours with the rent and "Book a tour"; friends-only Twirl for a family). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the Home tab icon for 1 s to reset everything to launch (likes, follows, saves, comments, gifts, coins, posts, pager position, tab).
BUILD
Theme, Brand, Fixtures and VideoCache, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Home's pager with VideoPage, the rail, the double-tap hearts and the caption first, then comments, then HOOK MODE, then the LIVE room with gifts, then Profile, Create, Inbox, Friends and Discover. Fetch twirl-brand.zip and media.zip as soon as the shell runs; check each file exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
+1 prompt, the remix that put my to-do list in the For You feed:
Put Maya's to-do list in the For You feed: a new FeedItem kind .todo, one card after Kayla's video and then after every second video. The card: a slowly drifting #FE2C55 → #7B2FF7 → #25F4EE gradient, a 110 pt emoji, the task in 34 pt heavy white, "Due today · 5:00 PM" under it; the rail shows a check circle "Done", a clock "Snooze" and "3 left". Double-tap marks it done: green #2BD96B check bursts instead of hearts, a strike draws across the title, toast "1 down, 3 to go 💪". To-dos: Call the dentist 🦷, Pay rent 🏠, Reply to Sam 💬, Buy oat milk 🥛. HOOK MODE keeps every timing; its page 2 is "Call the dentist".
Every other startup pitch is "TikTok for X".
This one has the For You feed, double-tap hearts, comments and LIVE gifts.
All made in 1 prompt. One more made it TikTok for your to-do list.
Remix on @vibecodeapp and make it your own today
Any Telegram message can now become an app.
And any Telegram launch can now become one prompt on @vibecodeapp
Took 19 minutes.
Airlines have had 70 years to build this.
Took 1 prompt on @vibecodeapp
Remix it here: https://t.co/V1AixBIv8k
Prompt 1, the full build:
Build Synergy, an original professional-network app for iPhone in SwiftUI, in the genre of LinkedIn: a Home feed of posts with photos, "…more", six reactions on a long-press, comments, repost and send, "See translation" on foreign-language posts, My Network (invitations, Connect), Notifications ("Say congrats"), Jobs with Quick Apply, Messaging, compose with the post springing onto the feed, Search and the profile. Its own name, logo and words, all below. The user is Maya Chen. Today is Monday, November 9, 2026.
ASSETS
curl -L once each and unzip flat: https://t.co/rq5F1gLSj6 (synergy-icon.png: use it as the app icon) and https://t.co/CXs01oTp1I (the JPEG photos named below; av-* are 400 px avatars). Put every image in the asset catalog under its file name. The Synergy logo is drawn in code: a #0A66C2 rounded square (22% corners) holding two white rings that overlap like a Venn diagram (each ring 46% of the square wide, a 6% stroke, centres 23% apart), the lens where they overlap filled white. Company logos are drawn in code too (FIXTURES). No image generation is needed.
SHELL
Opens on Home: no splash, onboarding, sign-in or permission prompts. A 5-tab bar (white, top hairline #E8E8E8, icon over a 10 pt label): Home (house.fill), My Network (person.2.fill, a red #CB112D badge "2"), Post (plus.square.fill, opens compose), Notifications (bell.fill, red badge "4"), Jobs (briefcase.fill). Unselected #666666, selected #191919. Top bar on Home, My Network, Notifications and Jobs: Maya's 32 pt avatar left (opens Profile), a 34 pt search capsule (1 pt #8C8C8C border, magnifyingglass + "I'm looking for…" in #666666) that opens Search, then square.and.pencil (compose) and ellipsis.message (Messaging) at the right. Light mode only; the status bar stays visible and dark on every screen.
SCREENS
1. Home. The feed is white post cards separated by 6 pt #F4F2EE bands, scrolling under the pinned top bar.
2. Post cell (Components/PostCell). Header (12 pt top, 16 pt sides): a 48 pt round avatar, then name (14 pt semibold #191919) + " · 2nd" (14 pt #666666), the headline (12 pt #666666, one line, truncates), "1h · " + globe.americas.fill (12 pt #666666); at the right "+ Follow" (14 pt semibold #0A66C2) for 2nd/3rd, then ellipsis and xmark (#666666). Text 14 pt #191919, line height 20, 8 pt below the header; posts longer than 3 lines clamp with "…more" (#666666) at the end of line 3; a tap on "…more" expands the full text in place with a 0.35 s height spring (everything below glides down, never jumps). Media: full card width, edge to edge, 3:2, 8 pt below the text; a tap opens it full screen on black. Reactions row (12 pt #666666, 10 pt padding): up to three overlapping 16 pt reaction icons (1.5 pt white ring) then the count "2,847" at the left; "412 comments · 96 reposts" at the right. Hairline #E8E8E8 inset 16 pt. Action bar, 52 pt: Like (hand.thumbsup), Comment (text.bubble), Repost (arrow.2.squarepath), Send (paperplane), each a 20 pt icon over a 12 pt semibold label, #666666, evenly spaced. A tap on the card opens the post page.
3. Reactions (Components/ReactionButton + ReactionPicker). Six reactions, each a circle in its colour with a white SF Symbol, name in its label colour: Like (hand.thumbsup.fill, #378FE9, label #378FE9), Celebrate (hands.clap.fill, #6DAE4F, #44712E), Support (hands.and.sparkles.fill, #A872E8, #715E86), Love (heart.fill, #DF704D, #B24020), Insightful (lightbulb.fill, #F5BB5C, #915907), Funny (face.smiling.inverse, #44BFD3, #1A707E). A tap on Like toggles Like. A 0.35 s press on Like opens the picker: a white capsule (28 pt corners, shadow 0 4 16 black 18%, 8 pt padding) 8 pt above the action bar, starting at the card's left margin, holding the six 40 pt icons 6 pt apart; they pop in left to right (30 ms stagger, scale 0.3 → 1, spring). While the finger is held, the icon under it lifts 10 pt and scales to 1.45 (the others to 0.9) and shows its name above it in a dark capsule (#191919 at 90%, white 12 pt semibold); moving across switches icons smoothly. Release over an icon: the picker closes (icons sink and fade, 0.15 s), the Like button becomes that reaction (its filled icon in its colour, its name in its label colour) with a pop (1.0 → 1.25 → 1.0, 0.3 s); the reactions row puts that icon first and the count rolls up one (the old number slides up and out, the new one slides in). A later pick swaps it with the same pop and no count change; a tap on a set reaction clears it; release outside cancels.
4. "See translation". Posts not in English show "See translation" (14 pt semibold #0A66C2) on its own line under the text. A tap: a 0.4 s "Translating…" shimmer on the link, then the original text fades out (0.15 s) and the translation types in word by word (70 ms a word) while the cell's height springs to fit (no jump); then "Translated from Spanish · Show original" (13 pt #666666, "Show original" semibold #0A66C2) replaces the link. "Show original" cross-fades back (0.2 s). Translations come from TranslationService (below).
5. Post page (push): the post in full, then "Most relevant" + chevron.down and the comments: a 32 pt avatar and a #F2F2F2 rounded rectangle (8 pt corners) with the name (13 pt semibold), headline (12 pt #666666), time, then the text; under it "Like · Reply" (12 pt #666666). A pinned "Add a comment…" bar (Maya's avatar, a capsule with a 1 pt #8C8C8C border; a "Comment" capsule #0A66C2 appears with text); sending springs the comment in at the top (0.3 s, the rows below glide down) and the comment count rolls up one.
6. Repost: a sheet with "Repost" and "Repost with your thoughts"; Repost shows the toast "Reposted". Send: a sheet with 4 connections; a tap shows "Sent".
7. Post kinds: new position (Priya): a #EAF4E5 card (8 pt corners) with code-drawn confetti dots, a briefcase.fill badge, "Starting a New Position" (13 pt #666666) over "Staff Engineer at Northwind" (17 pt semibold). Job (Sofia): a 1 pt #E8E8E8 card with the logo tile, "Senior iOS Engineer", "Lumen Labs · Remote" and a "Quick Apply" capsule.
8. My Network: tabs "Grow" | "Catch up" (15 pt semibold; selected #01754F with a sliding 2 pt underline). "Invitations (3)" + arrow.right; rows: 56 pt avatar, name (15 pt semibold), headline (13 pt #666666), "12 mutual connections" (12 pt #666666); at the right a 32 pt xmark circle (#666666 outline) and a 32 pt checkmark circle (#0A66C2 outline). Accept: the row turns into "Jordan Lee is now a connection" + a "Message" capsule (0.3 s) and the badge drops; Ignore: the row slides out, the rest glide up. Then "People you may know from Lumen Labs", a 2-column grid of cards (1 pt #E8E8E8 border, 8 pt corners, a 56 pt banner tint, the 72 pt avatar over it, name, 2-line headline, mutuals) with an outlined "Connect" capsule (person.badge.plus) that becomes "Pending" (clock, #666666) with a pop; the card's xmark removes it and the grid reflows with a spring.
9. Notifications: filter capsules "All" (#01754F fill, white), "Jobs", "My posts", "Mentions" (#666666 outline, 32 pt). Rows: 48 pt avatar or icon tile, 14 pt text with bold names, the time and an ellipsis at the right; unread rows on #EBF4FD with an 8 pt #0A66C2 dot. "Say congrats" (outlined #0A66C2) turns into "Congrats sent ✓" (#666666) with the toast "Message sent".
10. Jobs: capsules "Preferences", "Job tracker", "Post a job"; "Top job picks for you" (17 pt bold); rows: logo tile, title (16 pt semibold), company, place and salary (14/13 pt #666666), "Quick Apply" with a small Synergy logo, "Promoted" or "Be an early applicant" (#01754F). A row opens the job sheet: logo + company, the title (24 pt bold), "Reposted 2 days ago · Over 100 people clicked apply", chips (salary, workplace, "Full-time"), "Quick Apply" (#0A66C2 fill) and "Save", then "About the job". Quick Apply: a sheet "Apply to Lumen Labs" (Maya Chen, maya.chen@example.com, "Maya_Chen_Resume.pdf · 214 KB" ticked), "Submit application" → a bar fills in 0.4 s, a #01754F check circle draws itself (0.3 s) over "Your application was sent to Lumen Labs!" and "Done"; the job row then says "Applied · now".
11. Messaging (push): "Search messages", capsules "Focused" (#01754F fill), "Unread", "Drafts"; rows: 56 pt avatar, name, one #666666 preview line, the date. A thread has no bubbles (avatar, name + time, then the text) and a "Write a message…" bar; sending appends the message with a spring.
12. Compose (the Post tab or the pencil): a full-screen cover: xmark, Maya's 40 pt avatar + "Anyone" + chevron.down, clock and a "Post" capsule (#E8E8E8 with #9E9E9E text while empty, #0A66C2 with white once there is text); the field "Share your thoughts…" (18 pt). Post: the cover slides down, a white toast (checkmark.circle.fill #01754F "Post successful." + "View post" #0A66C2, 1.6 s), and the new post springs in at the top of Home (the feed moves down by its height with a 0.35 s spring, the cell fades in), "now", zero reactions.
13. Search (push): the field focused, "Recent" rows; typing filters people and posts live.
14. Profile (push): banner-maya (120 pt), the 104 pt avatar with a 4 pt white ring over its bottom left; "Maya Chen" (24 pt bold); "Product Designer at Lumen Labs · Building apps on weekends"; "San Francisco Bay Area"; "500+ connections" (#0A66C2 semibold); "Open to" (#0A66C2 fill) and "Add section" (outlined); cards Analytics ("412 profile views", "41 search appearances"), About, Experience (Lumen Labs, Product Designer, 2022 – Present; Northwind, 2019 – 2022), Skills (Figma · 48 endorsements, SwiftUI · 21).
TRANSLATION
Services/TranslationService.swift: protocol TranslationService { func translate(_ post: Post) async -> String }. ScriptedTranslation (the only implementation now) returns the post's fixture translation after 0.4 s (0 s in HOOK MODE). Post has language ("en", "es") and translation; Language is an enum with a display name ("Spanish") used in "Translated from …". "See translation" shows when language != "en". A remix adds a language with one enum case and swaps ScriptedTranslation for another implementation in AppEnvironment.
FIXTURES (Data/Fixtures.swift)
Members (avatar file): Maya Chen (av-maya) "Product Designer at Lumen Labs"; Brad Whitaker (av-brad) "Founder & CEO at Pipeline · Keynote Speaker · 3x Founder"; Lucía Fernández (av-lucia) "Founder at Tienda Luna · Madrid"; Priya Shah (av-priya) "Staff Engineer at Northwind"; Marcus Cole (av-marcus) "Head of Growth at Brightpath · I help founders 10x their pipeline"; Sofia Reyes (av-sofia) "Talent Partner at Lumen Labs · We're hiring!"; Omar Haddad (av-omar) "Chief Vibes Officer at Snackbox"; Kenji Mori (av-kenji) "Design Lead at Fieldnote"; Ethan Brooks (av-ethan) "Enterprise Sales at Cloudnine"; Zara Okafor (av-zara) "Brand Strategist · Ex-Brightpath"; Lena Park (av-lena) "Founder at Plantwise"; Dev Malhotra (av-dev) "Product Manager at Orbit"; Jordan Lee (av-jordan) "Product Manager at Orbit"; Ava Thompson (av-ava) "Founder at Kindred"; Nikhil Rao (av-nikhil) "iOS Engineer at Northwind"; Grace Santos (av-grace) "UX Researcher at Lumen Labs"; Leo Costa (av-leo) "Design Engineer at Lumen Labs"; Hana Tran (av-hana) "VP Design at Fieldnote".
Company colours (logo tiles with a fitting white SF Symbol): Pipeline #111111, Tienda Luna #1F2A44, Northwind #0E7C66, Brightpath #F28C28, Lumen Labs #5B4BDB, Fieldnote #2B2B2B, Orbit #0B1D3A.
Home, in order (degree, time; text; media; reactions in the row's order, count, comments, reposts):
1. Brad Whitaker (2nd, 1h): "My 4-year-old spilled her apple juice at breakfast this morning.\n\nMost people would see a mess. I saw a masterclass in B2B sales.\n\nHere's what it taught me:\n1. Every spill is a pipeline opportunity.\n2. Clean up fast. Follow up faster.\n3. Always be closing (the lid).\n\nAgree?" + juice-spill. Like, Insightful, Celebrate; 2,847; 412; 96. Comments: Marcus "This is the content I'm here for 🙌", Ethan "Saving this for my next QBR", Zara "Agree.".
2. Lucía Fernández (2nd, 3h), language es: "¡Hoy Tienda Luna cumple 3 años! 🌙 Gracias a nuestro equipo y a cada cliente que confió en nosotros desde el primer día." + shop-luna. Translation: "Today Tienda Luna turns 3! 🌙 Thank you to our team and to every customer who trusted us from day one." Love, Celebrate, Like; 1,126; 84; 12.
3. Priya Shah (1st, 5h): "I'm happy to share that I'm starting a new position as Staff Engineer at Northwind! 🎉" + the new position card. Celebrate, Like, Love; 1,204; 236; 8.
4. Marcus Cole (2nd, 6h): "Unpopular opinion: hard work pays off.\n\nAgree? 👇" Like, Insightful, Funny; 3,912; 1,047; 210.
5. Sofia Reyes (1st, 8h): "We're hiring! 🚀 Lumen Labs is looking for a Senior iOS Engineer (Remote, US). Apply below or DM me." + the job attachment. Like, Celebrate; 318; 42; 19.
6. Omar Haddad (3rd+, 9h): "Thrilled to announce I've been promoted to Chief Vibes Officer at Snackbox! None of this would be possible without my amazing team. Onward and upward! 🙌" + office-cake. Celebrate, Like, Funny; 2,410; 388; 41.
7. Kenji Mori (1st, 11h): "Our team offsite in Lisbon 🇵🇹 Grateful to work with these humans." + offsite-lisbon. Like, Love; 892; 61; 4.
8. Ethan Brooks (2nd, 12h): "I closed a deal from a hospital bed last week. Here's what that taught me about commitment. 🧵" + hospital-laptop. Like, Insightful, Support; 1,733; 902; 77.
9. Zara Okafor (2nd, 1d): "Excited to share that I'm taking some time to focus on my personal brand. 🚀 Stay tuned!" Celebrate, Support, Like; 2,055; 476; 30.
10. Lena Park (1st, 1d): "Day 1 vs Day 1,000 of building Plantwise. 🌱 Never give up." + plants. Like, Love, Celebrate; 4,320; 312; 55.
Invitations: Jordan Lee (12 mutual), Ava Thompson (4), Nikhil Rao (8). People you may know: Grace Santos (21 mutual), Leo Costa (17), Hana Tran (9), Dev Malhotra (6), Ethan Brooks (3), Omar Haddad (2).
Notifications (the first four unread): "Congratulate Priya Shah on starting a new position as Staff Engineer at Northwind." + "Say congrats", 1m; "Brad Whitaker and 48 others reacted to your post: first design review of the week ☕️", 1h; "23 people viewed your profile." (eye.fill tile), 3h; "Your job alert for Product Designer: 12 new jobs" (briefcase.fill tile), 4h; "Kenji Mori commented on your post: love this!", 6h; "You appeared in 41 searches this week.", 1d.
Jobs: Senior Product Designer, Lumen Labs, San Francisco, CA (Hybrid), $165K–$210K/yr, Be an early applicant; Product Designer, Growth, Orbit, Remote, $140K–$175K/yr; Design Systems Lead, Northwind, New York, NY, $190K–$230K/yr, Promoted; UX Designer, Brightpath, Austin, TX, $120K–$150K/yr; Staff Product Designer, Fieldnote, Remote, $200K–$240K/yr, Promoted.
Messages: Priya "Thanks Maya!! Coffee next week? ☕️" (unread, 9:12 AM), Jordan "Would love to connect about the Orbit role" (Nov 7), Kenji "Lisbon was the best offsite ever" (Nov 3), Brad "Quick question about your pipeline 👀" (Oct 30).
HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the right edge, mid-height (x 378–402, y 400–460 pt), drawn in its own window above every sheet, cover, toast and the keyboard (a tap there closes whatever is open), resets everything to this state and plays this run through the real reaction, "…more" and count code, identical every time (seconds from the tap): 0.00 Home with no animation, the feed at the very top, Brad's post first, unreacted and clamped, every image already drawn, and the touch dot pressed on Brad's "…more"; hold; 0.50 tap "…more": the text expands with the height spring; 1.60 the dot glides to Brad's Like (0.25 s) and presses at 1.85; 2.15 the picker pops open; 2.30–2.70 the dot slides right across Celebrate, Support, Love and Insightful to Funny, each lifting with its name as the dot passes; 2.85 release: Like becomes Funny with the pop, the row puts Funny first and 2,847 rolls to 2,848; 3.15 the dot fades; hold.
- Brad's whole post (header, three lines of text, photo, reactions row and action bar) must be on screen under the top bar at 0.00 and stay put through the run apart from the height spring.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, shrinks to 0.9 while pressed, glides 0.25 s between points and fades after its last release.
- What the eye must see: frame 0 fully drawn (no fade-in, no blank photo); rows and heights move with springs and never jump or blink; the picker never flickers; counts roll; toasts hold ≥1.2 s; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Every image is preloaded and decoded off the main thread at launch; warm up haptics at launch.
LOOK
Text #191919; secondary #666666; hairlines #E8E8E8; bands #F4F2EE; brand blue #0A66C2 (pressed #004182); green #01754F; unread #EBF4FD; badge #CB112D; white cards. SF Pro (14 pt body, semibold names, bold titles). Pressed states darken.
RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures. No backend, login, permissions, analytics or network calls at runtime (images are bundled; translation is scripted). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.
- Keep every file inside /home/user/workspace (/tmp is denied).
REMIX-READY
Theme/Brand.swift (the name, the logo view, a Copy enum with every word), Theme/Theme.swift (colours, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE targets and timings). Codable models with String ids (Member, Company, Post with text, language, translation, media, kind, reactions and counts, Comment, Invitation, Job, AppNotification, Thread, Message) behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (FeedStore, NetworkStore, JobsStore, InboxStore, ProfileStore, ComposeStore); views never read Fixtures. Services/TranslationService.swift as above. Components/: PostCell, ActionBar, ReactionButton, ReactionPicker, ReactionsRow, CountRoll, TranslationLink, NewPositionCard, JobCard, CompanyLogo, Toast, TouchDot. Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, change the members and posts, add a post kind (a new case in Post.Kind + one view in Components); how to add a translation language and plug a real model into TranslationService (a backend route + one Swift file); 3 one-prompt remixes (Synergy for musicians finding gigs; for students finding internships; as a company directory with kudos). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the Home tab icon for 1 s to reset everything to launch (reactions, translations, expansions, comments, invitations, Connects, applications, new posts, scroll, tab).
BUILD
Theme, Brand, Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Home with the post cell, reactions and the picker, "…more" and "See translation" first, then the post page with comments, then HOOK MODE, then compose, My Network, Notifications, Jobs with Quick Apply, Messaging, Search and Profile. Fetch synergy-brand.zip and media.zip as soon as the shell runs; check each image exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
Prompt 2, one round of fixes after we watched it at 30 fps:
Four fixes from a 30 fps recording of HOOK MODE and compose. Change nothing else.
1. Frame 0 hides Brad's B2B line. Posts clamp at 3 lines and his blank line counts, so HOOK MODE opens on only "My 4-year-old spilled her apple juice at breakfast / this morning." and "…more". Clamp every post at 5 lines instead (blank lines count), "…more" at the end of line 5, so Brad's shows both opening paragraphs, ending "…I saw a masterclass in B2B sales. …more". His whole post (header, text, photo, reactions row, action bar) must still fit on screen at HOOK MODE's first frame; move HOOK MODE's "…more" target with it.
2. On release the reaction picker vanishes between two frames, and the count changes underneath it, so nobody sees the roll. Close the picker over 0.15 s (icons sink 8 pt and fade, the capsule fades), then pop the Like button into the reaction and roll the count (2,847 → 2,848, the old number slides up and out) once the picker is gone. Same in HOOK MODE's release at 2.85.
3. The touch dot hides the lifted reaction. The icon under the finger lifts only 10 pt, so the 44 pt dot covers its lower half and it reads as a dark circle. Lift it 26 pt (scale 1.45) with its name capsule above it, so it sits fully above the dot. HOOK MODE's dot keeps sliding along the picker's centre line.
4. Compose: after Post, the field clears before the cover slides down, so the cover slides away empty ("Share your thoughts…"). Keep the typed text in the field while the cover slides down; clear it only once the cover is gone.
Build, run HOOK MODE once to check frame 0 and the release, and stop.
+1 prompt, the remix that added Corporate as a language (the real Grok translates):
Add Corporate as a translation language. Every English post now shows "See translation" under its text, like the Spanish one. A tap sends the post to xAI's grok-4.7 through a backend route with the project's GROK_API_KEY: say what the poster really means, in the first person, at most 14 words, deadpan, never cruel, no emojis. The answer types in place as Spanish does, under "Translated from Corporate · Show original". HOOK MODE: the dot starts on Brad's "See translation" and taps it at 0.50 (not "…more"), typing "My kid spilled juice. I made it a sales post." Keep everything else.
Lots of people want to build a LinkedIn for their niche.
This one has the feed, all six reactions, Connect, Quick Apply and messaging.
All made in 2 prompts. One more taught it to translate Corporate into English.
Remix on @vibecodeapp and make it your own today
This liquid charging animation is so satisfying.
Had to see if I could make it a real iOS app.
1 prompt on @vibecodeapp
Seeing the view from your seat before you book is genius.
Couldn't wait for a cinema to ship it so I built it myself.
2 prompts on @vibecodeapp
Remix it here: https://t.co/tIxaKa2gO0
Prompt 1, the full build:
Build Squawk, an original microblogging app for iPhone in SwiftUI, in the genre of X and Threads: a For you / Following timeline, posts with photos, quotes, polls and reader-added context, the like burst, repost and quote, bookmarks, the post page with replies and a "Post your reply" bar, @ai replies (Squawk AI answers under your reply), Explain this post, compose with the post springing onto the timeline, Search, Notifications, Messages, the profile and the AI tab. Its own name, logo and words, all below. The user is Maya Chen (@mayachen). Today is Sunday, November 8, 2026.
ASSETS
curl -L once each and unzip flat: https://t.co/XSvU0f6PPe (squawk-icon.png: use it as the app icon) and https://t.co/sM0a9dk4PF (the JPEG photos named below; av-* are 400 px avatars). Put every image in the asset catalog under its file name. The Squawk logo is drawn in code: a 24 pt #0F1419 rounded speech bubble (a capsule-cornered rectangle with a small tail at its lower left) with a white exclamation mark cut into it. Squawk AI's avatar is drawn in code too: a black circle with white "sparkles" (SF Symbol). No image generation is needed.
SHELL
Opens on Home, For you: no splash, onboarding, sign-in or permission prompts. A 5-tab bar, icons only, white with a top hairline #EFF3F4: Home (house / house.fill), Search (magnifyingglass), AI (sparkles), Notifications (bell / bell.fill with a #1D9BF0 count badge "3"), Messages (envelope / envelope.fill); every icon #0F1419, the selected one filled. Light mode only; the status bar stays visible and dark on every screen.
SCREENS
1. Home. Top bar: Maya's 32 pt avatar left (opens Profile), the Squawk logo centred, person.badge.plus right. Timeline tabs left-aligned under it: "For you" with a small chevron.down, "Following", then a plus; selected = 15 pt bold #0F1419 with a 4 pt rounded #1D9BF0 underline as wide as the label that slides between tabs; others 15 pt medium #536471; a hairline below. The feed scrolls under a pinned header. A 56 pt #1D9BF0 circle with a white plus (shadow) floats 16 pt above the tab bar, 16 pt from the right: compose.
2. Post cell (Components/PostCell): 12 pt top and bottom, 16 pt sides, a 40 pt round avatar, 8 pt gap, then the column: name (15 pt bold #0F1419, truncates) + badge (checkmark.seal.fill 15 pt #1D9BF0; #E2B719 gold for Squawk AI) + "@handle · 2h" (15 pt #536471); at the right a sparkles button (16 pt #536471, opens Explain this post) and ellipsis. Text 15 pt #0F1419 (line height 20), @mentions, #tags and links #1D9BF0, long text clamps at 4 lines with "Show more" #1D9BF0. Media: full column width, its own aspect (3:2 photos), 16 pt corners, a 0.5 pt #CFD9DE border; a tap opens it full screen on black. Quote card: 1 pt #CFD9DE border, 16 pt corners, 12 pt padding, 20 pt avatar + name + handle, the text, a photo thumbnail. Poll: 4 outlined option capsules; a tap fills each bar to its percent in 0.4 s, the chosen one bold with a check, "18,205 votes · 6 hours left". Action row, 12 pt above the bottom: reply (bubble.left), repost (arrow.2.squarepath), like (heart), views (chart.bar), all 17 pt #536471 with 13 pt counts 4 pt after, spread over the first 75%, then bookmark and square.and.arrow.up at the right. Hairline #EFF3F4 between cells. A cell tap opens the post page.
3. Like (Components/LikeButton): a tap fills the heart #F91880; it scales 0.8 → 1.25 → 1.0 in 0.3 s while 8 small #F91880 dots burst out 14 pt in a ring and fade (0.35 s); the count turns #F91880 and rolls up one digit (old number slides up and out, new one slides in). Unlike reverses with no burst. Repost: a sheet with "Repost" (arrow.2.squarepath) and "Quote" (pencil.line); Repost turns the icon and count #00BA7C with the same roll; a reposted post's sheet says "Undo repost"; Quote opens compose with the post as a quote card. Bookmark: fills #1D9BF0 and slides down the top toast "Added to your Bookmarks" with "Add to Folder" (#1D9BF0) at the right.
4. Post page (push): top bar arrow.left, "Post" (17 pt bold), ellipsis. The post: 40 pt avatar, name + badge over "@handle" (#536471); the text 17 pt; media; "9:41 AM · 11/8/26 · 1.2M Views" (15 pt #536471, the number bold #0F1419); hairline; the action row with counts (15 pt); hairline; "Top replies" + chevron.down (15 pt bold #536471) and "View quotes" + chevron.right at the right; then the replies (reply cells = post cells without media). A reply to a reply hangs under it, joined by a 2 pt #CFD9DE line from the parent's avatar to the child's. Added context (on posts that have it) sits under the text: a #F7F9F9 card with 12 pt corners and a 1 pt #CFD9DE border: info.circle + "Added context" (15 pt bold), the note (15 pt), a source link (#1D9BF0), then "Rated helpful by readers who usually disagree" (13 pt #536471) and a small outlined "Rate it" capsule.
The reply bar is pinned above the tab bar: a 40 pt #EFF3F4 capsule, 16 pt margins, "Post your reply" in #536471. A tap expands it with the keyboard: "Replying to @handle" (#536471, the handle #1D9BF0), the field, and a toolbar: photo, GIF, list.bullet, mappin, sparkles (inserts "@ai " at the start of the field), a 20 pt character ring and a "Reply" capsule (#1D9BF0, white 15 pt bold, 32 pt tall; 50% opacity while empty). If the keyboard goes down with text in the field, the bar stays one line tall showing the text (@ai blue) with the blue Reply capsule at its right.
Send: the field clears, the top toast "Reply sent" slides down (a #E8F5FD rounded rectangle, 12 pt corners, a 1 pt #BEE3F8 border, 16 pt side margins, 52 pt tall, checkmark.circle.fill #1D9BF0 + "Reply sent" 17 pt #0F1419; in 0.25 s, holds 1.6 s, out 0.25 s); Maya's reply ("now") opens at the top of the replies: the rows below move down with a 0.3 s spring while the cell fades in, never a jump; the post's reply count rolls up one.
5. @ai replies: when a sent reply contains "@ai", Squawk AI answers under it, threaded (the 2 pt line): its 40 pt avatar, "Squawk AI", the gold badge, "@ai · now". First three #536471 dots pulse in turn ("thinking", 1.2 s), then the answer types in word by word (60 ms a word) while the cell grows line by line with no jump, then its action row fades in (counts 0). Answers come from AIService (below). If the new AI cell would end under the reply bar, the list scrolls up just enough (0.3 s) to show it whole.
6. Explain this post (the sparkles on any post): a sheet at the medium detent: sparkles + "Explain this post" (17 pt bold), the post quoted small (avatar, name, the first line), then AIService's explanation typing in word by word (15 pt), and an "Ask anything" capsule at the bottom that opens the AI tab.
7. Compose (the plus): a full-screen sheet: "Cancel" (17 pt #0F1419) left; "Drafts" (#1D9BF0) and the "Post" capsule (#1D9BF0, white bold, 50% while empty) right; Maya's 40 pt avatar + the field "What's happening?" (20 pt, placeholder #536471); above the keyboard "Everyone can reply" with a globe (15 pt #1D9BF0), then the toolbar (photo, camera, sparkles, GIF, list.bullet, mappin, #1D9BF0) with the character ring. Post: the sheet slides down, a dark top toast "Your post was sent" (a #0F1419 capsule at 92%, white 15 pt, 1.6 s), and the new post springs in at the top of For you: the feed moves down by its height with a 0.35 s spring and the cell fades in; it shows "now" and zero counts. It also appears first on Maya's profile.
8. Search: a #EFF3F4 "Search" capsule, tabs For You / Trending / News / Sports / Entertainment; "Today's News" (3 stories: bold title, three small avatars, "18 hours ago · Trending · 128K posts") and "Trending in United States" rows (topic bold, "48.2K posts"). Typing filters posts and people live.
9. Notifications: tabs All / Verified / Mentions; rows with a 28 pt icon (heart.fill #F91880, arrow.2.squarepath #00BA7C, person.fill #1D9BF0, the Squawk logo), small avatars, "Priya Shah liked your post" and the post's first line in #536471.
10. Messages: a "Search Direct Messages" capsule; rows (48 pt avatar, bold name, "@handle · 2h", last line #536471). A thread: 22 pt-corner bubbles, mine #1D9BF0 white text, theirs #EFF3F4; a "Start a message" capsule that sends.
11. Profile: banner-maya (120 pt), the 80 pt avatar ringed in white over it, an outlined "Edit profile" capsule, "Maya Chen" + blue badge, "@mayachen", bio "Building apps on weekends. Dog person. SF.", "San Francisco, CA", "mayachen.dev", "Joined March 2019", "412 Following 2,318 Followers", tabs Posts / Replies / Highlights / Articles / Media / Likes.
12. AI tab: the AI avatar 44 pt centred, "Hi Maya. What do you want to know?", four chips ("What's happening today?", "Explain the Max post", "Roast my profile", "Plan my Sunday") and an "Ask anything" composer; my messages in #EFF3F4 bubbles, the AI's answers as plain text typing in word by word.
AI
Services/AIService.swift: protocol AIService { func reply(to post: Post, text: String) async -> String; func explain(_ post: Post) async -> String; func chat(_ text: String) async -> String }. ScriptedAI (the only implementation now) answers from Data/AIScript.swift: each post's aiAnswer for a reply that contains "@ai", its explain line, the four chips' answers; anything else gets "I couldn't verify that one. No reliable source backs it up yet." A remix swaps ScriptedAI for a live model by changing one line in AppEnvironment.
FIXTURES (Data/Fixtures.swift; avatars av-*.jpg)
Accounts: Maya Chen @mayachen (av-maya, blue), Max the Golden @maxthegolden (av-max, blue, 284K followers), Priya Shah @priyabuilds (av-priya, blue), Marcus Cole @marcuscooks (av-marcus, blue), Sofia Reyes @sofiareyes (av-sofia), Kenji Mori @kenjimori (av-kenji), Dev Malhotra @devmalhotra (av-dev), Lena Park @lenapark (av-lena), Omar Haddad @omarhaddad (av-omar), Chloe Hart @chloehart (av-chloe), Ethan Brooks @ethanoutside (av-ethan), Zara Okafor @zaraokafor (av-zara, blue), Night Sky Daily @nightskydaily (av-nightsky), Squawk AI @ai (the code avatar, gold).
For you, in order (counts = replies, reposts, likes, views; AI answer):
1. Max the Golden · 2h: "Max graduated today. Top of his class 🎓" + max-grad (3:2). 2.1K, 8.4K, 96K, 1.2M. Replies: Sofia "the chewed diploma 😭", Kenji "valedictorian of fetch", Zara "Congrats Max!! 🎉". AI: "Nope. No college accepts a student who still eats the homework." Explain: "A dog account posted Max in a graduation cap with a half-chewed diploma. It's a joke: dogs don't graduate, though puppy-school certificates are real."
2. Priya Shah · 3h: "shipped my first iOS app this weekend. 14 downloads, 13 of them are my mom" + feed-desk. 412, 1.9K, 12K, 284K. AI: "App download stats aren't public, so I can't verify. Your mom sounds like a solid early adopter though."
3. Night Sky Daily · 5h: "Northern lights over Iceland last night 🌌" + feed-aurora. 380, 6.2K, 41K, 902K. AI: "Auroras light up Iceland often, but \"last night\" needs a date I don't have."
4. Lena Park · 6h, a poll: "Best way to spend a Sunday?" Long brunch 41%, Hike 23%, Ship a side project 29%, Nap 7%. 96, 120, 1.4K, 88K. AI: "Polls show preferences, not truth. Brunch leads, but I'd ship the project."
5. Marcus Cole · 7h: "14 hours of broth for one bowl of ramen. worth it." + feed-ramen. 233, 1.1K, 18K, 410K. AI: "Yes, tonkotsu really simmers that long. Worth it only if you worship the broth."
6. Dev Malhotra · 8h: "Fun fact: goldfish only have a 3-second memory 🐠" + feed-goldfish, with added context: "Goldfish can remember things for months. Researchers have trained them to respond to sounds, colours and feeding times." source "nationalgeographic.com". 1.3K, 980, 7.7K, 1.1M. AI: "No, it's a myth. Goldfish remember for months, unlike this recycled claim."
7. Kenji Mori · 9h: "He has a whole bed." + feed-cat-box. 520, 4.4K, 63K, 1.6M. AI: "True. Cats treat big beds as optional and tiny boxes as mandatory."
8. Zara Okafor · 10h, quoting post 2: "13 out of 14 is still product-market fit". 88, 640, 9.1K, 190K.
9. Ethan Brooks · 11h: "above the clouds before work" + feed-hike. 61, 340, 5.2K, 120K. AI: "Photo checks out for the ridge above clouds at sunrise. The before-work claim is on the honor system."
10. Omar Haddad · 12h: "best tacos in Austin, no debate" + feed-tacos. 302, 210, 3.8K, 96K. AI: "Can't confirm without a taste test, and \"best\" always starts a fight."
11. Lena Park · 13h: "the city looked unreal tonight" + feed-skyline. 44, 280, 6.6K, 150K. AI: "Yep. Blue hour is nature's filter, and it rarely misses."
12. Sofia Reyes · 14h: "front row energy" + feed-concert. 39, 150, 2.9K, 70K. AI: "Energy yes, front row maybe. Those hands could be anywhere in the crowd."
Following: posts 2, 5, 7, 8 plus Chloe Hart · 1h "monday fuel" + feed-latte (AI: "If Monday fuel means latte art and a croissant, yes, that checks out.") and Ethan Brooks · 4h "new running shoes, who dis" + feed-sneakers.
Stories: "Golden retriever's 'graduation' photo takes over For you" (128K posts), "Northern lights seen across Iceland" (64K), "Weekend builders share their first apps" (21K). Trends: #SundayFunday 48.2K; Max the Golden 128K; Northern Lights 64K; #BuildInPublic 12.6K. Notifications: Priya liked your post; Kenji and 3 others reposted your post; Lena followed you; Zara mentioned you. Messages: Priya "hack night thursday?", Kenji "sent a photo", Marcus "ramen saturday?". Maya's posts: "first commit of the weekend ☕️" (2d), "hot take: the best apps are tiny" (5d).
HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 80x36 pt hotspot at the top centre (x 161–241, y 64–100 pt), drawn in its own window above every sheet, cover, toast and the keyboard (a tap there closes whatever is open), resets to this state and plays this run through the real reply, toast, AI and like code, identical every time (seconds from the tap): 0.00 Max's post page pushed with no animation, scrolled to the top, his post unliked, any earlier Maya or AI replies removed, the keyboard down, the reply bar in its typed state with "@ai is this true?" (@ai blue) and the blue Reply capsule, and the touch dot landing on Reply; 0.15 tap Reply; 0.20 "Reply sent" slides down; 0.25 Maya's reply opens at the top of the replies; 0.60 the AI cell opens under it with the thinking dots; 0.90 the answer types in at 85 ms a word ("Nope. No college accepts a student who still eats the homework."), the list scrolling up just enough to show the whole cell; 2.30 the dot glides to the heart on the AI's reply; 2.55 tap: it fills pink with the ring burst and 0 rolls to 1; 2.90 the dot fades; hold.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, glides 0.25 s between points and fades after its last tap.
- What the eye must see: frame 0 fully drawn (no fade-in, no blank photo); Max's photo whole on screen the entire run; rows move with springs and never jump or blink; the heart pops and never blinks; toasts hold ≥1.2 s; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Every image is preloaded and decoded off the main thread at launch; warm up haptics at launch.
LOOK
Text #0F1419; secondary #536471; hairlines #EFF3F4; borders #CFD9DE; blue #1D9BF0 (pressed #1A8CD8); like #F91880; repost #00BA7C; gold #E2B719; grey fill #F7F9F9; white background. SF Pro (15 pt body, bold names, heavy titles). Pressed states darken; haptics on likes, reposts, sends and tab taps.
RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures. No backend, login, permissions, analytics or network calls at runtime (images are bundled; the AI is scripted). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.
- Keep every file inside /home/user/workspace (/tmp is denied).
REMIX-READY
Theme/Brand.swift (the name, the logo view, a Copy enum with every word), Theme/Theme.swift (colours, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/AIScript.swift, Data/DemoScript.swift (HOOK MODE timings). Codable models with String ids: Account, Post (text, media, quote, poll, counts, aiAnswer, explain, context, replies), Poll, Trend, NewsStory, AppNotification, Thread, Message; behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (TimelineStore, PostStore, ComposeStore, InboxStore, ProfileStore); views never read Fixtures. Services/AIService.swift as above. Components/: PostCell, ActionBar, LikeButton, MediaView, QuoteCard, PollView, ContextCard, ReplyBar, AIReplyCell, Toast, TouchDot. Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, change the accounts and posts, add a post kind (a new case in Post.Kind + one view in Components); how to plug a real model into AIService (a backend route + one Swift file); 3 one-prompt remixes ("Squawk for your company's internal timeline", "Squawk for your running club with a weekly leaderboard", "Squawk for a classroom where the AI is the teaching assistant"). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the Home tab icon for 1 s to reset everything to launch (likes, reposts, bookmarks, replies, new posts, the poll, scroll, tab).
BUILD
Theme, Brand, Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Home with the post cell, like, repost and bookmark first, then the post page with replies, the reply bar, "Reply sent" and @ai replies, then HOOK MODE, then compose, Explain this post, Search, Notifications, Messages, Profile and the AI tab. Fetch squawk-brand.zip and media.zip as soon as the shell runs; check each image exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
Prompt 2, one round of fixes after we watched it at 30 fps:
Four fixes from a 30 fps recording of HOOK MODE and a walk through Home and compose, plus one cleanup. Change nothing else (every screen, the fixtures and the rest of HOOK MODE stay as they are).
1. HOOK MODE's first frame shows an empty reply bar: after the hotspot tap, Max's post page appears with "Post your reply" in the bar and the touch dot tapping its right end, so "@ai is this true?" and the blue Reply capsule never appear on screen. From the reset until the Reply tap, the bar must be in its typed state with the keyboard down: one line showing "@ai is this true?" (@ai #1D9BF0, the rest #0F1419) and the blue "Reply" capsule at its right, fully drawn on the very first frame, with the touch dot landing on that capsule. Hold that typed state 0.40 s, then tap Reply, which moves every later step 0.25 s later: 0.40 tap Reply; 0.45 "Reply sent"; 0.50 Maya's reply opens; 0.85 the AI cell with the thinking dots; 1.15 the answer types in (85 ms a word); 2.55 the dot lands on the AI reply's heart; 2.80 tap; hold.
2. The "Reply sent" toast is see-through while it slides in: for its first frames the back arrow and the "Post" title show through it. Make it fully opaque (#E8F5FD, its 1 pt #BEE3F8 border) on every frame; it only slides down from above the status bar, no fade.
3. The touch dot rests on the reply bar for 2 s after the Reply tap, then covers the heart during the like, so the pop and the ring burst are hidden under it. After each tap the dot lifts: it fades out over 0.15 s right after the tap lands. For the next tap it scales in again at the new point (no glide across the screen). The heart's fill, pop and 8-dot burst must be visible in full on every frame.
4. Compose → Post: the text clears to "What's happening?" while the sheet is still sliding down, and when the feed was scrolled it then scrolls through every post back to the top in a blur. Keep the typed text in the sheet until the sheet is gone; if the feed isn't at the top, jump it to the top with no visible scroll (one frame), then the new post springs in at the top as now.
5. Delete any scratch or download folders (for example .dl/ and the zips); the photos stay in the asset catalog only.
Rebuild, run HOOK MODE once and post once from compose to confirm.
+1 prompt, the remix that made Grok real:
Make @ai real: Squawk AI's replies, Explain this post and the AI tab now ask xAI's grok-4.7. A backend route calls the Responses API at api.x.ai with the project's GROK_API_KEY, the web_search tool and today's date and time, sending the post's text and photo and the reply: one or two witty, accurate sentences, at most 25 words. Show "Powered by Grok" under Squawk AI's name. The thinking dots stay until it answers, then it types in as now. HOOK MODE stays exactly as it is (Max's post, Maya's reply, the recorded answer, every timing). Keep everything else.
You're watching this on the app we cloned.
This one has the For You feed, likes, reposts, polls and an AI you can tag.
All made in 2 prompts. One more plugged in the real Grok.
Remix on @vibecodeapp and make it your own today
This concept was too good to stay a concept.
So we built it for real. It reads every screenshot on your phone, sorts them, and deletes the expired ones.
3 prompts on @vibecodeapp
This app that turns your drawings into songs is genius.
Had to see if I could build it myself.
1 prompt on @vibecodeapp
Remix it here: https://t.co/x0XNjxjfJ4
Prompt 1, the full build:
Build Boxburst, an original block puzzle game for iPhone in SwiftUI with a SpriteKit board, in the genre of 8x8 block puzzles like Block Blast and Woodoku: drag pieces from a 3-piece tray onto an 8x8 board, full rows and columns burst, combos and praise words, a best score, an Endless mode and a Journey mode with level goals, block skins and settings. Its own name, logo, colours and words, all below.
ASSETS
curl -L once and unzip flat: https://t.co/zdjzFgWphi. It holds AppIcon-1024.png: use it as the app icon. Everything else (the logo, blocks, effects, icons) is drawn in code with SF Symbols where needed; no image generation.
LOOK
- Screen: a full-bleed vertical sunset gradient #FF9A62 (top) → #FF5F8F (middle) → #7C4DFF (bottom), with a few soft white circles drifting slowly at 8% opacity.
- Board: a rounded panel (16 pt corners) #2B1740 with a 2 pt inner glow #4A2A66; 64 empty cells drawn as rounded squares #3A2152 (8 pt corners) with 3 pt gaps.
- Blocks are "jelly" squares that fill their cell: 22% corner radius, a vertical gradient from 12% lighter at the top to 12% darker at the bottom, a 1.5 pt outline 25% darker, and a glossy white highlight (a soft ellipse at the top-left, 38% opacity). Colours: R red #FF4D6D, O orange #FF9F1C, Y yellow #FFD23F, G green #34D399, C teal #2EC4B6, B blue #4D96FF, P purple #B266FF.
- Text: SF Pro Rounded, black weight, white with a soft plum shadow. Light status bar, always visible.
- The Boxburst logo, drawn in code: "BOX" over "BURST", chunky rounded capitals, each letter filled with a block colour (B blue, O orange, X red; B yellow, U green, R teal, S purple, T red) with a 4 pt white outline and a plum drop shadow, a small white 8-point burst star over the X.
GAME SCREEN (Endless; points on a 402x874 iPhone)
- HUD: top-left a gold trophy (trophy.fill #FFD23F) + the best score in white (22 pt black) at y ~97; top-right a white gear (gearshape.fill, 28 pt, 85%) opening Settings; the current score centred at y ~190, white 58 pt black, rolling up with numericText.
- The board: 8 cells of 44 pt, centred, top at y 236.
- The tray: three slots centred under the board at y ~655; pieces drawn at 0.55x; a placed piece's slot stays empty; when all three are placed, three new pieces pop in (scale 0 → 1.1 → 1.0, 0.06 s apart).
- Below the tray, y 735-805: PowerUpBar, an empty band for buttons a remix adds.
- Dragging: touching a tray piece grows it to board size in 0.1 s and floats it with its bottom 70 pt above the finger. While its cells line up with empty cells, a ghost sits on those cells (white at 28% + a 2 pt white outline). Every row and column the drop would complete shows its blocks in the dragged piece's colour, reverting when the piece moves off, with small sparkles along those lines. Release on a valid spot snaps the piece in (0.08 s, a small squash); anywhere else it flies back to its slot (0.18 s). Pieces never rotate.
- Bursting: full rows and full columns clear together. Each cleared line flashes a soft white light bar (in 0.06 s, fading over 0.3 s); its blocks pop 1.15x and burst into 6-8 small rounded squares and stars of their colour that fly out 40-90 pt with gravity and fade in 0.5 s, in a wave from the drop point outward, 0.02 s per cell. 3+ lines add a 2 pt shake (0.15 s). Haptic on every drop and burst.
- Scoring: +1 per cell placed; clearing n lines in one move scores L(n) x streak with L = 10, 20, 60, 120, 200, 300 (n = 1..6, +100 per extra line) and streak = consecutive clearing moves including this one; an empty board after a clear adds +300. The streak survives two placements without a clear and resets on the third. The move's total ("+126", white with a plum outline) rises 40 pt from the drop point and fades over 0.7 s.
- Words: 2 lines "Nice!", 3 "Sweet!", 4 "Superb!", 5+ "Epic!", an empty board "Clean Sweep!" (with "+300" in a small gold capsule under it). The word springs in at the board centre (0.4 → 1.15 → 1.0 in 0.3 s), chunky rounded white letters with a thick coloured outline (Nice! teal, Sweet! pink, Superb! purple, Epic! orange, Clean Sweep! gold), about 80% of the board width for Clean Sweep!. Under it a capsule "COMBO x2" (white on purple) when the streak is 2+. A new word replaces the old one at once; a word holds 0.6 s then shrinks out in 0.15 s; Clean Sweep! holds 1.4 s.
- Fair deals: a new tray is always placeable (Engine.solve finds an order and spots for all three; redeal otherwise).
- Game over: when no tray piece fits, the blocks fade to grey from the bottom row up (0.05 s per row), then a card: "No moves left", Score, Best with the trophy, a big white "Play Again" capsule (plum text) and "Home". A new best shows "New High Score!" instead: a gold trophy bounces in over white light rays, the score in huge gold numerals, confetti.
- No ads, no revives, no coins, no lives.
OTHER SCREENS
1. Home (launch): the Boxburst logo centred at y ~240 (300 pt wide), the trophy + best under it, a big round white Play button (120 pt, play.fill in plum, a soft pulse) that starts Endless, a "Journey" capsule (white text on #2B1740 at 40%, "Level 3" under it), round Skins and Settings buttons at the bottom corners.
2. Journey: a winding path of levels 1-20 on the same gradient (round nodes 64 pt: done = gold with 3 stars, current = pulsing white, locked = plum with lock.fill). A level replaces the score with goals: some blocks carry an item (a gold star.fill or a teal diamond drawn on the block face); clearing its line flies the item up to its goal counter in the HUD (e.g. star x5, diamond x4), which counts down. All goals done → "Level Complete!" with 3 stars and "Next"; no moves → "No moves left" and "Retry". Levels 1-3 playable with seeded boards and goals in Levels.swift; 4-20 locked.
3. Skins: a sheet of 4 block skins drawn in code: Jelly (default, above), Bevel (flat face with four bevelled edges), Wood (warm wood tones with grain lines), Neon (dark board, glowing outlines). The choice applies everywhere.
4. Settings: a sheet with Haptics and Reduce Effects toggles, How to Play (three short cards), Reset Best Score. Best score and skin persist in UserDefaults; nothing else persists.
HOOK (the video's first 3 seconds)
Rows top to bottom, columns left to right, numbered from 1; letters are block colours (above), "." empty. Board:
.....GG.
BBPPPGC.
BBOPRRC.
OOOYRRC.
GGCC...P
GGCC...P
YYYRR.OP
.....OO.
Tray: slot 1 a yellow 2x3 (2 rows x 3 columns), slot 2 a red 3x3, slot 3 a teal L (cells r1c1 r2c1 r3c1 r3c2). Score 2140, best 3602, streak 1 (the last move cleared). Checked with a script: the yellow 2x3 at rows 5-6, columns 5-7 completes rows 5 and 6 and column 7 (Sweet!, COMBO x2, +126 → 2266); then the red 3x3 fits nowhere; the teal L with its top at row 5 column 6 completes column 6 and row 7 (Nice!, COMBO x3, +64 → 2330), leaving rows 2-4 full in columns 1-5; the red 3x3 at rows 2-4, columns 6-8 clears rows 2-4 and the board is empty (Clean Sweep!, COMBO x4, +549 → 2879). Re-check it with your own script.
- HOOK MODE: an invisible 44x44 pt area at x 12-56, y 64-108 (over the trophy) on every screen, above every sheet and card. A tap closes everything, opens Endless on the seeded state and plays this run through the real drag, drop, burst and deal code, identical every time (seconds from the tap): 0.40 the touch dot lands on slot 1; 0.50 the piece lifts; 0.50-1.15 the dot drags it on an easing curve to its spot (the ghost and the yellow line preview show from ~0.95); 1.15 drop; 1.20 the burst; 1.25 "Sweet!"; 1.35 "COMBO x2"; 1.80 the words shrink out; 1.95 the dot picks up the teal L, 2.45 drops it on its spot (Nice!, COMBO x3); 2.95 the dot picks up the red 3x3, 3.50 drops it on rows 2-4 / columns 6-8 (Clean Sweep!, COMBO x4); 4.90 a new tray pops in: a blue 1x4, an orange 2x2, a green T. Every wait uses these times, never the app's normal delays; no random numbers anywhere in HOOK MODE.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything (under the dragged piece's bottom centre while dragging); it scales in as it lands, glides between points and fades after its last drop.
- What the eye must see: the dragged piece stays visible on every frame from the tray to the board; the line preview is on before the drop; blocks never vanish in one frame (they pop and burst); flashes ≤0.12 s at ≤35% white; Clean Sweep! replaces the earlier word and holds ≥1.2 s; ghosts are exactly cell-sized. Preload everything and warm up haptics at launch: the first run must not stall.
REMIX-READY
Theme/Brand.swift (name, the code-drawn logo, a Copy enum with every word), Theme/Theme.swift (colours, gradients, fonts; no colour literals elsewhere), Theme/Skins.swift. Engine/ is pure Swift with no UI: Board (8x8 of optional Block), Piece (cells + colour), Pieces.swift (every shape of the genre: 1x1; 1x2, 2x1; 1x3, 3x1; the four 3-cell corners; 1x4, 4x1; 2x2; T, S, Z and L/J in all their orientations; 1x5, 5x1; 2x3, 3x2; 3x3; the four 5-cell big corners), Placement (trayIndex, row, col), Engine.canPlace / place (returns the board, the cleared lines and the points) / solve(board, tray) -> [Placement]? (tries every order and every spot, counting clears between moves; prefers a plan that empties the board, then the most lines). Game/GameStore.swift (@Observable: board, tray, score, best, streak, mode, level) with one place(_:) used by the finger, by HOOK MODE and by autoplay([Placement], flight: 0.25, gap: 0.35), which flies tray pieces onto their cells through the same drop code with no finger. Game/HookScript.swift: HOOK MODE as a list of timed steps (dotTo, pickUp, dragTo, drop, wait). Game/PowerUpBar.swift: the empty band under the tray. Data/Levels.swift, Data/DemoBoards.swift (the hook board). Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, change the logo, add a piece, a level, a skin or a power-up (PowerUpBar + Engine.solve + autoplay); 3 one-prompt remixes ("Boxburst for your week: pieces are meetings, a full row frees an afternoon", "a 💡 Solve button that shows where all three pieces go", "Boxburst for kids: every burst says the colour's name"). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.
FILMING
Long-press the score to reset everything to launch (board, tray, score, best 3602, skin Jelly). Long-press the gear to jump to a game over with a new high score (3,640 vs 3,602).
RULES
- Native SwiftUI + SpriteKit (SKView for the board, tray, drag and effects at 60 fps; SwiftUI for the HUD, menus and sheets), iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures; no backend, login, permissions, analytics or network calls at runtime. Delete the SwiftData starter.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.
- Keep every file inside /home/user/workspace (/tmp is denied).
BUILD
Theme, Brand, Engine (with a quick check of the hook board), then the game screen in small files (board, blocks, tray, drag, burst effects, words, HUD), launching in the simulator every two or three files; then HOOK MODE, Home, game over and New High Score, Journey, Skins, Settings. Fetch brand.zip as soon as the shell runs; check the file exists, never view it. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan. Do not publish.
Prompt 2, one round of fixes after we watched it at 60 fps:
Five fixes for Boxburst. Keep everything else exactly as it is, including every HOOK MODE time.
1. Layering: the dragged piece, the touch dot and any piece flying onto the board always draw above the praise word, the COMBO capsule and the +N pops. Now "Nice!" and COMBO x3 cover the red 3x3 while it is dragged in HOOK MODE.
2. The +N pop starts 24 pt above the placed piece's top edge, rises 30 pt and fades out in 0.5 s, and never sits under the praise word (if they would overlap, put it beside the piece). Now "+126" and "+549" show through behind "Sweet!" and "Clean Sweep!".
3. The burst starts on the frame the piece snaps in (≤0.05 s after the drop); now the full lines wait ~0.17 s before the light bar. The word still springs in right after the burst starts.
4. New High Score: the dimmed HUD score shows through behind the "New High Score!" title as a doubled "3640". Hide the HUD's score and best while any end card is up.
5. Journey: the "Journey" title and subtitle sit on top of the topmost level node. Give the header a solid band in the gradient's top colour that the path scrolls under, and start the path below it.
Build, run HOOK MODE once to check 1-3, and stop.
+1 prompt, the remix that added the Solve button:
Add a 💡 Solve power-up. Keep every screen, animation, the look and HOOK MODE's opening exactly as they are (the yellow 2x3 drop, Sweet!, COMBO x2). In PowerUpBar: a round 64 pt gold button, lightbulb.fill, "Solve" under it. A tap: faint outlines of the tray pieces flicker over the board for 0.4 s ("Solving…"), then Engine.solve's plan locks as numbered outline ghosts in the pieces' colours, drawn above the blocks, and autoplay flies the pieces in one by one. HOOK MODE: at 1.95 s the dot taps Solve instead of the two drags; the plan locks at 2.35, pieces land at 2.70 and 3.30.
Everyone wants to build the next Block Blast.
This one has the 8x8 board, combos, Journey levels and block skins.
All made in 2 prompts. One more added a Solve button that plays your hand for you.
Remix on @vibecodeapp and make it your own today
Last Seen Users on Sotwe
👅👺
Seen from Jordan
ometv_jackpot#156
Seen from Indonesia
yasoo 
Seen from Turkey
+18 Fotoğraf ve Video Paylaşım
Seen from Turkey
فانزه ميرا نوري
Seen from United States
Gobi Esau ☞ 🇺🇬
Seen from Germany
Kadir Gürsoy
Seen from Germany
Muscle Surge
Seen from Greece
🤤 MUSCLES and CUM 🤤
Seen from Turkey
Baddie Nyash
Seen from Israel
Most Popular Users
Elon Musk
@elonmusk
241.2M followers
Barack Obama
@barackobama
118.8M followers
Cristiano Ronaldo
@cristiano
114.5M followers
Donald J. Trump
@realdonaldtrump
111.9M followers
Narendra Modi
@narendramodi
107M followers
Rihanna
@rihanna
98.7M followers
NASA
@nasa
92.3M followers
Justin Bieber
@justinbieber
91.8M followers
KATY PERRY
@katyperry
90M followers
Taylor Swift
@taylorswift13
84M followers
Lady Gaga
@ladygaga
75.5M followers
Virat Kohli
@imvkohli
73.4M followers
Kim Kardashian
@kimkardashian
70.8M followers
YouTube
@youtube
68.7M followers
Neymar Jr
@neymarjr
66.4M followers
Bill Gates
@billgates
65.2M followers
Selena Gomez
@selenagomez
63.1M followers
The Ellen Show
@theellenshow
62.2M followers
CNN
@cnn
61.7M followers
X
@x
60.6M followers