# 3D ring and Text cylinder

> Stand pictures round a ring in depth, or set large lines of text round a cylinder, and let the page's scroll turn them.

Source: https://uxdeck.app/guide/ring-cylinder (checked against uxdeck on 16 October 2026)

Two Blocks add real depth to a page, turned by the visitor's scroll. The **3D ring** stands pictures round a ring that turns as the page scrolls, and people can drag it. The **Text cylinder** sets lines of large text round a cylinder on its side, which the scroll turns while the cylinder holds its place.

Both are flat while you edit, so every card and line can be changed. They stand up in **Preview** and on your site.

Add either from **Blocks** in the toolbar (see [Add and style Blocks](/guide/blocks)), then select it to see its settings in the Design tab.

## 3D ring

Pictures standing round a ring in depth. It starts with eight cards, laid flat on the canvas.

### Its settings

- **Add pictures:** choose several pictures; each fills a card. Say what each one shows in its alt text.
- **Cards** (3 to 24): **−** and **+** remove the last card or add one.
- **Radius** (100 to 1600 px, 500 to start): the ring's size.
- **Perspective** (200 to 3000 px, 900 to start): the distance from the eye. Lower is more dramatic.
- **Turn on scroll** (0 to 720°, 180° to start): how far it turns as it crosses the screen.
- **Tilt** (0 to 15°, 3° to start): how far it tilts as it crosses the screen.
- **Light** (0 to 100%, 50% to start): how much brighter the cards start.
- **Lean** (0 to 100%, 50% to start): how far the cards spread and lean with the speed of the scroll.
- **Spin** (0 to 60° a second, 0 to start): turning on its own.
- **Drag to turn:** on to start, so visitors can turn it by hand.

The arrow keys turn it a card at a time.

## Text cylinder

Lines of large text round a cylinder on its side, which the page's scroll turns while the cylinder holds its place. It starts with twelve lines. While you edit, it is a list, so each line can be written.

### Its settings

- **Lines** (2 to 24): **−** and **+** remove the last line or add one.
- **Hold** (0 to 10 screens, 3 to start): how many screens of scrolling it holds its place while it turns.
- **Turn on scroll** (0 to 720°, 350° to start): how far the scroll turns it.
- **Start at** (−180 to 180°, −80° to start): where it is turned to before the scroll starts it.
- **Spread** (30 to 360°, 180° to start): how far round the cylinder the lines spread.
- **Radius** (10 to 100%, 40% to start): the cylinder's radius, as a share of the Block's smaller side.
- **Perspective** (200 to 3000 px, 1000 to start): the distance from the eye.
- **Text width** (0 to 100%, 80% to start): how much of the width the longest line takes. At 0 the lines keep their own size.

## Catches

- **What you see while editing is not what visitors see.** The ring lies flat and the cylinder is a list; use Preview to judge them.
- **Less motion:** for people who ask for less motion the ring stands still facing the front and turns only when dragged, and the cylinder stays a list so every line can be read.
- **Pick strong pictures for the ring.** Cards at the back are seen small and turned away, so keep the important ones bold and simple.