← Back to home
Design systems2024

Drift UI

A dark, blue-accented library of interactive icons, loaders, components and motion patterns, in vanilla JavaScript with no framework.

I built a dark, motion-first component library with thousands of pieces and no build step.

Design breakdown

How it was built, and why

Drift UI is a library of interactive icons, loaders, UI components and motion patterns. It started as a rebuild and was substantially extended and rebranded, shipping light and dark themes, a shared Glass Bloom Orb nav and a reactive Detonation Dither canvas hero.

01

The flow

A user lands on a dither-canvas hero, browses categories from the orb nav, previews a component live, then copies it into their own project, no build step in the way.

02

What it is

A statically served component library counting 5,123 icons, 95 UI components, 63 loaders, 38 motion patterns and 14 agent-UI pieces.

  • Vanilla JavaScript throughout with Motion v12, no framework, no build step

  • Shared Glass Bloom Orb navigation across the library

  • A pointer-reactive Detonation Dither hero canvas

03

How it works

I kept the whole thing framework-free so a component is copy-paste, not npm-install. Motion v12 carries the animation layer, and a shared orb nav and dither hero give the collection one identity across thousands of pieces.

04

Why it matters

Most component galleries are heavy to adopt and generic to look at. A no-build, motion-first library with a strong dark identity is faster to use and actually distinctive.

Components, live

The pieces, moving

Drift UI | Studio
3D Orb
A reflective metal orb rendered per pixel. Pick a look, then steer the light.
DIALKIT
Reflectivity
95%
Light
210°
Flow speed
1.2x
chrome | polished | churn