Docs / Get Started / Introduction
Introduction
Morphiq is a set of 28 interactive React effects — optics, raster, type, mechanics and motion — built to make interfaces feel alive rather than merely work.
Open code, not a dependency
Installing a Morphiq component copies its source into your project. There is no package to keep up to date and no build step of ours between you and the pixels — the files are yours to read, edit and own. If a component is 90% right, change the other 10%.
That is the shadcn registry model, and it is the reason every component here is written to be read: no clever indirection, no configuration objects, and comments that explain the parts that are genuinely surprising.
Every setting is a prop
Components ship fully controlled. Each one has a sensible default for every setting, so it looks right the moment you drop it in, and nothing is hidden behind internal state you cannot reach. None of them render demo UI or control panels of their own — what you see on these pages is this site driving real props.
What is here
- Prism Glass
- A GPU refractive lens for images and render targets — spectral dispersion, frost and a directional rim light from an SDF-defined shape, with no 3D model involved.
- Magnifying Dock
- A dock whose items swell as the pointer nears, on springs.
- Ferrofluid Nav
- A nav whose active pill stretches out of one item, necks, and gathers into the next.
- Elastic Headline
- A headline strung on an elastic — grab a letter, pull, and let the line ring out.
- ASCII Field
- A canvas of glyphs that scramble around the cursor and settle back to rest.
- Bitmap Noise
- A self-generating dither field — two drifting noise layers interfering into patches of particles.
- Bitmap Image
- Any image thresholded into newsprint, by ordered Bayer or true error diffusion.
- Bitmap Text
- Type rasterised into particles, from solid letterforms to a cloud that still reads.
- 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, while its neighbours give up the space.
- Weight Grid
- A bento grid where the cell under the cursor takes area from its neighbours, renormalised so the total never changes.
- Smear Cursor
- A cursor trail drawn as motion blur — thin and long when fast, round when slow — rather than a string of dots.
- Sonar List
- A ping leaves the click and each row rings as the wavefront reaches it, arriving at distance over wave speed.
- Thrown Marquee
- A marquee you can grab and throw. It keeps your momentum, bleeds it to friction and settles back to its idle drift.
- Thread Pull
- A thread under a line of text that hangs in a true catenary when pulled, with the letters leaning into its slope.
- Magnetic Field
- Iron filings aligning to a dipole under the cursor — two lobes and the loops between them, not a radial fan.
- Depth of Field
- A card stack blurred by the circle of confusion a real lens makes, so the near side defocuses harder than the far.
- Folding Panel
- A panel folding along connected creases, each facet foreshortened by cos θ and shaded by Lambert’s law.
- Elastic Rail
- A scroll rail that twangs when you overscroll, pitched by its own length: f = (1/2L)·√(T/μ).
- Gravity Menu
- Menu items on orbits that the cursor bends as a softened point mass.
- Caustic Surface
- The net of light on a pool floor, where brightness is conserved light through refraction — and pointer ripples bend it.
- Halftone Screen
- Four-colour process halftone with real screen angles and dot area matched to ink, under a loupe.
- Shatter Reveal
- An image that breaks into relaxed Voronoi shards, each tumbling with the inertia of its own shape.
- Liquid Transition
- A fluid front that sweeps between content, leading in the middle and ringing under surface tension.
- Channel Switch
- Content that changes like a CRT channel: a line, a dot, phosphor afterglow and a vertical hold rolling into lock.
- Wet Ink
- A word written in ink that wicks along the paper’s fibres and dries darker at its rim.
- Focus Peaking
- Hover an image and its in-focus edges light up, the way a camera monitor shows focus.
- Brushed Metal
- Brushed metal whose highlight streaks across the grain under a light at the pointer.
All 28 are in the registry and installable today. Each lands as source in your own codebase — read it, change it, own it.
What Prism Glass refracts
Worth knowing before you reach for it: Prism Glass is a texture lens. A shader can only sample a texture — it can never see the DOM — so the lens bends the image or render target you hand it, not the page behind it.
To refract something, put that something in the scene. The preview above does exactly that: it hands the lens a real image, and the lens bends those pixels.
License
MIT. Use it, ship it, sell what you build with it. The Author typeface used on this site carries its own licence from Fontshare and is not covered by that grant.