transitions
Shared Element Transition
A semantic route link or accessible Morph surface with shared visual identity.
- transitions
- shared-layout
- route
- detail
Quick usage
import { SharedElementTransition } from "@pinky-ui/experiences";
<SharedElementTransition name="project-cover" href="/work/pinky">{cover}</SharedElementTransition>Presets
Default
The restrained Pinky production default.
Default behaviour
Quiet
A flatter or lower-intensity treatment for dense pages.
disabled={true}
Install
Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add shared-element-transitionPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Stable identity shared by source and destination. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Route mode remains a real anchor.
- In-place detail mode inherits Escape, focus trap and focus restoration from Morph.
Performance
- Transforms one meaningful surface rather than the whole page.
- View Transition naming is progressive enhancement.
Reduced motion
Spatial or continuous movement is removed while content, selection and controls remain available.
When to use
- Thumbnail-to-detail continuity
When not to use
- Unrelated page changes or many simultaneous shared objects
Skill
Purpose
SharedElementTransition preserves visual identity between a source and destination, either through a real route link or the existing accessible Morph surface. Use it for a thumbnail-to-detail or card-to-project relationship.
Animate one meaningful shared object and keep the duration short. Avoid wrapping whole pages, matching unrelated elements or using the transition when back-navigation cannot preserve context. A transition is enhancement, not routing infrastructure.
Route mode remains a real anchor; in-place mode inherits focus trap, Escape and restoration from Morph. Reduced motion removes shared layout movement. Keep names stable across server and client, and avoid large filter stacks during the transition.