Appllama/liquid-glass-chat-ui

The repo ships a set of ready‑to‑use React components: a ChatWindow that renders bubbles with a translucent backdrop, Portrait components that cycle through frames or Lottie animations, a StoryNode that can branch based on user choices, and a Composer that hovers over the content area. All pieces are wired together with a minimal context provider, so you can drop the whole UI into an existing app with a single import.

Glassmorphism is achieved with CSS backdrop‑filter on a semi‑transparent container, combined with a subtle box‑shadow to preserve depth. Avatar motion uses Framer Motion’s animation controls, allowing keyframe‑based transitions or spring‑driven gestures without manual requestAnimationFrame loops. The story engine is a tiny finite‑state machine driven by React state; each node declares its next step and optional payload, enabling interactive narratives without a backend. TypeScript typings cover every prop, ensuring compile‑time safety across the component tree.

The library targets front‑end engineers who need a polished chat experience quickly, product teams building SaaS messaging, indie game developers adding NPC dialogue, or anyone wanting a modern UI without building glass effects from scratch. Because it stays within the React ecosystem and only pulls in Framer Motion as an optional peer dependency, integration is straightforward and the bundle impact stays low.

Since its launch the project has attracted over a hundred stars, largely due to its niche blend of visual flair and functional interactivity. Contributors praise the clean API, the exhaustive TypeScript definitions, and the fact that the core UI can be styled via CSS variables, making theme swaps trivial. The lightweight nature, no canvas or WebGL required, means it runs smoothly on mobile browsers, a key factor for developers chasing both aesthetics and performance.

TakeawayLiquid‑Glass Chat UI delivers a glass‑morphed, animated chat experience as a lightweight TypeScript React library.