)
const handleContentSubmit = async (data: FormData) => {
if (onSubmit) {
try {
await onSubmit(data)
onSuccess()
} catch (error) {
console.error("Form submission error:", error)
}
} else {
onSuccess()
}
}
const contentElement = renderContent
? renderContent({
isOpen: showFeedback,
onClose: closeFeedback,
onSubmit: handleContentSubmit,
className: contentClassName,
})
: defaultContent
return (
)
})
MorphSurfaceFeedback.displayName = "MorphSurfaceFeedback"
// Utility components
function IconCheck() {
return (
)
}
function Kbd({
children,
className,
}: {
children: string
className?: string
}) {
return (
{children}
)
}
function useClickOutside(
ref: RefObject,
handler: (event: MouseEvent | TouchEvent | PointerEvent) => void,
isOpen: boolean
) {
useEffect(() => {
let startedOutsideWhileOpen = false
const isOutside = (event: Event) => {
const el = ref?.current
return !!el && !el.contains((event?.target as Node) || null)
}
const handlePointerStart = (event: PointerEvent) => {
startedOutsideWhileOpen = isOpen && isOutside(event)
}
const handleClick = (event: MouseEvent) => {
// Only close if this interaction began outside while the surface was open.
if (startedOutsideWhileOpen && isOpen && isOutside(event)) {
handler(event)
}
startedOutsideWhileOpen = false
}
const handleTouchEnd = (event: TouchEvent) => {
// Touch interactions may not emit click consistently across browsers.
if (startedOutsideWhileOpen && isOpen && isOutside(event)) {
handler(event)
}
startedOutsideWhileOpen = false
}
document.addEventListener("pointerdown", handlePointerStart)
document.addEventListener("click", handleClick)
document.addEventListener("touchend", handleTouchEnd)
return () => {
document.removeEventListener("pointerdown", handlePointerStart)
document.removeEventListener("click", handleClick)
document.removeEventListener("touchend", handleTouchEnd)
}
}, [ref, handler, isOpen])
}
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { MorphSurface } from "@/components/ui/morph-surface";
```
### Basic Usage
The component works out of the box with no configuration needed:
```tsx
```
### Custom Labels and Content
Customize the trigger label, placeholder, and submit behavior:
```tsx
{
const message = formData.get("message") as string;
console.log("Submitted:", message);
// Handle submission
}}
onSuccess={() => {
console.log("Feedback submitted successfully!");
}}
/>
```
### Custom Dimensions
Adjust the size when collapsed and expanded:
```tsx
```
### Custom Trigger Icon
Add an icon to the trigger button:
```tsx
import { HelpCircle } from "lucide-react";
}
placeholder="How can we help you?"
/>;
```
### Controlled State
Control the open/close state externally:
```tsx
import { useState } from "react";
function ControlledExample() {
const [isOpen, setIsOpen] = useState(false);
return (
);
}
```
### Custom Animation Speed
Speed up or slow down animations (higher values = slower animations):
```tsx
// Slow animations (2x slower)
// Fast animations (2x faster)
```
### Custom Styling
Apply custom className props for styling:
```tsx
```
## API Reference
### MorphSurface Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `collapsedWidth` | `number \| "auto"` | `360` | Width when collapsed |
| `collapsedHeight` | `number` | `44` | Height when collapsed |
| `expandedWidth` | `number` | `360` | Width when expanded |
| `expandedHeight` | `number` | `200` | Height when expanded |
| `animationSpeed` | `number` | `1` | Animation speed divisor (higher = slower, lower = faster) |
| `springConfig` | `SpringConfig` | - | Custom spring animation configuration |
| `triggerLabel` | `string` | `"Feedback"` | Label text for the trigger button |
| `triggerIcon` | `React.ReactNode` | - | Icon to display in the trigger button |
| `placeholder` | `string` | `"What's on your mind?"` | Placeholder text for the textarea input |
| `submitLabel` | `string` | `"⌘ Enter"` | Label for the submit button |
| `onSubmit` | `(data: FormData) => void \| Promise` | - | Callback when form is submitted |
| `onOpen` | `() => void` | - | Callback when surface opens |
| `onClose` | `() => void` | - | Callback when surface closes |
| `onSuccess` | `() => void` | - | Callback after successful submission |
| `isOpen` | `boolean` | - | Controlled state for open/close |
| `onOpenChange` | `(open: boolean) => void` | - | Callback for controlled state changes |
| `className` | `string` | - | Additional CSS classes for the root container |
| `triggerClassName` | `string` | - | Additional CSS classes for the trigger button |
| `contentClassName` | `string` | - | Additional CSS classes for the content area |
| `renderTrigger` | `(props: TriggerProps) => React.ReactNode` | - | Custom render function for the trigger |
| `renderContent` | `(props: ContentProps) => React.ReactNode` | - | Custom render function for the content |
| `renderIndicator` | `(props: IndicatorProps) => React.ReactNode` | - | Custom render function for the indicator dot |
### SpringConfig Type
```tsx
type SpringConfig = {
type: "spring";
stiffness: number;
damping: number;
mass?: number;
delay?: number;
};
```
### Render Props Types
```tsx
interface TriggerProps {
isOpen: boolean;
onClick: () => void;
className?: string;
}
interface ContentProps {
isOpen: boolean;
onClose: () => void;
onSubmit: (data: FormData) => void | Promise;
className?: string;
}
interface IndicatorProps {
success: boolean;
isOpen: boolean;
className?: string;
}
```
## Features
- **Smooth Animations**: Uses Framer Motion for fluid morphing transitions
- **Customizable Dimensions**: Configure width and height for both collapsed and expanded states
- **Form Handling**: Built-in form submission with FormData extraction
- **Controlled & Uncontrolled**: Support for both controlled and uncontrolled state management
- **Customizable Content**: Customize labels, placeholders, icons, and styling
- **Render Props**: Full control over trigger, content, and indicator rendering
- **Keyboard Shortcuts**: Built-in support for ⌘ Enter (submit) and Escape (close)
- **Success States**: Visual feedback with animated checkmark indicator
- **Accessibility**: Proper focus management and keyboard navigation
- **Click Outside**: Automatically closes when clicking outside the component
## Examples
### Feedback Form
Use as a feedback collection component:
```tsx
{
const message = formData.get("message") as string;
await fetch("/api/feedback", {
method: "POST",
body: JSON.stringify({ message }),
});
}}
onSuccess={() => {
toast.success("Thank you for your feedback!");
}}
/>
```
### Help/Support Widget
Use as a help widget:
```tsx
import { HelpCircle } from "lucide-react";
}
placeholder="How can we assist you?"
onSubmit={async (formData) => {
// Handle help request
}}
/>;
```
### Custom Dimensions
Create a larger feedback surface:
```tsx
```
### With Custom Spring Config
Customize animation spring physics:
```tsx
```
### Controlled State Example
Control the component state externally:
```tsx
import { useState } from "react";
function ControlledMorphSurface() {
const [isOpen, setIsOpen] = useState(false);
return (
);
}
```
### Custom Render Props
Use render props for maximum customization:
```tsx
(
)}
renderContent={({ isOpen, onClose, onSubmit, className }) => (
)}
/>
```
### Async Form Submission
Handle async form submissions:
```tsx
{
const message = formData.get("message") as string;
try {
const response = await fetch("/api/issues", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message }),
});
if (!response.ok) {
throw new Error("Failed to submit");
}
// Success handling is automatic
} catch (error) {
console.error("Submission error:", error);
throw error; // Re-throw to prevent success state
}
}}
onSuccess={() => {
toast.success("Issue submitted successfully!");
}}
/>
```
### Multiple Instances
Use multiple instances with different configurations:
```tsx
```
## Keyboard Shortcuts
- **⌘ Enter** (Mac) / **Ctrl Enter** (Windows): Submit the form
- **Escape**: Close the surface
## Notes
- The component automatically focuses the textarea when opened
- Click outside the component to close it
- Form submission extracts FormData from the form element
- Success indicator shows for 1.5 seconds after successful submission
- The component uses layoutId animations for smooth morphing transitions
- Works seamlessly in both light and dark modes
## Inspiration
This component is inspired by the [Morph Surface](https://devouringdetails.com/) prototype from [Devouring Details](https://devouringdetails.com/), an interactive reference manual for interaction design by Rauno Freiberg. Devouring Details explores interaction design principles through 23 downloadable React components, showcasing the craft of interaction design with attention to detail.