Circle of Faces

A scroll-driven circular photo gallery that turns a set of portraits into the centrepiece of your page.

As the visitor scrolls, the cards fly in from a scatter, gather together, then wrap into a ring around your headline one continuous animation built on Framer Motion.

Every part of it is a property control, so you never touch code.

• CONTENT — Any number of cards with an image, name, role and link, or paste a list of image URLs. Separate Title and Highlight fields set part of the headline in an accent font and colour. Optional eyebrow, subtitle and button.

• MOTION — Play it on scroll, on entering the viewport, or drive the progress yourself. Set the scroll length, the three phase boundaries, stagger, easing, spring smoothing and a slow idle spin. Reduced-motion visitors go straight to the finished ring.

• LAYOUT — A Ring size percentage and an Oval value shape the circle; card size, corner radius, start angle, direction, tangential rotation and the scatter are all adjustable.

• STYLE — Card background, border, shadow, image fit, grayscale, hover lift, tooltips, a fixed or cycling spotlight card, font controls for every text role, and a centre glow.

• RESPONSIVE — The ring fits the screen's shorter side at any width and the copy stays inside it. Where a line of cards will not fit a phone, they gather into a block instead. Nothing to set per breakpoint.

• SETUP — Drop it on the page, set the width to Fill, add your photos. No libraries, no API keys, no config.

Made for team and about pages, community sites, testimonial walls, portfolios, client logos, event speakers, award nominees, podcast guests and careers sections.

Placeholder sections above and below let you test the scroll before the page exists.

scroll animation circular gallery photo ring team section about page testimonials avatars portraits image gallery hero section scroll effect framer motion community speakers carousel marquee alternative people parallax sticky section animated gallery