Morphing Area

Adaptive aspect ratio surface with constant-area morphing for any child element, card, or media.

3 KB

•

Updated on September 17, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-morphing-area

Usage

Code

import { MorphingArea } from '@/components/spaceui/morphing-area'

export default function Example() {
  return (
    <MorphingArea ratio="4:3" rounded={8} squircle={false}>
      <img src="/your-image.jpg" alt="" className="size-full object-cover" />
    </MorphingArea>
  )
}

You can pass any content as children, including custom UI cards, gradients, or media:

Code

<MorphingArea ratio="1:1" rounded={12} squircle>
  <div className="size-full bg-gradient-to-br from-indigo-500 to-purple-600 p-6 flex flex-col justify-between text-white">
    <h3>Dynamic Card</h3>
    <p>Morphs smoothly across aspect ratios.</p>
  </div>
</MorphingArea>

Props

Prop	Type	Default	Description
`children`	React.ReactNode	—	Child elements (images, cards, media) to morph.
`ratio`	4:3\|1:1\|3:4\|16:9\|land\|square\|tall	1:1	Target aspect ratio for constant-area surface morphing.
`width`	string\|number	—	Optional explicit width override.
`height`	string\|number	—	Optional explicit height override.
`rounded`	number	8	Corner radius in pixels (min 0).
`squircle`	boolean	false	Enables continuous squircle curvature via `@usespaceui/squircle`.
`morph`	number	50	Morph transition spring duration modifier (0–100).
`className`	string	—	Additional class names.

Keep in mind

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Morphing Command Bar

Morphing Search Pill

On This Page

Installation Usage Props Related Components

@usespaceui/squircle