Chatly

Layout 03 — Icon Rail + Panel Messaging

A production-grade messaging platform layout with dark cyan theme, three-column architecture, and motion animations. Inspired by Discord meets Slack.

Features

Three-Column Messaging Layout

Icon rail (68px) + channel panel (260px) + message area (fluid). Classic messaging app architecture inspired by Discord and Slack.

Dark Cyan Theme

Rail (#111116), panel (#18181b), content (#1e1e24) with cyan-400 (#22d3ee) accent. CSS custom properties for full theme control.

DM Sans Typography

Friendly, rounded sans-serif font for a modern messaging feel. 13-15px body text with proper hierarchy.

Icon Rail Navigation

Workspace icons with hover scale (motion), spring-animated active indicator pip, unread dot indicators, and tooltip labels.

Channel Panel

Collapsible sections (AnimatePresence) for channels, private channels, and direct messages. Unread count badges and online status dots.

Message Area

Messages slide in from bottom (motion). Hover action bar with emoji reactions. Formatting toolbar. User avatars and timestamps.

Motion Animations

Typing Indicator

Signature

Signature animation: 3 dots with staggered scale/opacity pulse cycle (1.2s duration, 0.2s stagger). Uses motion animate with infinite repeat.

Message Slide-In

Entrance

Messages enter from y:12 with opacity:0, staggered by 0.04s per message. Creates a natural conversation flow feel.

Icon Hover Scale

Interaction

Rail icons scale to 1.15x on hover with whileHover. Tap scales to 0.9x for tactile feedback.

Active Indicator Spring

Spring

Left rail pip animates height with spring physics (stiffness: 500, damping: 30). Uses AnimatePresence for enter/exit.

Channel Collapse

Layout

Sections collapse with height animation (0.2s easeInOut). Chevron rotates 90 degrees on toggle. AnimatePresence handles exit.

Toggle Switch

Interaction

Settings toggle knob slides with spring physics matching the active indicator. Background color transitions on state change.

Pages

/03-icon-railChannelsMain messaging interface with channel panel and message area

/03-icon-rail/dmsDirect MessagesDM conversations with chat bubbles and online indicators

/03-icon-rail/threadsThreadsActive threads with original message, replies, and participants

/03-icon-rail/filesFilesShared files with type filtering and grid/list toggle

/03-icon-rail/searchSearchSearch interface with filters for messages, files, channels, and people

/03-icon-rail/settingsSettingsNotification preferences, appearance, status, privacy, keyboard shortcuts

Technical Details

Framework

Next.js 15 (App Router)

Animation

motion/react ^12.35

Font

DM Sans

Accent

#22d3ee (cyan-400)

Components

shadcn/ui + custom

Layout Pattern

Icon Rail + Panel + Content

← Gallery