Trending Society

@morphiq

A canvas field of glyphs that scramble around the cursor and settle back to rest.

Forms2 packages

@morphiq

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.

Backgrounds2 packages

Bitmap Text

@morphiq

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 2D, no WebGL.

Text2 packages

Brushed Metal

@morphiq

A brushed metal panel under a light at the pointer, shaded with anisotropic GGX so the highlight streaks across the grain. Colour is the metal's F0; anisotropy 0 is polished. WebGL2.

Other

Caustic Surface

@morphiq

The net of light on a pool floor, lit by conservation of light rather than a texture: brightness is 1/|det(I + D(1 − 1/n)H)| of the refraction map, so the lines are where the surface folds the light. Pointer ripples bend the net. WebGL2.

Data display

Channel Switch

@morphiq

Content changes like a CRT changing channel — collapse to a line and a dot, a phosphor feedback buffer decaying as e^(−Δt/τ), and a damped vertical hold rolling the new picture into lock. Children stay live DOM.

Forms

Depth of Field

@morphiq

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. The focal plane racks with the pointer.

Forms

Magnifying Dock

@morphiq

A dock whose items swell as the pointer nears, on springs. Distance drives the scale, so the row breathes rather than one icon popping.

Navigation3 packages

Elastic Headline

@morphiq

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 and reflects off the ends — grab one and the whole line deforms, then rings out.

Other

Elastic Rail

@morphiq

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 lower, with nothing tuned per page.

Motion and effects

Ferrofluid Nav

@morphiq

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, evaluated per pixel — the neck is surface tension, not a translate.

Navigation

Focus Peaking

@morphiq

Lights an image's in-focus edges on hover, like a camera monitor: the Sobel gradient of luma, thresholded with a soft knee and tinted over a dimmed picture. WebGL2.

Media

Bitmap Image

Install

Live preview

Registry dependencies0

Packages2

Bitmap Image

Install

Live preview

Registry dependencies0

Packages2

Source

More from @morphiq, 28 components

The Signal

Install

Live preview

Registry dependencies0

Packages2

Install

Live preview

Registry dependencies0

Packages2

Source

More from @morphiq28, 28 components

More from @morphiq, 28 components