Front-end build · UI engineering
Video Chat Interface
A dark, glassmorphic front-end for a live video call room with a docked chat sidebar.
- HTML
- CSS
- Glassmorphism
- UI
- Year
- 2025
- Role
- Software Engineer
- Type
- Front-end build
- Stack
- 5 technologies
Overview
A front-end build of a live video chat room, designed dark-first so the video tiles are the brightest thing on screen and the interface recedes around them.
The layout is a responsive call grid paired with a docked chat sidebar: the grid re-flows as participant count changes, and the sidebar collapses into an overlay sheet once the viewport gets too narrow to carry two columns.
The visual language is glassmorphism used with restraint — translucent panels with backdrop blur for the control bar, participant chips and message list, so the chrome reads as a layer floating over the call rather than a solid frame boxing it in.
Every control has a real interaction state: mute, camera, screen-share and leave all carry hover, active and focus styling, and the message list is built as a proper scroll region rather than an overflowing div.
It is a pure interface build — no signalling backend — written as a study in getting the layout, contrast and micro-states right before any transport layer gets attached.
The problem
Build a video call interface that stays legible and calm in a dark room, holds up from a 2-person call to a full grid, and keeps chat accessible without stealing space from the video.
Tags
- HTML
- CSS
- Glassmorphism
- UI
Responsibility
My role
Everything listed here was mine to deliver — there was no second developer to hand the awkward parts to.
Designed the dark-first visual system and glass surface treatment
Built the responsive participant grid and collapsible chat sidebar
Implemented control-bar states: mute, camera, share, leave
Handled scroll regions, overflow and long-message behaviour in chat
Tuned contrast so UI chrome never competes with the video feeds
Tech stack
What it was built with
- HTML5
- CSS3
- JavaScript
- Glassmorphism
- Responsive design
Result
Outcome
What actually changed for the client once the work shipped.
A complete, responsive call-room interface ready for a signalling layer
Consistent glass surface system reused across chrome, chips and chat
Layout verified from small mobile up through wide desktop
To add: real screenshots & metrics
- Add screenshots of the call grid at 2, 4 and 6+ participants
- Add a screenshot of the mobile layout with the chat sheet open
- Add a short screen recording of the control-bar interactions
- Link the live demo and/or the GitHub repository
Edit src/lib/projects.ts → this project's todo array, then delete this panel.
More projects
Similar problem?
Got a project that looks like this one?
If any of the above sounds like what you are facing, tell me about it — I have probably debugged something close before.