Morph Surface

A slim bar with a Feedback button morphs into a text field. Send with Cmd+Enter, then the bar folds back and flashes a success dot.

Customize

labeltriggerLabelplaceholderanimationSpeed1.0collapsedWidth360pxexpandedWidth360pxexpandedHeight200px

accentColor

glowColor

highlightColor

Based on Morph Surface (MIT license) · Terms of use

20 properties

Property	Type	Default	Description
label	string	`"Morph Surface"`	Text next to the dot in the collapsed bar.
triggerLabel	string	`"Feedback"`	Text of the button that opens the form.
placeholder	string	`"What's on your mind?"`	Hint in the empty field.
submitLabel	string	`"⌘ Enter"`	Label of the send shortcut.
animationSpeed	number	`1`	Duration multiplier: higher is slower.
collapsedWidth	number \| 'auto'	`360`	Width of the collapsed bar.
collapsedHeight	number	`44`	Height of the collapsed bar.
expandedWidth	number	`360`	Width of the open form.
expandedHeight	number	`200`	Height of the open form.
triggerIcon	ReactNode	—	Icon before the button text.
onSubmit	(data: FormData) => void \| Promise<void>	—	Form submit; the text is in the message field.
isOpen / onOpenChange	boolean / (open: boolean) => void	—	Control the open state from outside.
onOpen / onClose / onSuccess	() => void	—	Called on open, close and successful submit.
springConfig	{ type: 'spring'; stiffness: number; damping: number; mass?: number }	—	Custom spring for the morph.
renderTrigger / renderContent / renderIndicator	(props) => ReactNode	—	Replace the button, form or dot with your own markup.
triggerClassName / contentClassName	string	—	Classes for the button and for the form.
accentColor	string	`"#ffffff"`	Main colour: the indicator dot, the text caret and the input focus ring.
glowColor	string	`"rgba(255,255,255,0.08)"`	Soft glow under the surface.
highlightColor	string	`"rgba(255,255,255,0.25)"`	Thin light rim around the surface.
className	string	—	Extra classes.

3 required packages

npm install motion clsx tailwind-merge