Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochureChat mockup

Chat mockup

A decorative messaging thread: a contact header over bubbles that type, arrive and get read as the sequence plays.

<koala-mockup-chat>

A conversation that plays

Wrap the thread in a bare, sequenced koala-mockup. Each koala-mockup-chat-bubble appears at its at step; typing-at holds its place with typing dots first, and an outgoing bubble's ticks turn read at read-at.

Header and channel

name and status fill the header, channel sets the icon on its right, and day adds a date chip above the first message. Without an avatar URL the header shows the contact's initial. A bubble at step 0 shows from the start, so a thread that should simply sit still needs only one long step.

API

name text (default Koala)
status text (default online)
channel IconName (default WhatsApp)
avatar resolved image URL; unset shows the initial
day text
tilt NoneLeftRight
koala-mockup-chat-bubble side InOut
koala-mockup-chat-bubble at step number (default 0)
koala-mockup-chat-bubble typing-at step number
koala-mockup-chat-bubble read-at step number, outgoing only
koala-mockup-chat-bubble time text