Morphiq

Interfaces that move.

Interactive React components — glass, motion and depth — built to make modern interfaces feel alive.

Open source. Thoughtful motion. No boring interfaces.

Installation

Add a component straight into your project with the shadcn CLI. The source lands in your codebase — yours to read, edit and own. No runtime dependency on Morphiq.

Any of these work. Pick one.

1. Straight from GitHub — nothing to configure:

2. Register the @morphiq namespace once, then install by short name:

registry add writes the namespace into your components.json for you. If you would rather do it by hand:

3. By URL — no config, no namespace:

Browse what is in the registry before you install anything:

Requirements

The shadcn CLI needs a project it can read, so make sure you have:

a components.json — run npx shadcn@latest init -d if you don't have one
a jsconfig.json or tsconfig.json declaring the @/* path alias

Without both, the CLI stops with Invalid configuration or Couldn't find tsconfig.json before it ever reaches the registry.

Usage

Every component is fully controlled. Each setting is a prop with a sensible default, and none of them ship demo UI.

Every prop is live on the docs site, so you can dial a component in before you install it.

Components

Component	What it does
Prism Glass	A GPU refractive lens for images and rendered textures. Spectral dispersion, frost and a directional rim light, from an SDF-defined shape — no 3D model required.
ASCII Field	A canvas of glyphs that scramble around the cursor and settle back to rest.
Magnifying Dock	A dock whose items swell as the pointer nears, on springs.
Scroll Expand	A framed panel that opens to full bleed as you scroll past it.
Pressure Text	Type that gains weight and width under the cursor.

What Prism Glass refracts

Prism Glass is a texture lens. It refracts the image or render target you give it — it cannot see the DOM behind it, and no WebGL component can. The browser gives shaders no access to page pixels.

There are three ways to build glass on the web, and it's worth knowing which one you need:

Texture glass — an image goes into a shader. This is Prism Glass.
Scene glass — content is rendered into a WebGL scene, then into a buffer, then refracted. This is how the Morphiq landing page lets the cursor lens bend its own headline.
Backdrop glass — backdrop-filter with an SVG displacement map. The only technique that touches live DOM, at lower fidelity.

Contributing

Morphiq is open source and built in the open — new components welcome.

No configuration needed. The landing page is at /; the component docs sit behind Components in the nav.

packages/prism-glass/   the published npm packagesrc/components/         component sourcessrc/site/               the WebGL landing pagesrc/site/components/    the docs siteregistry.json           shadcn registry manifest

See for how to add a component, how to write a registry entry that actually installs, and what a pull request needs.

Typeface

Set in Author by Satya Rajpurohit (Indian Type Foundry), from — free for personal and commercial use.

License

— use it, ship it, sell what you build with it.

The Author typeface in public/fonts/ carries its own licence from Fontshare and is not covered by the MIT grant — see .