Shape Morph
Shapes morph into each other on a spring: circle, drop, star, flower. Pro · 3D and motion › 3D buttons, shapes and text
An outline that morphs from one shape to the next — circle, blob, star, flower, heart, hexagon — on a spring, so a bouncy theme makes it wobble like jelly. Every outline is the same number of points, lined up before the morph so it never twists; the browser plays the morph — a CSS transition of the outline, or an SVG animation where CSS can't move it (Safari) — and React renders only when the shape changes. Autoplay pauses on hover, focus, off screen and in a hidden tab. Decorative: the outline is hidden from assistive technology; the content inside is not. Reduced motion: shapes change without the morph.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add shape-morphnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShapeMorph } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
shapes | MorphShapeName[] | ['blob', 'circle', 'flower', 'star'] | The outlines it morphs between, in order. |
index | number | Index of the shape shown (controlled). | |
defaultIndex | number | 0 | Index of the shape shown at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when the shape changes: autoplay, a click with cycleOnClick, or index. | |
interval | number | 0 | Turns to the next shape every so many ms (0 — never). Pauses on hover, focus, off screen and with paused. |
paused | boolean | false | Holds the autoplay (moving content must be pausable, WCAG 2.2.2). |
spring | SpringName | The spring of the morph. bouncy wobbles like jelly. Default: the theme's --ui-motion-spring. | |
duration | number | Length of a morph, ms. Default: the spring's own settle time at the theme's tempo. | |
fill | 'gradient' | string | 'gradient' | Fill: gradient uses two of the theme's chart colours, or any CSS colour. |
size | number | 220 | Size of the shape, px. |
children | ReactNode | Content in the middle of the shape: an icon, a number, a short word. |
Related components
- Button 3D — Chunky key-style button that presses in and springs back
- Switch 3D — Cube switch that rolls between “off” and a glowing “on”
- Path Text — Text along a circle, arc or wave, rotating over time or with scroll
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Switch 3D · Next: Path Text · All 3D and motion