---
name: "@morphiq"
slug: "morphiq"
description: "Interfaces that move. Refractive glass, motion and depth for React — a GPU-accelerated prism lens and a cursor-reactive ASCII field, with every setting exposed as a prop."
category: "Animated components"
tags: ["animation", "backgrounds", "cards", "glassmorphism", "maps", "media", "mobile", "navigation"]
framework: "react"
license: null
author: null
website: "https://morphiq.prathampatel.design"
github: null
registry: "https://morphiq.prathampatel.design/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 20
generated_at: "2026-09-21T01:50:16.753Z"
---

# @morphiq

Interfaces that move. Refractive glass, motion and depth for React — a GPU-accelerated prism lens and a cursor-reactive ASCII field, with every setting exposed as a prop.

## Links

- Website: https://morphiq.prathampatel.design
- Registry JSON: https://morphiq.prathampatel.design/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/morphiq
- This file: https://sh4dcn.vercel.app/md/morphiq.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://morphiq.prathampatel.design/r/registry.json
pnpm dlx shadcn@latest add https://morphiq.prathampatel.design/r/registry.json
bunx shadcn@latest add https://morphiq.prathampatel.design/r/registry.json
# fetch the raw registry index
curl -s https://morphiq.prathampatel.design/r/registry.json
```

## Components (20)

| name | type | description | install |
| --- | --- | --- | --- |
| prism-glass | registry:component | A GPU-accelerated refractive lens for images and rendered textures. Spectral dispersion, uniform frost and a directional rim light, from an SDF-defined shape —… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/prism-glass.json` |
| dock | registry:component | A dock whose items swell as the pointer nears, on springs. Distance drives the scale, so the row breathes rather than one icon popping. | `npx shadcn@latest add https://morphiq.prathampatel.design/r/dock.json` |
| ferrofluid-nav | registry:component | A nav whose active pill stretches out of one item, thins to a neck and gathers into the next. Two capsule fields blended with a polynomial smooth-minimum, eval… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/ferrofluid-nav.json` |
| elastic-headline | registry:component | A headline strung on an elastic. Letters are nodes on a mass-spring chain pinned at both ends and coupled by the discrete Laplacian, so a pull travels outward … | `npx shadcn@latest add https://morphiq.prathampatel.design/r/elastic-headline.json` |
| pressure-text | registry:component | Type that reacts to the cursor. Letters thicken and widen under the pointer while their neighbours give up the space, so the word keeps its overall width. Both… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/pressure-text.json` |
| scroll-expand | registry:component | A framed panel pinned to the viewport that opens out to full bleed as you scroll past it, with the media inside settling back from a slight push-in. Progress i… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/scroll-expand.json` |
| ascii-field | registry:component | A canvas field of glyphs that scramble around the cursor and settle back to rest. | `npx shadcn@latest add https://morphiq.prathampatel.design/r/ascii-field.json` |
| bitmap-noise | registry:component | A self-generating dither field. Two drifting noise layers interfere to form patches of particles that appear, dissolve and reform in place. Canvas 2D, no WebGL. | `npx shadcn@latest add https://morphiq.prathampatel.design/r/bitmap-noise.json` |
| bitmap-image | registry:component | Converts an image into a dithered bitmap — ordered Bayer or true error diffusion (Floyd-Steinberg, Atkinson, Jarvis), which no shader can do. Canvas 2D, no Web… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/bitmap-image.json` |
| bitmap-text | registry:component | Type rasterised and dithered into particles. A grain control decides whether the letterforms read as solid or as a cloud that still resolves as words. Canvas 2… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/bitmap-text.json` |
| weight-grid | registry:component | A bento grid where the cell under the cursor takes area from its neighbours and the total never changes. Track weights are renormalised against their axis sum,… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/weight-grid.json` |
| smear-cursor | registry:component | A cursor trail that is motion blur rather than a string of dots. Ribbon width falls as 1/(1+speed·k), the way a camera spreads the same exposure over more grou… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/smear-cursor.json` |
| sonar-list | registry:component | A ping leaves the click and sweeps outward; each row rings as the wavefront reaches it. Arrival is d/c, a real propagation time, so rows near the click ring fi… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/sonar-list.json` |
| thrown-marquee | registry:component | A marquee you can grab and throw. Velocity decays exponentially toward the idle drift rather than toward zero, so a hard throw drops fast then creeps and the b… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/thrown-marquee.json` |
| thread-pull | registry:component | A thread strung under a line of text that hangs in a real catenary when you pull it. Length is conserved, so dragging to one side starves that segment and floo… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/thread-pull.json` |
| magnetic-field | registry:component | Iron filings aligning to a dipole under the cursor. B proportional to (3(m·r̂)r̂ − m)/r³, so the pattern has two lobes and the loops between them — a radial fa… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/magnetic-field.json` |
| depth-of-field | registry:component | A card stack blurred by a real circle of confusion, so the near side defocuses harder than the far side — the asymmetry that makes a photograph read as one. Th… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/depth-of-field.json` |
| folding-panel | registry:component | A panel that folds along real crease lines. Facets are placed by walking the fold outward so the paper stays connected, the panel foreshortens by cos θ as it c… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/folding-panel.json` |
| elastic-rail | registry:component | A scroll progress rail that bulges with overscroll and twangs back. It obeys the wave equation, so its pitch follows f = (1/2L)·√(T/μ) — a longer rail rings lo… | `npx shadcn@latest add https://morphiq.prathampatel.design/r/elastic-rail.json` |
| gravity-menu | registry:component | Menu items on stable orbits, bent past the pointer by a softened inverse-square attraction. The softening term is what stops an item crossing the cursor being … | `npx shadcn@latest add https://morphiq.prathampatel.design/r/gravity-menu.json` |

## For AI agents

```text
You are adding components from @morphiq to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/morphiq.md) for the component list.
2. Fetch the machine-readable index: https://morphiq.prathampatel.design/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: morphiq).
```