Team Chat App Template
A dark-mode team chat web-app UI whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep and a thread that opens on cue, inside a full app shell with channel switching, a composer and a mobile drawer.
About This Template
A complete dark-mode team chat interface: not a marketing page for a chat product, but the app itself, ready to drive a product demo, a hero screenshot that moves, an onboarding tour, or a portfolio piece that proves you can build real UI. The fictional product is Treeline, and the workspace belongs to Juniper Supply Co., a nine-person outdoor-gear studio on the morning they launch a new pack. The shell is all there: a slim workspace rail, a channel and DM sidebar with presence dots and unread badges, the message pane with hover toolbars, reactions, CSS-drawn attachment cards and a composer, and a thread panel that opens on the right.
Read the full template overview
The signature is the replay. The launch-morning conversation in #launch-day plays itself: a typing indicator appears for a named teammate, the message lands and shunts the list open, reactions pop on with an overshoot, an @mention sweeps a highlight across the row, the thread opens itself mid-sequence, and presence dots flip as people come and go. A pause control sits in the channel header, and when the sequence ends it becomes Replay. Because the full transcript ships in the markup and JavaScript only reveals it on schedule, the page degrades to a complete readable document with scripting off.
The art direction is its own: a dark olive-khaki ground with warm bone ink and a single apricot accent for active states, mentions and badges, deliberately refusing Slack aubergine, Discord blurple and hacker-terminal green. Funnel Display does the wordmark and channel headers, Funnel Sans does the UI, Oxygen Mono does timestamps and code.
To make it yours, rewrite the transcripts directly in the HTML (the conversation is markup, not a JS object), rename the people and channels, and re-point the nine avatar hues and the token block in one place. Four measured palettes ship: the olive default plus a warm paper light mode, a cool blue-slate Midnight and a plum Mulberry, each a complete restatement of every token that a single data-palette attribute on the html tag applies. The app deploys as static files with no build step.
What's Included
- Complete dark app shell: workspace rail, channel and DM sidebar, message pane with composer, and an openable thread panel
- Signature self-playing conversation: typing indicators, messages that land and shunt the list, reactions popping with overshoot, a mention highlight sweep, a thread that opens itself and presence dots that flip, all on a choreographed GSAP schedule
- Pause control in the channel header that becomes a Replay button when the sequence ends
- The whole transcript ships in the markup: the replay only reveals it, so with JavaScript off the page reads as a complete plain document with every channel and the thread visible
- Channel and DM switching with a quick GSAP transition, unread badges that clear with a pop, and per-channel composer placeholders
- Working micro-interactions: hover (and focus, and tap) message toolbars, toggleable reaction chips that count you in and out, a send button that enables as you type, Enter to send
- Nine coherent people with initials avatars, one measured hue per person, no photography anywhere; attachments are styled CSS/SVG cards
- Mobile at 375px: the rail and sidebar collapse into an overlay drawer behind a hamburger, the thread becomes a full-screen overlay, and nothing pans horizontally
- Keyboard complete: channels are real links, messages are focusable, focus shows what hover shows, Escape closes the thread and the drawer
- Reduced motion gets the complete static app via both the CSS media query and the matchMedia branch: full transcript visible, replay control honestly inert
- Four shipped palettes, each fully measured: the olive default, a warm paper light mode, a cool blue-slate Midnight and a plum Mulberry, applied with one data-palette attribute on the html tag
- Olive-khaki, bone and apricot token block with RGB triples and a measured contrast table in the stylesheet header; a reskin is a token edit, never an rgba() hunt
- Sections are independent: every selector is guarded, so the thread panel, the rail or whole channels can be deleted and the rest keeps working
Perfect For
- Product demos and interactive walkthroughs for chat, collaboration or community tools
- A living hero or feature screenshot for a SaaS landing page, embedded as an iframe
- Onboarding tours and explainer videos that need a believable, controllable conversation
- Portfolio and case-study pieces that prove real app-UI craft, not another landing page
- Learning pattern: choreographed DOM timelines, markup-first content with JS-only reveal, and app-shell responsive layout
How It Works
Structure
One script initialises the app inside a single gsap.context, with gsap.matchMedia keyed on reduced motion plus a coarse-pointer flag, so exactly one behaviour branch runs on every device. Every querySelector is guarded and all listeners are stored in a Map for cleanup, so the thread panel, the rail or whole channels can be deleted and the rest keeps working. A synchronous head script adds a has-js class before first paint, and the main script removes it if GSAP never loads, so a blocked CDN degrades to the complete plain transcript.
The replay
The full launch-morning conversation ships in the markup; messages and reactions marked data-replay are pre-hidden by CSS only when JavaScript will replay them. A scheduler walks the steps in order: it shows a typing indicator for the named author, then reveals the message with a height tween that shunts the list open while the body drops in, pops reactions with back.out overshoot, sweeps a gradient across the @mention row, flips presence dots, and opens the thread panel on cue. Pause kills the scheduler; at the end the same control resets the DOM and replays.
Switching channels
Every channel and DM is a real section in the markup and every sidebar entry is a real link to it. The script intercepts the click, swaps the active view with a quick fade, clears the channel's unread badge with a scale-out, updates the composer placeholder, and opens the list at its latest message. Without JavaScript those same links jump between the stacked transcripts as ordinary anchors.
Touch and keyboard
The hover toolbar is also reachable by keyboard focus, and on coarse pointers tapping a message toggles it instead. Channels are tabbable links, messages are focusable, the reaction chips are real buttons with aria-pressed, and Escape closes the thread panel and the mobile drawer. At phone widths the rail and sidebar become one overlay drawer behind a hamburger and the thread becomes a full-screen overlay.
Without JavaScript
The page is markup-first: with scripting off (or the CDN blocked) every channel's full transcript stacks into one readable document, the thread appears as a plain section, and nothing on the page is hidden. Reduced motion keeps the app shell live but static: the full transcript is visible from the start, nothing animates, and the replay control is disabled with an honest label.
:root.
Try them in the preview above.