Cylinder Scroll
Bold extruded text rolls into view on a 3D cylinder as you scroll. Lines rise from below, flatten over the crest, and disappear with reversible scroll control.
Overview
About the Cylinder Scroll
Bold extruded text rolls into view on a 3D cylinder as you scroll. Lines rise from below, flatten over the crest, and disappear with reversible scroll control. It is delivered as editable TypeScript for React. Inline styles, CSS 3D transforms, and native scrolling. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Cinematic landing-page statements and editorial scrolling panels.
- Dimensional brand stories and interactive portfolio introductions.
What’s included
Files in the product ZIP
Cylinder Scroll source
components/cylinder-scroll.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual ZIP installation, styling, compatibility, asset, and usage notes.
Usage
Import and render
Copy the packaged source to the documented path, then use the public API shown below.
import { CylinderScroll } from "@/components/cylinder-scroll";<CylinderScroll lines={["SHAPE", "WHAT", "COMES", "NEXT"]} height={480} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | readonly string[] | ["SHAPE", "WHAT", "COMES", "NEXT"] | Lines arranged on the cylinder. |
| color | string | "#fafafa" | Front face color. |
| sideColor | string | "#77725c" | Extruded side face color. |
| background | string | "#0a0a0a" | Panel background. |
| fontSize | number | 108 | Maximum responsive font size, 20–180 pixels. |
| radius | number | 280 | Cylinder radius, 120–600 pixels. |
| lineAngle | number | 23 | Angular spacing between lines, 12–40 degrees. |
| depth | number | 7 | Text extrusion layers, 0–16. |
| perspective | number | 1100 | Perspective distance, 700–2400 pixels. |
| scrollDistance | number | 1400 | Native scroll runway length in pixels. |
| progress | number | — | Optional externally controlled progress, 0–1; disables local scrolling. |
| mode | "scroll" | "auto" | "scroll" | Native scroll-driven reveal or automatic showcase. |
| paused | boolean | false | Keep a fixed showcase pose without scroll updates. |
| height | number | 480 | Panel height in pixels. |
| className / style | string / CSSProperties | — | Container styling. |
Scroll inside the focusable panel using wheel, touch, or keyboard. The 3D rotation follows progress in both directions and does not intercept wheel events. Supply progress from 0 to 1 to connect your own page-scroll controller. Reduced motion shows all lines as a still readable stack. Decorative extrusion copies are hidden from assistive technology.
Compatibility
Verified project setup
- ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
- This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
- Inline styles, CSS 3D transforms, and native scrolling. No Tailwind CSS required.
- Images
- No image files are included or required by the packaged component.
- Fonts
- No font files are included. The component uses system font fallbacks unless your app supplies a matching font.
Installation
Add it to your project
Download the Cylinder Scroll ZIP, place the source file at src/components/cylinder-scroll.tsx, and copy the example into your own page or feature folder.
Target path
src/components/cylinder-scroll.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- No additional dependencies, images, or font assets required.
- Uses a keyboard-focusable local scroll panel; progress can also be controlled from external page scroll.
- Reduced motion presents a still readable stack of text. Hidden tabs and offscreen panels stop animation.