Bent Type Cylinder

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/bent-type-cylinder.tsx.

Install the pastetaste component "Bent Type Cylinder" (bent-type-cylinder) into this Next.js project and use it.

What it is: Live text wrapped on the inside of a cylinder: letters at the edges swell toward you, rows run in opposite directions as you scroll, and the bend tightens as it spins.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/bent-type-cylinder.json
   (it writes components/pastetaste/bent-type-cylinder.tsx; install any npm packages it reports).
2. Import it: import { BentTypeCylinder } from "@/components/pastetaste/bent-type-cylinder" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- rows: string[] = ['BENT ON','MOTION STUDIO'] — One string per row; each repeats around the cylinder and odd rows run the other way.
- separator: string = '  ' — Text between repeats of a row.
- depth: [number, number] = [0.28, 0.22] — Cylinder radius as a share of the box width at scroll progress 0 and 1; smaller bends harder.
- spin: number = 0.85 — How far the rows travel over the whole progress, in box widths.
- track: RefObject<HTMLElement> — Element whose scroll position drives the spin. Defaults to the component.
- mode: 'pin' | 'pass' = 'pass' — pin: progress through a tall sticky section. pass: progress while the track crosses the viewport.
- intro: boolean = true — Unwind from a hard bend into the resting bend on mount.
- fontSize: string = 'min(16vw, 25vh)' — Letter size as a CSS length; also sets the block height.
- color: string = '#0e0e0e' — Text colour.
- fontFamily: string = Archivo, Arial Narrow, ... — Heavy condensed face; the type is set uppercase.
- label: string — Accessible text; the letters are hidden from assistive tech.
- className / style: string / CSSProperties — On the type box.

Live preview: https://pastetaste.com/c/bent-type-cylinder
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 12