ComponentsSmart Wrap Text

Smart Wrap Text

Canvas text wraps around a draggable HTML region. Put an image, video, or any markup in the box. If you do not pass children, it uses /Profile_with_background.png by default. Tune initialBox, boxClassName, mediaFit, and canvas size to match your asset.

Installation

$ npx @nehal712521/inprogress add smart-wrap-text

Preview

Drag the profile image; text reflows around it. Optional framing (radius, ring, shadow) goes on boxClassName.

Profile avatar

Usage

import SmartWrapText from "@/components/ui/SmartWrapText";

// Default: shows /Profile_with_background.png in the box (square-friendly defaults).
export default function Page() {
  return (
    <SmartWrapText
      text="Your paragraph here. Words wrap around the draggable box."
      canvasWidth={700}
      canvasHeight={300}
      font="18px system-ui, sans-serif"
      textColor="#e4e4e7"
      initialBox={{ x: 220, y: 48, width: 100, height: 100 }}
      boxClassName="rounded-xl"
      mediaAlt="Profile"
      mediaFit="cover"
    />
  );
}

// Custom media: pass children (image, video, etc.)
/*
<SmartWrapText initialBox={{ x: 180, y: 40, width: 160, height: 90 }} boxClassName="rounded-lg overflow-hidden">
  <video
    className="h-full w-full object-cover"
    src="/your-clip.mp4"
    muted
    loop
    playsInline
    autoPlay
  />
</SmartWrapText>
*/