Ziyam Khan

Download ZK monogram

Search the site

↑ ↓ choose Enter go Esc close

My Components

Most of the components I found online were boring, so I built one of my own. Then I built a few more, and then I turned them into a library anyone can use, because why not?

runets is that library: components, springs and WebGL 2 shader effects for React, in TypeScript. Everything on this site that moves or glows comes from it. Each entry has a live demo, its parameters and the code to take.

runets on GitHub85 components and effects · MIT · npm i github:ziyam-khan/runets

Using a coding agent? Give it ziyamkhan.com/my-components/llms.txt: every component with its import, usage and props, in plain text.

Motion

Springs as duration and bounce, presence that blurs in and out, labels that roll.

Text

Words that change in place: a terminal that retypes itself, labels that swap, a marquee.

Effects

Light and distortion as layers beside an element: glow, pulses, electricity, fire, glass, CRT.

Fills

Surfaces painted by a shader: metal, gradients, dither, glass, blobs, cells, waves, print, plastic.

Weather

The four skies of the home page, and sakura petals on the wind of your pointer.

Light

A lamp above the page: soft shadows and rim light from raised elements.

Controls

Buttons, toggles and small indicators, in every variant, size and state.

Inputs

Text, choices and shortcuts.

Overlays

Menus, popovers, tooltips, cards on hover, dialogs and toasts.

Surfaces

Cards, lists, disclosure and the app shell.

Content

The pieces a portfolio is made of: shelves, timelines, cards and quotes.

Data

A virtual file tree, a sortable table, a lineage drawn as a tree and a year of activity as squares.

Play

Small toys: things to drag, slide and break.