Morphiq

Overview

Morphiq is a collection of 28 interactive React components grouped into optics, raster, type, mechanics and motion. Each effect is driven by a physical or mathematical model rather than keyframes: letters on a mass-spring chain, a catenary that conserves length, ink that spreads by anisotropic diffusion, or caustics computed from a refraction map.

Every component installs as source through the shadcn registry and exposes its settings as props. Rendering uses Canvas 2D or WebGL2 depending on the piece, and a few components rely on GSAP or React Three Fiber. Highlights include a GPU-accelerated prism glass lens and a cursor-reactive ASCII field.

Features

• Text animations: Elastic Headline, Pressure Text, Thread Pull, Wet Ink and Bitmap Text.
• Backgrounds: Magnetic Field, Caustic Surface, Brushed Metal (anisotropic GGX shading), Bitmap Noise and ASCII Field.
• Navigation components: Magnifying Dock, Ferrofluid Nav, Gravity Menu, Elastic Rail and Sonar List.
• Optics: Prism Glass, Depth of Field, Focus Peaking and Halftone Screen.
• Transitions: Shatter Reveal, Liquid Transition, Channel Switch, Folding Panel and Scroll Expand.
• No-WebGL options: Several raster effects, such as Bitmap Text and Bitmap Noise, run on Canvas 2D alone.

Tech stack

• React, Canvas 2D, WebGL2, GSAP, three.js, React Three Fiber, shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @morphiq/component-name