UI / UX Showcase

MSA Demos

A collection of UI/UX demos by Mohamed Salem Ali — interface explorations and interactive front-ends, each built from a different design system. Drawn in light on dark paper, built in living code.

View the demos Source

The demos

Selected UI/UX demos.

Interface explorations, each built from a different set of design tokens. The current set reimagines one product — Tameni — four different ways. More on the way.

Cosmic · 3D Heart

Cosmic Landing

A dark cosmic design system with a live 3D particle heart that beats, rotates, and tracks the cursor — violet on void.

Live ↗ Code

Biosciences · Lab

Biosciences Landing

A bioluminescent-lab system: dark sections flipping to bone-white, animated molecular networks, one rationed lime accent.

Live ↗ Code

Clinical · Dashboard

Clinical Dashboard

A midnight-violet clinical system: an interactive lab-trends dashboard with switchable metric tabs, animated charts, and count-up vitals.

Live ↗ Code

Open Sky · Light

Open-Sky Landing

A calm, light "open sky" system: a sky-gradient hero, before/after document cards, and an interactive waveform player.

Live ↗ Code

About the demos

The same idea, dressed four different ways.

These are hand-built UI/UX demos — self-contained interface explorations, each driven by a different design system: its own colour tokens, type scale, motion, and components. The current set rebuilds one product — Tameni, a lab-results platform — four different ways.

It's a study in how much a product's feel shifts with its visual language — and in front-end craft. Every demo is hand-built, animated, and responsive, with no UI frameworks — just HTML, CSS, and vanilla JavaScript.

HTMLCSSVanilla JS CanvasSVGDesign tokens ResponsiveReduced-motion

Mohamed Salem Ali

Software Engineer · Cairo

GitHub LinkedIn Email WhatsApp

Explore

Open one. Click around.

Every demo is live, animated, and interactive. Pick a design language and dive in.

Browse the demos View the repo