Drift UI

Drift UI

Drift UI

Digital Product

Websites Development

Drift UI animated preview loop

Context

Personal project: a reference-grade component and interaction-design library site, built to show range across motion, glass surfaces, and systemized UI at scale. It started as a rebuild of an existing free component library (craftui.space) and was pushed far past that starting point, rebranded mid-build from CraftUI to Drift UI. No client, no team, no deadline other than a self-imposed one.

Problem

Left unchecked, the build kept drifting toward generic defaults: colored edge-stroke highlights on glass cards, off-palette greens, a nav menu icon that changed per page and stopped reading as a menu at all. At 95+ exactingly specified components, one-off fixes wouldn’t scale and the same visual mistakes kept recurring across pages.

Approach

Yash designed and art-directed every component and wrote exacting specs for behavior, spacing, color and motion; implementation was executed with an AI pair-build process under his direction and review. Built as plain static HTML/CSS/ES5 with Motion v12 for animation, no framework, no build step, so every page is inspectable and portable. Design corrections were written down as hard, durable rules the moment they were caught, not just patched in place: colored edge-stroke highlights were banned everywhere and replaced with a single one-sided animated gradient glow; a nav-menu bug where the trigger’s icon mutated to match the current page (and stopped reading as a menu) was fixed by locking the trigger to one constant glyph and moving location info inside the opened menu. A large component surface (95 UI components) was audited read-only first to map every defect before a single fix pass touched anything, rather than fixing ad hoc. A full second pass added a real light theme to all eight pages rather than a quick recolor.

Outcome

Live at craftui-rebuild.netlify.app with 95 UI components, 43 loaders, 38 interaction-design demos, a 40-component live playground, and 5,123 icons, confirmed directly against the deployed site. Our pre-deploy audit surfaced 72 defects across the 95 components (7 high / 20 medium / 45 low) that were resolved in one pass, and an 8-agent cross-page check we ran on both light and dark themes came back 7 pass / 1 warning (fixed) / 0 fail before promotion to production. Open items remain: the social links in the footer are still placeholder URLs, and the Netlify project itself is still named after the old CraftUI branding.

Next project