PBG Template · Reveals and Buttons
Scene 03

A reveal toolkit and buttons that lean toward the cursor.

Four reveal patterns and a magnetic button system. All driven by transform and opacity. Add the data attribute, the script picks it up.

01 Reveal by word

Stagger entire words. Used for headlines.

Words arrive in sequence, like a sentence spoken with intention.

02 Reveal by letter

Letter level stagger. Reserve for short hero phrases.

Cinema feel.

03 Reveal by card

Stagger a row of cards or grid items.

A

Brand strategy

Positioning, narrative, and a measurable conversion thesis.

B

Identity system

Type, color, motion, and tokens engineered as one stack.

C

Web engineering

Production code, performance budgets, and a clean handoff.

04 Reveal by mask

Translate inside an overflow clip. The mask feel without clip path.

Founder portrait, scene 04
05 Magnetic buttons

Buttons that lean toward the cursor, with an arrow that lags.

Hover and move the cursor inside or near the button. Movement is elastic, capped, and respects reduced motion.