Björk UI

Components•Glyph morph

Glyph morph

Words that melt into each other by shape instead of crossfading. Each word becomes a signed distance field; a WebGL2 shader sweeps one field into the next with a little gravity, flow noise and surface tension, and only the travelling edge catches an orange rim.

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/glyph-morph

How to use

import { GlyphMorph } from "@/components/bjork-ui/text/glyph-morph";<GlyphMorph  words={["Shape", "Shift", "Form", "Flow"]}  interval={1600}        // hold per word, ms  duration={1500}        // morph length, ms  easing="inOutCubic"  stagger={0.4}          // 0 all at once, 1 slow sweep  tension={0.6}          // mid-morph thickening  fontWeight={640}  tone="dark"  ariaLabel="Studio values"/>

Components•Glyph morph

Glyph morph

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/glyph-morph

How to use

import { GlyphMorph } from "@/components/bjork-ui/text/glyph-morph";<GlyphMorph  words={["Shape", "Shift", "Form", "Flow"]}  interval={1600}        // hold per word, ms  duration={1500}        // morph length, ms  easing="inOutCubic"  stagger={0.4}          // 0 all at once, 1 slow sweep  tension={0.6}          // mid-morph thickening  fontWeight={640}  tone="dark"  ariaLabel="Studio values"/>