Scroll Images

What is Scroll Images?

Scroll Images is a scroll-driven 3D image gallery that transforms a set of images into a cinematic narrative. As users scroll, images enter from scattered positions in 3D space with rotation, blur, and depth — then flow continuously past the viewport to reveal a staggered headline, subtitle, and call-to-action. Ideal for portfolio hero sections, editorial landing pages, product showcases, and agency case study intros.

Core Features

• Eight pre-computed 3D scatter positions with unique rotation, scale, and depth per image — no manual positioning required

• Continuous pass-through animation with staggered entry and exit timing — images flow naturally with no dead zones

• Line-by-line heading reveal with 3D rise, deblur, and scale for a cinematic text entrance

• Slide-fill CTA button with smooth background wipe on hover

• Glassmorphic image labels with backdrop blur and uppercase styling

• Fully transparent background — layers seamlessly over any page design

• Responsive image card sizing that scales with the viewport

Controls inside Framer

Content

• Images (up to 8, with per-image labels)

• Heading (multi-line supported)

• Subtitle

• CTA text and link

Theme

• Dark, Light, Warm, Cool, Noir, or Custom

• Custom text, muted, and accent color overrides

Card Style

• Border radius

• Aspect ratio (Portrait, Landscape, Square)

• Shadow intensity

Animation

• Scroll distance (800–4000px)

• Scatter depth

• Stagger amount

• Blur intensity

Typography

• Title size (24–120px)

• Subtitle size (10–32px)

• Independent font controls for title, subtitle, CTA, and labels

Visibility

• Toggle labels, subtitle, CTA button, progress bar, and text backdrop independently

Best use cases

• Portfolio hero sections that reveal a curated image collection on scroll

• Agency and studio landing pages showcasing editorial photography

• Product launch pages with a cinematic visual narrative

• Event and campaign microsites where visual impact drives engagement

Drop it onto any page, add your images, and let the scroll do the storytelling.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.