Chengyu Calendar
Calendar app · from our videos on X
Chengyu Calendar is a Chinese daily tear-off calendar with one idiom (chengyu) a day, printed on a pad of paper pages bolted under a red header with two brass screws. Drag a page's corner and it curls back like real paper, showing tomorrow's idiom underneath; let go early and it springs back flat. Pull far enough and it tears off with a ragged edge, follows your finger, and slides away. Each page scrolls to a pinyin table, the meaning, the story behind the idiom and three example sentences. Pull past the bottom to see the messy pile of torn pages, then flip through them in a 3D stack, open one full screen and bookmark it.
- iPhone · Swift
- Built in 1 prompt
- Free to remix

Remix copies the working app into your account for free, exactly as we built it. It runs in Vibecode's cloud iOS simulator, in your browser.
Watch the video on X@ios_app_builder · Oct 20, 2026The prompt that builds it
We built Chengyu Calendar in one prompt. Paste it into a new app to build your own copy, or change it first.
Prompt · 1,780 words
Download/reference the app shown in this post and clone it exactly, including the iPhone visual design, layout, interactions, animations, typography, spacing, and all visible states. Make it functional and runnable in the simulator. Match the reference as closely as possible and include any interaction shown in the source. Reference: https://x.com/FiachraRM/status/2112188946809749658. The actual 37-second video is uploaded as source.mp4 in project Files. Inspect it carefully, extracting frames as necessary. Build a native SwiftUI iOS app named Chengyu Calendar using Opus 5.5. It is a Chinese daily tear-off calendar (老黃曆 style): one Chinese idiom (chengyu) per day, printed on a pad of paper pages bolted under a red header, and you tear today's page off with your finger like real paper. Use SwiftUI + Metal shaders for the paper (page curl, tear, paper bend). Do NOT put a fake handset frame inside the actual app; the simulator provides that. Use realistic deterministic fixture data so every screen is rich and usable without permissions or backend. Do not publish externally. Observed video sequence (0-37s): - 0-1.5s: today's page 馬到成功 (green theme) sits flat on the pad. - 1.5-4.5s: the finger grabs the page's top-right corner and drags down-left. The page curls back from that corner like real paper (a cylinder curl that follows the finger; the back of the sheet shows as a lighter, slightly translucent mirrored flap), revealing the next page 沈魚落雁 (red theme) underneath. The finger lets go before the threshold and the page springs back flat with a soft settle. - 5-7s: a second, longer drag down-left: past the threshold the page TEARS off the top binding (ragged torn top edge) and becomes a loose sheet. - 7-11.5s: the loose sheet follows the finger anywhere on screen, bending gently and casting a soft shadow over 沈魚落雁; dropped back near the top it snaps back onto the pad (馬到成功 is today again); pulled off again. - 12-13.5s: a quick flick throws the loose sheet off screen; it spins and flutters away. 沈魚落雁 is now the top page. - 15-19s: the same on the red page; then a previously torn page is put back. - 19.5-21.5s: the page itself scrolls vertically (it is a long sheet: header, idiom, table, 典故 story, citation, 例句 examples). - 21.5-24s: pulling up past the bottom of the page lifts the whole pad up into a card at the top of the screen and reveals a black space below with a messy 3D pile of all the torn pages lying at angles (top one 谈笑风生). - 24-27s: that opens the torn-pages screen "撕下的頁 ⌄": black background, the torn pages stand in a 3D fanned stack (perspective, slight Y rotation, each with a ragged torn top edge and a folded dog-ear at the top-right corner). Horizontal swipes flip through them like a rolodex. Caption at the bottom: "十月十五日 Thursday, 15 October" (date of the page in front). - 27.5-30s: tap a page and it zooms to full screen (隨波逐流, green), with circular bookmark and close (×) buttons top-right; tapping the bookmark fills it; dragging the page down dismisses it back into the stack. - 30-34s: back to the pad (pull the card back down), today's page 馬到成功. Visual details: - Header (top ~150pt incl. status bar): deep calendar red #C1120C with two brass screw heads (gold circles with a diagonal slot, subtle bevel) at left and right, and a small cream reset/sun icon centred under the Dynamic Island. Pages hang from its bottom edge; a faint perforation line and a few stacked page edges show under the binding. - Paper: warm off-white #FBF7F1 with very subtle paper grain. Each page has a theme colour used for all ink accents: green #4F8B3B or red #C8321E. - Date row inside an ornamental frame (thin double rule with little scroll flourishes at both ends, theme colour): left "六月六日", centre an octagonal cartouche "2026" (bold italic serif), right "星期六". - Idiom: huge heavy Chinese serif (Songti / Noto Serif TC Black look), theme colour, 4 characters spanning the page width, e.g. 馬到成功. - Table in a thin double-ruled box with corner ornaments: 4 columns, each: italic pinyin small (mǎ / dào / chéng / gōng), the character in bold serif (馬 / 到 / 成 / 功), English gloss in small serif (horse / arrive / achieve / success). Then rows with small-caps labels: MEANING "Instant success; to succeed as soon as one sets out." EXAMPLE "祝你考試馬到成功!" / italic "zhù nǐ kǎoshì mǎdàochénggōng!" / "Good luck in the exam, may you succeed at once!" - 典故: a small filled theme-colour tag with cream text "典故" and a hairline to the right, then a serif paragraph (grey-brown #6B5E55): "The phrase comes from the theatre of the Yuan dynasty. In an anonymous play of the thirteenth century about the Tang general Yuchi Gong, a commander is sent into battle with the promise that his horse need only arrive and the victory will be won. The image is of a general whose horse reaches the field and the battle is over at once. From the stage the four characters passed into common speech as a wish for anyone setting out, on a campaign, an examination, a journey or a new venture. They are painted beside horses in New Year pictures, above all in a year of the horse, and said to students on the morning of the university entrance examination. The wish is not simply for success but for success at once." Citation line: "— 元·無名氏《小尉遲》 Little Yuchi, an anonymous Yuan play, 13th century" (italic English). - 例句 box: thin ruled box with a solid theme-colour vertical band on the left reading 例句 vertically, three examples separated by hairlines: "新項目剛啓動,希望大家馬到成功。" / "xīn xiàngmù gāng qǐdòng, xīwàng dàjiā mǎdàochénggōng." / "The new project has just started; here's to everyone's quick success."; "他一上場就馬到成功,第一回合就贏了。" / "tā yí shàngchǎng jiù mǎdàochénggōng, dìyī huíhé jiù yíng le." / "He succeeded the moment he stepped on, winning the first round."; "出發前朋友們都祝我馬到成功。" / "chūfā qián péngyoumen dōu zhù wǒ mǎdàochénggōng." / "Before I set out my friends all wished me instant success." - Fonts: bundle Noto Serif TC (Regular + Black) from Google Fonts for the Chinese (subset is fine) and use a classic serif (New York / Georgia-like) for English, italic for pinyin. Fixture pad (top to bottom): 1 馬到成功 (六月六日 星期六, green, content above), 2 沈魚落雁 (八月八日 星期八, red; mean "So beautiful that fish sink and wild geese fall from the sky."; 典故 from the Zhuangzi: "The Zhuangzi, a book of the fourth century BC, has a passage on the relativity of all judgement. Lady Li, it says, were beauties to men, yet when fish saw them they dived deep, when birds saw them they flew high, and when deer saw them they ran. Of the four, the book asks, knows the right standard of beauty? It was a joke against the idea of one measure for the world. Later ages kept the image and dropped the joke: sinking fish and falling birds became a compliment, tied to Xi Shi and Wang Zhaojun, and used to praise a beauty that stops every creature in its tracks." citation "—《莊子·齊物論》 Zhuangzi, 4th century BC"), then 6 more distinct idioms alternating green/red (一帆風順, 畫龍點睛, 守株待兔, 對牛彈琴, 半途而廢, 胸有成竹) with real pinyin, glosses, meanings, examples and short 典故. The torn pile starts with 5 earlier pages: 谈笑风生 (十月十五日, Thursday, 15 October, green), 隨波逐流 (十月十二日 星期一, green; MEANING "To drift with the current and follow the crowd blindly." EXAMPLE "做人要有主見,不能隨波逐流。" / "zuòrén yào yǒu zhǔjiàn, bù néng suíbōzhúliú." / "You need a mind of your own; don't just follow the crowd."; 典故 "The Songs of Chu, an anthology of the third century BC, includes a short dialogue called The Fisherman, by an unknown author. Qu Yuan, banished from the Chu court, was wandering by the river when a fisherman asked why he alone was clean while the world was muddy..." citation "楚辭·漁父 The Fisherman, Songs of Chu, 3rd century BC"), 一石二鳥, 亡羊補牢, 塞翁失馬. Interactions (gestures, not buttons; use native springs; no static screenshots): 1. Peel: a drag that starts on the top half of the current page curls the page from the nearest top corner along the drag vector (Metal page-curl shader on the rendered page: curl radius ~40pt, back side lighter and mirrored, shadow cast on the page below). Release with the curl under ~45% of the page height: spring back flat (interactiveSpring, slight overshoot). 2. Tear: drag past that threshold, or fast downward velocity: the page tears off the binding with a ragged torn top edge (procedural jagged mask) and a tiny jolt, light haptic. It becomes a loose sheet scaled to ~92% with a drop shadow and a gentle wave/bend shader driven by drag velocity; it follows the finger with a slight tilt in the drag direction. 3. Loose sheet: released within 80pt of the binding -> it snaps back on as the top page. A flick (velocity > 600pt/s) -> it flies off screen along the flick with spin and a flutter, then joins the torn pile. A slow release elsewhere -> it drops off the bottom edge with a flutter and joins the pile. 4. Scroll: each page is a long vertical sheet that scrolls (scroll only when the drag starts below the idiom, or is mostly vertical upward). 5. Pile: overscrolling up past the bottom of the page by ~90pt lifts the pad up into a rounded card at the top (~45% height) and reveals the black area with the 3D messy pile of torn pages; letting go there opens the 撕下的頁 screen (matched geometry / zoom). Pulling down on the card returns to the pad. 6. 撕下的頁 screen: black, circular back button (chevron.left) top-left, title "撕下的頁 ⌄" centred, circular grid button top-right; a 3D fanned stack of torn pages (rotation3DEffect, perspective) you flip through with horizontal swipes; the date caption at the bottom updates. Tap the front page -> it zooms to full screen with bookmark + × circular buttons; bookmark toggles filled; drag down or × to dismiss back into the stack. 7. Filming helper: double-tap the small centre icon in the red header resets everything instantly (all pages back on the pad, today = 馬到成功, pile = the 5 fixtures, scroll at top). Every launch starts in that state. Keep every file you create inside /home/user/workspace (fonts, generated images, scripts): tool access to /tmp and other paths outside the workspace is denied in this sandbox. Build fully, run compile/build validation, resolve all errors, and launch in the web simulator. Prioritize fidelity to the attached source and functional main interaction flow (peel, spring back, tear, drag, flick away, pile, stack). Deliver complete implementation rather than a plan.
More templates
All templates- View template

Lingo
iOSA Duolingo-style Spanish app with a winding lesson path, a bouncing mascot, flip-in word cards and confetti.
- View template

Pinned
iOSMeetings as sticky notes: tear off a note's ticket stub to cancel it and a red CANCELLED stamp slams down.
- View template

Lightly
iOSA wellbeing journal with a $70K/month onboarding: a cloud mascot, a face that shape-shifts by mood, a plan.
- View template

X Glass
iOSX with Apple's Liquid Glass: the 7-tab bar shrinks as you scroll and a glass lens follows your finger.
