UI lab · 12 components

Interactive pieces you can try, tune, and ship.

UI / HakimuDdin is a focused collection of interface experiments— motion, canvas, and keyboard-first patterns—documented so you can lift them into your own stack.

MotionCanvas & SVGKeyboardshadcn-style primitives

Browse Components

HRS

MIN

SEC

HRS

MIN

SEC

HRS

MIN

SEC

Runs in the browser

Open any demo and interact immediately—no sandbox iframe wall.

Motion with restraint

Springs, shaders, and scroll effects respect prefers-reduced-motion.

Ready to borrow

Each detail page includes source and an install strip where it applies.

Highlights

A few demos to start with

Skim the cards below, then open the live playground for code and props on each route.

CanvasPointerMotion

Detithering Image

Interactive canvas logo rendered as a stippled grid: hover repels dots, release triggers a shockwave. Includes a playground (upload, presets, paper/ink colors, density controls). See docs/components-detithering-image.md.

Open demo

KeyboardDialogNavigation

Command palette

Global ⌘K / Ctrl K palette with grouped commands (Navigation + Actions), type-to-filter, arrows + Enter to run, Esc to close. Uses our CommandPalette (Radix Dialog).

Open demo

MotionSpringAccessibility

Magnetic

Proximity “magnet” that nudges a child element toward the cursor with a small spring. Keyboard focus stays stable; motion disables under prefers-reduced-motion.

Open demo

MaskPointerCard

Cursor spotlight

Pointer-following spotlight mask that reveals content beneath an overlay (useful for hover reveals and guided focus). Freezes when prefers-reduced-motion is enabled.

Open demo

ScrollTypographyMotion

Scroll-linked headline

Headline reveal where each word animates in as it crosses the viewport (opacity + slight lift/tilt), then settles to a crisp static end state. No motion under prefers-reduced-motion.

Open demo