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.
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
Images (up to 8, with per-image labels)
Heading (multi-line supported)
Subtitle
CTA text and link
Dark, Light, Warm, Cool, Noir, or Custom
Custom text, muted, and accent color overrides
Border radius
Aspect ratio (Portrait, Landscape, Square)
Shadow intensity
Scroll distance (800–4000px)
Scatter depth
Stagger amount
Blur intensity
Title size (24–120px)
Subtitle size (10–32px)
Independent font controls for title, subtitle, CTA, and labels
Toggle labels, subtitle, CTA button, progress bar, and text backdrop independently
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
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.
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
Images (up to 8, with per-image labels)
Heading (multi-line supported)
Subtitle
CTA text and link
Dark, Light, Warm, Cool, Noir, or Custom
Custom text, muted, and accent color overrides
Border radius
Aspect ratio (Portrait, Landscape, Square)
Shadow intensity
Scroll distance (800–4000px)
Scatter depth
Stagger amount
Blur intensity
Title size (24–120px)
Subtitle size (10–32px)
Independent font controls for title, subtitle, CTA, and labels
Toggle labels, subtitle, CTA button, progress bar, and text backdrop independently
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
