[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95933":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":43,"readmeContent":44,"aiSummary":45,"trendingCount":15,"starSnapshotCount":15,"syncStatus":46,"lastSyncTime":47,"discoverSource":48},95933,"liquid-glass-screens","Appllama\u002Fliquid-glass-screens","Appllama","Explore liquid-glass welcome screens with floating stickers and interactive swipe animations.","https:\u002F\u002Fappllama.io",null,"TypeScript",284,29,111,0,173,4.43,"GNU General Public License v3.0",false,"main",true,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"animation","expo","expo-router","glassmorphism","ios","liquid-glass","mobile-development","mobile-ui","onboarding","react","react-native","react-native-animation","react-native-gesture-handler","react-native-reanimated","react-native-skia","react-native-ui","shaders","skia","typescript","ui-components","2026-09-21 02:04:29","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fappllama.io\">\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-dark.png\">\n      \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-light.png\">\n      \u003Cimg src=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-light.png\" width=\"270\" alt=\"Appllama\">\n    \u003C\u002Fpicture>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">React Native Expo Liquid Glass Screens — 2 Swipe-Up Welcome Cookbooks\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  An open-source pair of liquid-glass welcome screens for React Native and Expo: one glass sphere, one gesture, two skies. A UI study inspired by Wabi's create screen.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\u002Factions\u002Fworkflows\u002Fci.yml\">\u003Cimg alt=\"CI\" src=\"https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg?branch=main&event=push\">\u003C\u002Fa>\n  \u003Cimg alt=\"Expo SDK 57\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FExpo_SDK-57-000020?logo=expo&logoColor=white\">\n  \u003Cimg alt=\"React Native 0.86\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact_Native-0.86-61DAFB?logo=react&logoColor=111827\">\n  \u003Cimg alt=\"React Native Skia\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSkia-2.6-0A0C14\">\n  \u003Cimg alt=\"TypeScript\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-strict-3178C6?logo=typescript&logoColor=white\">\n  \u003Ca href=\".\u002FLICENSE\">\u003Cimg alt=\"GPL-3.0 License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCode-GPL--3.0-F2C94C\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#the-2-cookbooks\">Explore cookbooks\u003C\u002Fa>\n  ·\n  \u003Ca href=\"#copy-paste-prompts\">Copy a prompt\u003C\u002Fa>\n  ·\n  \u003Ca href=\"#replicate-the-artwork\">Replicate the artwork\u003C\u002Fa>\n  ·\n  \u003Ca href=\"#run-the-expo-gallery\">Run locally\u003C\u002Fa>\n  ·\n  \u003Ca href=\"#react-native-liquid-glass-api\">Use the API\u003C\u002Fa>\n  ·\n  \u003Ca href=\"#educational-use-and-intellectual-property\">Legal notice\u003C\u002Fa>\n\u003C\u002Fp>\n\n![Cookbook 1, Sky: the daylight liquid-glass welcome screen at the gate, mid-swipe, and open](.\u002Fdocs\u002Fimages\u002Fliquid-glass-showcase-01.png)\n\n![Cookbook 2, Astro: the night liquid-glass welcome screen at the gate, mid-swipe, and open](.\u002Fdocs\u002Fimages\u002Fliquid-glass-showcase-02.png)\n\n\u003Cp align=\"center\">\u003Csub>Showcase artwork uses simulator captures of this implementation. The reference clip that the interaction was calibrated against is not redistributed.\u003C\u002Fsub>\u003C\u002Fp>\n\n> [!IMPORTANT]\n> **Educational reference only.** This is an independent, unofficial Appllama project and is not affiliated with or endorsed by Wabi, Apple, or any other referenced company. Every bitmap and clip in this repository was generated for it; the interaction grammar is a study of a publicly visible screen. Do not ship these screens unchanged. Before any public or commercial use, replace the wordmarks, stickers, copy, and backdrops with your own, then make the final composition and motion meaningfully unique. [Read the full intellectual-property notice](#educational-use-and-intellectual-property).\n\n## 2 cookbooks. One Expo project. Copy either.\n\nLiquid Glass Screens is a React Native Expo cookbook for developers studying how a physical, gesture-driven welcome screen is built. Both cookbooks are the same TypeScript component with a different theme, drawn into one React Native Skia canvas and moved entirely on the UI thread with React Native Reanimated and React Native Gesture Handler.\n\nThe screen works like this:\n\n- a great glass dome sits on the bottom edge of the page, refracting whatever is behind it;\n- swiping up carries it toward the middle of the screen, and it shrinks as it climbs until it is a \"+\" button — the size is a function of position, so it follows the finger both ways;\n- while it is being pushed, a chromatic caustic gathers at its crown and answers the force of the hand;\n- when it lands, the cookbook's stickers surface through the button's own glass, get magnified and split by the lens on the way out, and settle into a plume that keeps breathing above it;\n- the copy comes in with a positional blur wipe, a rotating third line, and a call to action; and\n- dragging it back down grows it again and takes the plume away — a short dip followed by an upward fade in Cookbook 1, drawn into a stardust vortex in Cookbook 2.\n\nYou can:\n\n- run both cookbooks from one Expo Router app;\n- copy one named component, its theme, and its assets into an existing app;\n- paste a cookbook-specific prompt into Codex, Claude Code, Cursor, or another coding agent;\n- regenerate every wordmark, sticker, and backdrop from the prompts in [`prompts\u002F`](.\u002Fprompts); and\n- read the measured motion numbers in [`docs\u002FMOTION_SPEC.md`](.\u002Fdocs\u002FMOTION_SPEC.md).\n\nThe project comes from the product-flow research behind [Appllama](https:\u002F\u002Fappllama.io), a library of onboarding, paywall, and product UI from leading iOS apps.\n\n## The 2 cookbooks\n\n| Cookbook | Screen ID | Component | Backdrop | Return | Source | Agent prompt |\n| --- | --- | --- | --- | --- | --- | --- |\n| Cookbook 1 — Sky | \u003Ccode>sky\u003C\u002Fcode> | \u003Ccode>SkyGlassWelcome\u003C\u002Fcode> | Looping cloud video | Stickers dip, float back up, and fade | [View theme](.\u002Fsrc\u002Fliquid-glass\u002Fcookbooks\u002Fsky.ts) | [Copy prompt](#prompt-sky) |\n| Cookbook 2 — Astro | \u003Ccode>astro\u003C\u002Fcode> | \u003Ccode>AstroGlassWelcome\u003C\u002Fcode> | Two-layer still: stars + horizon glow | Stickers spiral into a stardust vortex | [View theme](.\u002Fsrc\u002Fliquid-glass\u002Fcookbooks\u002Fastro.ts) | [Copy prompt](#prompt-astro) |\n\nBoth cookbooks render through [`LiquidGlassScreen`](.\u002Fsrc\u002Fliquid-glass\u002Fliquid-glass-screen.tsx). A theme decides the backdrop, the wordmark, the forty sticker slots, the palette, the copy, the blur tint, the lens dispersion, the day-or-night glass tuning, and how the plume leaves.\n\n## Copy-paste prompts\n\nOpen the matching section, use GitHub's copy button, and paste the complete prompt into a coding agent while it is working inside your existing Expo app. Each prompt tells the agent exactly which repository files, assets, native dependencies, and semantic actions to inspect.\n\nThe prompts are intentionally strict about preserving your current app architecture and intentionally strict about replacing the study's identity before release.\n\n\u003Ca id=\"prompt-sky\">\u003C\u002Fa>\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>Cookbook 1 — Sky liquid-glass welcome screen — copy prompt\u003C\u002Fstrong>\u003C\u002Fsummary>\n\n~~~text\nYou are working inside my existing Expo React Native repository.\n\nUse https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens as a read-only technical reference. Integrate only Cookbook 1, the Sky liquid-glass welcome screen, into my app. Do not turn my app into the gallery and do not modify unrelated features.\n\nReference files:\n- src\u002Fliquid-glass\u002Fliquid-glass-screen.tsx, src\u002Fliquid-glass\u002Fglass.ts, src\u002Fliquid-glass\u002Forb-field.tsx, src\u002Fliquid-glass\u002Fcopy.tsx, src\u002Fliquid-glass\u002Ftypes.ts\n- src\u002Fliquid-glass\u002Fcookbooks\u002Fsky.ts and src\u002Fliquid-glass\u002Fsky-glass-welcome.tsx\n- assets\u002Fcookbooks\u002Fsky\u002F (sky.mp4, sky-poster.png, wordmark.png, stickers\u002F)\n- the Sky section of docs\u002FMOTION_SPEC.md\n- src\u002Fapp\u002F_layout.tsx only as an asset preloading reference\n- NOTICE.md and docs\u002FASSET_PROVENANCE.md\n\nPublic API:\n- Component: SkyGlassWelcome\n- Screen ID: sky\n- Semantic action: sky.lets-go\n- Props: initialState ('gate' | 'open'), onActionPress, onPrimaryPress\n- Relevant packages: @shopify\u002Freact-native-skia, react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-blur, expo-image, expo-status-bar, and expo-asset\n\nRequirements:\n1. Before editing, inspect my Expo SDK, React Native version, router, package manager, native splash configuration, onboarding routes, and existing dependencies. This screen needs a development build or a native build; it does not run in Expo Go.\n2. Copy only this component, its theme, its assets, and the transitive helpers it actually imports (glass.ts, orb-field.tsx, copy.tsx, types.ts). Do not copy the demo router, the gallery home, or Cookbook 2.\n3. Preserve my package versions, navigation, state architecture, app configuration, and native projects. Install only missing compatible packages with npx expo install, then rebuild the native app.\n4. Preload the video, poster, wordmark, and stickers before revealing the React tree. Adapt the loading pattern to my app instead of replacing my root layout.\n5. Mount the component inside a full-height flex: 1 surface with no visible navigation header and no surrounding safe-area padding, inside a GestureHandlerRootView; the component owns its canvas and status bar.\n6. Reproduce the reference behavior accurately: keep the 402×874 reference geometry, the position-driven sphere size, the lens backdrop filter and glass shader, the force-driven caustic, the sticker plume and its fall, the blur-wipe copy with the rotating third line, the reduced-motion behavior, and the accessibility labels. Do not replace the gesture with a button or the motion with a generic fade.\n7. Wire the semantic action through onActionPress to my existing onboarding route.\n8. Treat this as an educational prototype. Before any public or commercial release, replace the wordmark, stickers, copy, and backdrop with authorized original artwork, then make the final composition and motion meaningfully unique.\n9. Validate the swipe up, a partial drag that springs back, the swipe down, the \"Let's go\" action, reduced motion, TypeScript, lint, an iPhone simulator, and one Android viewport, in a native or development build.\n10. Finish by summarizing every file and dependency changed.\n~~~\n\n\u003C\u002Fdetails>\n\n\u003Ca id=\"prompt-astro\">\u003C\u002Fa>\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>Cookbook 2 — Astro liquid-glass welcome screen — copy prompt\u003C\u002Fstrong>\u003C\u002Fsummary>\n\n~~~text\nYou are working inside my existing Expo React Native repository.\n\nUse https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens as a read-only technical reference. Integrate only Cookbook 2, the Astro liquid-glass welcome screen, into my app. Do not turn my app into the gallery and do not modify unrelated features.\n\nReference files:\n- src\u002Fliquid-glass\u002Fliquid-glass-screen.tsx, src\u002Fliquid-glass\u002Fglass.ts, src\u002Fliquid-glass\u002Forb-field.tsx, src\u002Fliquid-glass\u002Fcopy.tsx, src\u002Fliquid-glass\u002Ftypes.ts\n- src\u002Fliquid-glass\u002Fcookbooks\u002Fastro.ts and src\u002Fliquid-glass\u002Fastro-glass-welcome.tsx\n- assets\u002Fcookbooks\u002Fastro\u002F (stars.png, glow.png, wordmark.png, stickers\u002F)\n- the Astro section of docs\u002FMOTION_SPEC.md\n- src\u002Fapp\u002F_layout.tsx only as an asset preloading reference\n- NOTICE.md and docs\u002FASSET_PROVENANCE.md\n\nPublic API:\n- Component: AstroGlassWelcome\n- Screen ID: astro\n- Semantic action: astro.lets-go\n- Props: initialState ('gate' | 'open'), onActionPress, onPrimaryPress\n- Relevant packages: @shopify\u002Freact-native-skia, react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-blur, expo-image, expo-status-bar, and expo-asset\n\nRequirements:\n1. Before editing, inspect my Expo SDK, React Native version, router, package manager, native splash configuration, onboarding routes, and existing dependencies. This screen needs a development build or a native build; it does not run in Expo Go.\n2. Copy only this component, its theme, its assets, and the transitive helpers it actually imports (glass.ts, orb-field.tsx, copy.tsx, types.ts). Do not copy the demo router, the gallery home, or Cookbook 1.\n3. Preserve my package versions, navigation, state architecture, app configuration, and native projects. Install only missing compatible packages with npx expo install, then rebuild the native app.\n4. Preload the star layer, the glow layer, the wordmark, and the stickers before revealing the React tree. Adapt the loading pattern to my app instead of replacing my root layout.\n5. Mount the component inside a full-height flex: 1 surface with no visible navigation header and no surrounding safe-area padding, inside a GestureHandlerRootView; the component owns its canvas and the light status bar.\n6. Reproduce the reference behavior accurately: keep the 402×874 reference geometry, the position-driven sphere size, the two-layer backdrop with the glow that dissipates through the glass, the night glass tuning, the zero-dispersion dome, the force-driven caustic, the sticker plume, the stardust vortex on the way down with its glow flare, the blur-wipe copy with the rotating third line, the reduced-motion behavior, and the accessibility labels. Do not replace the gesture with a button or the motion with a generic fade.\n7. Wire the semantic action through onActionPress to my existing onboarding route.\n8. Treat this as an educational prototype. Before any public or commercial release, replace the wordmark, stickers, copy, and backdrop with authorized original artwork, then make the final composition and motion meaningfully unique.\n9. Validate the swipe up, a partial drag that springs back mid-vortex, the swipe down, the \"Let's go\" action, reduced motion, TypeScript, lint, an iPhone simulator, and one Android viewport, in a native or development build.\n10. Finish by summarizing every file and dependency changed.\n~~~\n\n\u003C\u002Fdetails>\n\n## Replicate the artwork\n\nEvery wordmark, sticker, backdrop, and clip in this repository was generated, and the exact prompts and post-processing steps are published so you can make your own set in the same visual language, in your own identity:\n\n- [`prompts\u002Fsky-cookbook.md`](.\u002Fprompts\u002Fsky-cookbook.md) — the chrome-balloon wordmark, the die-cut photographic stickers, the holographic icons, the marker speech bubbles, and the seamless cloud loop.\n- [`prompts\u002Fastro-cookbook.md`](.\u002Fprompts\u002Fastro-cookbook.md) — the night wordmark, the app-building sticker set, the horizon-glow starfield, and the star\u002Fglow layer split that lets the glow dissipate through the glass.\n\nThe prompts were run with GPT Image 2 at high quality and 1K, Seedance 2.0 for the cloud loop, and a background-removal pass for the die-cuts. Any comparable image model will do; keep the style sentences and the \"no text, no watermark\" tail.\n\n## Run the Expo gallery\n\nRequirements: Node.js 22.13 or newer, Xcode for iOS, or Android Studio for Android. The screens use React Native Skia's runtime shaders and video decoding, so they run in a native build, not in Expo Go.\n\n~~~bash\ngit clone https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens.git\ncd liquid-glass-screens\nnpm ci\nnpm run ios\n~~~\n\nThe default route is the gallery home with two buttons, Cookbook 1 and Cookbook 2. Each cookbook also has a direct route:\n\n~~~text\n\u002Fsky\n\u002Fastro\n~~~\n\nOpen one directly, or land with the sphere already up and the plume out:\n\n~~~bash\nnpx uri-scheme open \"liquid-glass:\u002F\u002Fastro\" --ios\nnpx uri-scheme open \"liquid-glass:\u002F\u002Fsky?state=open\" --ios\n~~~\n\n## How the glass works\n\nEach cookbook is one Skia `Canvas` with five layers, bottom to top:\n\n| Layer | What it is |\n| --- | --- |\n| Scene | The cloud video (Sky) or the star layer plus an additive glow layer (Astro), drawn inside the canvas so the lens can bend it. |\n| Stickers | Forty die-cut sprites moved by a UI-thread frame callback: buoyancy, wander, a home in the plume, neighbour repulsion, and the finger's push. Astro adds a 260-mote stardust ring buffer. |\n| Lens | A `BackdropFilter` running [`LENS_SKSL`](.\u002Fsrc\u002Fliquid-glass\u002Fglass.ts): thick-glass magnification, a bevelled rim that shears, per-channel dispersion, and a \"slosh\" offset that drags the picture inside with the motion. |\n| Glass | [`GLASS_SKSL`](.\u002Fsrc\u002Fliquid-glass\u002Fglass.ts): the body, rim light, sheen, halo, and the motion caustic that focuses from a lavender bloom into a bowl of cyan-to-blue light with a gold thread. A `night` uniform blends the daylight and night tunings. |\n| Copy | React Native `Text` above the canvas — the wordmark, the hint, the headline with its struck word, the rotating third line with a per-word blur wipe, and the pill. |\n\nThe sphere's radius is a pure function of its position, and its caustic answers force rather than speed, so shrinking toward the button and growing back read identically in both directions.\n\n## React Native liquid glass API\n\n### Import one component\n\n~~~tsx\nimport { AstroGlassWelcome, type LiquidGlassActionId } from '.\u002Fsrc\u002Fliquid-glass';\n\nfunction handleAction(actionId: LiquidGlassActionId) {\n  if (actionId === 'astro.lets-go') {\n    \u002F\u002F Navigate to your original onboarding flow.\n  }\n}\n\nexport function Welcome() {\n  return \u003CAstroGlassWelcome onActionPress={handleAction} \u002F>;\n}\n~~~\n\n### Select from the typed registry\n\n~~~tsx\nimport { CookbookScreen, type CookbookId } from '.\u002Fsrc\u002Fliquid-glass';\n\nexport function Preview({ name }: { name: CookbookId }) {\n  return \u003CCookbookScreen name={name} initialState=\"open\" onActionPress={(id) => console.log(id)} \u002F>;\n}\n~~~\n\n### Bring your own theme\n\n~~~tsx\nimport { LiquidGlassScreen, SKY_THEME } from '.\u002Fsrc\u002Fliquid-glass';\n\nconst MY_THEME = {\n  ...SKY_THEME,\n  id: 'sky' as const,\n  wordmark: require('.\u002Fassets\u002Fmy-wordmark.png'),\n  copy: { ...SKY_THEME.copy, headline: 'Plan and share', struck: 'spreadsheets', kept: 'trips' },\n};\n\nexport function Welcome() {\n  return \u003CLiquidGlassScreen theme={MY_THEME} onPrimaryPress={() => {}} \u002F>;\n}\n~~~\n\n### Source-distributed Git dependency\n\nThe package exports \u003Ccode>src\u002Findex.ts\u003C\u002Fcode>, so SDK-matched workspaces can consume it directly:\n\n~~~bash\nnpm install github:Appllama\u002Fliquid-glass-screens\n~~~\n\n~~~tsx\nimport { SkyGlassWelcome } from 'liquid-glass-screens';\n~~~\n\nThe demo currently targets Expo SDK 57, React Native 0.86, React Native Skia 2.6, and Reanimated 4.5. Existing apps on another Expo SDK should prefer the copy-paste prompt workflow so \u003Ccode>npx expo install\u003C\u002Fcode> can resolve compatible native dependency versions.\n\n### Shared props\n\n| Prop | Purpose |\n| --- | --- |\n| \u003Ccode>initialState\u003C\u002Fcode> | \u003Ccode>'gate'\u003C\u002Fcode> (default) starts with the dome on the bottom edge. \u003Ccode>'open'\u003C\u002Fcode> starts with the sphere already up and the plume out — the deterministic state for screenshots. |\n| \u003Ccode>onActionPress\u003C\u002Fcode> | Receives the typed semantic ID (\u003Ccode>sky.lets-go\u003C\u002Fcode> or \u003Ccode>astro.lets-go\u003C\u002Fcode>) when the pill is pressed. |\n| \u003Ccode>onPrimaryPress\u003C\u002Fcode> | Backward-compatible handler for the pill. \u003Ccode>onActionPress\u003C\u002Fcode> takes precedence. |\n\n\u003Ccode>LiquidGlassActionId\u003C\u002Fcode>, \u003Ccode>LiquidGlassActionPressHandler\u003C\u002Fcode>, \u003Ccode>COOKBOOK_IDS\u003C\u002Fcode>, \u003Ccode>COOKBOOK_METADATA\u003C\u002Fcode>, \u003Ccode>CookbookTheme\u003C\u002Fcode>, and \u003Ccode>STICKER_SIZES\u003C\u002Fcode> are exported for autocomplete and typed tooling.\n\n## Motion, responsiveness, and accessibility\n\n- **Reference geometry:** each layout is authored at 402×874 points and scaled by width and height separately, so the dome stays centred on the bottom edge on every iPhone.\n- **Motion:** every value is either driven by the finger or by a spring that receives the release velocity. Timings, thresholds, and physics constants are documented in [\u003Ccode>MOTION_SPEC.md\u003C\u002Fcode>](.\u002Fdocs\u002FMOTION_SPEC.md).\n- **UI thread only:** the gesture, the sphere, the shaders' uniforms, the sticker physics, and the dust all run in worklets; the JavaScript thread is only told when the open state comes and goes.\n- **Reduced motion:** the landing spring loses its bounce and the third line fades in place instead of wiping.\n- **Interaction safety:** the pill is inert and absent from the accessibility tree until it has appeared; the page itself carries the swipe hint as its accessibility label.\n- **Asset loading:** the demo preloads both cookbooks' bitmaps and the clip before the animated React layer is shown.\n- **Status bar:** the component sets the status bar style that its backdrop needs (dark on Sky, light on Astro).\n\n## Project structure\n\n~~~text\nassets\u002Fcookbooks\u002Fsky\u002F           Cloud loop, poster, wordmark, 22 stickers\nassets\u002Fcookbooks\u002Fastro\u002F         Star layer, glow layer, wordmark, 24 stickers\ndocs\u002FMOTION_SPEC.md             Measured geometry, thresholds, springs, and physics\ndocs\u002FASSET_PROVENANCE.md        Auditable generated-asset inventory\nprompts\u002F                        Prompts to regenerate every asset, per cookbook\nscripts\u002F                        Simulator recording and Maestro flows used for verification\nsrc\u002Fapp\u002F                        Expo Router demo: the gallery home and the two routes\nsrc\u002Fliquid-glass\u002F               The screen, the shaders, the sticker field, the copy, the two themes\nsrc\u002Findex.ts                    Source-distributed package entry\n~~~\n\n## Verification\n\n~~~bash\nnpm run verify\n~~~\n\nThe verification command runs:\n\n1. TypeScript with \u003Ccode>tsc --noEmit\u003C\u002Fcode>;\n2. Expo ESLint; and\n3. dependency compatibility tests for routing, malformed URI input, and Xcode project identifiers; and\n4. particle worklet regressions for Sky's fading return and Astro's vortex.\n\nCI also runs \u003Ccode>npm audit --audit-level=moderate\u003C\u002Fcode>. The scoped security overrides and their compatibility checks are documented in [\u003Ccode>docs\u002FDEPENDENCIES.md\u003C\u002Fcode>](.\u002Fdocs\u002FDEPENDENCIES.md).\n\nThe same gates run in [GitHub Actions](.\u002F.github\u002Fworkflows\u002Fci.yml). There is no web export: the screens depend on Skia runtime shaders and native video decoding. The interactions were verified in the iPhone simulator with the Maestro flows in [`scripts\u002Fmaestro\u002F`](.\u002Fscripts\u002Fmaestro), recorded at a constant 60 fps with [`scripts\u002Fsimrec.sh`](.\u002Fscripts\u002Fsimrec.sh) and scrubbed frame by frame.\n\n## Frequently asked questions\n\n### Does this use Apple's Liquid Glass?\n\nNo. \"Liquid glass\" here describes the effect: a sphere of refracting, sloshing glass drawn with Skia runtime shaders. It does not use UIKit's glass materials, so it renders identically on iOS and Android and can lens anything drawn into the canvas, including the stickers.\n\n### Can I use only one cookbook without the gallery?\n\nYes. Import \u003Ccode>SkyGlassWelcome\u003C\u002Fcode> or \u003Ccode>AstroGlassWelcome\u003C\u002Fcode>, or copy the screen, its four helpers, one theme, and that theme's assets. The Expo Router demo is optional.\n\n### Why is there a video in one cookbook and a still in the other?\n\nSky's clouds drift, so a seamless ping-pong loop is the honest choice. Astro's night is a still because every animated starfield tried read as a screensaver; instead the horizon glow is split into its own layer and dissipates through the glass as the sphere rises, which gives the page life without a loop.\n\n### Does it run in Expo Go?\n\nNo. React Native Skia's runtime shaders and video decoding need a development build or a native build.\n\n### Can I use these exact designs commercially?\n\nThe original project code is GPL-3.0-licensed and the generated artwork is inventoried in [\u003Ccode>ASSET_PROVENANCE.md\u003C\u002Fcode>](.\u002Fdocs\u002FASSET_PROVENANCE.md), but the screens are a study of a publicly visible interaction. Replace the identity, make the composition and motion your own, and obtain any clearance required for your use.\n\n## Contributing\n\nIssues and focused pull requests are welcome.\n\n- Keep each cookbook independently importable.\n- Keep every animated value on the UI thread.\n- Preserve reduced-motion and accessibility behavior.\n- Document any timing, threshold, or physics change in \u003Ccode>docs\u002FMOTION_SPEC.md\u003C\u002Fcode>.\n- Do not submit extracted production artwork, source screenshots, or source video from third-party apps.\n- Record provenance and the prompt for every new distributable bitmap.\n- Run \u003Ccode>npm run verify\u003C\u002Fcode> and the Maestro flows before opening a pull request.\n\n[Open an issue](https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\u002Fissues) or [start a pull request](https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\u002Fpulls).\n\n## Educational use and intellectual property\n\nThis is an independent, unofficial project created by Appllama for education, UI research, and technical demonstration. It is not affiliated with, sponsored by, endorsed by, or authorized by Wabi, Apple, or any other referenced company.\n\nThird-party product names, trademarks, service marks, logos, screen text, artwork, and other brand elements belong to their respective owners. They are referenced only to identify and study a publicly visible welcome-screen interaction. Appllama claims no ownership of, and grants no license to, any third-party intellectual property. \"Liquid Glass\" is a term Apple uses for its own design system; this project is not that system and does not use it.\n\nThe GNU General Public License v3.0 applies only to original project code and original material that Appllama is legally able to license. It does **not** grant permission to use third-party trademarks, copyrighted material, protected trade dress, or other proprietary material.\n\n**Do not ship these reference implementations unchanged.** Before using an implementation in a public or commercial product, you must:\n\n- replace the wordmarks, stickers, copy, and backdrops with your own authorized artwork;\n- create your own independently designed colors, typography, spacing, composition, and motion language;\n- remove anything that could imply affiliation, sponsorship, endorsement, or approval by a referenced company; and\n- obtain any permissions or legal clearance required for your use and jurisdiction.\n\nChanging only a wordmark, app name, or accent color may not be sufficient. Calling a use \"educational\" or \"noncommercial,\" adding attribution, or including this notice does not automatically make the use lawful or qualify it as fair use. Fair use is evaluated case by case.\n\nThis notice is informational, is not legal advice, and does not guarantee that any particular use is permitted. If you are uncertain, consult a qualified intellectual-property attorney before publishing or distributing your work. See the [full repository notice](.\u002FNOTICE.md), the [U.S. Copyright Office fair-use guidance](https:\u002F\u002Fwww.copyright.gov\u002Ffair-use\u002Fmore-info.html), and the [USPTO trademark-infringement overview](https:\u002F\u002Fwww.uspto.gov\u002Fpage\u002Fabout-trademark-infringement).\n\nRights holders can request a correction or removal by [opening an issue](https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\u002Fissues).\n\n## License\n\nOriginal source code is available under the [GNU General Public License v3.0](.\u002FLICENSE), subject to the third-party rights and exclusions explained above and in [\u003Ccode>NOTICE.md\u003C\u002Fcode>](.\u002FNOTICE.md).\n\n## An open-source creation by Appllama\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fappllama.io\">\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-dark.png\">\n      \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-light.png\">\n      \u003Cimg src=\".\u002Fdocs\u002Fimages\u002Fappllama-logo-light.png\" width=\"230\" alt=\"Appllama\">\n    \u003C\u002Fpicture>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  Study the onboarding, paywall, and product flows behind leading iOS apps at\n  \u003Ca href=\"https:\u002F\u002Fappllama.io\">\u003Cstrong>appllama.io\u003C\u002Fstrong>\u003C\u002Fa>.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fx.com\u002Fappllamaio\">Follow @appllamaio on X\u003C\u002Fa>\n  ·\n  \u003Ca href=\"https:\u002F\u002Fx.com\u002Fjaimintf\">Created by @jaimintf\u003C\u002Fa>\n  ·\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FAppllama\u002Fliquid-glass-screens\">Star the repository\u003C\u002Fa>\n\u003C\u002Fp>\n","这是一个基于 React Native 和 Expo 的开源 UI 组件库，提供两种风格的液态玻璃质感欢迎页（Liquid Glass Onboarding Screens），支持浮动贴纸、手势滑动动画与动态天空背景。项目采用 React Native Skia 实现高性能 GPU 渲染，结合 react-native-reanimated 与 react-native-gesture-handler 构建流畅交互，并利用着色器（shaders）模拟玻璃折射与液体流动效果。适用于移动应用启动页、产品引导流程等需要高表现力与品牌化视觉体验的场景，强调设计研究与可复用实现参考。",2,"2026-09-06 02:30:06","CREATED_QUERY"]