Your words,
wrapped around something that turns
The trick everybody wants from a title card: text running around a can, a band of words seen edge-on, a sentence spiralling over a doughnut. It is one idea — the words are printed on a surface and the surface is curved — and the whole of the difficulty is the seam where the picture meets itself. Free: every body
- The seam closes.
- The phrase is stretched by the fraction needed to fit a whole number of times around — never cropped, and the panel says by how much.
- Six bodies.
- Cylinder, band, torus, sphere, cone and a ribbon that turns as it goes around.
- Millimeters, not pixels.
- Text set at 20 mm is 20 mm on a small can and on a drum. The texture’s resolution follows the body.
- Your own drawing.
- Drop an SVG and it is wrapped in the same rows as the words, stamped in the ink color.
- A still and a film.
- A PNG at the size of the view, and one turn recorded as WebM — real time, off the canvas.
- Or the live thing.
- A self-contained page you can paste into your own site: your settings, three.js from a CDN, no build step.
What it makes
Six things it does that a filter does not
Bending text in a drawing program gives you a picture of bent text. This gives you a surface with text printed on it, lit as a surface.
The one thing that separates this from a bent screenshot
- A whole number of repeats goes around, always
- The phrase is stretched to fit, never cut
- A word across the join is drawn on both sides of it
- On a torus, a sphere and a ribbon the stagger is snapped so the spiral meets itself too
Six, and each is a different job
- Cylinder for a can, a tube, a bottle wrap
- Band for the ring of words seen edge-on
- Torus and sphere for a spiral that closes both ways
- Cone for a cup, ribbon for a Möbius strip
Set the way a typographer would
- Size in millimeters of body, weight, tracking, slant
- As many lines as you like, staggered into a spiral
- The gradient runs across the unrolled sheet, so it travels around
- Or drop an SVG and wrap that instead
Paint, metal, or see-through
- Metalness and roughness, the two dials that decide everything
- See-through draws the far side of the body — the band effect
- Glow, for the acid look
- Six styles to start from, each a whole page rather than a color
In detail
The body, the sheet, the light and the file
One picture, wrapped once, lit properly, and three ways of taking it with you.
The bodies
- Cylinder and band, open-ended so the inside shows
- Torus, wrapped the long way around
- Sphere, cone with any taper
- A ribbon with any number of half turns — odd leaves a Möbius strip
The wrap
- A phrase with a separator of your choosing
- Or an SVG, sanitized and stamped in the ink color
- Lines, stagger, tracking, slant, weight
- A two-stop gradient across the sheet
The look
- Metalness and roughness
- See-through, so the far side reads
- Glow on the text alone, never on the body
- Light set around and above
Out
- PNG at the size of the view
- WebM of one turn
- A pasteable HTML page
- Nothing is uploaded — it is all your browser
How it works
Four steps
A body, some words, a material, and the file you wanted.
Pick a body
And set it in millimeters. The panel tells you what it measures around and along.
Wrap it
A phrase or an SVG, as many lines as you want, staggered into a spiral.
Light it
Paint, metal or glass; the room behind it; where the light stands.
Take it
A still, a turn, or the code that draws it live.
Who it is for
Anywhere text has to go around something
Half of this is a mock-up and half of it is a title card.
Packaging mock-ups
A wrap on a can, a tube or a jar, at the size it will actually print.
Title cards and posters
The band of words that has been on every second music poster for five years, made properly.
Websites
Paste the code and the thing turns on your own page.
Social
A six-second loop, recorded in real time.
Presentations
A still at the size of the slide, with the text legible.
Logos on a body
Drop your mark as an SVG and wrap that instead of words.
Questions
What it does, and what it will not do
Is the text real 3D?
No, and deliberately. The words are printed on the surface, which is what the pictures everybody wants actually are — a wrap, not a set of extruded letters. Extruding text and bending the mesh gives raised letters that look like a chrome logo from 1998; printing them on a curved surface and lighting the surface is what reads as a can.
Will a word be cut in half at the join?
No. The phrase is stretched by the fraction needed to fit a whole number of times around the body, and every row is drawn one repeat past either edge, so a word that straddles the seam is drawn whole on both sides of it. If the stretch comes to more than a fifth the panel says so — that is your cue to change the size, not ours to squash the text silently.
What can I drop on it?
SVG. It is read and sanitized by the same code the tiler uses, its ids are made unique, and it is stamped in the ink color rather than its own — a mark in one color is a mark that belongs on the body.
Why is the film a WebM?
Because that is what a browser can encode on its own. An MP4 encoder is two megabytes of WebAssembly for a file most people drop straight into a web page, where WebM plays. It is recorded in real time off the canvas, so a six-second film takes six seconds.
What exactly does “copy the code” give me?
One HTML page: an import map pointing at a pinned three.js on a CDN, about sixty lines that draw the sheet and turn the body, and your settings as a literal. No build step and no dependency on this site. Paste it into a page and it runs.
Is anything uploaded?
No. The file is read in your browser, the picture is drawn in your browser and the video is encoded in your browser. There is no account and no server.
Can I use my own font?
Not yet. It sets in the site’s own grotesque; a face of your own is on the list, and it is the next thing worth adding.
Wrap something
A phrase, a body, and a file — or the code that keeps turning on your page.