Page Start Animation — Cinematic intro with layered reveals

Visual & layout

Cinematic intro sequence:Images expand one after another from the center into a full-stage visual.

Centered logo reveal:Use a text logo or image logo as the main visual anchor.

Typographic finish:An optional word appears letter by letter with adjustable stagger, offset, and styling.

Clean, bold design:Minimal structure, strong motion, and full-bleed visuals create a premium first impression.

–––––––––––––––––––––––––––

Interaction

Timeline-based animation:Control intro, image steps, overlap, hold time, and outro directly from the properties panel.

Layered image reveal:Images build up smoothly on top of each other for a fluid cinematic transition.

Custom motion control:Adjust easing presets or fine-tune custom bezier curves for both image and logo animations.

–––––––––––––––––––––––––––

Customization

Fully customizable via the properties panel:

• images and order

• logo text or logo image

• colors and background

• tile sizes and border radius

• intro, outro, delay, overlap

• easing and bezier curves

• reveal word and letter animation

• font, color, padding, and positioning

–––––––––––––––––––––––––––

Responsive behavior

Works across desktop, tablet, and mobile with scalable image sizing and clean animation behavior.

–––––––––––––––––––––––––––

Use Cases

Perfect for:

• hero intros

• brand reveals

• portfolio openings

• landing pages

• product launches

• creative studio websites

A bold intro component for creating a strong first impression in modern Framer projects.