Elements that carry the same data-morph name in both views fly from their old box to their new one while the rest of the views crossfade. Good for a list row that opens into a detail card.
Low Tide
Harbor Lights
Glass Hours
Nora Vale
npx shadcn@latest add https://hyperblur.dev/r/transition-shared-morph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-shared-morph.tsx.
import { TransitionSharedMorph } from "@/components/hyperblur/transition-shared-morph"
<TransitionSharedMorph active={open} from={<Row><img data-morph="cover" /></Row>} to={<Detail><img data-morph="cover" /></Detail>} />| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 2800 | Milliseconds between switches when autoPlay is on. |
| duration | number | 760 | Morph time in milliseconds. |
| easing | string | "cubic-bezier(0.32, 0.72, 0, 1)" | Easing of the morph. Any CSS easing string. |