How to make the text wrap effect

Create a React component that wraps text around a photo's silhouette. The user uploads a transparent background PNG and text flows around the exact outline of their body in real time. Technical requirements: 1. Use HTML canvas (2x resolution for sharp export) to render everything 2. Scan the uploaded image's alpha channel to detect the silhouette. For each row of text, use getImageData to find the leftmost and rightmost opaque pixel (alpha > 30). This creates the obstacle boundary per line 3. Text must fill BOTH sides of the silhouette on every line. If there is space to the left AND right of the person's body, render text in both gaps independently. Do not just pick one side, calculate two separate spans per line and fill each with words 4. The gap between text and silhouette should be 2px (very tight wrapping) 5. User can drag the image around and text reflows in real time 6. Export PNG button that downloads the current canvas Features to include: - A settings panel with: font size slider (9-24px), image scale slider, column count (1, 2, or 3) - Background color swatches: #0a0a0a, #000000, #0d1117, #111111, #1a1a2e, #FAF7F2 - Text color swatches: #88d4a0, #8ac8d4, #d4c088, #c4a0d4, #c9d1d9, #00ff41, #2a2a2a, #e8e8e8 - A toggle for text content: one mode shows realistic TypeScript/JavaScript code (an AI agent with streaming, embeddings, tool calling), the other mode shows prose text. Default to code - A draw mode toggle button. When active, the cursor becomes a crosshair and the user can freehand draw on the canvas. Their brush strokes become obstacles that text wraps around, just like the image silhouette. Combine the drawing layer with the image alpha map so text avoids both - A color picker for the brush with at least 8 colors as small circular swatches: #88d4a0, #ff6b6b, #ffb627, #8ac8d4, #c4a0d4, #ffffff, #ff69b4, #4a9eff - A brush size slider (5-60px) - A clear drawing button that wipes all drawn strokes - Drawing strokes should render visibly on the canvas at about 70% opacity so they show in the export Default styling: dark background (#0a0a0a), pastel green monospace text (#88d4a0), font size 13px, single column, Consolas/monospace font CRITICAL: The code text content must be stored as an array of regular quoted strings joined together, NOT as a template literal. Do NOT include any import or export statements in the text content, this will break the live renderer. Start the code content with something like "const db = createClient(..." instead.

Create a React component with an animated Matrix-style binary rain effect that falls around a photo's silhouette. Technical requirements: 1. Use HTML canvas (2x resolution) with requestAnimationFrame for smooth animation 2. Fill the entire canvas with a grid of "0" and "1" characters in monospace font 3. The characters must visually SCROLL DOWNWARD like rain. Do this by calculating a scroll offset per column that increases over time: each character's value is determined by rand(column, row - scrollOffset) so as scrollOffset increases, the same characters physically move down the screen. Do NOT just randomly flip characters each frame, that looks like blinking, not rain 4. Each column should scroll at a slightly different speed (randomized between 0.3-0.7 multiplier) so columns fall at different rates 5. Create 2 "streams" per column, a bright leading head character with a dimming trail above it (where it already passed). The head should be near-white (#e0fff0), the trail dims in the main text color. Trail length 8-20 characters 6. When user uploads a transparent PNG, scan the alpha channel at every character position to detect the silhouette. Characters that fall within 12px of any opaque pixel should not render, creating a clean buffer zone around the person 7. The buffer zone check should sample 9 points in a ring (center + 8 cardinal/diagonal points at buffer distance) against the alpha data 8. Characters closer to the image should be brighter (higher opacity), fading out toward the edges of the canvas 9. User can drag the image and the rain flows around the new position 10. Export PNG button captures the current frame Features: - Settings panel with font size slider (9-20px) and image scale slider - Background color swatches: #0a0a0a, #000000, #0d1117, #111111, #1a1a2e, #0a0e14 - Text color swatches: #88d4a0, #8ac8d4, #d4c088, #c4a0d4, #c9d1d9, #00ff41 - Buffer distance slider (5-30px) to control how far the rain stays from the silhouette Default styling: black background (#0a0a0a), pastel green (#88d4a0), font size 13px, Consolas/monospace The image should render ON TOP of the rain so the person appears in front of the falling characters. The animation should run at 60fps but the scroll speed should be slow and gentle, not frantic.