mrkeyoor.com_
Wed 30 Sept 20:41 UTC
Webevaluationupdated 30 Sept 2026

liquid-glass-screens review

Liquid Glass Screens is a pair of React Native welcome-screen recipes built with Expo, Skia shaders, Reanimated, and gesture handling. It shows how to turn an upward drag into a shrinking glass sphere, a sticker plume, and animated onboarding copy, then lets you copy one themed implementation into an existing app.

Verdict

Our install pulled 747 packages and used 2,121 MB, while the repository exposed no standard build or test target for our runner, so this is best treated as a visual reference rather than a ready-made dependency. The motion spec, reduced-motion work, and source separation make it unusually useful for learning how the effect is assembled. Copy the technique, not the screen, and budget a native rebuild plus a full redesign before shipping.

We ran it

Lab card: what happened when we ran liquid-glass-screensScreenshot of liquid-glass-screens (appllama.io)
Install✓ · 38s747 packages · 2121 MB
Buildn/ano build script
Testsn/ano test script
Known vulns00 critical · 0 high · 0 moderate · 0 low (npm audit)
Repo100 files~2,060 lines of source · 5.9 MB · 1 CI workflows · tests dir

Answers from our run

Does liquid-glass-screens build from source?

Dependencies installed in 38 seconds (747 packages), and the project has no separate build step. We cloned commit 07cb20d into a clean Debian container with 3 CPUs and no project-specific setup.

Does liquid-glass-screens have tests you can run?

Not through a standard command: the project exposes no test script or target that our harness could run.

Does liquid-glass-screens have known vulnerabilities in its dependencies?

npm audit found none in the dependency tree at the time of our run.

Who should not use liquid-glass-screens?

Teams looking for a finished screen they can ship unchanged: the README repeatedly requires a new identity, artwork, composition, and motion treatment.

What are the alternatives to liquid-glass-screens?

React Native Skia, React Native Reanimated, Expo examples. Our install pulled 747 packages and used 2,121 MB, while the repository exposed no standard build or test target for our runner, so this is best treated as a visual reference rather than a ready-made dependency.

Setup3/538-second install, but 747 packages and native tooling required
Docs5/5Exact geometry, integration steps, assets, motion, and legal limits
Community2/5303 stars, no open issues or PRs, and no published release
Maturity2/5Focused study with two screens and no conventional release history

Who it’s for

React Native teams studying a shader-heavy onboarding interaction before designing their own version.
Expo developers who need a concrete Skia, Reanimated, and Gesture Handler integration example.
Designers and engineers prepared to replace the supplied artwork, copy, composition, and motion before release.

Who it’s NOT for

Teams looking for a finished screen they can ship unchanged: the README repeatedly requires a new identity, artwork, composition, and motion treatment.
Expo Go workflows: the runtime shaders and video decoding require a development or native build.
Web apps: the project explicitly has no web export.
Apps that cannot accept GPL-3.0 code or source-distributed dependencies.
Teams expecting a small drop-in component: our install pulled 747 packages and occupied 2,121 MB for two welcome-screen cookbooks.

Setup reality

Our sandbox installed commit 07cb20d in 38 seconds, pulling 747 packages and using 2,121 MB. The checkout itself was 5.9 MB with 100 files and about 2,060 source lines. Our runner found no standard build target and no standard test target, so both steps were skipped; npm audit reported 0 known vulnerabilities.

The gallery needs Node.js 22.13 or newer plus Xcode for iOS or Android Studio for Android. It uses Expo SDK 57, React Native 0.86, Skia 2.6, Reanimated, Worklets, Gesture Handler, Blur, Image, and Asset. No service credential is required.

It does not run in Expo Go or export to the web. Existing apps on a different Expo SDK should copy one cookbook and let Expo resolve compatible native packages, then rebuild the app.

Two screens explain one unusually specific interaction

Liquid Glass Screens is not a general component kit. It contains two versions of the same welcome-screen structure: Sky uses a cloud video, while Astro uses a star layer and separate horizon glow. In both, an upward drag moves a large glass dome away from the bottom edge. The dome shrinks into a button, stickers rise through it, and onboarding text appears. Dragging down reverses the scene with a theme-specific exit.

Both cookbooks share one TypeScript component and differ through their themes and assets. The scene, stickers, lens, glass, and copy form 5 rendering layers. Forty sticker slots move on the UI thread, and Astro adds a 260-particle stardust buffer. This makes the repository more instructive than a looping design clip because the visible result maps to named files, shader code, motion constants, and exported component props.

