Rotating Cylinder Type

About this style

Wrapping type around cylinders, rings and spheres is a staple of contemporary 3D motion design and typographic posters. The curve does the work: letters compress toward the edges and the back of the band shows through mirrored, so flat lettering reads as an object in space. Shading the far side darker and keeping a little perspective makes the depth legible at a glance. Festival identities, music visuals and social loops use it for type that feels physical.

Make a 10-second 3D kinetic type piece: words wrapped around a turning cylinder that splits into a stack of spinning rings.

<inputs>
Ring words, top to bottom: RONDO, TYPE, WEEK, 2026. Line: "A festival of moving type". Details: "12–15 March · Hall 9". Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ground electric blue #2236E8; front-facing type #F6F2E9; back-facing type #101A86; the TYPE ring in tangerine #FF7A3D with its back faces #8A3315. Flat color, no lights.
Type: Unbounded 800, uppercase, for the rings; Unbounded 500 for the overlay. After the font loads, draw each ring's text once into its own canvas texture (4096px wide, transparent ground, cap height 70% of the band): the word repeated a whole number of times, 3 to 5, separated by drawn dots 0.3em across and spaced so the seam is invisible. Anisotropy 8, mipmaps on.
Geometry: four open-ended cylinder bands, radius 3, height 1.25, 128 radial segments, stacked with 0.14 gaps so at first they read as one cylinder. One ShaderMaterial, DoubleSide, alpha-tested at 0.5: gl_FrontFacing picks the front or back color, brightness falls toward the silhouette edges as 0.55 + 0.45 × |view-space normal z|, and linear fog toward the ground color adds up to 15% on the far side. The back of each band shows through between the letters, mirrored and darker: that's the look. A reveal-angle uniform discards fragments beyond it, so the type can unroll around the drum.
Camera: perspective, 30° fov, 17 units out, 4–8° above the center (see the timeline) and looking at it; the stack tilted −12° about z.
Motion: running rotation has constant angular speed, no easing. Together the bands turn at 50°/s; after the split they alternate direction at 40–90°/s. Every stop is a cubic Hermite from the current speed to zero over 0.85s, its end angle solved so the band's word faces the camera dead center, choosing the whole-turn offset whose travel is closest to half of speed × duration so it never reverses. Vertical moves use cubic-bezier(0.65, 0, 0.35, 1) over 0.8s.
Overlay (HTML): the line top-left at x 120, y 110 in Unbounded 500, 30px; the details bottom-left at x 120, y 960, 26px, tracked 0.1em; both #F6F2E9.
Premium is real depth: letters compressing toward the edges, mirrored backs in shade, seamless bands, stops that land exactly. Cheap is flat text sliding behind a fake curve.
Banned: lighting effects, bloom, chrome or glass, extruded letters, drop shadows, gradients on type, visible texture seams, camera shake, flashing more than 3 times per second.
</direction>

<structure>
0.0–1.4s: the type unrolls around the drum: the reveal angle grows from 0 to 360° on easeInOutSine as the drum turns.
1.4–3.6s: the cylinder turns at 50°/s while the camera rises from 4° to 8°.
3.6–5.2s: it splits: the gaps open from 0.14 to 0.36, alternate bands reverse direction, and the TYPE band turns tangerine over 0.4s.
5.2–6.8s: the stack tilts from −12° to −16° and drifts up 0.3 units, each ring spinning at its own speed.
6.8–8.4s: the rings stop one by one from top to bottom, starting 0.25s apart, each landing its word front and center, while the tilt eases to 0° and the camera settles at 4°.
8.4–9.0s: the overlay rises 12px into place.
9.0–10.0s: hold, completely still.
For other durations, stretch the running time between 1.4s and 6.8s; keep the stops and at least 1s of hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (three and three/addons/), WebGLRenderer with antialias and preserveDrawingBuffer: true, setPixelRatio(devicePixelRatio), rendering once per seek. Text textures come from Canvas 2D after the font loads; the overlay is HTML.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that the back faces read mirrored and darker, no band shows a seam, front and back letters never z-fight, each word sits dead center when its ring stops, and the overlay clears the stack. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…