Rotating Hand Scroll

A long pinned section built around a single clock-hand pill. Scrolling sweeps it through five full turns, each swapping the headline; on the fourth a portrait fades into the hand as body copy slides in, then the hand grows, scales up more than twentyfold to fill the frame, and dissolves to reveal the closing wordmark. GSAP ScrollTrigger with Lenis.

Component

time to be brave

We build brand systems and moving identities for founders who would rather set the pace than follow it.

Small, senior team. Direct conversation, sharp craft, and a finish that holds up long after the launch.

BLANK

Your next section goes here

Install

npx shadcn@latest add https://ui.aryank.space/r/rotating-hand-scroll.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
headlines	RotatingHeadline[]	Five BLANK headlines	Muted lead and bright tail swapped on each full turn.
portrait / copy / brand	string / [string, string] / string	BLANK-hosted portrait and copy	Portrait revealed in the hand, body paragraphs, and wordmark.
embedded	boolean	true	Own the scroll container; set false to ride the window scroll.

Customize

headlinestext

The muted lead and bright tail shown on each rotation.

portrait / copyasset-url

Portrait revealed in the hand and the two body paragraphs.

brand / aboutTexttext

Closing wordmark and the following section's placeholder.

Dependencies

gsaplenis

time to be brave

BLANK

components

ui