Two Claude prompts to build the text-around-silhouette effect — and the Matrix binary rain version — with zero coding needed.
You've seen that effect where text flows around someone's photo in real time. These two prompts let you make it yourself in Claude — no coding needed.
The concept comes from a GitHub repo called pretext by Cheng Lou (44k+ stars). It's a developer library with no interface for normal people. These prompts skip all of that.
What you need: A Claude account with "create files" turned on, and a photo with the background removed (use remove.bg — it's free).
Horizontal lines of code flow around your silhouette. Drag your photo around, draw shapes that text avoids, switch colors for everything.
Animated 0s and 1s fall down around you like the Matrix. Your photo sits on top, rain flows around you.
Paste either prompt into Claude, hit enter, upload your photo. If something's off, just say what to fix — "make the text closer," "change the color." The prompts get you 80% there. The iteration gets you the rest.
Horizontal text with draw mode — paste this into Claude then upload your transparent PNG.
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: Use HTML canvas (2x resolution for sharp export) to render everything 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 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 The gap between text and silhouette should be 2px (very tight wrapping) User can drag the image around and text reflows in real time 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 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.
Animated Matrix-style 0s and 1s falling around your silhouette.
Create a React component with an animated Matrix-style binary rain effect that falls around a photo's silhouette. Technical requirements: Use HTML canvas (2x resolution) with requestAnimationFrame for smooth animation Fill the entire canvas with a grid of "0" and "1" characters in monospace font 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 Each column should scroll at a slightly different speed (randomized between 0.3-0.7 multiplier) so columns fall at different rates Create 2 "streams" per column — a bright leading head character with a dimming trail above it. The head should be near-white (#e0fff0), the trail dims in the main text color. Trail length 8-20 characters 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 The buffer zone check should sample 9 points in a ring (center + 8 cardinal/diagonal points at buffer distance) against the alpha data Characters closer to the image should be brighter (higher opacity), fading out toward the edges of the canvas User can drag the image and the rain flows around the new position 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.