Resize, drag and float elements. To use, import from @marvelapp/ui:
import { Floaty } from '@marvelapp/ui';This allows an element to be draggable and resizable on top of the website. All elements that aren’t interactable will behave as a handle for dragging the Floaty around. The edges will always be used for resizing.
<Floaty defaultWidth={280} defaultHeight={280} minWidth={280} minHeight={280}>
<Upseller
title="Ideate and design faster"
subtitle="Customise your intro and outro screens to whatever you feel like."
width="100%"
height="100%"
image={
<Image
src={tourImage}
src2x={tourImage2x}
alt="My Tour Preview"
display="block"
/>
}
callToAction={<Button kind="marvel">Take a quick tour</Button>}
/>
</Floaty><Floaty lockAspectRatio={16 / 9} minWidth={404} minHeight={227}>
<Box
bg="white"
overflow="hidden"
border="1px solid"
borderColor="smoke"
position="relative"
onDrag={(event) => event.preventDefault()}
>
<Box p="56.25% 0 0 0" position="relative" bg="red">
<Box height="100%" left={0} position="absolute" top={0} width="100%">
<iframe
allowFullScreen
allowTransparency="true"
frameBorder="0"
height="100%"
mozallowfullscreen
msallowfullscreen
name="wistia_embed"
oallowfullscreen
scrolling="no"
src="https://fast.wistia.net/embed/iframe/vz54v4k7v5?videoFoam=true"
title="wistia_embed"
webkitallowfullscreen
width="100%"
/>
</Box>
</Box>
<Box position="absolute" top={16} left={16} zIndex={2}>
<Image
src={moveImage}
src2x={moveImage2x}
alt="My move button"
display="block"
/>
</Box>
</Box>
</Floaty>