The project is a study, not a screen license

The README calls the work an educational reference inspired by a publicly visible Wabi screen. It tells users not to ship either implementation unchanged. Before public or commercial use, you are expected to replace the wordmarks, stickers, text, and backdrops, then create distinct colors, typography, spacing, composition, and motion. A renamed app and a new accent color do not satisfy that instruction.

That warning should shape the adoption decision. GPL-3.0 covers original code and material that Appllama can license, but it cannot grant rights to someone else's trademarks, trade dress, or copyrighted work. The repository includes asset provenance and generation prompts, which help you produce new ingredients. They do not turn the assembled reference design into a neutral product template. Use it to understand the engineering, then give a designer room to change the result.

What happened when we ran it

Our fresh Debian sandbox installed commit 07cb20d in 38 seconds. npm added 747 packages and the installed tree occupied 2,121 MB, compared with a 5.9 MB checkout containing 100 files and about 2,060 source lines. npm audit returned 0 known vulnerabilities. Those are clean dependency results, though the installed footprint is large for a repository that ultimately demonstrates two screens.

Our runner found no standard build script or target, so it skipped the build. It also found no standard tests script or target and skipped tests. The repository does contain a tests directory, and its README documents a separate npm run verify command for TypeScript, lint, dependency checks, and particle regressions. We did not run that command in this lab block, so the honest result is narrower: install passed, while build and test behavior were not measured.

Expo Go and web builds are outside the supported path

The gallery targets Node.js 22.13 or newer, Expo SDK 57, React Native 0.86, and Skia 2.6. You also need Xcode or Android Studio because Skia runtime shaders and native video decoding require a development or native build. Expo Go cannot run these screens, and the project has no web export. That removes the quickest preview paths many Expo developers expect.

Existing apps can import from the source-distributed Git dependency, but the README recommends copying one cookbook when SDK versions differ. That route means bringing over the main screen, 4 helper modules, one theme, and its assets, then installing only compatible missing packages with npx expo install. The host app must also preload those assets, mount the screen inside a gesture-handler root, remove the surrounding navigation header, and connect the semantic action to its own onboarding route.

The motion work is more reusable than the artwork

The strongest material lives below the screenshots. Layout is authored against a 402 by 874 reference frame. Sphere size is derived from position, so a partial drag behaves consistently in either direction. Release velocity enters the spring, while force controls the caustic. Reduced-motion mode removes the landing bounce and replaces the moving blur wipe with a fade. Accessibility keeps the call-to-action out of the tree until it is visible.

Those details answer questions that most visual demos leave open. The component also exposes initialState, an action callback, and a deterministic open state for screenshots. None of this proves the effect will suit an older phone or a different app layout. There are no performance measurements in our lab result, and the separate width and height scaling was authored around iPhone geometry. Validate an Android viewport, reduced motion, partial drags, and the actual device floor your app supports.

September 5 activity gives little maintenance history

The repository was created and last pushed on September 5, 2026. GitHub showed 303 stars, 29 forks, and 0 combined open issues and pull requests when checked. There was no latest release entry. A single active day can produce a polished source drop, but it cannot show how maintainers respond to SDK upgrades, device-specific rendering failures, or dependency changes over several months.

The included CI workflow and detailed README are good starting evidence. Long-term support remains unproven because there is no release trail and almost no elapsed project history. For an internal prototype, that is acceptable. For a production onboarding flow, own the copied code, pin the native package versions, record the behavior on your supported devices, and treat future Expo upgrades as your responsibility.

Alternatives

ProjectWhat it isPick it when
React Native SkiaThe graphics library underneath these shader and canvas effects, with broader examples and APIs.pick this instead when you want to design an original glass interaction from primitives rather than adapt a finished screen.
React Native ReanimatedThe UI-thread animation library used to drive the gesture and motion in this project.pick this instead when the interaction does not need custom Skia rendering or supplied artwork.
Expo examplesSmall example applications for Expo APIs and common integration patterns.pick this instead when you need a neutral starting point with less visual and licensing baggage.

What people are saying

  1. [velocity-scout] Appllama/liquid-glass-screens

Sources

  1. Liquid Glass Screens README
  2. Liquid Glass Screens repository
  3. Project license
  4. Motion specification

More web reviews

chi · youtube-ambilight · hyalite--liquid-glass · human-atlas · echarts · react-three-fiber · the whole board →